ezr-antd 1.0.0

package/es/message/useMessage.js

@@ -0,0 +1,218 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
+import classNames from 'classnames';
+import { NotificationProvider, useNotification as useRcNotification } from 'rc-notification';
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import { PureContent } from './PurePanel';
+import useStyle from './style';
+import { getMotion, wrapPromiseFn } from './util';
+const DEFAULT_OFFSET = 8;
+const DEFAULT_DURATION = 3;
+const Wrapper = ({
+  children,
+  prefixCls
+}) => {
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+  return wrapCSSVar(/*#__PURE__*/React.createElement(NotificationProvider, {
+    classNames: {
+      list: classNames(hashId, cssVarCls, rootCls)
+    }
+  }, children));
+};
+const renderNotifications = (node, {
+  prefixCls,
+  key
+}) => (/*#__PURE__*/React.createElement(Wrapper, {
+  prefixCls: prefixCls,
+  key: key
+}, node));
+const Holder = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    top,
+    prefixCls: staticPrefixCls,
+    getContainer: staticGetContainer,
+    maxCount,
+    duration = DEFAULT_DURATION,
+    rtl,
+    transitionName,
+    onAllRemoved
+  } = props;
+  const {
+    getPrefixCls,
+    getPopupContainer,
+    message,
+    direction
+  } = React.useContext(ConfigContext);
+  const prefixCls = staticPrefixCls || getPrefixCls('message');
+  // =============================== Style ===============================
+  const getStyle = () => ({
+    left: '50%',
+    transform: 'translateX(-50%)',
+    top: top !== null && top !== void 0 ? top : DEFAULT_OFFSET
+  });
+  const getClassName = () => classNames({
+    [`${prefixCls}-rtl`]: rtl !== null && rtl !== void 0 ? rtl : direction === 'rtl'
+  });
+  // ============================== Motion ===============================
+  const getNotificationMotion = () => getMotion(prefixCls, transitionName);
+  // ============================ Close Icon =============================
+  const mergedCloseIcon = /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-close-x`
+  }, /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: `${prefixCls}-close-icon`
+  }));
+  // ============================== Origin ===============================
+  const [api, holder] = useRcNotification({
+    prefixCls,
+    style: getStyle,
+    className: getClassName,
+    motion: getNotificationMotion,
+    closable: false,
+    closeIcon: mergedCloseIcon,
+    duration,
+    getContainer: () => (staticGetContainer === null || staticGetContainer === void 0 ? void 0 : staticGetContainer()) || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer()) || document.body,
+    maxCount,
+    onAllRemoved,
+    renderNotifications
+  });
+  // ================================ Ref ================================
+  React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, api), {
+    prefixCls,
+    message
+  }));
+  return holder;
+});
+// ==============================================================================
+// ==                                   Hook                                   ==
+// ==============================================================================
+let keyIndex = 0;
+export function useInternalMessage(messageConfig) {
+  const holderRef = React.useRef(null);
+  const warning = devUseWarning('Message');
+  // ================================ API ================================
+  const wrapAPI = React.useMemo(() => {
+    // Wrap with notification content
+    // >>> close
+    const close = key => {
+      var _a;
+      (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.close(key);
+    };
+    // >>> Open
+    const open = config => {
+      if (!holderRef.current) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.') : void 0;
+        const fakeResult = () => {};
+        fakeResult.then = () => {};
+        return fakeResult;
+      }
+      const {
+        open: originOpen,
+        prefixCls,
+        message
+      } = holderRef.current;
+      const noticePrefixCls = `${prefixCls}-notice`;
+      const {
+          content,
+          icon,
+          type,
+          key,
+          className,
+          style,
+          onClose
+        } = config,
+        restConfig = __rest(config, ["content", "icon", "type", "key", "className", "style", "onClose"]);
+      let mergedKey = key;
+      if (mergedKey === undefined || mergedKey === null) {
+        keyIndex += 1;
+        mergedKey = `antd-message-${keyIndex}`;
+      }
+      return wrapPromiseFn(resolve => {
+        originOpen(Object.assign(Object.assign({}, restConfig), {
+          key: mergedKey,
+          content: (/*#__PURE__*/React.createElement(PureContent, {
+            prefixCls: prefixCls,
+            type: type,
+            icon: icon
+          }, content)),
+          placement: 'top',
+          className: classNames(type && `${noticePrefixCls}-${type}`, className, message === null || message === void 0 ? void 0 : message.className),
+          style: Object.assign(Object.assign({}, message === null || message === void 0 ? void 0 : message.style), style),
+          onClose: () => {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            resolve();
+          }
+        }));
+        // Return close function
+        return () => {
+          close(mergedKey);
+        };
+      });
+    };
+    // >>> destroy
+    const destroy = key => {
+      var _a;
+      if (key !== undefined) {
+        close(key);
+      } else {
+        (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+      }
+    };
+    const clone = {
+      open,
+      destroy
+    };
+    const keys = ['info', 'success', 'warning', 'error', 'loading'];
+    keys.forEach(type => {
+      const typeOpen = (jointContent, duration, onClose) => {
+        let config;
+        if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
+          config = jointContent;
+        } else {
+          config = {
+            content: jointContent
+          };
+        }
+        // Params
+        let mergedDuration;
+        let mergedOnClose;
+        if (typeof duration === 'function') {
+          mergedOnClose = duration;
+        } else {
+          mergedDuration = duration;
+          mergedOnClose = onClose;
+        }
+        const mergedConfig = Object.assign(Object.assign({
+          onClose: mergedOnClose,
+          duration: mergedDuration
+        }, config), {
+          type
+        });
+        return open(mergedConfig);
+      };
+      clone[type] = typeOpen;
+    });
+    return clone;
+  }, []);
+  // ============================== Return ===============================
+  return [wrapAPI, /*#__PURE__*/React.createElement(Holder, Object.assign({
+    key: "message-holder"
+  }, messageConfig, {
+    ref: holderRef
+  }))];
+}
+export default function useMessage(messageConfig) {
+  return useInternalMessage(messageConfig);
+}

package/es/message/util.d.ts

@@ -0,0 +1,4 @@
+import type { CSSMotionProps } from 'rc-motion';
+export declare function getMotion(prefixCls: string, transitionName?: string): CSSMotionProps;
+/** Wrap message open with promise like function */
+export declare function wrapPromiseFn(openFn: (resolve: VoidFunction) => VoidFunction): any;

package/es/message/util.js

@@ -0,0 +1,20 @@
+export function getMotion(prefixCls, transitionName) {
+  return {
+    motionName: transitionName !== null && transitionName !== void 0 ? transitionName : `${prefixCls}-move-up`
+  };
+}
+/** Wrap message open with promise like function */
+export function wrapPromiseFn(openFn) {
+  let closeFn;
+  const closePromise = new Promise(resolve => {
+    closeFn = openFn(() => {
+      resolve(true);
+    });
+  });
+  const result = () => {
+    closeFn === null || closeFn === void 0 ? void 0 : closeFn();
+  };
+  result.then = (filled, rejected) => closePromise.then(filled, rejected);
+  result.promise = closePromise;
+  return result;
+}

package/es/modal/ConfirmDialog.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { ThemeConfig } from '../config-provider';
+import type { ModalFuncProps, ModalLocale } from './interface';
+export interface ConfirmDialogProps extends ModalFuncProps {
+    prefixCls: string;
+    afterClose?: () => void;
+    close?: (...args: any[]) => void;
+    /**
+     * `close` prop support `...args` that pass to the developer
+     * that we can not break this.
+     * Provider `onClose` for internal usage
+     */
+    onConfirm?: (confirmed: boolean) => void;
+    autoFocusButton?: null | 'ok' | 'cancel';
+    rootPrefixCls?: string;
+    iconPrefixCls?: string;
+    /**
+     * Only passed by static method
+     */
+    theme?: ThemeConfig;
+    /** @private Internal Usage. Do not override this */
+    locale?: ModalLocale;
+    /**
+     * Do not throw if is await mode
+     */
+    isSilent?: () => boolean;
+}
+export declare function ConfirmContent(props: ConfirmDialogProps & {
+    confirmPrefixCls: string;
+}): React.JSX.Element;
+declare const ConfirmDialogWrapper: React.FC<ConfirmDialogProps>;
+export default ConfirmDialogWrapper;

package/es/modal/ConfirmDialog.js

@@ -0,0 +1,211 @@
+"use client";
+
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import CheckCircleFilled from "@ant-design/icons/es/icons/CheckCircleFilled";
+import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
+import ExclamationCircleFilled from "@ant-design/icons/es/icons/ExclamationCircleFilled";
+import InfoCircleFilled from "@ant-design/icons/es/icons/InfoCircleFilled";
+import classNames from 'classnames';
+import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
+import { getTransitionName } from '../_util/motion';
+import { devUseWarning } from '../_util/warning';
+import ConfigProvider from '../config-provider';
+import { useLocale } from '../locale';
+import useToken from '../theme/useToken';
+import CancelBtn from './components/ConfirmCancelBtn';
+import OkBtn from './components/ConfirmOkBtn';
+import { ModalContextProvider } from './context';
+import Modal from './Modal';
+import Confirm from './style/confirm';
+export function ConfirmContent(props) {
+  const {
+      prefixCls,
+      icon,
+      okText,
+      cancelText,
+      confirmPrefixCls,
+      type,
+      okCancel,
+      footer,
+      // Legacy for static function usage
+      locale: staticLocale
+    } = props,
+    resetProps = __rest(props, ["prefixCls", "icon", "okText", "cancelText", "confirmPrefixCls", "type", "okCancel", "footer", "locale"]);
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Modal');
+    process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`) : void 0;
+  }
+  // Icon
+  let mergedIcon = icon;
+  // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
+  if (!icon && icon !== null) {
+    switch (type) {
+      case 'info':
+        mergedIcon = /*#__PURE__*/React.createElement(InfoCircleFilled, null);
+        break;
+      case 'success':
+        mergedIcon = /*#__PURE__*/React.createElement(CheckCircleFilled, null);
+        break;
+      case 'error':
+        mergedIcon = /*#__PURE__*/React.createElement(CloseCircleFilled, null);
+        break;
+      default:
+        mergedIcon = /*#__PURE__*/React.createElement(ExclamationCircleFilled, null);
+    }
+  }
+  // 默认为 true，保持向下兼容
+  const mergedOkCancel = okCancel !== null && okCancel !== void 0 ? okCancel : type === 'confirm';
+  const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
+  const [locale] = useLocale('Modal');
+  const mergedLocale = staticLocale || locale;
+  // ================== Locale Text ==================
+  const okTextLocale = okText || (mergedOkCancel ? mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.okText : mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.justOkText);
+  const cancelTextLocale = cancelText || (mergedLocale === null || mergedLocale === void 0 ? void 0 : mergedLocale.cancelText);
+  // ================= Context Value =================
+  const btnCtxValue = Object.assign({
+    autoFocusButton,
+    cancelTextLocale,
+    okTextLocale,
+    mergedOkCancel
+  }, resetProps);
+  const btnCtxValueMemo = React.useMemo(() => btnCtxValue, _toConsumableArray(Object.values(btnCtxValue)));
+  // ====================== Footer Origin Node ======================
+  const footerOriginNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CancelBtn, null), /*#__PURE__*/React.createElement(OkBtn, null));
+  const hasTitle = props.title !== undefined && props.title !== null;
+  const bodyCls = `${confirmPrefixCls}-body`;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${confirmPrefixCls}-body-wrapper`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(bodyCls, {
+      [`${bodyCls}-has-title`]: hasTitle
+    })
+  }, mergedIcon, /*#__PURE__*/React.createElement("div", {
+    className: `${confirmPrefixCls}-paragraph`
+  }, hasTitle && /*#__PURE__*/React.createElement("span", {
+    className: `${confirmPrefixCls}-title`
+  }, props.title), /*#__PURE__*/React.createElement("div", {
+    className: `${confirmPrefixCls}-content`
+  }, props.content))), footer === undefined || typeof footer === 'function' ? (/*#__PURE__*/React.createElement(ModalContextProvider, {
+    value: btnCtxValueMemo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${confirmPrefixCls}-btns`
+  }, typeof footer === 'function' ? footer(footerOriginNode, {
+    OkBtn,
+    CancelBtn
+  }) : footerOriginNode))) : footer, /*#__PURE__*/React.createElement(Confirm, {
+    prefixCls: prefixCls
+  }));
+}
+const ConfirmDialog = props => {
+  const {
+    close,
+    zIndex,
+    afterClose,
+    open,
+    keyboard,
+    centered,
+    getContainer,
+    maskStyle,
+    direction,
+    prefixCls,
+    wrapClassName,
+    rootPrefixCls,
+    bodyStyle,
+    closable = false,
+    closeIcon,
+    modalRender,
+    focusTriggerAfterClose,
+    onConfirm,
+    styles
+  } = props;
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Modal');
+    [['visible', 'open'], ['bodyStyle', 'styles.body'], ['maskStyle', 'styles.mask']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+  const confirmPrefixCls = `${prefixCls}-confirm`;
+  const width = props.width || 416;
+  const style = props.style || {};
+  const mask = props.mask === undefined ? true : props.mask;
+  // 默认为 false，保持旧版默认行为
+  const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
+  const classString = classNames(confirmPrefixCls, `${confirmPrefixCls}-${props.type}`, {
+    [`${confirmPrefixCls}-rtl`]: direction === 'rtl'
+  }, props.className);
+  // ========================= zIndex =========================
+  const [, token] = useToken();
+  const mergedZIndex = React.useMemo(() => {
+    if (zIndex !== undefined) {
+      return zIndex;
+    }
+    // Static always use max zIndex
+    return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
+  }, [zIndex, token]);
+  // ========================= Render =========================
+  return /*#__PURE__*/React.createElement(Modal, {
+    prefixCls: prefixCls,
+    className: classString,
+    wrapClassName: classNames({
+      [`${confirmPrefixCls}-centered`]: !!props.centered
+    }, wrapClassName),
+    onCancel: () => {
+      close === null || close === void 0 ? void 0 : close({
+        triggerCancel: true
+      });
+      onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(false);
+    },
+    open: open,
+    title: "",
+    footer: null,
+    transitionName: getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName),
+    maskTransitionName: getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName),
+    mask: mask,
+    maskClosable: maskClosable,
+    style: style,
+    styles: Object.assign({
+      body: bodyStyle,
+      mask: maskStyle
+    }, styles),
+    width: width,
+    zIndex: mergedZIndex,
+    afterClose: afterClose,
+    keyboard: keyboard,
+    centered: centered,
+    getContainer: getContainer,
+    closable: closable,
+    closeIcon: closeIcon,
+    modalRender: modalRender,
+    focusTriggerAfterClose: focusTriggerAfterClose
+  }, /*#__PURE__*/React.createElement(ConfirmContent, Object.assign({}, props, {
+    confirmPrefixCls: confirmPrefixCls
+  })));
+};
+const ConfirmDialogWrapper = props => {
+  const {
+    rootPrefixCls,
+    iconPrefixCls,
+    direction,
+    theme
+  } = props;
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    prefixCls: rootPrefixCls,
+    iconPrefixCls: iconPrefixCls,
+    direction: direction,
+    theme: theme
+  }, /*#__PURE__*/React.createElement(ConfirmDialog, Object.assign({}, props)));
+};
+if (process.env.NODE_ENV !== 'production') {
+  ConfirmDialog.displayName = 'ConfirmDialog';
+  ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
+}
+export default ConfirmDialogWrapper;

package/es/modal/Modal.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { ModalProps } from './interface';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/es/modal/Modal.js

@@ -0,0 +1,158 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
+import classNames from 'classnames';
+import Dialog from 'rc-dialog';
+import ContextIsolator from '../_util/ContextIsolator';
+import useClosable, { pickClosable } from '../_util/hooks/useClosable';
+import { useZIndex } from '../_util/hooks/useZIndex';
+import { getTransitionName } from '../_util/motion';
+import { canUseDocElement } from '../_util/styleChecker';
+import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
+import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import Skeleton from '../skeleton';
+import { usePanelRef } from '../watermark/context';
+import { Footer, renderCloseIcon } from './shared';
+import useStyle from './style';
+let mousePosition;
+// ref: https://github.com/ant-design/ant-design/issues/15795
+const getClickPosition = e => {
+  mousePosition = {
+    x: e.pageX,
+    y: e.pageY
+  };
+  // 100ms 内发生过点击事件，则从点击位置动画展示
+  // 否则直接 zoom 展示
+  // 这样可以兼容非点击方式展开
+  setTimeout(() => {
+    mousePosition = null;
+  }, 100);
+};
+// 只有点击事件支持从鼠标位置动画展开
+if (canUseDocElement()) {
+  document.documentElement.addEventListener('click', getClickPosition, true);
+}
+const Modal = props => {
+  var _a;
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    direction,
+    modal: modalContext
+  } = React.useContext(ConfigContext);
+  const handleCancel = e => {
+    const {
+      onCancel
+    } = props;
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel(e);
+  };
+  const handleOk = e => {
+    const {
+      onOk
+    } = props;
+    onOk === null || onOk === void 0 ? void 0 : onOk(e);
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Modal');
+    [['visible', 'open'], ['bodyStyle', 'styles.body'], ['maskStyle', 'styles.mask']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+  const {
+      prefixCls: customizePrefixCls,
+      className,
+      rootClassName,
+      open,
+      wrapClassName,
+      centered,
+      getContainer,
+      focusTriggerAfterClose = true,
+      style,
+      // Deprecated
+      visible,
+      width = 520,
+      footer,
+      classNames: modalClassNames,
+      styles: modalStyles,
+      children,
+      loading
+    } = props,
+    restProps = __rest(props, ["prefixCls", "className", "rootClassName", "open", "wrapClassName", "centered", "getContainer", "focusTriggerAfterClose", "style", "visible", "width", "footer", "classNames", "styles", "children", "loading"]);
+  const prefixCls = getPrefixCls('modal', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+  // Style
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+  const wrapClassNameExtended = classNames(wrapClassName, {
+    [`${prefixCls}-centered`]: !!centered,
+    [`${prefixCls}-wrap-rtl`]: direction === 'rtl'
+  });
+  const dialogFooter = footer !== null && !loading ? (/*#__PURE__*/React.createElement(Footer, Object.assign({}, props, {
+    onOk: handleOk,
+    onCancel: handleCancel
+  }))) : null;
+  const [mergedClosable, mergedCloseIcon, closeBtnIsDisabled] = useClosable(pickClosable(props), pickClosable(modalContext), {
+    closable: true,
+    closeIcon: /*#__PURE__*/React.createElement(CloseOutlined, {
+      className: `${prefixCls}-close-icon`
+    }),
+    closeIconRender: icon => renderCloseIcon(prefixCls, icon)
+  });
+  // ============================ Refs ============================
+  // Select `ant-modal-content` by `panelRef`
+  const panelRef = usePanelRef(`.${prefixCls}-content`);
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Modal', restProps.zIndex);
+  // =========================== Render ===========================
+  return wrapCSSVar(/*#__PURE__*/React.createElement(ContextIsolator, {
+    form: true,
+    space: true
+  }, /*#__PURE__*/React.createElement(zIndexContext.Provider, {
+    value: contextZIndex
+  }, /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    width: width
+  }, restProps, {
+    zIndex: zIndex,
+    getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
+    prefixCls: prefixCls,
+    rootClassName: classNames(hashId, rootClassName, cssVarCls, rootCls),
+    footer: dialogFooter,
+    visible: open !== null && open !== void 0 ? open : visible,
+    mousePosition: (_a = restProps.mousePosition) !== null && _a !== void 0 ? _a : mousePosition,
+    onClose: handleCancel,
+    closable: mergedClosable ? {
+      disabled: closeBtnIsDisabled,
+      closeIcon: mergedCloseIcon
+    } : mergedClosable,
+    closeIcon: mergedCloseIcon,
+    focusTriggerAfterClose: focusTriggerAfterClose,
+    transitionName: getTransitionName(rootPrefixCls, 'zoom', props.transitionName),
+    maskTransitionName: getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName),
+    className: classNames(hashId, className, modalContext === null || modalContext === void 0 ? void 0 : modalContext.className),
+    style: Object.assign(Object.assign({}, modalContext === null || modalContext === void 0 ? void 0 : modalContext.style), style),
+    classNames: Object.assign(Object.assign(Object.assign({}, modalContext === null || modalContext === void 0 ? void 0 : modalContext.classNames), modalClassNames), {
+      wrapper: classNames(wrapClassNameExtended, modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.wrapper)
+    }),
+    styles: Object.assign(Object.assign({}, modalContext === null || modalContext === void 0 ? void 0 : modalContext.styles), modalStyles),
+    panelRef: panelRef
+  }), loading ? (/*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    title: false,
+    paragraph: {
+      rows: 4
+    },
+    className: `${prefixCls}-body-skeleton`
+  })) : children))));
+};
+export default Modal;

package/es/modal/PurePanel.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { PanelProps } from 'rc-dialog/lib/Dialog/Content/Panel';
+import type { ModalFuncProps } from './interface';
+export interface PurePanelProps extends Omit<PanelProps, 'prefixCls' | 'footer'>, Pick<ModalFuncProps, 'type' | 'footer'> {
+    prefixCls?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: (props: PurePanelProps) => React.JSX.Element;
+export default _default;