antd-mobile 5.15.1 → 5.16.0

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

@@ -1,8 +1,19 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
     children?: ReactNode;
 } & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
-export declare const List: FC<ListProps>;
+export declare type ListRef = {
+    nativeElement: HTMLDivElement | null;
+};
+export declare const List: React.ForwardRefExoticComponent<{
+    header?: ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--active-background-color" | "--align-items" | "--border-bottom" | "--border-inner" | "--border-top" | "--extra-max-width" | "--font-size" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ListRef>>;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.List = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -15,15 +15,26 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 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; }
+
 const classPrefix = `adm-list`;
 const defaultProps = {
   mode: 'default'
 };
-
-const List = p => {
+const List = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const nativeElementRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    get nativeElement() {
+      return nativeElementRef.current;
+    }
+
+  }));
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.mode}`)
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.mode}`),
+    ref: nativeElementRef
   }, props.header && _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, props.header), _react.default.createElement("div", {
@@ -31,6 +42,5 @@ const List = p => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-body-inner`
   }, props.children))));
-};
-
+});
 exports.List = List;

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

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     primary?: boolean;

package/2x/cjs/components/modal/modal.css

@@ -58,15 +58,6 @@
   color: var(--adm-color-text);
 }
 
-.adm-modal-close {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  color: var(--adm-color-weak);
-  padding: 8px;
-  font-size: var(--adm-font-size-10);
-}
-
 .adm-modal-footer {
   user-select: none;
   padding: 16px 24px 24px;

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

@@ -21,8 +21,6 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 
-var _antdMobileIcons = require("antd-mobile-icons");
-
 var _centerPopup = _interopRequireDefault(require("../center-popup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,10 +34,7 @@ const defaultProps = {
 const Modal = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
-  const element = _react.default.createElement(_react.default.Fragment, null, props.showCloseButton && _react.default.createElement("a", {
-    className: (0, _classnames.default)(cls('close'), 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), !!props.image && _react.default.createElement("div", {
+  const element = _react.default.createElement(_react.default.Fragment, null, !!props.image && _react.default.createElement("div", {
     className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -76,11 +71,9 @@ const Modal = p => {
     style: props.style,
     afterClose: props.afterClose,
     afterShow: props.afterShow,
-    onMaskClick: props.closeOnMaskClick ? () => {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    } : undefined,
+    showCloseButton: props.showCloseButton,
+    closeOnMaskClick: props.closeOnMaskClick,
+    onClose: props.onClose,
     visible: props.visible,
     getContainer: props.getContainer,
     bodyStyle: props.bodyStyle,

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import { PopupProps } from '../popup';
-import { GetContainer } from '../../utils/render-to-container';
 import { NativeProps } from '../../utils/native-props';
 export declare type NumberKeyboardProps = {
     visible?: boolean;
     title?: string;
-    getContainer?: GetContainer;
     confirmText?: string | null;
     customKey?: '-' | '.' | 'X';
     randomOrder?: boolean;
@@ -14,9 +12,7 @@ export declare type NumberKeyboardProps = {
     onDelete?: () => void;
     onClose?: () => void;
     onConfirm?: () => void;
-    afterShow?: () => void;
-    afterClose?: () => void;
     closeOnConfirm?: boolean;
     safeArea?: boolean;
-} & Pick<PopupProps, 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'afterClose' | 'afterShow' | 'getContainer' | 'destroyOnClose' | 'forceRender' | 'stopPropagation'> & NativeProps;
 export declare const NumberKeyboard: React.FC<NumberKeyboardProps>;

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

@@ -36,7 +36,9 @@ const defaultProps = {
   showCloseButton: true,
   confirmText: null,
   closeOnConfirm: true,
-  safeArea: true
+  safeArea: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 
 const NumberKeyboard = p => {
@@ -142,7 +144,11 @@ const NumberKeyboard = p => {
       'sign-key': !isNumberKey && key,
       'mid-key': index === 9 && !!confirmText
     });
-    return _react.default.createElement("div", {
+    const ariaProps = key ? {
+      role: 'button',
+      title: key
+    } : undefined;
+    return _react.default.createElement("div", Object.assign({
       key: key,
       className: className,
       onTouchStart: () => {
@@ -156,10 +162,8 @@ const NumberKeyboard = p => {
         if (key === 'BACKSPACE') {
           onBackspacePressEnd();
         }
-      },
-      title: key,
-      role: 'button'
-    }, key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
+      }
+    }, ariaProps), key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
   };
 
   return _react.default.createElement(_popup.default, {
@@ -169,7 +173,9 @@ const NumberKeyboard = p => {
     afterClose: props.afterClose,
     afterShow: props.afterShow,
     className: `${classPrefix}-popup`,
-    stopPropagation: props.stopPropagation
+    stopPropagation: props.stopPropagation,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: keyboardRef,
     className: classPrefix,

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

@@ -20,9 +20,7 @@ declare const _default: import("react").NamedExoticComponent<{
     mouseWheel?: boolean | undefined;
     popupClassName?: string | undefined;
     popupStyle?: import("react").CSSProperties | undefined;
-    forceRender?: boolean | undefined;
-    destroyOnClose?: boolean | undefined;
-} & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
     tabIndex?: number | undefined;
@@ -45,9 +43,7 @@ declare const _default: import("react").NamedExoticComponent<{
         mouseWheel?: boolean | undefined;
         popupClassName?: string | undefined;
         popupStyle?: import("react").CSSProperties | undefined;
-        forceRender?: boolean | undefined;
-        destroyOnClose?: boolean | undefined;
-    } & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
         className?: string | undefined;
         style?: (import("react").CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
         tabIndex?: number | undefined;

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

@@ -26,9 +26,7 @@ export declare type PickerProps = {
     mouseWheel?: boolean;
     popupClassName?: string;
     popupStyle?: React.CSSProperties;
-    forceRender?: boolean;
-    destroyOnClose?: boolean;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+} & 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[]);
     value?: PickerValue[] | undefined;
@@ -47,9 +45,7 @@ export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticCom
     mouseWheel?: boolean | undefined;
     popupClassName?: string | undefined;
     popupStyle?: React.CSSProperties | undefined;
-    forceRender?: boolean | undefined;
-    destroyOnClose?: boolean | undefined;
-} & Pick<PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--item-height" | "--header-button-font-size" | "--title-font-size" | "--item-font-size", string>>) | undefined;
     tabIndex?: number | undefined;

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

@@ -29,8 +29,6 @@ var _safeArea = _interopRequireDefault(require("../safe-area"));
 
 var _pickerUtils = require("./picker-utils");
 
-var _shouldRender = require("../../utils/should-render");
-
 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); }
@@ -41,7 +39,9 @@ const classPrefix = `adm-picker`;
 const defaultProps = {
   defaultValue: [],
   closeOnMaskClick: true,
-  renderLabel: _pickerUtils.defaultRenderLabel
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false
 };
 const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
   var _a;
@@ -105,12 +105,12 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
-  const shouldRender = (0, _shouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
   const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, _react.default.createElement("a", {
+    role: 'button',
     className: `${classPrefix}-header-button`,
     onClick: () => {
       var _a;
@@ -121,6 +121,7 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
   }, props.cancelText), _react.default.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), _react.default.createElement("a", {
+    role: 'button',
     className: `${classPrefix}-header-button`,
     onClick: () => {
       setValue(innerValue);
@@ -149,13 +150,13 @@ const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
       setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
-    forceRender: true,
+    forceRender: props.forceRender,
     stopPropagation: props.stopPropagation
-  }, shouldRender && pickerElement, _react.default.createElement(_safeArea.default, {
+  }, pickerElement, _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   }));
 

package/2x/cjs/components/picker-view/picker-view.css

@@ -69,6 +69,7 @@
   flex-direction: column;
   position: relative;
   z-index: 0;
+  padding-bottom: 2px;
 }
 
 .adm-picker-view-column-accessible > * {

package/2x/cjs/components/picker-view/wheel.js

@@ -154,27 +154,29 @@ const Wheel = (0, _react.memo)(props => {
       className: 'adm-picker-view-column-accessible-current',
       role: 'button',
       "aria-label": current ? `当前选择的是：${current.label}` : '当前未选择'
-    }, "-"), _react.default.createElement("div", null, previous && _react.default.createElement("div", {
+    }, "-"), _react.default.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
       onClick: () => {
+        if (!previous) return;
         scrollSelect(previousIndex);
       },
-      role: 'button',
-      "aria-label": `选择上一项：${previous.label}`
-    }, "-")), _react.default.createElement("div", null, next && _react.default.createElement("div", {
+      role: previous ? 'button' : 'text',
+      "aria-label": !previous ? '没有上一项' : `选择上一项：${previous.label}`
+    }, "-"), _react.default.createElement("div", {
       className: 'adm-picker-view-column-accessible-button',
       onClick: () => {
+        if (!next) return;
         scrollSelect(nextIndex);
       },
-      role: 'button',
-      "aria-label": `选择下一项：${next.label}`
-    }, "-")));
+      role: next ? 'button' : 'text',
+      "aria-label": !next ? '没有下一项' : `选择下一项：${next.label}`
+    }, "-"));
   }
 
   return _react.default.createElement("div", {
-    ref: rootRef,
     className: `${classPrefix}-column`
   }, _react.default.createElement(_web.animated.div, {
+    ref: rootRef,
     style: {
       translateY: y
     },

package/2x/cjs/components/popup/popup-base-props.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+export declare type PopupBaseProps = {
+    afterClose?: () => void;
+    afterShow?: () => void;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    closeOnMaskClick?: boolean;
+    destroyOnClose?: boolean;
+    disableBodyScroll?: boolean;
+    forceRender?: boolean;
+    getContainer?: GetContainer;
+    mask?: boolean;
+    maskClassName?: string;
+    maskStyle?: MaskProps['style'];
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onClose?: () => void;
+    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    showCloseButton?: boolean;
+    stopPropagation?: PropagationEvent[];
+    visible?: boolean;
+};
+export declare const defaultPopupBaseProps: {
+    closeOnMaskClick: boolean;
+    destroyOnClose: boolean;
+    disableBodyScroll: boolean;
+    forceRender: boolean;
+    getContainer: null;
+    mask: boolean;
+    showCloseButton: boolean;
+    stopPropagation: string[];
+    visible: boolean;
+};

package/2x/cjs/components/popup/popup-base-props.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultPopupBaseProps = void 0;
+const defaultPopupBaseProps = {
+  closeOnMaskClick: false,
+  destroyOnClose: false,
+  disableBodyScroll: true,
+  forceRender: false,
+  getContainer: null,
+  mask: true,
+  showCloseButton: false,
+  stopPropagation: ['click'],
+  visible: false
+};
+exports.defaultPopupBaseProps = defaultPopupBaseProps;

package/2x/cjs/components/popup/popup.css

@@ -10,26 +10,58 @@
   z-index: calc(var(--z-index) + 10);
 }
 
+.adm-popup-body .adm-popup-close-icon {
+  position: absolute;
+  z-index: 100;
+}
+
 .adm-popup-body-position-bottom {
   width: 100%;
   bottom: 0;
   left: 0;
 }
 
+.adm-popup-body-position-bottom .adm-popup-close-icon {
+  right: 16px;
+  top: 16px;
+}
+
 .adm-popup-body-position-top {
   width: 100%;
   top: 0;
   left: 0;
 }
 
+.adm-popup-body-position-top .adm-popup-close-icon {
+  right: 16px;
+  bottom: 16px;
+}
+
 .adm-popup-body-position-left {
   height: 100%;
   top: 0;
   left: 0;
 }
 
+.adm-popup-body-position-left .adm-popup-close-icon {
+  right: 16px;
+  top: 16px;
+}
+
 .adm-popup-body-position-right {
   height: 100%;
   top: 0;
   right: 0;
+}
+
+.adm-popup-body-position-right .adm-popup-close-icon {
+  left: 16px;
+  top: 16px;
+}
+
+.adm-popup-close-icon {
+  cursor: pointer;
+  padding: 8px;
+  font-size: 36px;
+  color: var(--adm-color-weak);
 }

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

@@ -1,23 +1,7 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import type { MaskProps } from '../mask';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupProps = PropsWithChildren<{
-    afterClose?: () => void;
-    afterShow?: () => void;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    destroyOnClose?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    mask?: boolean;
-    maskClassName?: string;
-    maskStyle?: MaskProps['style'];
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+import { PopupBaseProps } from './popup-base-props';
+export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
     position?: 'bottom' | 'top' | 'left' | 'right';
-    stopPropagation?: PropagationEvent[];
-    visible?: boolean;
 }> & NativeProps<'--z-index'>;
 export declare const Popup: FC<PopupProps>;

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

@@ -23,9 +23,15 @@ var _renderToContainer = require("../../utils/render-to-container");
 
 var _web = require("@react-spring/web");
 
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
 var _shouldRender = require("../../utils/should-render");
 
-var _withStopPropagation = require("../../utils/with-stop-propagation");
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _popupBaseProps = require("./popup-base-props");
+
+var _useInnerVisible = require("../../utils/use-inner-visible");
 
 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); }
 
@@ -34,21 +40,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-popup`;
-const defaultProps = {
-  position: 'bottom',
-  visible: false,
-  getContainer: () => document.body,
-  mask: true,
-  stopPropagation: ['click']
-};
+const defaultProps = Object.assign(Object.assign({}, _popupBaseProps.defaultPopupBaseProps), {
+  position: 'bottom'
+});
 
 const Popup = p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const bodyCls = (0, _classnames.default)(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
-  const ref = (0, _react.useRef)(null);
   const [active, setActive] = (0, _react.useState)(props.visible);
-  (0, _useLockScroll.useLockScroll)(ref, active);
-  const shouldRender = (0, _shouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = (0, _react.useRef)(null);
+  (0, _useLockScroll.useLockScroll)(ref, props.disableBodyScroll && active);
   const unmountedRef = (0, _ahooks.useUnmountedRef)();
   const {
     percent
@@ -60,9 +66,6 @@ const Popup = p => {
       tension: 300,
       friction: 30
     },
-    onStart: () => {
-      setActive(true);
-    },
     onRest: () => {
       var _a, _b;
 
@@ -76,6 +79,7 @@ const Popup = p => {
       }
     }
   });
+  const maskVisible = (0, _useInnerVisible.useInnerVisible)(active && props.visible);
   const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix,
     onClick: props.onClick,
@@ -83,8 +87,18 @@ const Popup = p => {
       display: active ? undefined : 'none'
     }
   }, props.mask && _react.default.createElement(_mask.default, {
-    visible: props.visible,
-    onMaskClick: props.onMaskClick,
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: e => {
+      var _a, _b;
+
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
     className: props.maskClassName,
     style: props.maskStyle,
     disableBodyScroll: false,
@@ -113,8 +127,19 @@ const Popup = p => {
       })
     }),
     ref: ref
-  }, shouldRender && props.children))));
-  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
+  }, props.showCloseButton && _react.default.createElement("a", {
+    className: (0, _classnames.default)(`${classPrefix}-close-icon`, 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), props.children))));
+  return _react.default.createElement(_shouldRender.ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, (0, _renderToContainer.renderToContainer)(props.getContainer, node));
 };
 
 exports.Popup = Popup;

package/2x/cjs/components/progress-bar/progress-bar.css

@@ -1,19 +1,33 @@
 .adm-progress-bar {
-  --track-width: var(--adm-progress-bar-track-width, 6px);
+  --track-width: var(--adm-progress-bar-track-width, 16px);
   --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
   --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
+  --text-width: var(--adm-progress-bar-text-width, 80px);
+  display: flex;
+  align-items: center;
 }
 
 .adm-progress-bar-trail {
+  flex: auto;
   background: var(--track-color);
   overflow: hidden;
   height: var(--track-width);
-  border-radius: var(--track-width);
 }
 
 .adm-progress-bar-fill {
   transition: width 0.3s;
   background: var(--fill-color);
-  height: 100%;
+  height: var(--track-width);
+}
+
+.adm-progress-bar-text {
+  flex: none;
+  width: calc(var(--text-width) + 16px);
+  padding-left: 16px;
+  color: #999999;
+}
+
+.adm-progress-bar-rounded .adm-progress-bar-trail,
+.adm-progress-bar-rounded .adm-progress-bar-fill {
   border-radius: var(--track-width);
 }

package/2x/cjs/components/progress-bar/progress-bar.d.ts

@@ -1,6 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ProgressBarProps = {
     percent?: number;
-} & NativeProps<'--track-width' | '--track-color' | '--fill-color'>;
+    rounded?: boolean;
+    text?: boolean | ReactNode | ((percent: number) => ReactNode);
+} & NativeProps<'--track-width' | '--track-color' | '--fill-color' | '--text-width'>;
 export declare const ProgressBar: FC<ProgressBarProps>;