antd-mobile 5.42.3 → 5.43.0

package/es/components/form/form-item.js

@@ -14,6 +14,13 @@ import Popover from '../popover';
 import { FormContext, NoStyleItemContext } from './context';
 import { isSafeSetRefComponent, toArray } from './utils';
 const NAME_SPLIT = '__SPLIT__';
+function useChildren(children) {
+  if (typeof children === 'function') {
+    return children;
+  }
+  const childList = toArray(children);
+  return childList.length <= 1 ? childList[0] : childList;
+}
 const classPrefix = `adm-form-item`;
 const MemoInput = React.memo(({
   children
@@ -138,6 +145,7 @@ export const FormItem = props => {
       arrowIcon
     } = props,
     fieldProps = __rest(props, ["style", "label", "help", "helpIcon", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "clickable", "arrow", "arrowIcon"]);
+  const mergedChildren = useChildren(children);
   const {
     name: formName
   } = useContext(FormContext);
@@ -208,9 +216,9 @@ export const FormItem = props => {
       value: onSubMetaChange
     }, baseChildren)));
   }
-  const isRenderProps = typeof children === 'function';
+  const isRenderProps = typeof mergedChildren === 'function';
   if (!name && !isRenderProps && !props.dependencies) {
-    return renderLayout(children);
+    return renderLayout(mergedChildren);
   }
   let Variables = {};
   Variables.label = typeof label === 'string' ? label : '';
@@ -243,7 +251,7 @@ export const FormItem = props => {
     }
     if (isRenderProps) {
       if ((shouldUpdate || dependencies) && !name) {
-        childNode = children(context);
+        childNode = mergedChildren(context);
       } else {
         if (!(shouldUpdate || dependencies)) {
           devWarning('Form.Item', '`children` of render props only work with `shouldUpdate` or `dependencies`.');
@@ -255,14 +263,14 @@ export const FormItem = props => {
       // not render props
     } else if (dependencies && !name) {
       devWarning('Form.Item', 'Must set `name` or use render props when `dependencies` is set.');
-    } else if (React.isValidElement(children)) {
-      if (children.props.defaultValue) {
+    } else if (React.isValidElement(mergedChildren)) {
+      if (mergedChildren.props.defaultValue) {
         devWarning('Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
       }
-      const childProps = Object.assign(Object.assign({}, children.props), control);
-      if (isSafeSetRefComponent(children)) {
+      const childProps = Object.assign(Object.assign({}, mergedChildren.props), control);
+      if (isSafeSetRefComponent(mergedChildren)) {
         childProps.ref = instance => {
-          const originRef = children.ref;
+          const originRef = mergedChildren.ref;
           if (originRef) {
             if (typeof originRef === 'function') {
               originRef(instance);
@@ -283,18 +291,18 @@ export const FormItem = props => {
         childProps[eventName] = (...args) => {
           var _a, _b, _c;
           (_a = control[eventName]) === null || _a === void 0 ? void 0 : _a.call(control, ...args);
-          (_c = (_b = children.props)[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
+          (_c = (_b = mergedChildren.props)[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
         };
       });
       childNode = React.createElement(MemoInput, {
         value: control[props.valuePropName || 'value'],
         update: updateRef.current
-      }, React.cloneElement(children, childProps));
+      }, React.cloneElement(mergedChildren, childProps));
     } else {
       if (name) {
         devWarning('Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
       }
-      childNode = children;
+      childNode = mergedChildren;
     }
     return renderLayout(childNode, fieldId, meta, isRequired);
   });

package/es/components/form/index.d.ts

@@ -4,7 +4,7 @@ export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
-export type { ValidateMessages, FieldData, NamePath, Rule, RuleObject, RuleRender, } from 'rc-field-form/es/interface';
+export type { ValidateMessages, ValidateOptions, FieldData, NamePath, Rule, RuleObject, RuleRender, } from 'rc-field-form/es/interface';
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "form" | "children" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
     className?: string | undefined;

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

@@ -4,7 +4,8 @@ declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttribute
 declare type AriaProps = {
     role?: string;
 };
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'onPaste' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled' | 'enterKeyHint'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'onPaste' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step' | 'id' | 'placeholder' | 'readOnly' | 'disabled'> & {
+    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -22,7 +23,8 @@ 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" | "autoCapitalize" | "autoFocus" | "enterKeyHint" | "autoCorrect" | "inputMode" | "placeholder" | "name" | "readOnly" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "name" | "type" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoFocus" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "step"> & {
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/input/input.js

@@ -67,7 +67,7 @@ export const Input = forwardRef((props, ref) => {
   })();
   return withNativeProps(mergedProps, React.createElement("div", {
     className: classNames(`${classPrefix}`, mergedProps.disabled && `${classPrefix}-disabled`)
-  }, React.createElement("input", {
+  }, React.createElement("input", Object.assign({
     ref: nativeInputRef,
     className: `${classPrefix}-element`,
     value: value,
@@ -94,8 +94,10 @@ export const Input = forwardRef((props, ref) => {
     minLength: mergedProps.minLength,
     max: mergedProps.max,
     min: mergedProps.min,
-    autoComplete: mergedProps.autoComplete,
-    enterKeyHint: mergedProps.enterKeyHint,
+    autoComplete: mergedProps.autoComplete
+  }, {
+    enterKeyHint: mergedProps.enterKeyHint
+  }, {
     autoFocus: mergedProps.autoFocus,
     pattern: mergedProps.pattern,
     inputMode: mergedProps.inputMode,
@@ -122,7 +124,7 @@ export const Input = forwardRef((props, ref) => {
     "aria-valuemax": mergedProps['aria-valuemax'],
     "aria-valuemin": mergedProps['aria-valuemin'],
     "aria-label": mergedProps['aria-label']
-  }), shouldShowClear && React.createElement("div", {
+  })), shouldShowClear && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/es/components/list/list-item.js

@@ -17,7 +17,7 @@ export const ListItem = props => {
   } = useConfig();
   const clickable = (_a = props.clickable) !== null && _a !== void 0 ? _a : !!props.onClick;
   const showArrow = (_b = arrow !== null && arrow !== void 0 ? arrow : arrowIcon) !== null && _b !== void 0 ? _b : clickable;
-  const mergedArrowIcon = mergeProp(componentConfig.arrowIcon, arrow !== true ? arrow : null, arrowIcon !== true ? arrowIcon : null);
+  const mergedArrowIcon = mergeProp(componentConfig.arrowIcon, arrow !== true ? arrow : undefined, arrowIcon !== true ? arrowIcon : undefined);
   const content = React.createElement("div", {
     className: `${classPrefix}-content`
   }, isNodeWithContent(props.prefix) && React.createElement("div", {

package/es/components/notice-bar/notice-bar.js

@@ -93,8 +93,9 @@ export const NoticeBar = memo(props => {
     className: `${classPrefix}-right`
   }, mergedProps.extra, mergedProps.closeable && React.createElement("div", {
     className: `${classPrefix}-close`,
-    onClick: () => {
+    onClick: e => {
       var _a;
+      e.stopPropagation();
       setVisible(false);
       (_a = mergedProps.onClose) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
     }

package/es/components/passcode-input/passcode-input.css

@@ -11,6 +11,9 @@
   display: inline-flex;
   vertical-align: top;
 }
+.adm-passcode-input.adm-passcode-input-rtl .adm-passcode-input-cell-container {
+  flex-direction: row-reverse;
+}
 .adm-passcode-input-cell {
   flex: none;
   display: flex;
@@ -51,6 +54,18 @@
   border-color: var(--adm-color-primary);
   box-shadow: 0 0 2px 0 var(--adm-color-primary);
 }
+.adm-passcode-input.adm-passcode-input-rtl:not(.adm-passcode-input-seperated) .adm-passcode-input-cell:first-child {
+  border-right: none;
+}
+.adm-passcode-input.adm-passcode-input-rtl:not(.adm-passcode-input-seperated) .adm-passcode-input-cell:last-child {
+  border-right: 1px solid var(--border-color);
+}
+.adm-passcode-input.adm-passcode-input-rtl.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell:first-child {
+  margin-right: 0;
+}
+.adm-passcode-input.adm-passcode-input-rtl.adm-passcode-input.adm-passcode-input-seperated .adm-passcode-input-cell:last-child {
+  margin-right: var(--cell-gap);
+}
 .adm-passcode-input-seperated.adm-passcode-input-focused {
   outline: none;
 }

package/es/components/passcode-input/passcode-input.d.ts

@@ -12,6 +12,7 @@ export declare type PasscodeInputProps = {
     seperated?: boolean;
     keyboard?: ReactElement<NumberKeyboardProps>;
     inputMode?: 'numeric' | 'text';
+    direction?: 'ltr' | 'rtl';
     onBlur?: () => void;
     onFocus?: () => void;
     onChange?: (val: string) => void;
@@ -31,6 +32,7 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     seperated?: boolean | undefined;
     keyboard?: ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     inputMode?: "text" | "numeric" | undefined;
+    direction?: "ltr" | "rtl" | undefined;
     onBlur?: (() => void) | undefined;
     onFocus?: (() => void) | undefined;
     onChange?: ((val: string) => void) | undefined;

package/es/components/passcode-input/passcode-input.js

@@ -13,7 +13,8 @@ const defaultProps = {
   error: false,
   seperated: false,
   caret: true,
-  inputMode: 'numeric'
+  inputMode: 'numeric',
+  direction: 'ltr'
 };
 export const PasscodeInput = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
@@ -70,10 +71,11 @@ export const PasscodeInput = forwardRef((p, ref) => {
       (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
     }
   }));
+  const isRTL = props.direction === 'rtl';
   const renderCells = () => {
     const cells = [];
     const chars = value.split('');
-    const caretIndex = chars.length; // 光标位置index等于当前文字长度
+    const caretIndex = chars.length;
     const focusedIndex = bound(chars.length, 0, cellLength - 1);
     for (let i = 0; i < cellLength; i++) {
       cells.push(React.createElement("div", {
@@ -90,7 +92,8 @@ export const PasscodeInput = forwardRef((p, ref) => {
   const cls = classNames(classPrefix, {
     [`${classPrefix}-focused`]: focused,
     [`${classPrefix}-error`]: props.error,
-    [`${classPrefix}-seperated`]: props.seperated
+    [`${classPrefix}-seperated`]: props.seperated,
+    [`${classPrefix}-rtl`]: isRTL
   });
   return React.createElement(React.Fragment, null, withNativeProps(props, React.createElement("div", {
     ref: rootRef,

package/es/components/popover/popover.js

@@ -12,6 +12,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 import { Arrow } from './arrow';
 import { normalizePlacement } from './normalize-placement';
+import { useShowingGuard } from './use-showing-guard';
 import { Wrapper } from './wrapper';
 const classPrefix = `adm-popover`;
 const defaultProps = {
@@ -29,8 +30,16 @@ export const Popover = forwardRef((p, ref) => {
     defaultValue: props.defaultVisible,
     onChange: props.onVisibleChange
   });
+  const {
+    markShowing,
+    isShowing
+  } = useShowingGuard();
   useImperativeHandle(ref, () => ({
-    show: () => setVisible(true),
+    show: () => {
+      // 标记进入 show() 触发链，避免同一次点击事件冒泡到 document 时被 useClickAway 立即关闭
+      markShowing();
+      setVisible(true);
+    },
     hide: () => setVisible(false),
     visible
   }), [visible]);
@@ -131,6 +140,7 @@ export const Popover = forwardRef((p, ref) => {
   }, [targetElement, visible]);
   useClickAway(() => {
     if (!props.trigger) return;
+    if (isShowing()) return; // 跳过 show() 触发链上的 click-away
     setVisible(false);
   }, [() => {
     var _a;

package/es/components/popover/use-showing-guard.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 保证通过 `ref.show()` 打开的 Popover 不会被同一次交互立即关闭。
+ *
+ * 当外部元素的点击回调调用 `ref.show()` 时，当前点击事件仍会继续冒泡到
+ * document，并触发 `useClickAway`。因此需要在当前事件任务结束前保持 guarding
+ * 状态，让 click-away 跳过这一次关闭；进入下一个任务后再解除 guarding，保证
+ * 后续的外部点击仍能正常关闭 Popover。
+ */
+export declare function useShowingGuard(): {
+    markShowing: () => void;
+    isShowing: () => boolean;
+};

package/es/components/popover/use-showing-guard.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+/**
+ * 保证通过 `ref.show()` 打开的 Popover 不会被同一次交互立即关闭。
+ *
+ * 当外部元素的点击回调调用 `ref.show()` 时，当前点击事件仍会继续冒泡到
+ * document，并触发 `useClickAway`。因此需要在当前事件任务结束前保持 guarding
+ * 状态，让 click-away 跳过这一次关闭；进入下一个任务后再解除 guarding，保证
+ * 后续的外部点击仍能正常关闭 Popover。
+ */
+export function useShowingGuard() {
+  const showingRef = useRef(false);
+  const timerRef = useRef();
+  const markShowing = () => {
+    // 使用 ref 而不是 state，确保同一次事件冒泡到 document 时可以同步读取到标记。
+    showingRef.current = true;
+    // 连续调用 show() 时重置保护窗口，避免旧定时器提前清除最新一次的标记。
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      // 定时器会在当前事件任务完成后执行，此时可以恢复正常的 click-away 行为。
+      showingRef.current = false;
+    });
+  };
+  const isShowing = () => showingRef.current;
+  useEffect(() => {
+    return () => {
+      // 组件卸载后不再需要更新 guarding 标记，同时清理未执行的定时器。
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+  return {
+    markShowing,
+    isShowing
+  };
+}

package/es/components/search-bar/search-bar.js

@@ -27,7 +27,6 @@ export const SearchBar = forwardRef((props, ref) => {
   const [value, setValue] = usePropsValue(mergedProps);
   const [hasFocus, setHasFocus] = useState(false);
   const inputRef = useRef(null);
-  const composingRef = useRef(false);
   useImperativeHandle(ref, () => ({
     clear: () => {
       var _a;
@@ -104,9 +103,11 @@ export const SearchBar = forwardRef((props, ref) => {
     onClear: mergedProps.onClear,
     type: 'search',
     enterKeyHint: 'search',
-    onEnterPress: () => {
+    onEnterPress: e => {
       var _a, _b;
-      if (!composingRef.current) {
+      // Use nativeEvent.isComposing to check IME composition state
+      // This is more reliable than maintaining a manual ref
+      if (!e.nativeEvent.isComposing) {
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         (_b = mergedProps.onSearch) === null || _b === void 0 ? void 0 : _b.call(mergedProps, value);
       }
@@ -114,12 +115,10 @@ export const SearchBar = forwardRef((props, ref) => {
     "aria-label": locale.SearchBar.name,
     onCompositionStart: e => {
       var _a;
-      composingRef.current = true;
       (_a = mergedProps.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
     },
     onCompositionEnd: e => {
       var _a;
-      composingRef.current = false;
       (_a = mergedProps.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(mergedProps, e);
     }
   })), renderCancelButton()));

package/es/components/segmented/segmented.css

@@ -73,6 +73,7 @@
   width: 0;
   height: 100%;
   padding: 4px 0;
+  box-sizing: border-box;
 }
 .adm-segmented-thumb-motion-appear-active {
   transition: transform 0.3s var(--transition-time-function), width 0.3s var(--transition-time-function);

package/es/components/swipe-action/swipe-action.js

@@ -46,6 +46,19 @@ export const SwipeAction = forwardRef((p, ref) => {
     (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
     draggingRef.current = false;
   }
+  function open(side) {
+    var _a;
+    if (side === 'right') {
+      api.start({
+        x: -getRightWidth()
+      });
+    } else {
+      api.start({
+        x: getLeftWidth()
+      });
+    }
+    (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
+  }
   const bind = useDrag(state => {
     var _a;
     dragCancelRef.current = state.cancel;
@@ -109,36 +122,33 @@ export const SwipeAction = forwardRef((p, ref) => {
   };
   useImperativeHandle(ref, () => ({
     show: (side = 'right') => {
-      var _a;
-      if (side === 'right') {
-        api.start({
-          x: -getRightWidth()
-        });
-      } else if (side === 'left') {
-        api.start({
-          x: getLeftWidth()
-        });
-      }
-      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
+      open(side);
     },
     close
   }));
   useEffect(() => {
     if (!props.closeOnTouchOutside) return;
-    function handle(e) {
-      if (x.get() === 0) {
-        return;
+    const root = rootRef.current;
+    if (!root) return;
+    function onTouchOutside(e) {
+      if (x.goal === 0) return;
+      if (!(root === null || root === void 0 ? void 0 : root.contains(e.target))) {
+        close();
       }
-      const root = rootRef.current;
-      if (root && !root.contains(e.target)) {
+    }
+    function onFocusOutside(e) {
+      if (x.goal === 0) return;
+      if (!(root === null || root === void 0 ? void 0 : root.contains(e.relatedTarget))) {
         close();
       }
     }
-    document.addEventListener('touchstart', handle);
+    document.addEventListener('touchstart', onTouchOutside);
+    root.addEventListener('focusout', onFocusOutside);
     return () => {
-      document.removeEventListener('touchstart', handle);
+      document.removeEventListener('touchstart', onTouchOutside);
+      root.removeEventListener('focusout', onFocusOutside);
     };
-  }, [props.closeOnTouchOutside]);
+  }, [props.closeOnTouchOutside, props.onClose]);
   function renderAction(action) {
     var _a, _b;
     const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
@@ -175,7 +185,10 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }, withStopPropagation(props.stopPropagation, React.createElement("div", {
     className: `${classPrefix}-actions ${classPrefix}-actions-left`,
-    ref: leftRef
+    ref: leftRef,
+    onFocus: () => {
+      if (x.goal !== getLeftWidth()) open('left');
+    }
   }, props.leftActions.map(renderAction))), React.createElement("div", {
     className: `${classPrefix}-content`,
     onClickCapture: e => {
@@ -191,7 +204,10 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
     className: `${classPrefix}-actions ${classPrefix}-actions-right`,
-    ref: rightRef
+    ref: rightRef,
+    onFocus: () => {
+      if (x.goal !== -getRightWidth()) open('right');
+    }
   }, props.rightActions.map(renderAction))))));
 });
 const colorRecord = {

package/es/components/swiper/index.d.ts

@@ -7,7 +7,9 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
     direction?: "vertical" | "horizontal" | undefined;
-    onIndexChange?: ((index: number) => void) | undefined;
+    onIndexChange?: ((index: number, info: {
+        source: import("./swiper").SwiperIndexChangeSource;
+    }) => void) | undefined;
     indicatorProps?: Pick<import("../page-indicator").PageIndicatorProps, "style" | "className" | "color"> | undefined;
     indicator?: false | ((total: number, current: number) => import("react").ReactNode) | undefined;
     slideSize?: number | undefined;

package/es/components/swiper/swiper.d.ts

@@ -13,6 +13,7 @@ export declare type SwiperRef = {
     swipeNext: () => void;
     swipePrev: () => void;
 };
+export declare type SwiperIndexChangeSource = 'auto' | 'swipe' | 'resize';
 export declare type SwiperProps = {
     defaultIndex?: number;
     allowTouchMove?: boolean;
@@ -20,7 +21,9 @@ export declare type SwiperProps = {
     autoplayInterval?: number;
     loop?: boolean;
     direction?: 'horizontal' | 'vertical';
-    onIndexChange?: (index: number) => void;
+    onIndexChange?: (index: number, info: {
+        source: SwiperIndexChangeSource;
+    }) => void;
     indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
     indicator?: false | ((total: number, current: number) => ReactNode);
     slideSize?: number;
@@ -44,7 +47,9 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     autoplayInterval?: number | undefined;
     loop?: boolean | undefined;
     direction?: "vertical" | "horizontal" | undefined;
-    onIndexChange?: ((index: number) => void) | undefined;
+    onIndexChange?: ((index: number, info: {
+        source: SwiperIndexChangeSource;
+    }) => void) | undefined;
     indicatorProps?: Pick<PageIndicatorProps, "style" | "className" | "color"> | undefined;
     indicator?: false | ((total: number, current: number) => ReactNode) | undefined;
     slideSize?: number | undefined;
@@ -65,4 +70,6 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     style?: (CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
     tabIndex?: number | undefined;
 } & React.AriaAttributes & React.RefAttributes<SwiperRef>>;
+export declare function modulus(value: number, division: number): number;
+export declare function getSwipeToPosition(current: number, targetIndex: number, total: number): number;
 export {};

package/es/components/swiper/swiper.js

@@ -44,7 +44,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
   const [uid] = useState({});
   const timeoutRef = useRef(null);
   const isVertical = direction === 'vertical';
-  const slideRatio = props.slideSize / 100;
+  const slideRatio = Math.max(props.slideSize, 1) / 100;
   const offsetRatio = props.trackOffset / 100;
   const {
     validChildren,
@@ -153,7 +153,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         const minIndex = Math.floor(offset / slidePixels);
         const maxIndex = minIndex + 1;
         const index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
-        swipeTo(bound(index, minIndex, maxIndex));
+        swipeTo(bound(index, minIndex, maxIndex), 'swipe', false);
         window.setTimeout(() => {
           setDragging(false);
         });
@@ -185,34 +185,43 @@ export const Swiper = forwardRef(staged((p, ref) => {
         touch: true
       }
     });
-    function swipeTo(index, immediate = false) {
+    function swipeTo(index, source = 'swipe', immediate = false) {
       var _a;
       const roundedIndex = Math.round(index);
       const targetIndex = loop ? modulus(roundedIndex, mergedTotal) : bound(roundedIndex, 0, mergedTotal - 1);
       if (targetIndex !== getCurrent()) {
-        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
+        (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex, {
+          source
+        });
       }
       setCurrent(targetIndex);
-      api.start({
-        position: (loop ? roundedIndex : boundIndex(roundedIndex)) * 100,
-        immediate
-      });
+      if (loop) {
+        api.start({
+          position: getSwipeToPosition(position.get(), roundedIndex, mergedTotal),
+          immediate
+        });
+      } else {
+        api.start({
+          position: boundIndex(roundedIndex) * 100,
+          immediate
+        });
+      }
     }
-    function swipeNext() {
-      swipeTo(Math.round(position.get() / 100) + 1);
+    function swipeNext(source = 'swipe') {
+      swipeTo(Math.round(position.get() / 100) + 1, source, false);
     }
-    function swipePrev() {
-      swipeTo(Math.round(position.get() / 100) - 1);
+    function swipePrev(source = 'swipe') {
+      swipeTo(Math.round(position.get() / 100) - 1, source, false);
     }
     useImperativeHandle(ref, () => ({
-      swipeTo,
+      swipeTo: index => swipeTo(index, 'swipe', false),
       swipeNext,
       swipePrev
     }));
     useIsomorphicLayoutEffect(() => {
       const maxIndex = mergedTotal - 1;
       if (current > maxIndex) {
-        swipeTo(maxIndex, true);
+        swipeTo(maxIndex, 'resize', true);
       }
     });
     const {
@@ -222,9 +231,9 @@ export const Swiper = forwardRef(staged((p, ref) => {
     const runTimeSwiper = () => {
       timeoutRef.current = window.setTimeout(() => {
         if (autoplay === 'reverse') {
-          swipePrev();
+          swipePrev('auto');
         } else {
-          swipeNext();
+          swipeNext('auto');
         }
         runTimeSwiper();
       }, autoplayInterval);
@@ -241,11 +250,12 @@ export const Swiper = forwardRef(staged((p, ref) => {
     function renderItem(index, child, key) {
       let itemStyle = {};
       if (loop) {
+        // 计算循环模式下定位所需的常量，避免在动画回调中重复计算
+        const totalWidth = mergedTotal * 100;
+        const flagWidth = Math.min(totalWidth / 2, (offsetRatio / slideRatio + 1) * 100);
         itemStyle = {
           [isVertical ? 'y' : 'x']: position.to(position => {
             let finalPosition = -position + index * 100;
-            const totalWidth = mergedTotal * 100;
-            const flagWidth = totalWidth / 2;
             finalPosition = modulus(finalPosition + flagWidth, totalWidth) - flagWidth;
             return `${finalPosition}%`;
           }),
@@ -345,7 +355,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
     }, mergedProps), renderTrackInner()), indicatorNode));
   };
 }));
-function modulus(value, division) {
+export function modulus(value, division) {
   const remainder = value % division;
   return remainder < 0 ? remainder + division : remainder;
+}
+export function getSwipeToPosition(current, targetIndex, total) {
+  const totalWidth = 100 * total;
+  let delta = modulus(targetIndex * 100 - current, totalWidth);
+  if (delta > totalWidth / 2) delta -= totalWidth;
+  return current + delta;
 }

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

@@ -23,7 +23,7 @@ export declare type TextAreaRef = {
     blur: () => void;
     nativeElement: HTMLTextAreaElement | null;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "autoFocus" | "name" | "readOnly" | "autoComplete"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "onClick" | "disabled" | "name" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "autoFocus" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;