@rainbow-oh/yee-c 0.8.2 → 0.8.3

package/dist/cjs/message/wrapper.d.ts

@@ -1,46 +1,40 @@
 import React from 'react';
 import { Root } from 'react-dom/client';
-import { MessageConfig, MessageType, WrapperedMessageConfig } from './interface';
+import { MessageClose, MessageConfig, MessageType, WrapperedMessageConfig } from './interface';
 declare class MessageWrapper {
     root: Root | null;
     messages: MessageType[];
     container: HTMLElement | null;
+    generationByKey: Map<string | number, number>;
+    generation: number;
+    timerGeneration: number;
     constructor();
     private createContainer;
     private cleanupContainer;
     uuid(): string;
     unmount(): void;
     render(): void;
-    show(params: WrapperedMessageConfig): void;
-    destroy(key: string | number): void;
-    open(params: string | MessageConfig): void;
-    info(params: string | MessageConfig): void;
-    success(params: string | MessageConfig): void;
-    warning(params: string | MessageConfig): void;
-    error(params: string | MessageConfig): void;
-    loading(params: string | MessageConfig): void;
+    show(params: WrapperedMessageConfig): MessageClose;
+    destroy(key: string | number, expectedTimerGeneration?: number): void;
+    open(params: string | MessageConfig): MessageClose;
+    info(params: string | MessageConfig): MessageClose;
+    success(params: string | MessageConfig): MessageClose;
+    warning(params: string | MessageConfig): MessageClose;
+    error(params: string | MessageConfig): MessageClose;
+    loading(params: string | MessageConfig): MessageClose;
 }
 declare const messageWrapper: MessageWrapper;
 export default messageWrapper;
 export declare const message: {
-    open: (params: string | MessageConfig) => void;
-    info: (params: string | MessageConfig) => void;
-    success: (params: string | MessageConfig) => void;
-    warning: (params: string | MessageConfig) => void;
-    error: (params: string | MessageConfig) => void;
-    loading: (params: string | MessageConfig) => void;
-    destroy: (key: string | number) => void;
+    open: (params: string | MessageConfig) => MessageClose;
+    info: (params: string | MessageConfig) => MessageClose;
+    success: (params: string | MessageConfig) => MessageClose;
+    warning: (params: string | MessageConfig) => MessageClose;
+    error: (params: string | MessageConfig) => MessageClose;
+    loading: (params: string | MessageConfig) => MessageClose;
+    destroy: (key: string | number, expectedTimerGeneration?: number) => void;
     useMessage: () => {
-        messageApi: {
-            open: (props: string | MessageConfig) => () => void;
-            info: (props: string | MessageConfig) => () => void;
-            success: (props: string | MessageConfig) => () => void;
-            error: (props: string | MessageConfig) => () => void;
-            warning: (props: string | MessageConfig) => () => void;
-            loading: (props: string | MessageConfig) => () => void;
-            destroy: (key: string | number) => void;
-            clear: () => void;
-        };
-        messageHolder: React.ReactPortal;
+        messageApi: import("./interface").MessageApi;
+        messageHolder: React.ReactPortal | null;
     };
 };

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;