antd-mobile 5.42.3 → 5.43.0

package/cjs/components/swiper/swiper.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Swiper = void 0;
+exports.getSwipeToPosition = getSwipeToPosition;
+exports.modulus = modulus;
 var _web = require("@react-spring/web");
 var _react = require("@use-gesture/react");
 var _ahooks = require("ahooks");
@@ -53,7 +55,7 @@ const Swiper = (0, _react2.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
   const [uid] = (0, _react2.useState)({});
   const timeoutRef = (0, _react2.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,
@@ -162,7 +164,7 @@ const Swiper = (0, _react2.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         const minIndex = Math.floor(offset / slidePixels);
         const maxIndex = minIndex + 1;
         const index = Math.round((offset + velocity * 2000 * direction) / slidePixels);
-        swipeTo((0, _bound.bound)(index, minIndex, maxIndex));
+        swipeTo((0, _bound.bound)(index, minIndex, maxIndex), 'swipe', false);
         window.setTimeout(() => {
           setDragging(false);
         });
@@ -194,34 +196,43 @@ const Swiper = (0, _react2.forwardRef)((0, _stagedComponents.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) : (0, _bound.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);
     }
     (0, _react2.useImperativeHandle)(ref, () => ({
-      swipeTo,
+      swipeTo: index => swipeTo(index, 'swipe', false),
       swipeNext,
       swipePrev
     }));
     (0, _ahooks.useIsomorphicLayoutEffect)(() => {
       const maxIndex = mergedTotal - 1;
       if (current > maxIndex) {
-        swipeTo(maxIndex, true);
+        swipeTo(maxIndex, 'resize', true);
       }
     });
     const {
@@ -231,9 +242,9 @@ const Swiper = (0, _react2.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
     const runTimeSwiper = () => {
       timeoutRef.current = window.setTimeout(() => {
         if (autoplay === 'reverse') {
-          swipePrev();
+          swipePrev('auto');
         } else {
-          swipeNext();
+          swipeNext('auto');
         }
         runTimeSwiper();
       }, autoplayInterval);
@@ -250,11 +261,12 @@ const Swiper = (0, _react2.forwardRef)((0, _stagedComponents.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}%`;
           }),
@@ -358,4 +370,10 @@ exports.Swiper = Swiper;
 function modulus(value, division) {
   const remainder = value % division;
   return remainder < 0 ? remainder + division : remainder;
+}
+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/cjs/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;

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

@@ -102,7 +102,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
   }
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, _react.default.createElement("textarea", {
+  }, _react.default.createElement("textarea", Object.assign({
     ref: nativeTextAreaRef,
     className: `${classPrefix}-element`,
     rows: rows,
@@ -138,9 +138,10 @@ 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", {
+  })), count, autoSize && _react.default.createElement("textarea", {
     ref: hiddenTextAreaRef,
     className: `${classPrefix}-element ${classPrefix}-element-hidden`,
     value: value,

package/cjs/components/virtual-input/use-click-outside.js

@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rcUtil = require("rc-util");
 var _react = require("react");
 // 监听点击组件外部的事件
 function useClickOutside(handler, ref, hasKeyboardProps = false) {
+  const stableHandler = (0, _rcUtil.useEvent)(handler);
   (0, _react.useEffect)(() => {
     function handleClick(event) {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
       }
-      handler(event);
+      stableHandler(event); // 使用 ref 中的 handler
     }
     // 向前兼容逻辑：
     // 1. 对于有键盘属性的 VirtualInput，在捕获阶段监听：
@@ -21,11 +23,11 @@ function useClickOutside(handler, ref, hasKeyboardProps = false) {
     //      这种情况通常是 VirtualInput + NumberKeyboard 为兄弟关系，在以前版本中点击 NumberKeyboard **不会**触发 VirtualInput 的 blur 事件
     //      原先原理：通过 NumberKeyboard 内部 onMouseDown 时 preventDefault 阻止的 VirtualInput 内原生的 blur 事件
     //      新的原理：NumberKeyboard 的 Popup 默认会 stopPropagation click, 这里在冒泡阶段监听不到，不会调用 VirtualInput 的 onBlur 回调（非原生事件）。
-    document.addEventListener('click', handleClick, hasKeyboardProps ? true : false);
+    document.addEventListener('click', handleClick, hasKeyboardProps);
     return () => {
-      document.removeEventListener('click', handleClick, hasKeyboardProps ? true : false);
+      document.removeEventListener('click', handleClick, hasKeyboardProps);
     };
-  }, [handler, ref]);
+  }, [ref]); // 只依赖 ref，不依赖 handler
 }
 var _default = useClickOutside;
 exports.default = _default;

package/cjs/utils/convert-px.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertPx = convertPx;
 var _canUseDom = require("./can-use-dom");
-var _isDev = require("./is-dev");
 var _devLog = require("./dev-log");
+var _isDev = require("./is-dev");
 let tenPxTester = null;
 let tester = null;
-if (_canUseDom.canUseDom) {
+function initialize() {
+  if (tenPxTester !== null) return;
+  if (!_canUseDom.canUseDom || !document.body) return;
   tenPxTester = document.createElement('div');
   tenPxTester.className = 'adm-px-tester';
   tenPxTester.style.setProperty('--size', '10');
@@ -24,6 +26,9 @@ if (_canUseDom.canUseDom) {
   }
 }
 function convertPx(px) {
+  if (tenPxTester === null) {
+    initialize();
+  }
   if (tenPxTester === null || tester === null) return px;
   if (tenPxTester.getBoundingClientRect().height === 10) {
     return px;

package/es/components/cascader/cascader.css

@@ -32,3 +32,7 @@
 .adm-cascader-body > .adm-cascader-view {
   --height: 310px;
 }
+.adm-cascader-popup .adm-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

package/es/components/cascader/cascader.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
-import { PopupProps } from '../popup';
-import { CascaderValue, CascaderValueExtend, CascaderOption } from '../cascader-view';
-import { NativeProps } from '../../utils/native-props';
 import type { FieldNamesType } from '../../hooks';
+import { NativeProps } from '../../utils/native-props';
+import { CascaderOption, CascaderValue, CascaderValueExtend, CascaderViewOptionRender } from '../cascader-view';
+import { PopupProps } from '../popup';
 export declare type CascaderActions = {
     open: () => void;
     close: () => void;
@@ -27,6 +27,7 @@ export declare type CascaderProps = {
     onTabsChange?: (index: number) => void;
     activeIcon?: ReactNode;
     fieldNames?: FieldNamesType;
+    optionRender?: CascaderViewOptionRender;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const Cascader: React.ForwardRefExoticComponent<{
     options: CascaderOption[];
@@ -46,6 +47,7 @@ export declare const Cascader: React.ForwardRefExoticComponent<{
     onTabsChange?: ((index: number) => void) | undefined;
     activeIcon?: ReactNode;
     fieldNames?: FieldNamesType | undefined;
+    optionRender?: CascaderViewOptionRender | undefined;
 } & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;

package/es/components/cascader/cascader.js

@@ -1,12 +1,12 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import Popup from '../popup';
-import { mergeProps } from '../../utils/with-default-props';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { useFieldNames } from '../../hooks';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
 import CascaderView from '../cascader-view';
-import { useConfig } from '../config-provider';
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend';
-import { useFieldNames } from '../../hooks';
+import { useConfig } from '../config-provider';
+import Popup from '../popup';
 const classPrefix = `adm-cascader`;
 const defaultProps = {
   defaultValue: [],
@@ -58,9 +58,7 @@ export const Cascader = forwardRef((p, ref) => {
   });
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
-    if (!visible) {
-      setInnerValue(value);
-    }
+    setInnerValue(value);
   }, [visible, value]);
   const cascaderElement = withNativeProps(props, React.createElement("div", {
     className: classPrefix
@@ -94,6 +92,7 @@ export const Cascader = forwardRef((p, ref) => {
     }
   })))));
   const popupElement = React.createElement(Popup, {
+    className: `${classPrefix}-popup`,
     visible: visible,
     position: 'bottom',
     onMaskClick: () => {

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

@@ -1,7 +1,7 @@
 import { prompt } from './prompt';
 import './cascader.less';
 export type { CascaderProps, CascaderRef, CascaderActions } from './cascader';
-export type { CascaderValue, CascaderValueExtend, CascaderOption, } from '../cascader-view';
+export type { CascaderValue, CascaderValueExtend, CascaderOption, CascaderViewOptionRender, CascaderViewOptionRenderInfo, } from '../cascader-view';
 declare const _default: import("react").ForwardRefExoticComponent<{
     options: import("../cascader-view").CascaderOption[];
     value?: import("../check-list").CheckListValue[] | undefined;
@@ -20,6 +20,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     onTabsChange?: ((index: number) => void) | undefined;
     activeIcon?: import("react").ReactNode;
     fieldNames?: import("../../hooks").FieldNamesType | undefined;
+    optionRender?: import("../cascader-view").CascaderViewOptionRender | undefined;
 } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;

package/es/components/cascader-view/cascader-view.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import { CheckListValue } from '../check-list';
+import type { BaseOptionType, FieldNamesType } from '../../hooks';
 import { NativeProps } from '../../utils/native-props';
-import type { FieldNamesType, BaseOptionType } from '../../hooks';
+import { CheckListValue } from '../check-list';
 export declare type CascaderValue = CheckListValue;
 export declare type CascaderOption = {
     label?: string;
@@ -13,6 +13,11 @@ export declare type CascaderValueExtend = {
     items: (CascaderOption | null)[];
     isLeaf: boolean;
 };
+export declare type CascaderViewOptionRenderInfo = {
+    depth: number;
+    active: boolean;
+};
+export declare type CascaderViewOptionRender = (option: CascaderOption, info: CascaderViewOptionRenderInfo) => ReactNode;
 export declare type CascaderViewProps = {
     options: CascaderOption[];
     value?: CascaderValue[];
@@ -23,5 +28,6 @@ export declare type CascaderViewProps = {
     activeIcon?: ReactNode;
     loading?: boolean;
     fieldNames?: FieldNamesType;
+    optionRender?: CascaderViewOptionRender;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

package/es/components/cascader-view/cascader-view.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import { useUpdateEffect } from 'ahooks';
 import classNames from 'classnames';
-import Tabs from '../tabs';
-import CheckList from '../check-list';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFieldNames } from '../../hooks';
 import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useCascaderValueExtend } from './use-cascader-value-extend';
+import { mergeProps } from '../../utils/with-default-props';
+import CheckList from '../check-list';
 import { useConfig } from '../config-provider';
-import { optionSkeleton } from './option-skeleton';
 import Skeleton from '../skeleton';
-import { useUpdateEffect } from 'ahooks';
-import { useFieldNames } from '../../hooks';
+import Tabs from '../tabs';
+import { optionSkeleton } from './option-skeleton';
+import { useCascaderValueExtend } from './use-cascader-value-extend';
 const classPrefix = `adm-cascader-view`;
 const defaultProps = {
   defaultValue: []
@@ -125,7 +125,10 @@ export const CascaderView = p => {
         className: classNames(`${classPrefix}-item`, {
           [`${classPrefix}-item-active`]: active
         })
-      }, option[labelName]);
+      }, props.optionRender ? props.optionRender(option, {
+        depth: index,
+        active
+      }) : option[labelName]);
     }))));
   }))));
 };

package/es/components/cascader-view/index.d.ts

@@ -1,5 +1,5 @@
 import './cascader-view.less';
-export type { CascaderViewProps, CascaderValue, CascaderValueExtend, CascaderOption, } from './cascader-view';
+export type { CascaderViewProps, CascaderViewOptionRender, CascaderViewOptionRenderInfo, CascaderValue, CascaderValueExtend, CascaderOption, } from './cascader-view';
 declare const _default: import("react").FC<import("./cascader-view").CascaderViewProps> & {
     optionSkeleton: import("./cascader-view").CascaderOption[];
 };

package/es/components/date-picker/date-picker-date-utils.js

@@ -1,11 +1,4 @@
-import dayjs from 'dayjs';
-import isLeapYear from 'dayjs/plugin/isLeapYear';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear';
 import { TILL_NOW } from './util';
-dayjs.extend(isoWeek);
-dayjs.extend(isoWeeksInYear);
-dayjs.extend(isLeapYear);
 const precisionRankRecord = {
   year: 0,
   month: 1,
@@ -14,6 +7,9 @@ const precisionRankRecord = {
   minute: 4,
   second: 5
 };
+function getMonthDays(year, month) {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
 export function generateDatePickerColumns(selected, min, max, precision, renderLabel, filter, tillNow) {
   const ret = [];
   const minYear = min.getFullYear();
@@ -30,7 +26,6 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
   const maxSecond = max.getSeconds();
   const rank = precisionRankRecord[precision];
   const selectedYear = parseInt(selected[0]);
-  const firstDayInSelectedMonth = dayjs(convertStringArrayToDate([selected[0], selected[1], '1']));
   const selectedMonth = parseInt(selected[1]);
   const selectedDay = parseInt(selected[2]);
   const selectedHour = parseInt(selected[3]);
@@ -87,7 +82,7 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
   }
   if (rank >= precisionRankRecord.day) {
     const lower = isInMinMonth ? minDay : 1;
-    const upper = isInMaxMonth ? maxDay : firstDayInSelectedMonth.daysInMonth();
+    const upper = isInMaxMonth ? maxDay : getMonthDays(selectedYear, selectedMonth);
     const days = generateColumn(lower, upper, 'day');
     ret.push(days.map(v => ({
       label: renderLabel('day', v, {

package/es/components/date-picker/date-picker-week-utils.js

@@ -12,14 +12,14 @@ const precisionRankRecord = {
 };
 export function generateDatePickerColumns(selected, min, max, precision, renderLabel, filter) {
   const ret = [];
-  const minYear = min.getFullYear();
-  const maxYear = max.getFullYear();
+  const minDay = dayjs(min);
+  const maxDay = dayjs(max);
+  const minYear = minDay.isoWeekYear();
+  const maxYear = maxDay.isoWeekYear();
   const rank = precisionRankRecord[precision];
   const selectedYear = parseInt(selected[0]);
   const isInMinYear = selectedYear === minYear;
   const isInMaxYear = selectedYear === maxYear;
-  const minDay = dayjs(min);
-  const maxDay = dayjs(max);
   const minWeek = minDay.isoWeek();
   const maxWeek = maxDay.isoWeek();
   const minWeekday = minDay.isoWeekday();

package/es/components/date-picker/date-picker.d.ts

@@ -19,7 +19,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     filter?: DatePickerFilter;
     tillNow?: boolean;
 } & NativeProps;
-export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "closeOnMaskClick" | "onClose" | "cancelText" | "loading" | "confirmText" | "mouseWheel" | "loadingContent" | "onCancel"> & {
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "confirmText" | "mouseWheel" | "loadingContent"> & {
     value?: PickerDate | null | undefined;
     defaultValue?: PickerDate | null | undefined;
     onSelect?: ((value: PickerDate) => void) | undefined;

package/es/components/date-picker/index.d.ts

@@ -2,7 +2,7 @@ import './date-picker.less';
 import { prompt } from './prompt';
 export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "closeOnMaskClick" | "onClose" | "cancelText" | "loading" | "confirmText" | "mouseWheel" | "loadingContent" | "onCancel"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "confirmText" | "mouseWheel" | "loadingContent"> & {
     value?: import("./util").PickerDate | null | undefined;
     defaultValue?: import("./util").PickerDate | null | undefined;
     onSelect?: ((value: import("./util").PickerDate) => void) | undefined;

package/es/components/dropdown/dropdown.d.ts

@@ -8,6 +8,9 @@ export declare type DropdownProps = {
     closeOnMaskClick?: boolean;
     closeOnClickAway?: boolean;
     onChange?: (key: string | null) => void;
+    onVisibleChange?: (visible: boolean, info: {
+        key: string | null;
+    }) => void;
     arrowIcon?: ReactNode;
     /**
      * @deprecated use `arrowIcon` instead
@@ -24,6 +27,9 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     closeOnMaskClick?: boolean | undefined;
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
+    onVisibleChange?: ((visible: boolean, info: {
+        key: string | null;
+    }) => void) | undefined;
     arrowIcon?: ReactNode;
     /**
      * @deprecated use `arrowIcon` instead

package/es/components/dropdown/dropdown.js

@@ -1,6 +1,7 @@
 import { useClickAway } from 'ahooks';
 import classNames from 'classnames';
-import React, { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import raf from 'rc-util/lib/raf';
+import React, { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProp, mergeProps } from '../../utils/with-default-props';
@@ -27,6 +28,8 @@ const Dropdown = forwardRef((props, ref) => {
     defaultValue: mergedProps.defaultActiveKey,
     onChange: mergedProps.onChange
   });
+  const cacheKeyRef = useRef(null);
+  cacheKeyRef.current = value !== null && value !== void 0 ? value : cacheKeyRef.current;
   const navRef = useRef(null);
   const contentRef = useRef(null);
   // 点击外部区域，关闭
@@ -37,14 +40,30 @@ const Dropdown = forwardRef((props, ref) => {
   // 计算 navs 的 top 值
   const [top, setTop] = useState();
   const containerRef = useRef(null);
-  useEffect(() => {
+  const rafIdRef = useRef(0);
+  const updatePosition = useCallback(() => {
     const container = containerRef.current;
     if (!container) return;
-    if (value) {
-      const rect = container.getBoundingClientRect();
-      setTop(rect.bottom);
-    }
-  }, [value]);
+    setTop(container.getBoundingClientRect().bottom);
+  }, []);
+  const updateTop = useCallback(() => {
+    raf.cancel(rafIdRef.current);
+    rafIdRef.current = raf(updatePosition);
+  }, [updatePosition]);
+  useEffect(() => {
+    if (!value) return;
+    updatePosition();
+    window.addEventListener('scroll', updateTop, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener('resize', updateTop);
+    return () => {
+      raf.cancel(rafIdRef.current);
+      window.removeEventListener('scroll', updateTop, true);
+      window.removeEventListener('resize', updateTop);
+    };
+  }, [value, updateTop, updatePosition]);
   const changeActive = key => {
     if (value === key) {
       setValue(null);
@@ -99,7 +118,19 @@ const Dropdown = forwardRef((props, ref) => {
     forceRender: popupForceRender,
     onMaskClick: mergedProps.closeOnMaskClick ? () => {
       changeActive(null);
-    } : undefined
+    } : undefined,
+    afterShow: () => {
+      var _a;
+      (_a = mergedProps.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(mergedProps, true, {
+        key: cacheKeyRef.current
+      });
+    },
+    afterClose: () => {
+      var _a;
+      (_a = mergedProps.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(mergedProps, false, {
+        key: cacheKeyRef.current
+      });
+    }
   }, React.createElement("div", {
     ref: contentRef
   }, items.map(item => {

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

@@ -7,6 +7,9 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     closeOnMaskClick?: boolean | undefined;
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
+    onVisibleChange?: ((visible: boolean, info: {
+        key: string | null;
+    }) => void) | undefined;
     arrowIcon?: import("react").ReactNode;
     arrow?: import("react").ReactNode;
     getContainer?: import("../../utils/render-to-container").GetContainer | undefined;

package/es/components/error-block/create-error-block.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import type { ReactNode, ReactElement } from 'react';
-import { NativeProps } from '../../utils/native-props';
+import type { FC, ReactElement, ReactNode } from 'react';
 import type { ErrorBlockStatus, ImageRecord } from '.';
+import { NativeProps } from '../../utils/native-props';
 import './error-block.less';
 export declare type ErrorBlockProps = {
     status?: ErrorBlockStatus;
@@ -11,4 +10,4 @@ export declare type ErrorBlockProps = {
     fullPage?: boolean;
     children?: ReactNode;
 } & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
-export declare function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;
+export declare function createErrorBlock(imageRecord: ImageRecord): FC<ErrorBlockProps>;

package/es/components/error-block/create-error-block.js

@@ -1,7 +1,7 @@
-import React from 'react';
 import classNames from 'classnames';
-import { mergeProps } from '../../utils/with-default-props';
+import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
 import { useConfig } from '../config-provider';
 import "./error-block.css";
 const classPrefix = `adm-error-block`;