Fix/notification remove fn

.changeset/kind-things-listen.md

@@ -0,0 +1,5 @@
+---
+"@wpmudev/sui-notification": patch
+---
+
+fix(notification): rename `id` to `count` in notification push logic

.changeset/nice-olives-create.md

@@ -0,0 +1,5 @@
+---
+"@wpmudev/sui-notification": patch
+---
+
+fix remove + add support for `count` property and implement removal by count

packages/ui/notification/src/notification.tsx

@@ -9,6 +9,7 @@ import { useNotifications } from "./use-notification"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const Notification: React.FC<NotificationProps> = ({
+	count,
 	id,
 	title,
 	message = "message",
@@ -34,10 +35,10 @@ const Notification: React.FC<NotificationProps> = ({
 	useEffect(() => {
 		if (!isInline && !isDismissible) {
 			setTimeout(() => {
-				notifications.remove(id)
+				notifications.removeByCount(count)
 			}, timeout ?? 5000)
 		}
-	}, [id, isInline, notifications, timeout, isDismissible])
+	}, [id, count, isInline, notifications, timeout, isDismissible])
 
 	/**
 	 * Hide notification when click on dismiss button

packages/ui/notification/src/notification.types.ts

@@ -11,6 +11,7 @@ interface NotificationProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
 	id?: string // unique ID for the notification
+	count?: number // notification count
 	title?: ReactNode // title content of the notification (can be any valid React node)
 	message?: ReactNode // message content of the notification (can be any valid React node)
 	action?: ReactNode // notification action

packages/ui/notification/src/use-notification.tsx

@@ -12,13 +12,19 @@ let listeners: Function[] = []
 const notificationStore = {
 	// function to push a new notification to the store
 	push: (options: NotificationProps) => {
-		notifications = [...notifications, { ...options, id: id++ }]
+		notifications = [...notifications, { ...options, count: id++ }]
 		emitChange()
 	},
 	// function to remove a notification from the store based on its ID
 	remove: (idStr: string | undefined) => {
 		notifications = notifications.filter(
-			(alert: any) => alert?.id !== (idStr ?? ""),
+			(alert: NotificationProps) => alert?.id !== (idStr ?? ""),
+		)
+		emitChange()
+	},
+	removeByCount: (count?: number) => {
+		notifications = notifications.filter(
+			(alert: NotificationProps) => alert?.count !== count,
 		)
 		emitChange()
 	},
@@ -50,6 +56,7 @@ const useNotifications = () => {
 	return {
 		push: notificationStore.push,
 		remove: notificationStore.remove,
+		removeByCount: notificationStore.removeByCount,
 		queue,
 	}
 }