antd-mobile 5.41.0-alpha.1 → 5.41.0-alpha.3

package/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/es/components/avatar/avatar.d.ts

@@ -1,9 +1,11 @@
 import type { FC, ReactNode } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { ImageProps } from '../image';
 export declare type AvatarProps = {
     src: string;
     fallback?: ReactNode;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> & NativeProps<'--size' | '--border-radius'>;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement, Event>) => void;
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onError' | 'onLoad'> & NativeProps<'--size' | '--border-radius'>;
 export declare const Avatar: FC<AvatarProps>;

package/es/components/avatar/avatar.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-import { Fallback } from './fallback';
 import Image from '../image';
+import { Fallback } from './fallback';
 const classPrefix = 'adm-avatar';
 const defaultProps = {
   fallback: React.createElement(Fallback, null),
   fit: 'cover'
 };
 export const Avatar = p => {
+  var _a;
   const props = mergeProps(defaultProps, p);
+  const mergedSrc = ((_a = props.src) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
   return withNativeProps(props, React.createElement(Image, {
     className: classPrefix,
-    src: props.src,
+    src: mergedSrc,
     fallback: props.fallback,
     placeholder: props.fallback,
     alt: props.alt,

package/es/components/calendar/calendar.js

@@ -87,12 +87,12 @@ export const Calendar = forwardRef((p, ref) => {
   };
   const header = React.createElement("div", {
     className: `${classPrefix}-header`
-  }, React.createElement("a", {
+  }, props.prevYearButton !== null && React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
     onClick: () => {
       handlePageChange('subtract', 1, 'year');
     }
-  }, props.prevYearButton), React.createElement("a", {
+  }, props.prevYearButton), props.prevMonthButton !== null && React.createElement("a", {
     className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
     onClick: () => {
       handlePageChange('subtract', 1, 'month');
@@ -102,12 +102,12 @@ export const Calendar = forwardRef((p, ref) => {
   }, replaceMessage(locale.Calendar.yearAndMonth, {
     year: current.year().toString(),
     month: (current.month() + 1).toString()
-  })), React.createElement("a", {
+  })), props.nextMonthButton !== null && React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
     onClick: () => {
       handlePageChange('add', 1, 'month');
     }
-  }, props.nextMonthButton), React.createElement("a", {
+  }, props.nextMonthButton), props.nextYearButton !== null && React.createElement("a", {
     className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
     onClick: () => {
       handlePageChange('add', 1, 'year');

package/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/es/components/image/image.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 ImageProps = {
     src?: string;

package/es/components/image/image.js

@@ -1,12 +1,12 @@
-import { mergeProps } from '../../utils/with-default-props';
-import React, { useState, useRef, useEffect } from 'react';
-import { withNativeProps } from '../../utils/native-props';
+import React, { useEffect, useRef, useState } from 'react';
 import { staged } from 'staged-components';
+import { withNativeProps } from '../../utils/native-props';
 import { toCSSLength } from '../../utils/to-css-length';
-import { LazyDetector } from './lazy-detector';
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
-import { ImageIcon } from './image-icon';
+import { mergeProps } from '../../utils/with-default-props';
 import { BrokenImageIcon } from './broken-image-icon';
+import { ImageIcon } from './image-icon';
+import { LazyDetector } from './lazy-detector';
 const classPrefix = `adm-image`;
 const defaultProps = {
   fit: 'fill',
@@ -42,7 +42,7 @@ export const Image = staged(p => {
     }
   }, []);
   function renderInner() {
-    if (failed) {
+    if (failed || src === undefined && !srcSet) {
       return React.createElement(React.Fragment, null, props.fallback);
     }
     const img = React.createElement("img", {

package/es/components/image-viewer/image-viewer.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode, RefObject } from 'react';
 import React from 'react';
 import { GetContainer } from '../../utils/render-to-container';
 import { SlidesRef } from './slides';
@@ -10,7 +10,8 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
     renderFooter?: (image: string) => ReactNode;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
     classNames?: {
@@ -25,7 +26,8 @@ export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image' | 're
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
     renderFooter?: (image: string, index: number) => ReactNode;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
 };
@@ -34,7 +36,8 @@ export declare const MultiImageViewer: React.ForwardRefExoticComponent<Omit<Imag
     defaultIndex?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
     renderFooter?: ((image: string, index: number) => ReactNode) | undefined;
-    imageRender?: ((image: string, { index }: {
+    imageRender?: ((image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode) | undefined;
 } & React.RefAttributes<SlidesRef>>;

package/es/components/image-viewer/index.d.ts

@@ -8,7 +8,8 @@ declare const _default: import("react").FC<import("./image-viewer").ImageViewerP
         defaultIndex?: number | undefined;
         onIndexChange?: ((index: number) => void) | undefined;
         renderFooter?: ((image: string, index: number) => import("react").ReactNode) | undefined;
-        imageRender?: ((image: string, { index }: {
+        imageRender?: ((image: string, { ref, index }: {
+            ref: import("react").RefObject<HTMLImageElement>;
             index: number;
         }) => import("react").ReactNode) | undefined;
     } & import("react").RefAttributes<import("./slides").SlidesRef>> & {

package/es/components/image-viewer/methods.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ImageViewer, MultiImageViewer } from './image-viewer';
 import { renderImperatively } from '../../utils/render-imperatively';
+import { ImageViewer, MultiImageViewer } from './image-viewer';
 const handlerSet = new Set();
 export function showImageViewer(props) {
   clearImageViewer();

package/es/components/image-viewer/slide.d.ts

@@ -1,11 +1,12 @@
-import type { FC, MutableRefObject, ReactNode } from 'react';
+import type { FC, MutableRefObject, ReactNode, RefObject } from 'react';
 declare type Props = {
     image: string;
     maxZoom: number | 'auto';
     onTap?: () => void;
     onZoomChange?: (zoom: number) => void;
     dragLockRef?: MutableRefObject<boolean>;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
     index?: number;

package/es/components/image-viewer/slide.js

@@ -222,7 +222,8 @@ export const Slide = props => {
     }
   });
   const customRendering = typeof imageRender === 'function' && imageRender(props.image, {
-    index
+    ref: imgRef,
+    index: index !== null && index !== void 0 ? index : 0
   });
   return React.createElement("div", {
     className: `${classPrefix}-slide`

package/es/components/image-viewer/slides.d.ts

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 export declare type SlidesType = {
     images: string[];
     onTap?: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-    imageRender?: (image: string, { index }: {
+    imageRender?: (image: string, { ref, index }: {
+        ref: RefObject<HTMLImageElement>;
         index: number;
     }) => ReactNode;
 };

package/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/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/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/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/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/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/es/components/swiper/swiper.d.ts

@@ -1,5 +1,5 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import React from 'react';
-import type { ReactNode, ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PageIndicatorProps } from '../page-indicator';
 declare const eventToPropRecord: {
@@ -59,10 +59,10 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     /**
      * renderProps is only work when `total` used
      */
-    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((index: number) => ReactElement) | undefined;
+    children?: ReactElement<any, string | React.JSXElementConstructor<any>> | ReactElement<any, string | React.JSXElementConstructor<any>>[] | ((index: number) => ReactElement) | undefined;
 } & {
     className?: string | undefined;
-    style?: (React.CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    style?: (CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<SwiperRef>>;
 export {};

package/es/components/swiper/swiper.js

@@ -1,17 +1,18 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-import classNames from 'classnames';
-import { SwiperItem } from './swiper-item';
-import { devWarning } from '../../utils/dev-log';
-import { useSpring, animated } from '@react-spring/web';
+import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
-import PageIndicator from '../page-indicator';
+import { useGetState, useIsomorphicLayoutEffect } from 'ahooks';
+import classNames from 'classnames';
+import toArray from 'rc-util/lib/Children/toArray';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { staged } from 'staged-components';
-import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
-import { useIsomorphicLayoutEffect, useGetState } from 'ahooks';
+import { devWarning } from '../../utils/dev-log';
+import { withNativeProps } from '../../utils/native-props';
+import { useRefState } from '../../utils/use-ref-state';
+import { mergeProps } from '../../utils/with-default-props';
 import { mergeFuncProps } from '../../utils/with-func-props';
+import PageIndicator from '../page-indicator';
+import { SwiperItem } from './swiper-item';
 const classPrefix = `adm-swiper`;
 const eventToPropRecord = {
   'mousedown': 'onMouseDown',
@@ -56,14 +57,15 @@ export const Swiper = forwardRef(staged((p, ref) => {
     if (typeof children === 'function') {
       renderChildren = children;
     } else {
-      validChildren = React.Children.map(children, child => {
+      const childrenArray = toArray(children);
+      validChildren = childrenArray.filter(child => {
         if (!React.isValidElement(child)) return null;
         if (child.type !== SwiperItem) {
           devWarning('Swiper', 'The children of `Swiper` must be `Swiper.Item` components.');
-          return null;
+          return false;
         }
         count++;
-        return child;
+        return true;
       });
     }
     return {
@@ -236,7 +238,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
     }, [autoplay, autoplayInterval, dragging, mergedTotal]);
     // ============================== Render ==============================
     // Render Item
-    function renderItem(index, child) {
+    function renderItem(index, child, key) {
       let itemStyle = {};
       if (loop) {
         itemStyle = {
@@ -255,10 +257,10 @@ export const Swiper = forwardRef(staged((p, ref) => {
           [`${classPrefix}-slide-active`]: current === index
         }),
         style: itemStyle,
-        key: index
+        key: key !== null && key !== void 0 ? key : index
       }, child);
     }
-    function renderItems() {
+    const renderStableItems = () => {
       if (renderChildren && total) {
         const offsetCount = 2;
         const startIndex = Math.max(current - offsetCount, 0);
@@ -274,9 +276,16 @@ export const Swiper = forwardRef(staged((p, ref) => {
           }
         }), items);
       }
-      return React.Children.map(validChildren, (child, index) => {
-        return renderItem(index, child);
-      });
+      if (validChildren) {
+        return validChildren.map((child, index) => {
+          var _a;
+          return renderItem(index, child, (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : index);
+        });
+      }
+      return null;
+    };
+    function renderItems() {
+      return renderStableItems();
     }
     // Render Track Inner
     function renderTrackInner() {

package/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/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/package.json

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