antd-mobile 5.14.3 → 5.15.0

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CheckboxValue = string | number;
 export declare type CheckboxProps = {
@@ -13,4 +13,20 @@ export declare type CheckboxProps = {
     icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
     children?: React.ReactNode;
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
-export declare const Checkbox: FC<CheckboxProps>;
+export declare type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => React.ReactNode) | undefined;
+    children?: React.ReactNode;
+} & NativeProps<"--font-size" | "--icon-size" | "--gap"> & React.RefAttributes<CheckboxRef>>;

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

@@ -38,8 +38,7 @@ const defaultProps = {
   defaultChecked: false,
   indeterminate: false
 };
-
-const Checkbox = p => {
+const Checkbox = (0, _react.forwardRef)((p, ref) => {
   const groupContext = (0, _react.useContext)(_groupContext.CheckboxGroupContext);
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   let [checked, setChecked] = (0, _usePropsValue.usePropsValue)({
@@ -80,6 +79,18 @@ const Checkbox = p => {
     disabled = disabled || groupContext.disabled;
   }
 
+  (0, _react.useImperativeHandle)(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
+
   const renderIcon = () => {
     if (props.icon) {
       return _react.default.createElement("div", {
@@ -108,6 +119,5 @@ const Checkbox = p => {
   }), renderIcon(), props.children && _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));
-};
-
+});
 exports.Checkbox = Checkbox;

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

@@ -1,8 +1,19 @@
 /// <reference types="react" />
 import './checkbox.less';
-export type { CheckboxValue, CheckboxProps } from './checkbox';
+export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
 export type { CheckboxGroupProps } from './group';
-declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: import("./checkbox").CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
+    children?: import("react").ReactNode;
+} & import("../../utils/native-props").NativeProps<"--font-size" | "--icon-size" | "--gap"> & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
     Group: import("react").FC<import("./group").CheckboxGroupProps>;
 };
 export default _default;

package/2x/cjs/components/form/form-item.js

@@ -107,15 +107,13 @@ const FormItemLayout = props => {
       e.preventDefault();
     }
   }, _react.default.createElement(_antdMobileIcons.QuestionCircleOutline, null)))) : null;
-
-  const description = _react.default.createElement(_react.default.Fragment, null, props.description, hasFeedback && _react.default.createElement(_react.default.Fragment, null, props.errors.map((error, index) => _react.default.createElement("div", {
+  const description = props.description || hasFeedback ? _react.default.createElement(_react.default.Fragment, null, props.description, hasFeedback && _react.default.createElement(_react.default.Fragment, null, props.errors.map((error, index) => _react.default.createElement("div", {
     key: `error-${index}`,
     className: `${classPrefix}-feedback-error`
   }, error)), props.warnings.map((warning, index) => _react.default.createElement("div", {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
-  }, warning))));
-
+  }, warning)))) : null;
   return _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,

package/2x/cjs/components/form/form-subscribe.js

@@ -11,27 +11,21 @@ var _rcFieldForm = require("rc-field-form");
 
 var _ahooks = require("ahooks");
 
-var _ = _interopRequireDefault(require("."));
-
 var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
 
-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 FormSubscribe = props => {
   const update = (0, _ahooks.useUpdate)();
-  return _react.default.createElement(_.default.Item, {
-    noStyle: true,
-    dependencies: props.to
-  }, form => _react.default.createElement(_react.default.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => _react.default.createElement(Watcher, {
+  const form = (0, _react.useContext)(_rcFieldForm.FieldContext);
+  return _react.default.createElement(_react.default.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => _react.default.createElement(Watcher, {
     key: namePath.toString(),
     form: form,
     namePath: namePath,
     onChange: update
-  }))));
+  })));
 };
 
 exports.FormSubscribe = FormSubscribe;

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

@@ -8,7 +8,7 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance>>;

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

@@ -7,7 +7,7 @@ export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } 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>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-bottom" | "--border-inner" | "--border-top"> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {

package/2x/cjs/components/infinite-scroll/infinite-scroll.js

@@ -57,7 +57,9 @@ const InfiniteScroll = p => {
   const [flag, setFlag] = (0, _react.useState)({});
   const nextFlagRef = (0, _react.useRef)(flag);
   const [scrollParent, setScrollParent] = (0, _react.useState)();
-  const check = (0, _ahooks.useMemoizedFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+  const {
+    run: check
+  } = (0, _ahooks.useThrottleFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
     if (nextFlagRef.current !== flag) return;
     if (!props.hasMore) return;
     const element = elementRef.current;
@@ -76,7 +78,11 @@ const InfiniteScroll = p => {
       yield doLoadMore(false);
       setFlag(nextFlag);
     }
-  })); // 确保在内容不足时会自动触发加载事件
+  }), {
+    wait: 100,
+    leading: true,
+    trailing: true
+  }); // Make sure to trigger `loadMore` when content changes
 
   (0, _react.useEffect)(() => {
     check();
@@ -97,9 +103,11 @@ const InfiniteScroll = p => {
   }, [scrollParent]);
 
   function retry() {
-    setFailed(false);
-    doLoadMore(true);
-    setFlag(nextFlagRef.current);
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      setFailed(false);
+      yield doLoadMore(true);
+      setFlag(nextFlagRef.current);
+    });
   }
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

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

@@ -10,6 +10,7 @@
   --padding-left: 24px;
   --padding-right: 24px;
   --font-size: var(--adm-font-size-9);
+  --extra-max-width: 70%;
 }
 
 .adm-list-header {
@@ -79,9 +80,11 @@
 }
 
 .adm-list-item-content-extra {
+  flex: none;
   padding-left: 24px;
   font-size: var(--adm-font-size-7);
   color: var(--adm-color-weak);
+  max-width: var(--extra-max-width);
 }
 
 .adm-list-item-content-arrow {

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

@@ -4,5 +4,5 @@ export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
     children?: ReactNode;
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
+} & 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>;

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

@@ -1,7 +1,7 @@
 .adm-rate {
   --star-size: 48px;
   --active-color: #ffd21e;
-  --inactive-color: var(--adm-color-light);
+  --inactive-color: var(--adm-color-border);
   display: inline-flex;
 }
 
@@ -10,7 +10,7 @@
 }
 
 .adm-rate-star {
-  padding: calc(var(--star-size) / 8);
+  padding: 0.125em;
   line-height: var(--star-size);
   font-size: var(--star-size);
   color: var(--inactive-color);

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

@@ -13,17 +13,17 @@ var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _antdMobileIcons = require("antd-mobile-icons");
-
 var _usePropsValue = require("../../utils/use-props-value");
 
+var _star = require("./star");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-rate`;
 const defaultProps = {
   count: 5,
   allowHalf: false,
-  character: _react.default.createElement(_antdMobileIcons.StarFill, null),
+  character: _react.default.createElement(_star.Star, null),
   defaultValue: 0,
   readOnly: false,
   allowClear: true

package/2x/cjs/components/rate/star.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Star: FC;

package/2x/cjs/components/rate/star.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Star = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Star = () => {
+  // return (
+  //   <svg height='1em' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
+  //     <title>{'star-fill\u5907\u4EFD 71'}</title>
+  //     <path
+  //       d='m24 36-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L42.815 16a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L24 36Z'
+  //       fill='#E5E5E5'
+  //       fillRule='evenodd'
+  //     />
+  //   </svg>
+  // )
+  return _react.default.createElement("svg", {
+    viewBox: '0 0 42 40',
+    height: '1em',
+    xmlns: 'http://www.w3.org/2000/svg',
+    style: {
+      verticalAlign: '-0.125em'
+    }
+  }, _react.default.createElement("path", {
+    d: 'm21 34-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L39.815 14a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L21 34Z',
+    fill: 'currentColor',
+    fillRule: 'evenodd'
+  }));
+};
+
+exports.Star = Star;

package/2x/cjs/components/safe-area/safe-area.css

@@ -1,12 +1,13 @@
 .adm-safe-area {
+  --multiple: var(--adm-safe-area-multiple, 1);
   display: block;
   width: 100%;
 }
 
 .adm-safe-area-position-top {
-  padding-top: calc(env(safe-area-inset-top) * var(--adm-hd));
+  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
 }
 
 .adm-safe-area-position-bottom {
-  padding-bottom: calc(env(safe-area-inset-bottom) * var(--adm-hd));
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
 }

package/2x/cjs/components/text-area/text-area.d.ts

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

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

@@ -57,7 +57,12 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
       var _a;
 
       (_a = nativeTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+
+    get nativeElement() {
+      return nativeTextAreaRef.current;
     }
+
   }));
   (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     if (!autoSize) return;

package/2x/cjs/components/toast/methods.js

@@ -7,100 +7,59 @@ exports.clear = clear;
 exports.config = config;
 exports.show = show;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _getContainer = require("../../utils/get-container");
+var _react = _interopRequireDefault(require("react"));
 
 var _toast = require("./toast");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _render = require("../../utils/render");
-
-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; }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-const containers = [];
-
-function unmount(container) {
-  const unmountResult = (0, _render.unmount)(container);
-
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
 
+const ToastInner = props => _react.default.createElement(_toast.InternalToast, Object.assign({}, props));
+
 function show(p) {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement('div');
-  const bodyContainer = (0, _getContainer.resolveContainer)(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(true);
-    (0, _react.useEffect)(() => {
-      return () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    (0, _react.useEffect)(() => {
-      if (props.duration === 0) {
-        return;
-      }
-
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: () => setVisible(false)
-    }));
-    return _react.default.createElement(_toast.InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible: visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  (0, _render.render)(_react.default.createElement(TempToast, {
-    ref: ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+
+  const element = _react.default.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
     }
-  };
+  }));
+
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = (0, _renderImperatively.renderImperatively)(element);
+  }
+
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
 }
 
 function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container) break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 
 function config(val) {

package/2x/cjs/components/water-mark/water-mark.js

@@ -62,13 +62,14 @@ const WaterMark = p => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
-        img.src = image;
 
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+
+        img.src = image;
       } else if (content) {
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -83,7 +84,7 @@ const WaterMark = p => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error('当前环境不支持Canvas');
+      throw new Error('Canvas is not supported in the current environment');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

package/2x/cjs/global/global.css

@@ -12,7 +12,6 @@
   --adm-font-size-8: 32px;
   --adm-font-size-9: 34px;
   --adm-font-size-10: 36px;
-  --adm-hd: 2;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;

package/2x/cjs/global/theme-default.css

@@ -12,7 +12,6 @@
   --adm-font-size-8: 32px;
   --adm-font-size-9: 34px;
   --adm-font-size-10: 36px;
-  --adm-hd: 2;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;

package/2x/cjs/utils/render-imperatively.d.ts

@@ -4,7 +4,10 @@ declare type ImperativeProps = {
     onClose?: () => void;
     afterClose?: () => void;
 };
-export declare function renderImperatively(element: ReactElement<ImperativeProps>): {
+declare type TargetElement = ReactElement<ImperativeProps>;
+export declare type ImperativeHandler = {
     close: () => void;
+    replace: (element: TargetElement) => void;
 };
+export declare function renderImperatively(element: TargetElement): ImperativeHandler;
 export {};

package/2x/cjs/utils/render-imperatively.js

@@ -17,6 +17,8 @@ function renderImperatively(element) {
   const Wrapper = _react.default.forwardRef((_, ref) => {
     const [visible, setVisible] = (0, _react.useState)(false);
     const closedRef = (0, _react.useRef)(false);
+    const [elementToRender, setElementToRender] = (0, _react.useState)(element);
+    const keyRef = (0, _react.useRef)(0);
     (0, _react.useEffect)(() => {
       if (!closedRef.current) {
         setVisible(true);
@@ -30,20 +32,28 @@ function renderImperatively(element) {
 
       closedRef.current = true;
       setVisible(false);
-      (_b = (_a = element.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     function afterClose() {
       var _a, _b;
 
       unmount();
-      (_b = (_a = element.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+      (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
 
     (0, _react.useImperativeHandle)(ref, () => ({
-      close: onClose
+      close: onClose,
+      replace: element => {
+        var _a, _b;
+
+        keyRef.current++;
+        (_b = (_a = elementToRender.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+        setElementToRender(element);
+      }
     }));
-    return _react.default.cloneElement(element, Object.assign(Object.assign({}, element.props), {
+    return _react.default.cloneElement(elementToRender, Object.assign(Object.assign({}, elementToRender.props), {
+      key: keyRef.current,
       visible,
       onClose,
       afterClose
@@ -55,14 +65,16 @@ function renderImperatively(element) {
   const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
     ref: wrapperRef
   }));
+  return {
+    close: () => {
+      var _a;
 
-  function close() {
-    var _a;
-
-    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
-  }
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    },
+    replace: element => {
+      var _a;
 
-  return {
-    close
+      (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.replace(element);
+    }
   };
 }

package/2x/cjs/utils/use-props-value.js

@@ -24,12 +24,8 @@ function usePropsValue(options) {
 
   const setState = (0, _ahooks.useMemoizedFn)(v => {
     const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
-
-    if (value === undefined) {
-      stateRef.current = nextValue;
-      update();
-    }
-
+    stateRef.current = nextValue;
+    update();
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];

package/2x/es/components/badge/badge.css

@@ -1,4 +1,4 @@
-.adm-badge-wrap {
+.adm-badge-wrapper {
   display: inline-block;
   position: relative;
 }

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

@@ -6,5 +6,7 @@ export declare type BadgeProps = {
     color?: string;
     bordered?: boolean;
     children?: React.ReactNode;
+    wrapperClassName?: string;
+    wrapperStyle?: React.CSSProperties;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/2x/es/components/badge/badge.js

@@ -20,6 +20,7 @@ export const Badge = props => {
     className: `${classPrefix}-content`
   }, content))) : null;
   return children ? React.createElement("div", {
-    className: `${classPrefix}-wrap`
+    className: classNames(`${classPrefix}-wrapper`, props.wrapperClassName),
+    style: props.wrapperStyle
   }, children, element) : element;
 };