antd-mobile 5.41.0-alpha.0 → 5.41.0-alpha.2

package/2x/cjs/components/calendar/calendar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { Page } from './convert';
 export declare type CalendarRef = {
@@ -14,6 +14,9 @@ export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => React.ReactNode;
     renderDate?: (date: Date) => React.ReactNode;
+    cellRender?: (oriNode: React.ReactElement, info: {
+        date: Date;
+    }) => ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;

package/2x/cjs/components/calendar/calendar.js

@@ -4,23 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Calendar = void 0;
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 var _react = _interopRequireWildcard(require("react"));
+var _devLog = require("../../utils/dev-log");
 var _nativeProps = require("../../utils/native-props");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _replaceMessage = require("../../utils/replace-message");
+var _usePropsValue = require("../../utils/use-props-value");
 var _withDefaultProps = require("../../utils/with-default-props");
+var _configProvider = require("../config-provider");
 var _arrowLeft = require("./arrow-left");
 var _arrowLeftDouble = require("./arrow-left-double");
-var _configProvider = require("../config-provider");
-var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
-var _ahooks = require("ahooks");
-var _usePropsValue = require("../../utils/use-props-value");
-var _replaceMessage = require("../../utils/replace-message");
-var _devLog = require("../../utils/dev-log");
 var _convert = require("./convert");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 _dayjs.default.extend(_isoWeek.default);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -150,7 +150,7 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
       }
       const inThisMonth = d.month() === current.month();
       const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
-      cells.push(_react.default.createElement("div", {
+      const originalCell = _react.default.createElement("div", {
         key: d.valueOf(),
         className: (0, _classnames.default)(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
@@ -204,7 +204,14 @@ const Calendar = (0, _react.forwardRef)((p, ref) => {
         className: `${classPrefix}-cell-top`
       }, props.renderDate ? props.renderDate(d.toDate()) : d.date()), _react.default.createElement("div", {
         className: `${classPrefix}-cell-bottom`
-      }, (_a = props.renderLabel) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate()))));
+      }, (_a = props.renderLabel) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate())));
+      // Wrap with Fragment to ensure key is properly set
+      const cellWithKey = props.cellRender ? _react.default.createElement(_react.default.Fragment, {
+        key: d.valueOf()
+      }, props.cellRender(originalCell, {
+        date: d.toDate()
+      })) : originalCell;
+      cells.push(cellWithKey);
       iterator = iterator.add(1, 'day');
     }
     return cells;

package/2x/cjs/components/ellipsis/useMeasure.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useMeasure;
 var _rcUtil = require("rc-util");
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = require("react-dom");
 var _runes = _interopRequireDefault(require("runes2"));
@@ -34,11 +35,11 @@ function useMeasure(containerRef, content, rows, direction, expanded, expandNode
     });
   });
   // Initialize
-  _react.default.useLayoutEffect(() => {
+  (0, _useLayoutEffect.default)(() => {
     startMeasure();
   }, [contentChars, rows]);
   // Measure element height
-  _react.default.useLayoutEffect(() => {
+  (0, _useLayoutEffect.default)(() => {
     var _a, _b;
     if (status === 1 /* PREPARE */) {
       const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
@@ -53,7 +54,7 @@ function useMeasure(containerRef, content, rows, direction, expanded, expandNode
     }
   }, [status]);
   // Walking measure
-  _react.default.useLayoutEffect(() => {
+  (0, _useLayoutEffect.default)(() => {
     var _a;
     if (status === 2 /* MEASURE_WALKING */) {
       const diff = walkingIndexes[1] - walkingIndexes[0];

package/2x/cjs/components/input/input.d.ts

@@ -22,7 +22,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoCapitalize" | "autoFocus" | "enterKeyHint" | "autoCorrect" | "inputMode" | "placeholder" | "name" | "readOnly" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/2x/cjs/components/input/input.js

@@ -35,9 +35,7 @@ const Input = (0, _react.forwardRef)((props, ref) => {
   const nativeInputRef = (0, _react.useRef)(null);
   const handleKeydown = (0, _useInputHandleKeyDown.default)({
     onEnterPress: mergedProps.onEnterPress,
-    onKeyDown: mergedProps.onKeyDown,
-    nativeInputRef,
-    enterKeyHint: mergedProps.enterKeyHint
+    onKeyDown: mergedProps.onKeyDown
   });
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {

package/2x/cjs/components/input/useInputHandleKeyDown.d.ts

@@ -1,8 +1,6 @@
 interface InputHandleKeyDownType<T> {
     onEnterPress?: (e: React.KeyboardEvent<T>) => void;
     onKeyDown?: (e: React.KeyboardEvent<T>) => void;
-    enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
-    nativeInputRef: React.RefObject<T>;
 }
-export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown, nativeInputRef, enterKeyHint, }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
+export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
 export {};

package/2x/cjs/components/input/useInputHandleKeyDown.js

@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useInputHandleKeyDown;
-var _ahooks = require("ahooks");
 function useInputHandleKeyDown({
   onEnterPress,
-  onKeyDown,
-  nativeInputRef,
-  enterKeyHint
+  onKeyDown
 }) {
   const handleKeydown = e => {
     if (onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
@@ -17,13 +14,5 @@ function useInputHandleKeyDown({
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
-  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
-    const ele = nativeInputRef.current;
-    if (!enterKeyHint || !ele) return;
-    ele.setAttribute('enterkeyhint', enterKeyHint);
-    return () => {
-      ele.removeAttribute('enterkeyhint');
-    };
-  }, [enterKeyHint]);
   return handleKeydown;
 }

package/2x/cjs/components/number-keyboard/number-keyboard.js

@@ -117,6 +117,7 @@ const NumberKeyboard = p => {
   };
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
+    const isBackspace = key === 'BACKSPACE';
     const className = (0, _classnames.default)(`${classPrefix}-key`, {
       [`${classPrefix}-key-number`]: isNumberKey,
       [`${classPrefix}-key-sign`]: !isNumberKey && key,
@@ -124,25 +125,29 @@ const NumberKeyboard = p => {
     });
     const ariaProps = key ? {
       role: 'button',
-      title: key,
+      title: isBackspace ? locale.Input.clear : key,
       tabIndex: -1
     } : undefined;
     return _react.default.createElement("div", Object.assign({
       key: key,
       className: className,
-      onTouchStart: () => {
+      // 仅为  backspace 绑定，支持长按快速删除
+      onTouchStart: isBackspace ? () => {
+        stopContinueClear();
+        startContinueClear();
+      } : undefined,
+      onTouchEnd: isBackspace ? e => {
+        stopContinueClear();
+        onKeyPress(e, key);
+      } : undefined,
+      // <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
+      // see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
+      // 所以还是绑定 click，通过 touchEnd 的 preventDefault 防重复触发
+      onClick: e => {
         stopContinueClear();
-        if (key === 'BACKSPACE') {
-          startContinueClear();
-        }
-      },
-      onTouchEnd: e => {
         onKeyPress(e, key);
-        if (key === 'BACKSPACE') {
-          stopContinueClear();
-        }
       }
-    }, ariaProps), key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
+    }, ariaProps), isBackspace ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
   };
   return _react.default.createElement(_popup.default, {
     visible: visible,
@@ -174,8 +179,12 @@ const NumberKeyboard = p => {
       startContinueClear();
     },
     onTouchEnd: e => {
+      stopContinueClear();
       onKeyPress(e, 'BACKSPACE');
+    },
+    onClick: e => {
       stopContinueClear();
+      onKeyPress(e, 'BACKSPACE');
     },
     onContextMenu: e => {
       // Long press should not trigger native context menu
@@ -186,7 +195,7 @@ const NumberKeyboard = p => {
     tabIndex: -1
   }, _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null)), _react.default.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
-    onTouchEnd: e => onKeyPress(e, 'OK'),
+    onClick: e => onKeyPress(e, 'OK'),
     role: 'button',
     tabIndex: -1,
     "aria-label": confirmText

package/2x/cjs/components/picker/index.d.ts

@@ -2,7 +2,7 @@ import './picker.less';
 import { prompt } from './prompt';
 export type { PickerProps, PickerRef, PickerActions } from './picker';
 export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
-declare const _default: import("react").NamedExoticComponent<{
+declare const _default: import("react").NamedExoticComponent<Omit<{
     columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
     value?: import("../picker-view").PickerValue[] | undefined;
     defaultValue?: import("../picker-view").PickerValue[] | undefined;
@@ -26,7 +26,9 @@ declare const _default: import("react").NamedExoticComponent<{
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
     tabIndex?: number | undefined;
-} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>, "ref"> & {
+    ref?: ((instance: import("./picker").PickerActions | null) => void) | import("react").RefObject<import("./picker").PickerActions> | null | undefined;
+}> & {
     readonly type: import("react").ForwardRefExoticComponent<{
         columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
         value?: import("../picker-view").PickerValue[] | undefined;

package/2x/cjs/components/text-area/text-area.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ReactNode } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'onKeyDown'> & {
     onChange?: (val: string) => void;

package/2x/cjs/components/text-area/text-area.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextArea = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
 var _runes = _interopRequireDefault(require("runes2"));
+var _useInputHandleKeyDown = _interopRequireDefault(require("../../components/input/useInputHandleKeyDown"));
+var _devLog = require("../../utils/dev-log");
 var _nativeProps = require("../../utils/native-props");
 var _usePropsValue = require("../../utils/use-props-value");
 var _withDefaultProps = require("../../utils/with-default-props");
-var _devLog = require("../../utils/dev-log");
-var _useInputHandleKeyDown = _interopRequireDefault(require("../../components/input/useInputHandleKeyDown"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,9 +42,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
   const hiddenTextAreaRef = (0, _react.useRef)(null);
   const handleKeydown = (0, _useInputHandleKeyDown.default)({
     onEnterPress: props.onEnterPress,
-    onKeyDown: props.onKeyDown,
-    nativeInputRef: nativeTextAreaRef,
-    enterKeyHint: props.enterKeyHint
+    onKeyDown: props.onKeyDown
   });
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
@@ -140,7 +138,8 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick,
-    onKeyDown: handleKeydown
+    onKeyDown: handleKeydown,
+    enterKeyHint: props.enterKeyHint
   }), count, autoSize && _react.default.createElement("textarea", {
     ref: hiddenTextAreaRef,
     className: `${classPrefix}-element ${classPrefix}-element-hidden`,

package/2x/es/components/calendar/calendar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { Page } from './convert';
 export declare type CalendarRef = {
@@ -14,6 +14,9 @@ export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => React.ReactNode;
     renderDate?: (date: Date) => React.ReactNode;
+    cellRender?: (oriNode: React.ReactElement, info: {
+        date: Date;
+    }) => ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;

package/2x/es/components/calendar/calendar.js

@@ -1,17 +1,17 @@
-import React, { forwardRef, useState, useImperativeHandle, useMemo, useEffect } from 'react';
-import { withNativeProps } from '../../utils/native-props';
-import dayjs from 'dayjs';
+import { useUpdateEffect } from 'ahooks';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { devWarning } from '../../utils/dev-log';
+import { withNativeProps } from '../../utils/native-props';
+import { replaceMessage } from '../../utils/replace-message';
+import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
+import { useConfig } from '../config-provider';
 import { ArrowLeft } from './arrow-left';
 import { ArrowLeftDouble } from './arrow-left-double';
-import { useConfig } from '../config-provider';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import { useUpdateEffect } from 'ahooks';
-import { usePropsValue } from '../../utils/use-props-value';
-import { replaceMessage } from '../../utils/replace-message';
-import { devWarning } from '../../utils/dev-log';
-import { convertValueToRange, convertPageToDayjs } from './convert';
+import { convertPageToDayjs, convertValueToRange } from './convert';
 dayjs.extend(isoWeek);
 const classPrefix = 'adm-calendar';
 const defaultProps = {
@@ -141,7 +141,7 @@ export const Calendar = forwardRef((p, ref) => {
       }
       const inThisMonth = d.month() === current.month();
       const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
-      cells.push(React.createElement("div", {
+      const originalCell = React.createElement("div", {
         key: d.valueOf(),
         className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
@@ -195,7 +195,14 @@ export const Calendar = forwardRef((p, ref) => {
         className: `${classPrefix}-cell-top`
       }, props.renderDate ? props.renderDate(d.toDate()) : d.date()), React.createElement("div", {
         className: `${classPrefix}-cell-bottom`
-      }, (_a = props.renderLabel) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate()))));
+      }, (_a = props.renderLabel) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate())));
+      // Wrap with Fragment to ensure key is properly set
+      const cellWithKey = props.cellRender ? React.createElement(React.Fragment, {
+        key: d.valueOf()
+      }, props.cellRender(originalCell, {
+        date: d.toDate()
+      })) : originalCell;
+      cells.push(cellWithKey);
       iterator = iterator.add(1, 'day');
     }
     return cells;

package/2x/es/components/ellipsis/useMeasure.js

@@ -1,4 +1,5 @@
 import { useEvent } from 'rc-util';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import React from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import runes from 'runes2';
@@ -27,11 +28,11 @@ export default function useMeasure(containerRef, content, rows, direction, expan
     });
   });
   // Initialize
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     startMeasure();
   }, [contentChars, rows]);
   // Measure element height
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     var _a, _b;
     if (status === 1 /* PREPARE */) {
       const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
@@ -46,7 +47,7 @@ export default function useMeasure(containerRef, content, rows, direction, expan
     }
   }, [status]);
   // Walking measure
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     var _a;
     if (status === 2 /* MEASURE_WALKING */) {
       const diff = walkingIndexes[1] - walkingIndexes[0];

package/2x/es/components/input/input.d.ts

@@ -22,7 +22,7 @@ export declare type InputRef = {
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoFocus" | "placeholder" | "autoCapitalize" | "autoCorrect" | "inputMode" | "name" | "readOnly" | "autoComplete" | "enterKeyHint" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoCapitalize" | "autoFocus" | "enterKeyHint" | "autoCorrect" | "inputMode" | "placeholder" | "name" | "readOnly" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/2x/es/components/input/input.js

@@ -26,9 +26,7 @@ export const Input = forwardRef((props, ref) => {
   const nativeInputRef = useRef(null);
   const handleKeydown = useInputHandleKeyDown({
     onEnterPress: mergedProps.onEnterPress,
-    onKeyDown: mergedProps.onKeyDown,
-    nativeInputRef,
-    enterKeyHint: mergedProps.enterKeyHint
+    onKeyDown: mergedProps.onKeyDown
   });
   useImperativeHandle(ref, () => ({
     clear: () => {

package/2x/es/components/input/useInputHandleKeyDown.d.ts

@@ -1,8 +1,6 @@
 interface InputHandleKeyDownType<T> {
     onEnterPress?: (e: React.KeyboardEvent<T>) => void;
     onKeyDown?: (e: React.KeyboardEvent<T>) => void;
-    enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
-    nativeInputRef: React.RefObject<T>;
 }
-export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown, nativeInputRef, enterKeyHint, }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
+export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
 export {};

package/2x/es/components/input/useInputHandleKeyDown.js

@@ -1,9 +1,6 @@
-import { useIsomorphicLayoutEffect } from 'ahooks';
 export default function useInputHandleKeyDown({
   onEnterPress,
-  onKeyDown,
-  nativeInputRef,
-  enterKeyHint
+  onKeyDown
 }) {
   const handleKeydown = e => {
     if (onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
@@ -11,13 +8,5 @@ export default function useInputHandleKeyDown({
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
-  useIsomorphicLayoutEffect(() => {
-    const ele = nativeInputRef.current;
-    if (!enterKeyHint || !ele) return;
-    ele.setAttribute('enterkeyhint', enterKeyHint);
-    return () => {
-      ele.removeAttribute('enterkeyhint');
-    };
-  }, [enterKeyHint]);
   return handleKeydown;
 }

package/2x/es/components/number-keyboard/number-keyboard.js

@@ -108,6 +108,7 @@ export const NumberKeyboard = p => {
   };
   const renderKey = (key, index) => {
     const isNumberKey = /^\d$/.test(key);
+    const isBackspace = key === 'BACKSPACE';
     const className = classNames(`${classPrefix}-key`, {
       [`${classPrefix}-key-number`]: isNumberKey,
       [`${classPrefix}-key-sign`]: !isNumberKey && key,
@@ -115,25 +116,29 @@ export const NumberKeyboard = p => {
     });
     const ariaProps = key ? {
       role: 'button',
-      title: key,
+      title: isBackspace ? locale.Input.clear : key,
       tabIndex: -1
     } : undefined;
     return React.createElement("div", Object.assign({
       key: key,
       className: className,
-      onTouchStart: () => {
+      // 仅为  backspace 绑定，支持长按快速删除
+      onTouchStart: isBackspace ? () => {
+        stopContinueClear();
+        startContinueClear();
+      } : undefined,
+      onTouchEnd: isBackspace ? e => {
+        stopContinueClear();
+        onKeyPress(e, key);
+      } : undefined,
+      // <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
+      // see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
+      // 所以还是绑定 click，通过 touchEnd 的 preventDefault 防重复触发
+      onClick: e => {
         stopContinueClear();
-        if (key === 'BACKSPACE') {
-          startContinueClear();
-        }
-      },
-      onTouchEnd: e => {
         onKeyPress(e, key);
-        if (key === 'BACKSPACE') {
-          stopContinueClear();
-        }
       }
-    }, ariaProps), key === 'BACKSPACE' ? React.createElement(TextDeletionOutline, null) : key);
+    }, ariaProps), isBackspace ? React.createElement(TextDeletionOutline, null) : key);
   };
   return React.createElement(Popup, {
     visible: visible,
@@ -165,8 +170,12 @@ export const NumberKeyboard = p => {
       startContinueClear();
     },
     onTouchEnd: e => {
+      stopContinueClear();
       onKeyPress(e, 'BACKSPACE');
+    },
+    onClick: e => {
       stopContinueClear();
+      onKeyPress(e, 'BACKSPACE');
     },
     onContextMenu: e => {
       // Long press should not trigger native context menu
@@ -177,7 +186,7 @@ export const NumberKeyboard = p => {
     tabIndex: -1
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
     className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
-    onTouchEnd: e => onKeyPress(e, 'OK'),
+    onClick: e => onKeyPress(e, 'OK'),
     role: 'button',
     tabIndex: -1,
     "aria-label": confirmText

package/2x/es/components/picker/index.d.ts

@@ -2,7 +2,7 @@ import './picker.less';
 import { prompt } from './prompt';
 export type { PickerProps, PickerRef, PickerActions } from './picker';
 export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
-declare const _default: import("react").NamedExoticComponent<{
+declare const _default: import("react").NamedExoticComponent<Omit<{
     columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
     value?: import("../picker-view").PickerValue[] | undefined;
     defaultValue?: import("../picker-view").PickerValue[] | undefined;
@@ -26,7 +26,9 @@ declare const _default: import("react").NamedExoticComponent<{
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
     tabIndex?: number | undefined;
-} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>, "ref"> & {
+    ref?: ((instance: import("./picker").PickerActions | null) => void) | import("react").RefObject<import("./picker").PickerActions> | null | undefined;
+}> & {
     readonly type: import("react").ForwardRefExoticComponent<{
         columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
         value?: import("../picker-view").PickerValue[] | undefined;

package/2x/es/components/text-area/text-area.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ReactNode } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'onKeyDown'> & {
     onChange?: (val: string) => void;

package/2x/es/components/text-area/text-area.js

@@ -1,11 +1,11 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import runes from 'runes2';
+import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown';
+import { devError } from '../../utils/dev-log';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
-import { devError } from '../../utils/dev-log';
-import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown';
 const classPrefix = 'adm-text-area';
 const defaultProps = {
   rows: 2,
@@ -33,9 +33,7 @@ export const TextArea = forwardRef((p, ref) => {
   const hiddenTextAreaRef = useRef(null);
   const handleKeydown = useInputHandleKeyDown({
     onEnterPress: props.onEnterPress,
-    onKeyDown: props.onKeyDown,
-    nativeInputRef: nativeTextAreaRef,
-    enterKeyHint: props.enterKeyHint
+    onKeyDown: props.onKeyDown
   });
   useImperativeHandle(ref, () => ({
     clear: () => {
@@ -131,7 +129,8 @@ export const TextArea = forwardRef((p, ref) => {
     onFocus: props.onFocus,
     onBlur: props.onBlur,
     onClick: props.onClick,
-    onKeyDown: handleKeydown
+    onKeyDown: handleKeydown,
+    enterKeyHint: props.enterKeyHint
   }), count, autoSize && React.createElement("textarea", {
     ref: hiddenTextAreaRef,
     className: `${classPrefix}-element ${classPrefix}-element-hidden`,

package/2x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.41.0-alpha.0",
+  "version": "5.41.0-alpha.2",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"