@rainbow-oh/yee-c 0.8.1 → 0.8.3

package/dist/cjs/message/wrapper.js

@@ -54,11 +54,17 @@ var import_react = __toESM(require("react"));
 var import_client = require("react-dom/client");
 var import_message_list = __toESM(require("./message-list"));
 var import_use_message = __toESM(require("./use-message"));
+var noop = () => {
+};
 var MessageWrapper = class {
   constructor() {
     this.root = null;
     this.messages = [];
     this.container = null;
+    this.generationByKey = /* @__PURE__ */ new Map();
+    this.generation = 0;
+    this.timerGeneration = 0;
+    this.destroy = this.destroy.bind(this);
   }
   createContainer() {
     if (!this.container) {
@@ -87,8 +93,12 @@ var MessageWrapper = class {
     this.root = null;
     this.cleanupContainer();
     this.messages = [];
+    this.generationByKey.clear();
   }
   render() {
+    if (typeof document === "undefined") {
+      return;
+    }
     if (this.messages.length === 0) {
       if (this.root) {
         this.root.unmount();
@@ -102,55 +112,75 @@ var MessageWrapper = class {
       this.root = (0, import_client.createRoot)(container);
     }
     this.root.render(
-      /* @__PURE__ */ import_react.default.createElement(import_message_list.default, { items: this.messages, onDestroy: this.destroy.bind(this) })
+      /* @__PURE__ */ import_react.default.createElement(import_message_list.default, { items: this.messages, onDestroy: this.destroy })
     );
   }
   show(params) {
-    if (!params.key) {
-      params.key = this.uuid();
+    var _a, _b;
+    if (typeof document === "undefined") {
+      return noop;
     }
-    const isExit = this.messages.find((item) => item.key === params.key);
-    if (isExit) {
-      this.messages = this.messages.map((item) => {
-        if (item.key === params.key) {
-          return params;
-        }
-        return item;
-      });
+    const key = (_a = params.key) != null ? _a : this.uuid();
+    const keyGeneration = (_b = this.generationByKey.get(key)) != null ? _b : this.generation++;
+    this.generationByKey.set(key, keyGeneration);
+    const nextMessage = __spreadProps(__spreadValues({}, params), {
+      key,
+      timerGeneration: this.timerGeneration++
+    });
+    const exists = this.messages.some((item) => item.key === key);
+    if (exists) {
+      this.messages = this.messages.map(
+        (item) => item.key === key ? nextMessage : item
+      );
     } else {
-      this.messages.push(params);
+      this.messages = [...this.messages, nextMessage];
     }
     this.render();
+    return () => {
+      if (this.generationByKey.get(key) === keyGeneration) {
+        this.destroy(key);
+      }
+    };
   }
-  destroy(key) {
+  destroy(key, expectedTimerGeneration) {
+    var _a;
+    const target = this.messages.find((item) => item.key === key);
+    if (expectedTimerGeneration !== void 0 && (target == null ? void 0 : target.timerGeneration) !== expectedTimerGeneration) {
+      return;
+    }
+    if (!target) {
+      return;
+    }
+    this.generationByKey.delete(key);
     this.messages = this.messages.filter((item) => item.key !== key);
     this.render();
+    (_a = target.onClose) == null ? void 0 : _a.call(target);
   }
   open(params) {
-    this.show(typeof params === "string" ? { content: params } : params);
+    return this.show(typeof params === "string" ? { content: params } : params);
   }
   info(params) {
-    this.show(
+    return this.show(
       typeof params === "string" ? { status: "info", content: params } : __spreadProps(__spreadValues({}, params), { status: "info" })
     );
   }
   success(params) {
-    this.show(
+    return this.show(
       typeof params === "string" ? { status: "success", content: params } : __spreadProps(__spreadValues({}, params), { status: "success" })
     );
   }
   warning(params) {
-    this.show(
+    return this.show(
       typeof params === "string" ? { status: "warning", content: params } : __spreadProps(__spreadValues({}, params), { status: "warning" })
     );
   }
   error(params) {
-    this.show(
+    return this.show(
       typeof params === "string" ? { status: "error", content: params } : __spreadProps(__spreadValues({}, params), { status: "error" })
     );
   }
   loading(params) {
-    this.show(
+    return this.show(
       typeof params === "string" ? { status: "loading", content: params } : __spreadProps(__spreadValues({}, params), { status: "loading" })
     );
   }

package/dist/cjs/notice/index.d.ts

@@ -1,5 +1,5 @@
 import { notice } from './wrapper';
-export type { NoticeConfig } from './interface';
+export type { NoticeApi, NoticeClose, NoticeConfig, PlacementType, } from './interface';
 export * from './notice-provider';
 export { default as useNotice } from './use-notice';
 export default notice;

package/dist/cjs/notice/interface.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
+export type PlacementType = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
 export type NoticeConfig = {
-    /**
-     * test identifier
-     */
-    'data-testid'?: string;
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
     /**
      * Custom prefix class name
      */
@@ -25,7 +23,7 @@ export type NoticeConfig = {
      */
     content: React.ReactNode;
     /**
-     * Auto close time (ms), 0 means no auto close
+     * Auto close time (milliseconds), 0 means no auto close
      * @default 4500
      */
     duration?: number;
@@ -41,7 +39,7 @@ export type NoticeConfig = {
      * Display position
      * @default 'topRight'
      */
-    placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+    placement?: PlacementType;
     /**
      * Whether to show progress bar
      */
@@ -64,15 +62,27 @@ export type NoticeConfig = {
      */
     closable?: boolean;
 };
+export type NoticeClose = () => void;
+export interface NoticeApi {
+    open: (config: string | NoticeConfig) => NoticeClose;
+    info: (config: string | NoticeConfig) => NoticeClose;
+    success: (config: string | NoticeConfig) => NoticeClose;
+    warning: (config: string | NoticeConfig) => NoticeClose;
+    error: (config: string | NoticeConfig) => NoticeClose;
+    destroy: (key: string | number) => void;
+    clear: (placement?: PlacementType) => void;
+}
 export type WrapperedNoticeConfig = NoticeConfig & {
     status?: 'info' | 'success' | 'warning' | 'error';
 };
 export type NoticeType = WrapperedNoticeConfig & {
     key: string | number;
+    placement: PlacementType;
+    timerGeneration: number;
 };
 export interface NoticeProps extends NoticeType {
     /**
      * Destroy component callback
      */
-    onDestroy?: (key: string | number) => void;
+    onDestroy?: (key: string | number, timerGeneration?: number) => void;
 }

package/dist/cjs/notice/notice-list.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { NoticeProps } from './interface';
+import type { NoticeProps, PlacementType } from './interface';
 import './style/index.less';
 declare const NoticeList: ({ items, placement, onDestroy, }: {
     items: NoticeProps[];
-    placement?: "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | undefined;
-    onDestroy: (key: string | number) => void;
+    placement?: PlacementType | undefined;
+    onDestroy: (key: string | number, timerGeneration?: number) => void;
 }) => React.JSX.Element | null;
 export default NoticeList;

package/dist/cjs/notice/notice-provider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import type { NoticeApi } from './interface';
 export declare function NoticeProvider({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
-export declare function useGlobalNotice(): any;
+export declare function useGlobalNotice(): NoticeApi;

package/dist/cjs/notice/notice-provider.js

@@ -35,7 +35,7 @@ __export(notice_provider_exports, {
 module.exports = __toCommonJS(notice_provider_exports);
 var import_react = __toESM(require("react"));
 var import_use_notice = __toESM(require("./use-notice"));
-var NoticeContext = (0, import_react.createContext)({});
+var NoticeContext = (0, import_react.createContext)(void 0);
 function NoticeProvider({ children }) {
   const { noticeApi, noticeHolders } = (0, import_use_notice.default)();
   return /* @__PURE__ */ import_react.default.createElement(NoticeContext.Provider, { value: noticeApi }, noticeHolders, children);

package/dist/cjs/notice/notice.js

@@ -66,16 +66,19 @@ var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_Progress = __toESM(require("../Progress"));
 var import_useCountdown = __toESM(require("../hooks/useCountdown"));
+var import_Button = __toESM(require("../Button"));
 var icons = {
-  info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 20, strokeWidth: 2 }),
-  success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size: 20, strokeWidth: 2 }),
-  warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 20, strokeWidth: 2 }),
-  error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 20, strokeWidth: 2 })
+  info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
+  error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 })
 };
 var Notice = (props) => {
   const _a = props, {
     prefixCls = "yee-notice",
     id: key,
+    timerGeneration,
+    placement,
     status,
     title,
     content,
@@ -93,6 +96,8 @@ var Notice = (props) => {
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "id",
+    "timerGeneration",
+    "placement",
     "status",
     "title",
     "content",
@@ -108,52 +113,90 @@ var Notice = (props) => {
     "onDestroy",
     "data-testid"
   ]);
-  const { remaining, onPause, onResume } = (0, import_useCountdown.default)({
+  const isHoveredRef = import_react.default.useRef(false);
+  const { remaining, isPaused, onPause, onResume } = (0, import_useCountdown.default)({
     duration,
+    resetKey: timerGeneration,
     onComplete: () => {
-      onDestroy == null ? void 0 : onDestroy(key);
-      onClose == null ? void 0 : onClose();
+      onDestroy == null ? void 0 : onDestroy(key, timerGeneration);
     }
   });
-  const handleClose = (e) => {
-    e.stopPropagation();
-    onDestroy == null ? void 0 : onDestroy(key);
-    onClose == null ? void 0 : onClose();
+  import_react.default.useEffect(() => {
+    if (pauseOnHover && isHoveredRef.current && !isPaused) {
+      onPause();
+    } else if ((!pauseOnHover || !isHoveredRef.current) && isPaused) {
+      onResume();
+    }
+  }, [isPaused, onPause, onResume, pauseOnHover]);
+  const handleMouseEnter = () => {
+    isHoveredRef.current = true;
+    if (pauseOnHover) {
+      onPause();
+    }
+  };
+  const handleMouseLeave = () => {
+    isHoveredRef.current = false;
+    if (isPaused) {
+      onResume();
+    }
+  };
+  const handleClose = (event) => {
+    event.stopPropagation();
+    onDestroy == null ? void 0 : onDestroy(key, timerGeneration);
+  };
+  const handleKeyDown = (event) => {
+    if (!onClick || event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    event.preventDefault();
+    onClick();
   };
   const renderIcon = () => {
     if (!icon && !status) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
+    return /* @__PURE__ */ import_react.default.createElement("span", { "aria-hidden": "true", className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
   };
   const renderCloseButton = () => {
     if (!closable) {
       return null;
     }
     return /* @__PURE__ */ import_react.default.createElement(
-      "button",
+      import_Button.default,
       {
+        variant: "text",
+        size: "small",
         className: `${prefixCls}-close`,
         onClick: handleClose,
-        type: "button",
-        "aria-label": "Close"
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14, strokeWidth: 2 })
+        "aria-label": "Close notice",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { "aria-hidden": "true", size: 14, strokeWidth: 2 })
+      }
     );
   };
+  const isAssertive = status === "error" || status === "warning";
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "aria-atomic": "true",
+      "aria-live": isAssertive ? "assertive" : "polite",
+      role: onClick ? "button" : isAssertive ? "alert" : "status",
+      tabIndex: onClick ? 0 : void 0,
+      "data-placement": placement,
       "data-testid": dataTestId,
       className: (0, import_clsx.default)(
         prefixCls,
-        { [`${prefixCls}-${status}`]: status },
+        {
+          [`${prefixCls}-${status}`]: status,
+          [`${prefixCls}-clickable`]: onClick,
+          [`${prefixCls}-closable`]: closable
+        },
         className
       ),
       style,
       onClick,
-      onMouseEnter: pauseOnHover ? onPause : void 0,
-      onMouseLeave: pauseOnHover ? onResume : void 0
+      onKeyDown: handleKeyDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
     }),
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content-wrapper` }, renderIcon(), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-description` }, content))),
     showProgress && duration > 0 && remaining > 0 && /* @__PURE__ */ import_react.default.createElement(

package/dist/cjs/notice/style/index.less

@@ -12,7 +12,7 @@
   background-color: var(--yee-notice-bg-color);
   border-radius: var(--yee-notice-border-radius);
   box-shadow: var(--yee-notice-box-shadow);
-  cursor: pointer;
+  cursor: default;
   transition: all 0.3s ease;
   border: var(--yee-notice-border-width) solid transparent;
   overflow: hidden;
@@ -21,6 +21,18 @@
     box-shadow: var(--yee-notice-box-shadow-hover);
   }
 
+  &-clickable {
+    cursor: pointer;
+  }
+
+  &-closable {
+    @{pls}-content-wrapper {
+      padding-right: calc(
+        var(--yee-notice-close-size) + var(--yee-notice-close-right)
+      );
+    }
+  }
+
   &-content-wrapper {
     display: flex;
     align-items: flex-start;

package/dist/cjs/notice/use-notice.d.ts

@@ -1,16 +1,7 @@
 import React from 'react';
-import { NoticeConfig } from './interface';
-type PlacementType = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'top' | 'bottom';
+import { NoticeApi } from './interface';
 declare const useNotice: () => {
-    noticeApi: {
-        open: (props: string | NoticeConfig) => void;
-        success: (props: string | NoticeConfig) => void;
-        error: (props: string | NoticeConfig) => void;
-        warning: (props: string | NoticeConfig) => void;
-        info: (props: string | NoticeConfig) => void;
-        destroy: (key: string | number) => void;
-        clear: (placement?: PlacementType) => void;
-    };
+    noticeApi: NoticeApi;
     noticeHolders: React.ReactPortal[];
 };
 export default useNotice;

package/dist/cjs/notice/use-notice.js

@@ -52,85 +52,170 @@ module.exports = __toCommonJS(use_notice_exports);
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_notice_list = __toESM(require("./notice-list"));
+var invokeOnClose = (notices) => {
+  const errors = [];
+  notices.forEach((notice) => {
+    var _a;
+    try {
+      (_a = notice.onClose) == null ? void 0 : _a.call(notice);
+    } catch (error) {
+      errors.push(error);
+    }
+  });
+  errors.forEach((error) => {
+    const reportError = globalThis.reportError;
+    if (reportError) {
+      reportError(error);
+    } else {
+      console.error(error);
+    }
+  });
+};
 var useNotice = () => {
   const [noticesByPlacement, setNoticesByPlacement] = (0, import_react.useState)(/* @__PURE__ */ new Map());
-  const count = (0, import_react.useRef)(0);
-  const add = (0, import_react.useCallback)((props) => {
-    const placement = props.placement || "topRight";
-    const id = count.current++;
-    setNoticesByPlacement((prev) => {
-      const newMap = new Map(prev);
-      const notices = newMap.get(placement) || [];
-      newMap.set(placement, [...notices, __spreadValues({ key: id }, props)]);
-      return newMap;
-    });
+  const [portalContainer, setPortalContainer] = (0, import_react.useState)(
+    null
+  );
+  const noticesRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const generationByKey = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const generation = (0, import_react.useRef)(0);
+  const timerGeneration = (0, import_react.useRef)(0);
+  const autoKey = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    setPortalContainer(document.body);
   }, []);
-  const onDestroy = (key, placement) => {
-    setNoticesByPlacement((prev) => {
-      const newMap = new Map(prev);
-      const notices = newMap.get(placement) || [];
-      const filtered = notices.filter((notice) => notice.key !== key);
-      if (filtered.length === 0) {
-        newMap.delete(placement);
-      } else {
-        newMap.set(placement, filtered);
-      }
-      return newMap;
-    });
-  };
-  const noticeApi = {
-    open: (props) => {
-      add(
-        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
-      );
+  const updateNotices = (0, import_react.useCallback)(
+    (updater) => {
+      const nextNotices = updater(noticesRef.current);
+      noticesRef.current = nextNotices;
+      setNoticesByPlacement(nextNotices);
     },
-    success: (props) => {
-      add(
-        typeof props === "string" ? { content: props, status: "success" } : __spreadProps(__spreadValues({}, props), { status: "success" })
-      );
-    },
-    error: (props) => {
-      add(
-        typeof props === "string" ? { content: props, status: "error" } : __spreadProps(__spreadValues({}, props), { status: "error" })
-      );
-    },
-    warning: (props) => {
-      add(
-        typeof props === "string" ? { content: props, status: "warning" } : __spreadProps(__spreadValues({}, props), { status: "warning" })
-      );
-    },
-    info: (props) => {
-      add(
-        typeof props === "string" ? { content: props, status: "info" } : __spreadProps(__spreadValues({}, props), { status: "info" })
-      );
-    },
-    destroy: (key) => {
-      setNoticesByPlacement((prev) => {
-        const newMap = new Map(prev);
-        newMap.forEach((notices, placement) => {
-          const filtered = notices.filter((notice) => notice.key !== key);
+    []
+  );
+  const onDestroy = (0, import_react.useCallback)(
+    (key, expectedTimerGeneration) => {
+      var _a;
+      let target;
+      noticesRef.current.forEach((items) => {
+        target != null ? target : target = items.find((item) => item.key === key);
+      });
+      if (!target || expectedTimerGeneration !== void 0 && target.timerGeneration !== expectedTimerGeneration) {
+        return;
+      }
+      generationByKey.current.delete(key);
+      updateNotices((current) => {
+        const next = new Map(current);
+        next.forEach((items, placement) => {
+          const filtered = items.filter((item) => item.key !== key);
           if (filtered.length === 0) {
-            newMap.delete(placement);
-          } else if (filtered.length !== notices.length) {
-            newMap.set(placement, filtered);
+            next.delete(placement);
+          } else if (filtered.length !== items.length) {
+            next.set(placement, filtered);
           }
         });
-        return newMap;
+        return next;
       });
+      (_a = target.onClose) == null ? void 0 : _a.call(target);
     },
-    clear: (placement) => {
-      if (placement) {
-        setNoticesByPlacement((prev) => {
-          const newMap = new Map(prev);
-          newMap.delete(placement);
-          return newMap;
-        });
-      } else {
-        setNoticesByPlacement(/* @__PURE__ */ new Map());
+    [updateNotices]
+  );
+  const add = (0, import_react.useCallback)(
+    (props) => {
+      var _a, _b;
+      const placement = (_a = props.placement) != null ? _a : "topRight";
+      let key = props.key;
+      if (key === void 0 || key === null) {
+        do {
+          key = `__yee_notice_auto_${autoKey.current++}`;
+        } while (generationByKey.current.has(key));
       }
+      const keyGeneration = (_b = generationByKey.current.get(key)) != null ? _b : generation.current++;
+      generationByKey.current.set(key, keyGeneration);
+      const nextNotice = __spreadProps(__spreadValues({}, props), {
+        key,
+        placement,
+        timerGeneration: timerGeneration.current++
+      });
+      updateNotices((current) => {
+        const next = new Map(current);
+        let existingIndex = -1;
+        next.forEach((items, currentPlacement) => {
+          const index = items.findIndex((item) => item.key === key);
+          if (index < 0) {
+            return;
+          }
+          if (currentPlacement === placement) {
+            existingIndex = index;
+          } else {
+            const filtered = items.filter((item) => item.key !== key);
+            if (filtered.length === 0) {
+              next.delete(currentPlacement);
+            } else {
+              next.set(currentPlacement, filtered);
+            }
+          }
+        });
+        const targetNotices = (next.get(placement) || []).filter(
+          (item) => item.key !== key
+        );
+        if (existingIndex >= 0) {
+          targetNotices.splice(existingIndex, 0, nextNotice);
+        } else {
+          targetNotices.push(nextNotice);
+        }
+        next.set(placement, targetNotices);
+        return next;
+      });
+      return () => {
+        if (generationByKey.current.get(key) === keyGeneration) {
+          onDestroy(key);
+        }
+      };
+    },
+    [onDestroy, updateNotices]
+  );
+  const clear = (0, import_react.useCallback)(
+    (placement) => {
+      const removed = placement ? noticesRef.current.get(placement) || [] : Array.from(noticesRef.current.values()).flat();
+      removed.forEach((item) => generationByKey.current.delete(item.key));
+      updateNotices((current) => {
+        if (!placement) {
+          return /* @__PURE__ */ new Map();
+        }
+        const next = new Map(current);
+        next.delete(placement);
+        return next;
+      });
+      invokeOnClose(removed);
+    },
+    [updateNotices]
+  );
+  const noticeApi = (0, import_react.useMemo)(
+    () => ({
+      open: (props) => add(
+        typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
+      ),
+      success: (props) => add(
+        typeof props === "string" ? { content: props, status: "success" } : __spreadProps(__spreadValues({}, props), { status: "success" })
+      ),
+      error: (props) => add(
+        typeof props === "string" ? { content: props, status: "error" } : __spreadProps(__spreadValues({}, props), { status: "error" })
+      ),
+      warning: (props) => add(
+        typeof props === "string" ? { content: props, status: "warning" } : __spreadProps(__spreadValues({}, props), { status: "warning" })
+      ),
+      info: (props) => add(
+        typeof props === "string" ? { content: props, status: "info" } : __spreadProps(__spreadValues({}, props), { status: "info" })
+      ),
+      destroy: onDestroy,
+      clear
+    }),
+    [add, clear, onDestroy]
+  );
+  const noticeHolders = (0, import_react.useMemo)(() => {
+    if (!portalContainer) {
+      return [];
     }
-  };
-  const noticeHolders = import_react.default.useMemo(() => {
     const holders = [];
     noticesByPlacement.forEach((notices, placement) => {
       holders.push(
@@ -140,16 +225,16 @@ var useNotice = () => {
             {
               items: notices,
               placement,
-              onDestroy: (key) => onDestroy(key, placement)
+              onDestroy
             }
           ),
-          document.body,
+          portalContainer,
           `notice-${placement}`
         )
       );
     });
     return holders;
-  }, [noticesByPlacement]);
+  }, [noticesByPlacement, onDestroy, portalContainer]);
   return { noticeApi, noticeHolders };
 };
 var use_notice_default = useNotice;