antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/es/components/center-popup/center-popup.patch.css

@@ -0,0 +1,11 @@
+.adm-center-popup {
+  z-index: 1000;
+}
+.adm-center-popup-wrap {
+  min-width: 280px;
+  max-width: 75vw;
+}
+.adm-center-popup-body {
+  background-color: #ffffff;
+  border-radius: 8px;
+}

package/es/components/center-popup/index.d.ts

@@ -0,0 +1,4 @@
+import './center-popup.less';
+import { CenterPopup } from './center-popup';
+export type { CenterPopupProps } from './center-popup';
+export default CenterPopup;

package/es/components/center-popup/index.js

@@ -0,0 +1,3 @@
+import "./center-popup.css";
+import { CenterPopup } from './center-popup';
+export default CenterPopup;

package/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: 16px;
+  font-size: var(--adm-font-size-10);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/es/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 .adm-checkbox {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,13 +41,13 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);
 }
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   color: var(--adm-color-primary);
 }
 .adm-checkbox-content {

package/es/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,24 @@ 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;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CheckboxRef>>;

package/es/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext, useImperativeHandle } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { CheckboxGroupContext } from './group-context';
@@ -14,7 +14,7 @@ const defaultProps = {
   defaultChecked: false,
   indeterminate: false
 };
-export const Checkbox = p => {
+export const Checkbox = forwardRef((p, ref) => {
   const groupContext = useContext(CheckboxGroupContext);
   const props = mergeProps(defaultProps, p);
   let [checked, setChecked] = usePropsValue({
@@ -55,6 +55,18 @@ export const Checkbox = p => {
     disabled = disabled || groupContext.disabled;
   }
 
+  useImperativeHandle(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
+
   const renderIcon = () => {
     if (props.icon) {
       return React.createElement("div", {
@@ -83,4 +95,4 @@ export const Checkbox = p => {
   }), renderIcon(), props.children && React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));
-};
+});

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

@@ -1,8 +1,23 @@
 /// <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;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
     Group: import("react").FC<import("./group").CheckboxGroupProps>;
 };
 export default _default;

package/es/components/checkbox/native-input.js

@@ -1,17 +1,18 @@
 import React, { useEffect, useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
 export const NativeInput = props => {
   const inputRef = useRef(null);
+  const handleClick = useMemoizedFn(e => {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const latestChecked = e.target.checked;
+    if (latestChecked === props.checked) return;
+    props.onChange(latestChecked);
+  });
   useEffect(() => {
     if (props.disabled) return;
     if (!inputRef.current) return;
     const input = inputRef.current;
-
-    function handleClick(e) {
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      props.onChange(input.checked);
-    }
-
     input.addEventListener('click', handleClick);
     return () => {
       input.removeEventListener('click', handleClick);
@@ -19,7 +20,7 @@ export const NativeInput = props => {
   }, [props.disabled, props.onChange]);
   return React.createElement("input", {
     ref: inputRef,
-    type: 'checkbox',
+    type: props.type,
     checked: props.checked,
     onChange: () => {},
     disabled: props.disabled,

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

@@ -39,21 +39,6 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
   const maxMinute = max.getMinutes();
   const maxSecond = max.getSeconds();
   const rank = precisionRankRecord[precision];
-
-  if (rank >= precisionRankRecord.year) {
-    const years = [];
-
-    for (let i = minYear; i <= maxYear; i++) {
-      const value = i.toString();
-      years.push({
-        label: renderLabel ? renderLabel('year', i) : value,
-        value
-      });
-    }
-
-    ret.push(years);
-  }
-
   const selectedYear = parseInt(selected[0]);
   const firstDayInSelectedMonth = dayjs(convertStringArrayToDate([selected[0], selected[1], '1']));
   const selectedMonth = parseInt(selected[1]);
@@ -94,6 +79,18 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
     return column;
   };
 
+  if (rank >= precisionRankRecord.year) {
+    const lower = minYear;
+    const upper = maxYear;
+    const years = generateColumn(lower, upper, 'year');
+    ret.push(years.map(v => {
+      return {
+        label: renderLabel('year', v),
+        value: v.toString()
+      };
+    }));
+  }
+
   if (rank >= precisionRankRecord.month) {
     const lower = isInMinYear ? minMonth : 1;
     const upper = isInMaxYear ? maxMonth : 12;

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

@@ -18,21 +18,6 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
   const minYear = min.getFullYear();
   const maxYear = max.getFullYear();
   const rank = precisionRankRecord[precision];
-
-  if (rank >= precisionRankRecord.year) {
-    const years = [];
-
-    for (let i = minYear; i <= maxYear; i++) {
-      const value = i.toString();
-      years.push({
-        label: renderLabel ? renderLabel('year', i) : value,
-        value
-      });
-    }
-
-    ret.push(years);
-  }
-
   const selectedYear = parseInt(selected[0]);
   const isInMinYear = selectedYear === minYear;
   const isInMaxYear = selectedYear === maxYear;
@@ -70,6 +55,18 @@ export function generateDatePickerColumns(selected, min, max, precision, renderL
     return column;
   };
 
+  if (rank >= precisionRankRecord.year) {
+    const lower = minYear;
+    const upper = maxYear;
+    const years = generateColumn(lower, upper, 'year');
+    ret.push(years.map(v => {
+      return {
+        label: renderLabel('year', v),
+        value: v.toString()
+      };
+    }));
+  }
+
   if (rank >= precisionRankRecord.week) {
     const lower = isInMinYear ? minWeek : 1;
     const upper = isInMaxYear ? maxWeek : selectedYearWeeks;

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

@@ -3,7 +3,7 @@ import type { PickerProps, PickerRef, PickerActions } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
 export declare type DatePickerRef = PickerRef;
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'loading' | 'loadingContent' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;
@@ -15,7 +15,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
 } & NativeProps;
-export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;
@@ -28,4 +28,8 @@ export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProp
     filter?: Partial<Record<Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
-} & NativeProps<never> & React.RefAttributes<PickerActions>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>;

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

@@ -33,7 +33,7 @@ export const DatePicker = forwardRef((p, ref) => {
     return convertDateToStringArray(date, props.precision);
   }, [value, props.precision, props.min, props.max]);
   const onConfirm = useCallback(val => {
-    setValue(convertStringArrayToDate(val, props.precision));
+    setValue(convertStringArrayToDate(val, props.precision), true);
   }, [setValue, props.precision]);
   const onSelect = useMemoizedFn(val => {
     var _a;
@@ -55,12 +55,16 @@ export const DatePicker = forwardRef((p, ref) => {
     onConfirm: onConfirm,
     onSelect: onSelect,
     getContainer: props.getContainer,
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     title: props.title,
     stopPropagation: props.stopPropagation,
-    mouseWheel: props.mouseWheel
+    mouseWheel: props.mouseWheel,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (_, actions) => {
     var _a;
 

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

@@ -3,7 +3,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" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+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" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;
@@ -16,7 +16,11 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import(".
     filter?: Partial<Record<import("./date-picker-utils").Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
-} & import("../../utils/native-props").NativeProps<never> & import("react").RefAttributes<import("../picker").PickerActions>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("../picker").PickerActions>> & {
     prompt: typeof prompt;
 };
 export default _default;

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

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
-export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel'> & {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel' | 'loading' | 'loadingContent'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;

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

@@ -32,6 +32,8 @@ export const DatePickerView = p => {
   }, [props.onChange, props.precision]);
   return withNativeProps(props, React.createElement(PickerView, {
     columns: selected => generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel, props.filter),
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     value: pickerValue,
     mouseWheel: props.mouseWheel,
     onChange: onChange

package/es/components/dialog/dialog-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;
     bold?: boolean;

package/es/components/dialog/dialog.css

@@ -1,26 +1,14 @@
 .adm-dialog {
   --z-index: var(--adm-dialog-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
-.adm-dialog .adm-dialog-mask {
-  z-index: 0;
-}
-.adm-dialog-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: 75vw;
-  max-width: 500px;
-  transform: translate(-50%, -50%);
+.adm-dialog .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-dialog-body {
   width: 100%;
   max-height: 70vh;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -34,57 +22,58 @@
 .adm-dialog-body:not(.adm-dialog-with-image) {
   padding-top: 20px;
 }
-.adm-dialog-body .adm-dialog-image-container {
+.adm-dialog-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
 }
-.adm-dialog-body .adm-dialog-header {
+.adm-dialog-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-dialog-body .adm-dialog-title {
+.adm-dialog-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-body .adm-dialog-content {
+.adm-dialog-content {
   padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
-.adm-dialog-body .adm-dialog-content-empty {
+.adm-dialog-content-empty {
   padding: 0;
   height: 12px;
 }
-.adm-dialog-body .adm-dialog-footer {
-  user-select: none;
+.adm-dialog-footer {
+  -webkit-user-select: none;
+          user-select: none;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
-  border-top: 0.5px solid var(--adm-border-color);
+  border-top: 0.5px solid var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   border-radius: 0;
-  border-right: solid 0.5px var(--adm-border-color);
+  border-right: solid 0.5px var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/es/components/dialog/dialog.d.ts

@@ -1,27 +1,16 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
-export declare type DialogProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: (Action | Action[])[];
     onAction?: (action: Action, index: number) => void | Promise<void>;
-    closeOnAction?: boolean;
     onClose?: () => void;
+    closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    visible?: boolean;
-    getContainer?: GetContainer;
-    bodyStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    maskStyle?: React.CSSProperties;
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

package/es/components/dialog/dialog.js

@@ -1,58 +1,20 @@
 import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
-import { useUnmountedRef } from 'ahooks';
-import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import { renderToContainer } from '../../utils/render-to-container';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
-import { useSpring, animated } from '@react-spring/web';
-import { withNativeProps } from '../../utils/native-props';
+import CenterPopup from '../center-popup';
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true
+  getContainer: null
 };
 export const Dialog = p => {
   const props = mergeProps(defaultProps, p);
-  const unmountedRef = useUnmountedRef();
-  const style = useSpring({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: true
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const [active, setActive] = useState(props.visible);
-  const body = React.createElement("div", {
-    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && React.createElement("div", {
+  const element = React.createElement(React.Fragment, null, !!props.image && React.createElement("div", {
     className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
@@ -85,26 +47,29 @@ export const Dialog = p => {
       })
     })));
   })));
-  const node = withNativeProps(props, React.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, React.createElement(Mask, {
+  return React.createElement(CenterPopup, {
+    className: classNames(cls(), props.className),
+    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,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), React.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: style
-  }, body))));
-  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
+    role: 'dialog',
+    "aria-label": props['aria-label']
+  }, element);
 };
 
 function cls(name = '') {

package/es/components/dialog/show.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from './dialog';
-export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowProps = Omit<DialogProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type DialogShowHandler = {
     close: () => void;
 };

package/es/components/divider/divider.css

@@ -3,7 +3,7 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--adm-border-color);
+  border-color: var(--adm-color-border);
   border-style: solid;
   color: var(--adm-color-weak);
   font-size: 14px;
@@ -35,5 +35,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--adm-border-color);
+  border-left: 1px solid var(--adm-color-border);
 }