antd-mobile 5.32.4 → 5.33.1

package/2x/es/components/image-viewer/image-viewer.js

@@ -5,6 +5,7 @@ import Mask from '../mask';
 import SafeArea from '../safe-area';
 import { Slide } from './slide';
 import { Slides } from './slides';
+import classNames from 'classnames';
 const classPrefix = `adm-image-viewer`;
 const defaultProps = {
   maxZoom: 3,
@@ -12,26 +13,24 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.image && React.createElement(Slide, {
     image: props.image,
-    onTap: () => {
-      var _a;
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.image && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.image), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
@@ -40,7 +39,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
-  var _a;
+  var _a, _b, _c;
   const props = mergeProps(multiDefaultProps, p);
   const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
@@ -51,32 +50,31 @@ export const MultiImageViewer = forwardRef((p, ref) => {
       (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
     }
   }));
-  const onSlideChange = useCallback(index => {
+  const onSlideChange = useCallback(newIndex => {
     var _a;
-    setIndex(index);
-    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
-  }, [props.onIndexChange]);
+    if (newIndex === index) return;
+    setIndex(newIndex);
+    (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, newIndex);
+  }, [props.onIndexChange, index]);
   const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose,
-    destroyOnClose: true
+    destroyOnClose: true,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
   }, React.createElement("div", {
-    className: `${classPrefix}-content`
+    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
     defaultIndex: index,
     onIndexChange: onSlideChange,
     images: props.images,
-    onTap: () => {
-      var _a;
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onTap: props.onClose,
     maxZoom: props.maxZoom
   })), props.images && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, props.images[index], index), React.createElement(SafeArea, {
+  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);

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

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

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

@@ -11,6 +11,7 @@ export const Slide = props => {
     dragLockRef,
     maxZoom
   } = props;
+  const initialMartix = useRef([]);
   const controlRef = useRef(null);
   const imgRef = useRef(null);
   const [{
@@ -24,8 +25,22 @@ export const Slide = props => {
   const controlSize = useSize(controlRef);
   const imgSize = useSize(imgRef);
   const pinchLockRef = useRef(false);
-  const boundMatrix = (nextMatrix, type, last = false) => {
-    if (!controlSize || !imgSize) return nextMatrix;
+  /**
+   * Calculate the min and max value of x and y
+   */
+  const getMinAndMax = nextMatrix => {
+    if (!controlSize || !imgSize) return {
+      x: {
+        position: 0,
+        minX: 0,
+        maxX: 0
+      },
+      y: {
+        position: 0,
+        minY: 0,
+        maxY: 0
+      }
+    };
     const controlLeft = -controlSize.width / 2;
     const controlTop = -controlSize.height / 2;
     const imgLeft = -imgSize.width / 2;
@@ -33,20 +48,59 @@ export const Slide = props => {
     const zoom = mat.getScaleX(nextMatrix);
     const scaledImgWidth = zoom * imgSize.width;
     const scaledImgHeight = zoom * imgSize.height;
+    const minX = controlLeft - (scaledImgWidth - controlSize.width);
+    const maxX = controlLeft;
+    const minY = controlTop - (scaledImgHeight - controlSize.height);
+    const maxY = controlTop;
     const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop]);
+    return {
+      x: {
+        position: x,
+        minX,
+        maxX
+      },
+      y: {
+        position: y,
+        minY,
+        maxY
+      }
+    };
+  };
+  /**
+   * Check if is reach the bound
+   */
+  const getReachBound = (position, min, max, buffer = 0) => {
+    return [position <= min - buffer, position >= max + buffer];
+  };
+  /**
+   * Limit the matrix in the bound
+   */
+  const boundMatrix = (nextMatrix, type, last = false) => {
+    if (!controlSize || !imgSize) return nextMatrix;
+    const zoom = mat.getScaleX(nextMatrix);
+    const scaledImgWidth = zoom * imgSize.width;
+    const scaledImgHeight = zoom * imgSize.height;
+    const {
+      x: {
+        position: x,
+        minX,
+        maxX
+      },
+      y: {
+        position: y,
+        minY,
+        maxY
+      }
+    } = getMinAndMax(nextMatrix);
     if (type === 'translate') {
       let boundedX = x;
       let boundedY = y;
       if (scaledImgWidth > controlSize.width) {
-        const minX = controlLeft - (scaledImgWidth - controlSize.width);
-        const maxX = controlLeft;
         boundedX = last ? bound(x, minX, maxX) : rubberbandIfOutOfBounds(x, minX, maxX, zoom * 50);
       } else {
         boundedX = -scaledImgWidth / 2;
       }
       if (scaledImgHeight > controlSize.height) {
-        const minY = controlTop - (scaledImgHeight - controlSize.height);
-        const maxY = controlTop;
         boundedY = last ? bound(y, minY, maxY) : rubberbandIfOutOfBounds(y, minY, maxY, zoom * 50);
       } else {
         boundedY = -scaledImgHeight / 2;
@@ -54,18 +108,29 @@ export const Slide = props => {
       return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
     if (type === 'scale' && last) {
-      const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? bound(x, controlLeft - (scaledImgWidth - controlSize.width), controlLeft) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? bound(y, controlTop - (scaledImgHeight - controlSize.height), controlTop) : -scaledImgHeight / 2];
+      const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? bound(x, minX, maxX) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? bound(y, minY, maxY) : -scaledImgHeight / 2];
       return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
     return nextMatrix;
   };
   useDragAndPinch({
     onDrag: state => {
-      if (state.first) return;
+      var _a;
+      if (state.first) {
+        const {
+          x: {
+            position: x,
+            minX,
+            maxX
+          }
+        } = getMinAndMax(matrix.get());
+        initialMartix.current = getReachBound(x, minX, maxX);
+        return;
+      }
       if (state.pinching) return state.cancel();
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
-        props.onTap();
+        (_a = props.onTap) === null || _a === void 0 ? void 0 : _a.call(props);
         return;
       }
       const currentZoom = mat.getScaleX(matrix.get());
@@ -84,6 +149,21 @@ export const Slide = props => {
           matrix: boundMatrix(nextMatrix, 'translate', state.last),
           immediate: !state.last
         });
+        const {
+          x: {
+            position: x,
+            minX,
+            maxX
+          }
+        } = getMinAndMax(nextMatrix);
+        if (state.last && initialMartix.current.some(i => i) && getReachBound(x, minX, maxX).some(i => i)) {
+          if (dragLockRef) {
+            dragLockRef.current = false;
+          }
+          api.start({
+            matrix: mat.create()
+          });
+        }
       }
     },
     onPinch: state => {
@@ -127,7 +207,6 @@ export const Slide = props => {
   }, {
     target: controlRef,
     drag: {
-      // filterTaps: true,
       from: () => [mat.getTranslateX(matrix.get()), mat.getTranslateY(matrix.get())],
       pointer: {
         touch: true
@@ -141,12 +220,7 @@ export const Slide = props => {
     }
   });
   return React.createElement("div", {
-    className: `${classPrefix}-slide`,
-    onPointerMove: e => {
-      if (mat.getScaleX(matrix.get()) !== 1) {
-        e.stopPropagation();
-      }
-    }
+    className: `${classPrefix}-slide`
   }, React.createElement("div", {
     className: `${classPrefix}-control`,
     ref: controlRef

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare type SlidesType = {
     images: string[];
-    onTap: () => void;
+    onTap?: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;

package/2x/es/components/image-viewer/slides.js

@@ -47,12 +47,10 @@ export const Slides = forwardRef((props, ref) => {
   }, {
     transform: ([x, y]) => [-x, y],
     from: () => [x.get(), 0],
-    bounds: () => {
-      return {
-        left: 0,
-        right: (count - 1) * slideWidth
-      };
-    },
+    bounds: () => ({
+      left: 0,
+      right: (count - 1) * slideWidth
+    }),
     rubberband: true,
     axis: 'x',
     pointer: {

package/2x/es/components/index-bar/index-bar.d.ts

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarProps = {
     sticky?: boolean;
     onIndexChange?: (index: string) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--sticky-offset-top'>;
 export declare type IndexBarRef = {
     scrollTo: (index: string) => void;
@@ -11,7 +12,7 @@ export declare type IndexBarRef = {
 export declare const IndexBar: React.ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
     onIndexChange?: ((index: string) => void) | undefined;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--sticky-offset-top", string>>) | undefined;

package/2x/es/components/index-bar/panel.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarPanelProps = {
     index: string;

package/2x/es/components/index-bar/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 declare type SidebarProps = {
     indexItems: {
         index: string;

package/2x/es/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type InfiniteScrollProps = {
     loadMore: (isRetry: boolean) => Promise<void>;
     hasMore: boolean;
     threshold?: number;
-    children?: React.ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => React.ReactNode);
+    children?: ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => ReactNode);
 } & NativeProps;
 export declare const InfiniteScroll: FC<InfiniteScrollProps>;

package/2x/es/components/jumbo-tabs/jumbo-tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import type { ReactNode, FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type JumboTabProps = {
     title: ReactNode;
@@ -6,13 +6,13 @@ export declare type JumboTabProps = {
     disabled?: boolean;
     forceRender?: boolean;
     destroyOnClose?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const JumboTab: FC<JumboTabProps>;
 export declare type JumboTabsProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const JumboTabs: FC<JumboTabsProps>;

package/2x/es/components/list/list-item.d.ts

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListItemProps = {
     title?: ReactNode;

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

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;

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

@@ -1,5 +1,6 @@
 import { NativeProps } from '../../utils/native-props';
 import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { GetContainer } from '../../utils/render-to-container';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type MaskProps = {
@@ -14,6 +15,6 @@ export declare type MaskProps = {
     afterShow?: () => void;
     afterClose?: () => void;
     stopPropagation?: PropagationEvent[];
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--z-index'>;
-export declare const Mask: React.FC<MaskProps>;
+export declare const Mask: FC<MaskProps>;

package/2x/es/components/modal/alert.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from './index';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare type ModalAlertProps = Omit<ModalProps, 'visible' | 'closeOnAction' | 'actions'> & {
     confirmText?: ReactNode;
     onConfirm?: () => void | Promise<void>;

package/2x/es/components/modal/confirm.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from './index';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare type ModalConfirmProps = Omit<ModalProps, 'visible' | 'closeOnAction' | 'actions'> & {
     confirmText?: ReactNode;
     cancelText?: ReactNode;

package/2x/es/components/modal/modal-action-button.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Action } from './modal-action-button';
 import { NativeProps } from '../../utils/native-props';
 import { CenterPopupProps } from '../center-popup';

package/2x/es/components/nav-bar/nav-bar.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type NavBarProps = {
     back?: ReactNode;

package/2x/es/components/notice-bar/notice-bar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type NoticeBarProps = {
     /** The type of the NoticeBar */
@@ -8,7 +9,7 @@ export declare type NoticeBarProps = {
     /** Scroll speed, unit px/s */
     speed?: number;
     /** The content of the NoticeBar */
-    content: React.ReactNode;
+    content: ReactNode;
     /** Whether it can be closed */
     closeable?: boolean;
     /** Callback when closed */
@@ -16,9 +17,9 @@ export declare type NoticeBarProps = {
     /** Event when click */
     onClick?: () => void;
     /** Additional operating area, displayed to the left of the close button */
-    extra?: React.ReactNode;
+    extra?: ReactNode;
     /** Radio icon on the left */
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     /** Whether to display multiple lines */
     wrap?: boolean;
 } & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;

package/2x/es/components/number-keyboard/number-keyboard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FC } from 'react';
 import { PopupProps } from '../popup';
 import { NativeProps } from '../../utils/native-props';
 export declare type NumberKeyboardProps = {
@@ -15,4 +15,4 @@ export declare type NumberKeyboardProps = {
     closeOnConfirm?: boolean;
     safeArea?: boolean;
 } & Pick<PopupProps, 'afterClose' | 'afterShow' | 'getContainer' | 'destroyOnClose' | 'forceRender' | 'stopPropagation'> & NativeProps;
-export declare const NumberKeyboard: React.FC<NumberKeyboardProps>;
+export declare const NumberKeyboard: FC<NumberKeyboardProps>;

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

@@ -88,7 +88,7 @@ export const NumberKeyboard = p => {
       className: classNames(`${classPrefix}-header`, {
         [`${classPrefix}-header-with-title`]: !!title
       })
-    }, 'title' && React.createElement("div", {
+    }, !!title && React.createElement("div", {
       className: `${classPrefix}-title`,
       "aria-label": title
     }, title), showCloseButton && React.createElement("span", {
@@ -163,6 +163,10 @@ export const NumberKeyboard = p => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
+    onContextMenu: e => {
+      // Long press should not trigger native context menu
+      e.preventDefault();
+    },
     title: 'BACKSPACE',
     role: 'grid',
     tabIndex: -1

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

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import type { NumberKeyboardProps } from '../number-keyboard';
 export declare type PasscodeInputProps = {

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

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import { PopupProps } from '../popup';
 import { NativeProps } from '../../utils/native-props';
 import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
@@ -27,7 +28,7 @@ export declare type PickerProps = {
     renderLabel?: (item: PickerColumnItem) => ReactNode;
     mouseWheel?: boolean;
     popupClassName?: string;
-    popupStyle?: React.CSSProperties;
+    popupStyle?: CSSProperties;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);

package/2x/es/components/picker-view/picker-view.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PickerProps } from '../picker';
 export declare type PickerValue = string | number | null;

package/2x/es/components/picker-view/wheel.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { PickerColumnItem, PickerValue } from './index';
 declare type Props = {
     index: number;

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

@@ -23,6 +23,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
 } & import("react").AriaAttributes & import("react").RefAttributes<import("./popover").PopoverRef>> & {
     Menu: import("react").ForwardRefExoticComponent<Omit<import("./popover").PopoverProps, "content"> & {
         actions: import("./popover-menu").Action[];
+        maxCount?: number | undefined;
         onAction?: ((item: import("./popover-menu").Action) => void) | undefined;
     } & import("react").RefAttributes<import("./popover").PopoverRef>>;
 };

package/2x/es/components/popover/popover-menu.css

@@ -15,6 +15,22 @@
   margin-top: -2px;
 }
 
+.adm-popover-menu-list-scroll {
+  padding-right: 4px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: auto;
+}
+
+.adm-popover-menu-list-scroll::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+}
+
+.adm-popover-menu-list-scroll::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background-color: #ddd;
+}
+
 .adm-popover-menu-item {
   display: flex;
   padding-left: 40px;

package/2x/es/components/popover/popover-menu.d.ts

@@ -1,17 +1,20 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import { PopoverProps, PopoverRef } from './popover';
 export declare type Action = {
-    text: React.ReactNode;
-    icon?: React.ReactNode;
+    text: ReactNode;
+    icon?: ReactNode;
     disabled?: boolean;
     key?: string | number;
     onClick?: () => void;
 };
 export declare type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
     actions: Action[];
+    maxCount?: number;
     onAction?: (item: Action) => void;
 };
 export declare const PopoverMenu: React.ForwardRefExoticComponent<Omit<PopoverProps, "content"> & {
     actions: Action[];
+    maxCount?: number | undefined;
     onAction?: ((item: Action) => void) | undefined;
 } & React.RefAttributes<PopoverRef>>;

package/2x/es/components/popover/popover-menu.js

@@ -17,15 +17,24 @@ export const PopoverMenu = forwardRef((props, ref) => {
     (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
   }, [props.onAction]);
   const overlay = useMemo(() => {
+    const whetherScroll = (props === null || props === void 0 ? void 0 : props.maxCount) && props.actions.length > (props === null || props === void 0 ? void 0 : props.maxCount);
+    const innerHeight = (props === null || props === void 0 ? void 0 : props.maxCount) && (props === null || props === void 0 ? void 0 : props.maxCount) * 48;
     return React.createElement("div", {
       className: `${classPrefix}-list`
     }, React.createElement("div", {
-      className: `${classPrefix}-list-inner`
+      className: classNames(`${classPrefix}-list-inner`, {
+        [`${classPrefix}-list-scroll`]: whetherScroll
+      }),
+      style: {
+        height: innerHeight
+      }
     }, props.actions.map((action, index) => {
       var _a;
       return React.createElement("a", {
         key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
-        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', {
+          [`${classPrefix}-item-disabled`]: action.disabled
+        }),
         onClick: () => {
           var _a;
           if (action.disabled) return;