From 07c0190b438f139dc7f7ed33553beb3337627c4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Wed, 23 Jul 2025 16:42:03 +0800
Subject: [PATCH 1/6] feat: Merge 'onClose' into Closable

---
 src/Notifications.tsx         |  6 ++-
 src/hooks/useNotification.tsx |  4 +-
 src/interface.ts              |  4 +-
 tests/index.test.tsx          | 98 +++++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 3 deletions(-)

diff --git a/src/Notifications.tsx b/src/Notifications.tsx
index f990764..eb0bec5 100644
--- a/src/Notifications.tsx
+++ b/src/Notifications.tsx
@@ -45,7 +45,11 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
   const onNoticeClose = (key: React.Key) => {
     // Trigger close event
     const config = configList.find((item) => item.key === key);
-    config?.onClose?.();
+    const onClose =
+      typeof config?.closable === 'object' && config?.closable !== null
+        ? config.closable?.onClose
+        : config?.onClose;
+    onClose?.();
 
     setConfigList((list) => list.filter((item) => item.key !== key));
   };
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index a7940ff..2072839 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -15,7 +15,9 @@ export interface NotificationConfig {
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
diff --git a/src/interface.ts b/src/interface.ts
index ce36f2e..1a5727d 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -10,7 +10,9 @@ export interface NoticeConfig {
   showProgress?: boolean;
   pauseOnHover?: boolean;
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   className?: string;
   style?: React.CSSProperties;
   classNames?: {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 3fb2e60..7df7ee7 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -778,6 +778,104 @@ describe('Notification.Basic', () => {
     unmount();
   });
 
+  describe.only('onClose and closable.onClose', () => {
+    it('onClose', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  closable: { onClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+    it('onClose and closable.onClose', () => {
+      const onClose = vi.fn();
+      const closableOnClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  onClose,
+                  closable: { onClose: closableOnClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(closableOnClose).toHaveBeenCalled();
+      expect(onClose).not.toHaveBeenCalled();
+
+      unmount();
+    });
+    it('closable.onClose (config)', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification({ closable: { onClose } });
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+  });
+
   it('closes via keyboard Enter key', () => {
     const { instance } = renderDemo();
     let closeCount = 0;

From 4831d456ef019c4f302790da441eb730733c1eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Wed, 23 Jul 2025 16:48:54 +0800
Subject: [PATCH 2/6] docs: add closable describe

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 60a9631..2754bdf 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ props details:
         </tr>
         <tr>
           <td>closable</td>
-          <td>Boolean</td>
+          <td>Boolean | { closeIcon: ReactNode, closeIcon: VoidFunction }</td>
           <td></td>
           <td>whether show close button</td>
         </tr>

From 084692c3416376a26ea35b357ce0f3d67f17a4cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Wed, 23 Jul 2025 16:50:42 +0800
Subject: [PATCH 3/6] test: delete only

---
 tests/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 7df7ee7..cea297f 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -778,7 +778,7 @@ describe('Notification.Basic', () => {
     unmount();
   });
 
-  describe.only('onClose and closable.onClose', () => {
+  describe('onClose and closable.onClose', () => {
     it('onClose', () => {
       const onClose = vi.fn();
       const Demo = () => {

From 9ec6f49987c605fc7020aa36f6325c28802c6735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Thu, 24 Jul 2025 15:35:06 +0800
Subject: [PATCH 4/6] docs:  closable describe

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2754bdf..fdc2b04 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ props details:
         </tr>
         <tr>
           <td>closable</td>
-          <td>Boolean | { closeIcon: ReactNode, closeIcon: VoidFunction }</td>
+          <td>Boolean | { closeIcon: ReactNode, onClose: VoidFunction }</td>
           <td></td>
           <td>whether show close button</td>
         </tr>

From 687de1ad427fdf93dd3cdd4902da25e397958a30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Thu, 24 Jul 2025 16:38:07 +0800
Subject: [PATCH 5/6] feat: config?.closable null

---
 src/Notifications.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Notifications.tsx b/src/Notifications.tsx
index eb0bec5..1f2614d 100644
--- a/src/Notifications.tsx
+++ b/src/Notifications.tsx
@@ -46,7 +46,7 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
     // Trigger close event
     const config = configList.find((item) => item.key === key);
     const onClose =
-      typeof config?.closable === 'object' && config?.closable !== null
+      config?.closable && typeof config?.closable === 'object'
         ? config.closable?.onClose
         : config?.onClose;
     onClose?.();

From 8384b634249f303f21ccbfe1cf2a4996f09bb7ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <lh01217311@antgroup.com>
Date: Tue, 5 Aug 2025 16:38:06 +0800
Subject: [PATCH 6/6] feat: Both closableOnllose and onClose are called

---
 src/Notifications.tsx | 11 +++++------
 tests/index.test.tsx  |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Notifications.tsx b/src/Notifications.tsx
index 1f2614d..04f6847 100644
--- a/src/Notifications.tsx
+++ b/src/Notifications.tsx
@@ -45,12 +45,11 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
   const onNoticeClose = (key: React.Key) => {
     // Trigger close event
     const config = configList.find((item) => item.key === key);
-    const onClose =
-      config?.closable && typeof config?.closable === 'object'
-        ? config.closable?.onClose
-        : config?.onClose;
-    onClose?.();
-
+    const closable = config?.closable;
+    const closableObj = closable && typeof closable === 'object' ? closable : {};
+    const { onClose: closableOnClose } = closableObj;
+    closableOnClose?.();
+    config?.onClose?.();
     setConfigList((list) => list.filter((item) => item.key !== key));
   };
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index cea297f..05b302b 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -810,7 +810,7 @@ describe('Notification.Basic', () => {
 
       unmount();
     });
-    it('onClose and closable.onClose', () => {
+    it('Both closableOnllose and onClose are called', () => {
       const onClose = vi.fn();
       const closableOnClose = vi.fn();
       const Demo = () => {
@@ -840,7 +840,7 @@ describe('Notification.Basic', () => {
         vi.runAllTimers();
       });
       expect(closableOnClose).toHaveBeenCalled();
-      expect(onClose).not.toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
 
       unmount();
     });