@qsxy/element-plus-react 1.0.0-next.1

package/dist/MessageBox/MessageBox.js

@@ -0,0 +1,217 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageBox/MessageBox.tsx
+var MessageBox_exports = {};
+__export(MessageBox_exports, {
+  default: () => MessageBox_default
+});
+module.exports = __toCommonJS(MessageBox_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_isString = __toESM(require("lodash/isString"));
+var import_react = __toESM(require("react"));
+var import_Button = require("../Button");
+var import_Dialog = require("../Dialog");
+var import_hooks = require("../hooks");
+var import_prefix = require("../hooks/prefix");
+var import_Icon = require("../Icon");
+var import_Input = require("../Input");
+var import_Util = require("../Util");
+var MessageBox = (0, import_react.memo)(
+  (0, import_react.forwardRef)((props, ref) => {
+    const { boxType, onAction, options } = props;
+    const {
+      title,
+      message,
+      type,
+      icon,
+      width = 420,
+      callback,
+      showClose = true,
+      beforeClose,
+      showCancelButton = true,
+      showConfirmButton = true,
+      cancelButtonText = "取消",
+      cancelButtonClass,
+      confirmButtonClass,
+      buttonSize,
+      buttonPosition = "right",
+      overflow,
+      showInput,
+      inputType,
+      inputPlaceholder,
+      inputPattern,
+      inputErrorMessage,
+      inputValidator,
+      distinguishCancelAndClose,
+      classPrefix = "message-box",
+      className,
+      style,
+      padding,
+      ...rest
+    } = options;
+    const { e, bm } = (0, import_hooks.useClassNames)(classPrefix);
+    const [visible, setVisible] = (0, import_react.useState)(true);
+    const [confirmButtonLoading, setConfirmButtonLoading] = (0, import_react.useState)(false);
+    const [confirmButtonText, setConfirmButtonText] = (0, import_react.useState)(options.confirmButtonText || "确定");
+    const [inputValue, setInputValue] = (0, import_hooks.useControlled)(options.inputValue);
+    const [editorErrorMessage, setEditorErrorMessage] = (0, import_react.useState)(inputErrorMessage);
+    const [validateError, setValidateError] = (0, import_react.useState)(false);
+    const [transitionProps] = (0, import_hooks.partitionAnimationProps)(rest);
+    const containerRef = (0, import_react.useRef)();
+    const iconContent = (0, import_react.useMemo)(() => {
+      var _a;
+      if ((0, import_Util.isNotEmpty)(icon)) {
+        if ((0, import_isString.default)(icon)) {
+          return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { className: e`status`, name: icon });
+        } else {
+          return (0, import_react.cloneElement)(icon, {
+            ...(icon == null ? void 0 : icon.props) ?? {},
+            className: (0, import_classnames.default)((_a = icon == null ? void 0 : icon.props) == null ? void 0 : _a.className, e`status`)
+          });
+        }
+      } else {
+        switch (type) {
+          case "success":
+            return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { className: (0, import_classnames.default)(e`status`, bm("icon", type)), name: "check" });
+          case "info":
+            return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { className: (0, import_classnames.default)(e`status`, bm("icon", type)), name: "circle-info" });
+          case "warning":
+            return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { className: (0, import_classnames.default)(e`status`, bm("icon", type)), name: "circle-exclamation", prefix: "fas" });
+          case "error":
+            return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { className: (0, import_classnames.default)(e`status`, bm("icon", type)), name: "circle-xmark", prefix: "fas" });
+          default:
+            return null;
+        }
+      }
+    }, [bm, e, icon, type]);
+    const done = (0, import_react.useCallback)(() => {
+      setVisible(false);
+    }, []);
+    const validate = (value) => {
+      if (boxType === "prompt") {
+        if (inputPattern && !inputPattern.test(value || "")) {
+          setEditorErrorMessage(inputErrorMessage);
+          setValidateError(true);
+          return false;
+        }
+        if (typeof inputValidator === "function") {
+          const validateResult = inputValidator(value);
+          if (validateResult === false) {
+            setEditorErrorMessage(inputErrorMessage);
+            setValidateError(true);
+            return false;
+          }
+          if (typeof validateResult === "string") {
+            setEditorErrorMessage(validateResult);
+            setValidateError(true);
+            return false;
+          }
+        }
+      }
+      setEditorErrorMessage("");
+      setValidateError(false);
+      return true;
+    };
+    const handleAction = (action) => {
+      if (boxType === "prompt" && action === "confirm" && !validate(inputValue)) {
+        return;
+      }
+      if (action === "close") {
+        action = distinguishCancelAndClose ? action : "cancel";
+      }
+      if (beforeClose) {
+        beforeClose(
+          action,
+          () => {
+            done();
+            onAction == null ? void 0 : onAction(action, inputValue);
+          },
+          ref
+        );
+      } else {
+        if (props.boxType === "prompt") {
+          callback == null ? void 0 : callback(inputValue, action);
+        } else {
+          callback == null ? void 0 : callback(action);
+        }
+        done();
+        onAction == null ? void 0 : onAction(action, inputValue);
+      }
+    };
+    const messageContainer = (0, import_react.useMemo)(() => {
+      if (typeof message === "string") {
+        if (boxType === "prompt") {
+          return /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: "input" }, message);
+        } else {
+          return /* @__PURE__ */ import_react.default.createElement("p", null, message);
+        }
+      }
+      return message;
+    }, [boxType, message]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      get ref() {
+        return containerRef;
+      },
+      close: done,
+      setConfirmButtonLoading,
+      setConfirmButtonText
+    }));
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Dialog.Dialog,
+      {
+        ref: containerRef,
+        classPrefix,
+        visible,
+        className: (0, import_classnames.default)("is-message-box", className),
+        style: { ...style, [`--${import_prefix.globalKey}-messagebox-width`]: (0, import_Util.addUnit)(width) },
+        modal: true,
+        overflow,
+        showClose,
+        title,
+        beforeClose: () => handleAction("close"),
+        ...transitionProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_Dialog.Dialog.body, { classPrefix, padding }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`container` }, iconContent, /* @__PURE__ */ import_react.default.createElement("div", { className: e`message` }, messageContainer)), boxType === "prompt" && showInput && /* @__PURE__ */ import_react.default.createElement("div", { className: e`input` }, /* @__PURE__ */ import_react.default.createElement(
+        import_Input.Input,
+        {
+          type: inputType,
+          error: validateError,
+          placeholder: inputPlaceholder,
+          onChange: (value) => {
+            setInputValue(value);
+            validate(value);
+          }
+        }
+      ), validateError && /* @__PURE__ */ import_react.default.createElement("div", { className: e`errormsg` }, editorErrorMessage))),
+      (showCancelButton || showConfirmButton) && /* @__PURE__ */ import_react.default.createElement(import_Dialog.Dialog.footer, { classPrefix, position: buttonPosition }, showCancelButton && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { className: cancelButtonClass, size: buttonSize, onClick: () => handleAction("cancel") }, cancelButtonText), showConfirmButton && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { className: confirmButtonClass, type: "primary", size: buttonSize, loading: confirmButtonLoading, onClick: () => handleAction("confirm") }, confirmButtonText))
+    );
+  })
+);
+MessageBox.displayName = "ElMessageBox";
+var MessageBox_default = MessageBox;

package/dist/MessageBox/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MessageBoxData, MessageBoxProps } from './typings';
+export declare const MessageBox: {
+    (options?: MessageBoxProps): Promise<unknown>;
+    alert: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
+    confirm: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
+    prompt: (message: string | React.ReactElement, title: string | React.ReactElement | MessageBoxProps, options: MessageBoxProps) => Promise<MessageBoxData>;
+};
+export type { Action as MessageBoxAction, MessageBoxMethod, MessageBoxProps, MessageBoxRef } from './typings';

package/dist/MessageBox/index.js

@@ -0,0 +1,99 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageBox/index.ts
+var MessageBox_exports = {};
+__export(MessageBox_exports, {
+  MessageBox: () => MessageBox
+});
+module.exports = __toCommonJS(MessageBox_exports);
+var import_Util = require("../Util");
+var import_Main = __toESM(require("./Main"));
+var MESSAGE_BOX_DEFAULT_OPTS = {
+  alert: { closeOnClickModal: false },
+  confirm: { showCancelButton: true },
+  prompt: { showCancelButton: true, showInput: true }
+};
+var instanceFactory = (boxType) => {
+  return (message, title, options) => {
+    const { distinguishCancelAndClose } = options;
+    let titleOrOpts = "";
+    if ((0, import_Util.isObject)(title)) {
+      options = title;
+      titleOrOpts = "";
+    } else if ((0, import_Util.isUndefined)(title)) {
+      titleOrOpts = "";
+    } else {
+      titleOrOpts = title;
+    }
+    return new Promise((resolve, reject) => {
+      new import_Main.default({
+        boxType,
+        options: {
+          message,
+          title: titleOrOpts,
+          ...MESSAGE_BOX_DEFAULT_OPTS[boxType],
+          ...options
+        },
+        onAction: (action, value) => {
+          if (action === "confirm") {
+            resolve(boxType === "prompt" ? { value, action } : action);
+          } else if (action === "cancel") {
+            reject(action);
+          } else if (action === "close") {
+            reject(distinguishCancelAndClose ? action : "cancel");
+          }
+        }
+      });
+    });
+  };
+};
+var MessageBox = (options = {}) => {
+  return new Promise((resolve, reject) => {
+    new import_Main.default({
+      options,
+      boxType: "",
+      onAction: (action) => {
+        if (action === "confirm") {
+          resolve(action);
+        } else if (action === "cancel") {
+          reject(action);
+        } else if (action === "close") {
+          reject((options == null ? void 0 : options.distinguishCancelAndClose) ? action : "cancel");
+        }
+      }
+    });
+  });
+};
+MessageBox.alert = instanceFactory("alert");
+MessageBox.confirm = instanceFactory("confirm");
+MessageBox.prompt = instanceFactory("prompt");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MessageBox
+});

package/dist/MessageBox/typings.d.ts

@@ -0,0 +1,63 @@
+import React, { RefObject } from 'react';
+import { DialogFooterProps, DialogProps } from '../Dialog/typings';
+import { IconName, IconProps } from '../Icon';
+import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
+export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventProps {
+    title?: string | React.ReactElement;
+    message?: string | React.ReactElement;
+    type?: 'success' | 'info' | 'warning' | 'error';
+    icon?: IconName | React.ReactElement<IconProps>;
+    modalClass?: string;
+    width?: DialogProps['width'];
+    callback?: (value: string, action: Action) => any | ((action: Action) => any);
+    showClose?: boolean;
+    closeOnClickModal?: boolean;
+    beforeClose?: (action?: Action, done?: () => void, ref?: RefObject<MessageBoxRef>) => void;
+    showCancelButton?: boolean;
+    showConfirmButton?: boolean;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
+    cancelButtonClass?: string;
+    confirmButtonClass?: string;
+    buttonSize?: TypeAttributes.Size;
+    buttonPosition?: DialogFooterProps['position'];
+    distinguishCancelAndClose?: boolean;
+    padding?: string | number;
+    lockScroll?: boolean;
+    showInput?: boolean;
+    inputPlaceholder?: string;
+    inputType?: string;
+    inputValue?: string;
+    inputPattern?: RegExp;
+    inputValidator?: (value: string) => boolean | string;
+    inputErrorMessage?: string;
+    center?: boolean;
+    draggable?: boolean;
+    overflow?: boolean;
+    roundButton?: boolean;
+}
+export type MessageState = {
+    boxType: '' | 'prompt' | 'alert' | 'confirm';
+    onAction: (action: Action, value?: string) => any;
+    options: MessageBoxProps;
+};
+export type Action = 'confirm' | 'cancel' | 'close';
+export type MessageBoxType = '' | 'prompt' | 'alert' | 'confirm';
+export type MessageBoxData = MessageBoxInputData | Action;
+export interface MessageBoxInputData {
+    value: string;
+    action: Action;
+}
+export type ElMessageBoxShortcutMethod = (((message: MessageBoxProps['message'], title: MessageBoxProps['title'], options?: Omit<MessageBoxProps, 'message' | 'title'>) => Promise<MessageBoxData>) & ((message: MessageBoxProps['message'], options?: Omit<MessageBoxProps, 'message' | 'title'>) => Promise<MessageBoxData>));
+export interface MessageBoxMethod {
+    (options?: MessageBoxProps): Promise<MessageBoxData>;
+    alert: ElMessageBoxShortcutMethod;
+    confirm: ElMessageBoxShortcutMethod;
+    prompt: ElMessageBoxShortcutMethod;
+}
+export interface MessageBoxRef {
+    ref: RefObject<HTMLDivElement>;
+    close: () => void;
+    setConfirmButtonLoading: (value: boolean) => void;
+    setConfirmButtonText: (value: string) => void;
+}

package/dist/MessageBox/typings.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageBox/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/Notification/Main.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { NotificationProps, NotificationRef } from './typings';
+export declare class Main {
+    ref: RefObject<NotificationRef>;
+    constructor(props: NotificationProps);
+    render(props: NotificationProps): void;
+}
+export default Main;

package/dist/Notification/Main.js

@@ -0,0 +1,68 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Notification/Main.tsx
+var Main_exports = {};
+__export(Main_exports, {
+  Main: () => Main,
+  default: () => Main_default
+});
+module.exports = __toCommonJS(Main_exports);
+var import_react = __toESM(require("react"));
+var import_client = require("react-dom/client");
+var import_Notification = __toESM(require("./Notification"));
+var Main = class {
+  constructor(props) {
+    this.ref = (0, import_react.createRef)();
+    this.render(props);
+  }
+  render(props) {
+    const renderDom = document.createDocumentFragment();
+    const root = (0, import_client.createRoot)(renderDom);
+    root.render(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Notification.default,
+        {
+          ...props,
+          afterLeave: () => {
+            setTimeout(() => {
+              root.unmount();
+            }, 200);
+          },
+          key: props.id,
+          ref: this.ref
+        }
+      )
+    );
+  }
+};
+var Main_default = Main;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Main
+});

package/dist/Notification/Notification.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NotificationProps, NotificationRef } from './typings';
+declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<NotificationRef>>;
+export default Notification;

package/dist/Notification/Notification.js

@@ -0,0 +1,150 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Notification/Notification.tsx
+var Notification_exports = {};
+__export(Notification_exports, {
+  default: () => Notification_default
+});
+module.exports = __toCommonJS(Notification_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_Transition = require("../Transition");
+var import_Util = require("../Util");
+var import_Constants = require("../config/Constants");
+var import_hooks = require("../hooks");
+var Notification = (0, import_react.forwardRef)((props, ref) => {
+  const { iconClass, message, position, showClose, type, title, classPrefix = "notification", onClose, duration, onSuccess, afterLeave } = props;
+  const { b, e } = (0, import_hooks.useClassNames)(classPrefix);
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [offset, setOffset] = (0, import_react.useState)(props.offset);
+  const offsetRef = (0, import_react.useRef)(props.offset);
+  const timer = (0, import_react.useRef)(null);
+  const notificationRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const verticalProperty = position.startsWith("top") ? "top" : "bottom";
+  const handleClose = (0, import_react.useCallback)(() => {
+    setVisible(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    get el() {
+      return notificationRef;
+    },
+    get id() {
+      return props.id;
+    },
+    get top() {
+      return offsetRef.current;
+    },
+    close: handleClose,
+    setOffset: (val) => {
+      offsetRef.current = val;
+      setOffset(val);
+    }
+  }));
+  const startTimer = (0, import_react.useCallback)(() => {
+    if (duration > 0) {
+      timer.current = setTimeout(() => {
+        if (visible) {
+          handleClose();
+        }
+      }, duration);
+    }
+  }, [duration, visible, handleClose]);
+  const clearTimer = (0, import_react.useCallback)(() => {
+    clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  const keydown = (0, import_react.useCallback)(
+    ({ code }) => {
+      if (code === import_Constants.EVENT_CODE.delete || code === import_Constants.EVENT_CODE.backspace) {
+        clearTimer();
+      } else if (code === import_Constants.EVENT_CODE.esc) {
+        if (visible) {
+          handleClose();
+        }
+      } else {
+        startTimer();
+      }
+    },
+    [clearTimer, handleClose, startTimer, visible]
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    setVisible(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      startTimer();
+      onSuccess == null ? void 0 : onSuccess(contentRef.current);
+      document.addEventListener("keydown", keydown, false);
+      return () => {
+        document.removeEventListener("keydown", keydown, false);
+      };
+    }
+  }, [visible]);
+  const typeClass = (0, import_react.useMemo)(() => {
+    const _type = !iconClass && type;
+    return _type && import_Constants.TypeMap[_type] ? b(`icon-${import_Constants.TypeMap[_type]}`, false) : "";
+  }, [b, iconClass, type]);
+  const closeIcon = (0, import_react.useMemo)(() => showClose && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`closeBtn`, b("icon-close", false)), onClick: handleClose }), [showClose, e, b, handleClose]);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { name: b("notification-fade", false), visible, display: "flex", afterLeave }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: notificationRef,
+        className: (0, import_classnames.default)(b(), position.indexOf("right") > 1 ? "right" : "left"),
+        style: {
+          [verticalProperty]: offset,
+          zIndex: import_Util.PopupManager.nextZIndex()
+        },
+        onMouseEnter: clearTimer,
+        onMouseLeave: startTimer
+      },
+      (type || iconClass) && /* @__PURE__ */ import_react.default.createElement("i", { className: (0, import_classnames.default)(e`icon`, typeClass, iconClass) }),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`group`, { "is-with-icon": typeClass || iconClass }) }, /* @__PURE__ */ import_react.default.createElement("h2", { className: e`title` }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: e`content`, style: title ? null : { margin: 0 }, ref: contentRef }, /* @__PURE__ */ import_react.default.createElement("p", null, message)), closeIcon)
+    )),
+    document.body
+  );
+});
+Notification.defaultProps = {
+  duration: 4500,
+  // default 4500
+  message: "",
+  onClose: null,
+  onClick: null,
+  afterLeave: null,
+  offset: 0,
+  // defaults 0
+  position: "top-right",
+  // default top-right
+  showClose: true
+};
+Notification.displayName = "ElNotification";
+var Notification_default = Notification;

package/dist/Notification/index.d.ts

@@ -0,0 +1,5 @@
+import type { INotification, NotificationRef, Position } from './typings';
+export declare const Notification: INotification;
+export declare function close(id: string, position: Position, userOnClose?: (vm: NotificationRef) => void): void;
+export declare function closeAll(): void;
+export type { INotification, INotificationHandle, NotificationProps as INotificationOptions } from './typings';