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

package/es/components/calendar/calendar.css

@@ -17,7 +17,7 @@
   transform: rotate(180deg);
 }
 .adm-calendar .adm-calendar-header .adm-calendar-title {
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   flex: auto;
   text-align: center;
 }
@@ -71,13 +71,16 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
 }
 .adm-calendar-cell .adm-calendar-cell-bottom {
   flex: none;
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   height: 12px;
   line-height: 12px;
   color: var(--adm-color-weak);
@@ -87,10 +90,10 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
   height: 45px;
   box-sizing: border-box;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   padding: 0 8px;
 }
 .adm-calendar-mark .adm-calendar-mark-cell {

package/es/components/calendar/calendar.d.ts

@@ -4,7 +4,7 @@ declare type Page = {
     month: number;
     year: number;
 };
-export declare type CalenderRef = {
+export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
 };
@@ -15,10 +15,11 @@ export declare type CalendarProps = {
     nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
-    renderLabel?: (date: Date) => string | null | undefined;
+    renderLabel?: (date: Date) => React.ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;
@@ -35,5 +36,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
 export {};

package/es/components/calendar/calendar.js

@@ -125,10 +125,10 @@ export const Calendar = forwardRef((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = !inThisMonth || maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(React.createElement("div", {
         key: d.valueOf(),
-        className: classNames(`${classPrefix}-cell`, disabled && `${classPrefix}-cell-disabled`, inThisMonth && {
+        className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
           [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
           [`${classPrefix}-cell-selected`]: isSelect,
           [`${classPrefix}-cell-selected-begin`]: isBegin,
@@ -196,8 +196,8 @@ export const Calendar = forwardRef((p, ref) => {
   }, renderCells());
   const mark = React.createElement("div", {
     className: `${classPrefix}-mark`
-  }, markItems.map(item => React.createElement("div", {
-    key: item,
+  }, markItems.map((item, index) => React.createElement("div", {
+    key: index,
     className: `${classPrefix}-mark-cell`
   }, item)));
   return withNativeProps(props, React.createElement("div", {

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

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps, CalenderRef } from './calendar';
+export type { CalendarProps, CalendarRef } from './calendar';
 export default Calendar;

package/es/components/capsule-tabs/capsule-tabs.css

@@ -5,7 +5,7 @@
 .adm-capsule-tabs-header {
   position: relative;
   padding: 12px 6px;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-capsule-tabs-tab-list {
   display: flex;
@@ -29,13 +29,13 @@
   margin: 0 auto;
   border-radius: 20px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-capsule-tabs-tab-active {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-capsule-tabs-tab-disabled {
@@ -45,20 +45,3 @@
 .adm-capsule-tabs-content {
   padding: 12px;
 }
-.adm-capsule-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-capsule-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-capsule-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}

package/es/components/card/card.css

@@ -1,5 +1,5 @@
 .adm-card {
-  background: #ffffff;
+  background: var(--adm-color-background);
   border-radius: 8px;
   padding: 0 12px;
 }
@@ -12,10 +12,10 @@
   padding: 12px 0;
 }
 .adm-card-header:not(:last-child) {
-  border-bottom: solid 0.5px var(--adm-border-color);
+  border-bottom: solid 0.5px var(--adm-color-border);
 }
 .adm-card-header-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
   font-weight: bold;
 }

package/es/components/cascader/cascader.css

@@ -13,13 +13,13 @@
   padding: 6px 8px;
 }
 .adm-cascader-header-button {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   display: inline-block;
   padding: 4px 4px;
 }
 .adm-cascader-header-title {
   padding: 4px 4px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

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

@@ -1,7 +1,13 @@
-import { ReactNode, FC } from 'react';
+import React, { ReactNode } from 'react';
 import { PopupProps } from '../popup';
 import { CascaderValue, CascaderValueExtend, CascaderOption } from '../cascader-view';
 import { NativeProps } from '../../utils/native-props';
+export declare type CascaderActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export declare type CascaderRef = CascaderActions;
 export declare type CascaderProps = {
     options: CascaderOption[];
     value?: CascaderValue[];
@@ -15,6 +21,28 @@ export declare type CascaderProps = {
     title?: ReactNode;
     confirmText?: ReactNode;
     cancelText?: ReactNode;
-    children?: (items: (CascaderOption | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
-export declare const Cascader: FC<CascaderProps>;
+    children?: (items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode;
+    onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
+export declare const Cascader: React.ForwardRefExoticComponent<{
+    options: CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: CascaderValue[], extend: CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: ReactNode;
+} & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CascaderActions>>;

package/es/components/cascader/cascader.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import Popup from '../popup';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
@@ -8,9 +8,11 @@ import { useConfig } from '../config-provider';
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend';
 const classPrefix = `adm-cascader`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  destroyOnClose: true,
+  forceRender: false
 };
-export const Cascader = p => {
+export const Cascader = forwardRef((p, ref) => {
   var _a;
 
   const {
@@ -21,6 +23,29 @@ export const Cascader = p => {
     cancelText: locale.common.cancel,
     placeholder: locale.Cascader.placeholder
   }, p);
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;
@@ -31,12 +56,12 @@ export const Cascader = p => {
   const generateValueExtend = useCascaderValueExtend(props.options);
   const [innerValue, setInnerValue] = useState(value);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
-  }, [props.visible]);
+  }, [visible]);
   useEffect(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
   }, [value]);
@@ -47,20 +72,18 @@ export const Cascader = p => {
   }, React.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     }
   }, props.cancelText), React.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), React.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a;
-
-      setValue(innerValue);
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setValue(innerValue, true);
+      setVisible(false);
     }
   }, props.confirmText)), React.createElement("div", {
     className: `${classPrefix}-body`
@@ -71,26 +94,27 @@ export const Cascader = p => {
 
       setInnerValue(val);
 
-      if (props.visible) {
+      if (visible) {
         (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
       }
     }
   })))));
   const popupElement = React.createElement(Popup, {
-    visible: props.visible,
+    visible: visible,
     position: 'bottom',
     onMaskClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     stopPropagation: props.stopPropagation
   }, cascaderElement);
-  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
-};
+  return React.createElement(React.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items, actions));
+});

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

@@ -1,9 +1,29 @@
 /// <reference types="react" />
 import { prompt } from './prompt';
 import './cascader.less';
-export type { CascaderProps } from './cascader';
+export type { CascaderProps, CascaderRef, CascaderActions } from './cascader';
 export type { CascaderValue, CascaderValueExtend, CascaderOption, } from '../cascader-view';
-declare const _default: import("react").FC<import("./cascader").CascaderProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    options: import("../cascader-view").CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../cascader-view").CascaderOption | null)[], actions: import("./cascader").CascaderActions) => import("react").ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: import("react").ReactNode;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./cascader").CascaderActions>> & {
     prompt: typeof prompt;
     optionSkeleton: import("../cascader-view").CascaderOption[];
 };

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

@@ -2,7 +2,7 @@
   --height: auto;
 }
 .adm-cascader-view-tabs.adm-tabs {
-  --title-font-size: 14px;
+  --title-font-size: var(--adm-font-size-6);
   --content-padding: none;
 }
 .adm-cascader-view-header-title {
@@ -21,7 +21,7 @@
   --border-top: none;
 }
 .adm-cascader-view-item {
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-cascader-view-item-active {
   color: var(--adm-color-primary);

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CascaderValue = string;
 export declare type CascaderOption = {
@@ -17,5 +17,7 @@ export declare type CascaderViewProps = {
     defaultValue?: CascaderValue[];
     onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
     placeholder?: string;
+    onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

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

@@ -9,6 +9,7 @@ import { useCascaderValueExtend } from './use-cascader-value-extend';
 import { useConfig } from '../config-provider';
 import { optionSkeleton } from './option-skeleton';
 import Skeleton from '../skeleton';
+import { useUpdateEffect } from 'ahooks';
 const classPrefix = `adm-cascader-view`;
 const defaultProps = {
   defaultValue: []
@@ -27,7 +28,12 @@ export const CascaderView = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const [tabActiveKey, setTabActiveKey] = useState(0);
+  const [tabActiveIndex, setTabActiveIndex] = useState(0);
+  useUpdateEffect(() => {
+    var _a;
+
+    (_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, tabActiveIndex);
+  }, [tabActiveIndex]);
   const generateValueExtend = useCascaderValueExtend(props.options);
   const levels = useMemo(() => {
     const ret = [];
@@ -59,15 +65,15 @@ export const CascaderView = p => {
     return ret;
   }, [value, props.options]);
   useEffect(() => {
-    setTabActiveKey(levels.length - 1);
+    setTabActiveIndex(levels.length - 1);
   }, [value]);
   useEffect(() => {
     const max = levels.length - 1;
 
-    if (tabActiveKey > max) {
-      setTabActiveKey(max);
+    if (tabActiveIndex > max) {
+      setTabActiveIndex(max);
     }
-  }, [tabActiveKey, levels]);
+  }, [tabActiveIndex, levels]);
 
   const onItemSelect = (selectValue, depth) => {
     const next = value.slice(0, depth);
@@ -82,14 +88,17 @@ export const CascaderView = p => {
   return withNativeProps(props, React.createElement("div", {
     className: classPrefix
   }, React.createElement(Tabs, {
-    activeKey: tabActiveKey.toString(),
-    onChange: key => setTabActiveKey(parseInt(key)),
+    activeKey: tabActiveIndex.toString(),
+    onChange: key => {
+      const activeIndex = parseInt(key);
+      setTabActiveIndex(activeIndex);
+    },
     stretch: false,
     className: `${classPrefix}-tabs`
   }, levels.map((level, index) => {
     const selected = level.selected;
     return React.createElement(Tabs.Tab, {
-      key: index,
+      key: index.toString(),
       title: React.createElement("div", {
         className: `${classPrefix}-header-title`
       }, selected ? selected.label : props.placeholder),
@@ -112,7 +121,8 @@ export const CascaderView = p => {
       animated: true
     })) : React.createElement(CheckList, {
       value: [value[index]],
-      onChange: selectValue => onItemSelect(selectValue[0], index)
+      onChange: selectValue => onItemSelect(selectValue[0], index),
+      activeIcon: props.activeIcon
     }, level.options.map(option => {
       const active = value[index] === option.value;
       return React.createElement(CheckList.Item, {

package/es/components/cascader-view/use-cascader-value-extend.js

@@ -23,21 +23,12 @@ export function useCascaderValueExtend(options) {
   }, [options]);
   const generateIsLeaf = useMemo(() => {
     return memoize(val => {
-      var _a;
+      const children = val.reduce((currentOptions, v) => {
+        var _a;
 
-      let isLeaf = false;
-
-      for (const v of val) {
-        const target = options.find(option => option.value === v);
-
-        if (!target) {
-          break;
-        }
-
-        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
-      }
-
-      return isLeaf;
+        return ((_a = currentOptions.find(option => option.value === v)) === null || _a === void 0 ? void 0 : _a.children) || [];
+      }, options);
+      return children.length === 0;
     }, val => JSON.stringify(val));
   }, [options]);
 

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

@@ -0,0 +1,36 @@
+.adm-center-popup {
+  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-center-popup-border-radius, 8px);
+  --max-width: var(--adm-center-popup-max-width, 75vw);
+  --min-width: var(--adm-center-popup-min-width, 280px);
+  --z-index: var(--adm-center-popup-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-center-popup .adm-center-popup-mask {
+  z-index: 0;
+}
+.adm-center-popup-wrap {
+  position: fixed;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  transform: translate(-50%, -50%);
+}
+.adm-center-popup-body {
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+}
+.adm-center-popup-close {
+  position: absolute;
+  z-index: 100;
+  right: 8px;
+  top: 8px;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  color: var(--adm-color-weak);
+}

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

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PopupBaseProps } from '../popup/popup-base-props';
+export declare type CenterPopupProps = PopupBaseProps & PropsWithChildren<{
+    role?: string;
+}> & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
+export declare const CenterPopup: FC<CenterPopupProps>;

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

@@ -0,0 +1,99 @@
+import React, { useRef, useState } from 'react';
+import { renderToContainer } from '../../utils/render-to-container';
+import Mask from '../mask';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import { mergeProps } from '../../utils/with-default-props';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
+import { animated, useSpring } from '@react-spring/web';
+import { useInnerVisible } from '../../utils/use-inner-visible';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { ShouldRender } from '../../utils/should-render';
+import { useLockScroll } from '../../utils/use-lock-scroll';
+import { CloseOutline } from 'antd-mobile-icons';
+import { defaultPopupBaseProps } from '../popup/popup-base-props';
+const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
+  getContainer: null
+});
+export const CenterPopup = 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
+    },
+    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);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = useRef(null);
+  useLockScroll(ref, props.disableBodyScroll && active);
+  const maskVisible = useInnerVisible(active && props.visible);
+  const body = React.createElement("div", {
+    className: classNames('adm-center-popup-body', props.bodyClassName),
+    style: props.bodyStyle
+  }, props.children);
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+    className: 'adm-center-popup',
+    style: {
+      display: active ? undefined : 'none',
+      pointerEvents: active ? undefined : 'none'
+    }
+  }, props.mask && React.createElement(Mask, {
+    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);
+      }
+    },
+    style: props.maskStyle,
+    className: classNames('adm-center-popup-mask', props.maskClassName),
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), React.createElement("div", {
+    className: 'adm-center-popup-wrap',
+    role: props.role,
+    "aria-label": props['aria-label']
+  }, React.createElement(animated.div, {
+    style: style,
+    ref: ref
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames('adm-center-popup-close', 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, React.createElement(CloseOutline, null)), body)))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
+};