@ttoss/react-notifications 2.4.39 → 2.5.0

package/dist/esm/index.js

@@ -0,0 +1,219 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/NotificationsBox.tsx
+import { NotificationCard } from "@ttoss/components/NotificationCard";
+import { Stack } from "@ttoss/ui";
+
+// src/Provider.tsx
+import { toast, ToastContainer } from "@ttoss/components/Toast";
+import { Flex, InfiniteLinearProgress } from "@ttoss/ui";
+import * as React2 from "react";
+
+// src/NotificationsHeader.tsx
+var NotificationsHeader = /* @__PURE__ */__name(() => {
+  const {
+    notifications
+  } = useNotifications();
+  const headerNotifications = notifications?.filter(notification => {
+    return notification.viewType === "header";
+  });
+  return /* @__PURE__ */React.createElement(NotificationsBox, {
+    notifications: headerNotifications
+  });
+}, "NotificationsHeader");
+
+// src/NotificationsModal.tsx
+import { Modal } from "@ttoss/components/Modal";
+import { CloseButton } from "@ttoss/ui";
+var NotificationsModal = /* @__PURE__ */__name(() => {
+  const {
+    notifications,
+    clearNotifications,
+    defaultViewType
+  } = useNotifications();
+  const modalNotifications = notifications?.filter(notification => {
+    if (defaultViewType === "modal" && !notification.viewType) {
+      return true;
+    }
+    return notification.viewType === "modal";
+  });
+  const isOpen = !!modalNotifications && modalNotifications.length > 0;
+  return /* @__PURE__ */React.createElement(Modal, {
+    isOpen,
+    style: {
+      content: {
+        minWidth: "30%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "4"
+      }
+    }
+  }, /* @__PURE__ */React.createElement(CloseButton, {
+    "aria-label": "Close",
+    sx: {
+      alignSelf: "flex-end"
+    },
+    onClick: /* @__PURE__ */__name(() => {
+      clearNotifications();
+    }, "onClick")
+  }), /* @__PURE__ */React.createElement(NotificationsBox, {
+    notifications: modalNotifications
+  }));
+}, "NotificationsModal");
+
+// src/Provider.tsx
+var NotificationsContext = /* @__PURE__ */React2.createContext({
+  isLoading: false,
+  setLoading: /* @__PURE__ */__name(() => {
+    return void 0;
+  }, "setLoading"),
+  defaultViewType: "box",
+  addNotification: /* @__PURE__ */__name(() => {
+    return void 0;
+  }, "addNotification"),
+  removeNotification: /* @__PURE__ */__name(() => {
+    return void 0;
+  }, "removeNotification"),
+  clearNotifications: /* @__PURE__ */__name(() => {
+    return void 0;
+  }, "clearNotifications")
+});
+var NotificationsProvider = /* @__PURE__ */__name(props => {
+  const [isLoading, setLoading] = React2.useState(false);
+  const [notifications, setNotifications] = React2.useState();
+  const prefix = React2.useId();
+  const removeNotification = React2.useCallback(id => {
+    setNotifications(prevNotifications => {
+      return prevNotifications?.filter(notification => {
+        return notification.id !== id;
+      });
+    });
+  }, []);
+  const addNotification = React2.useCallback(notification => {
+    const newNotifications = (Array.isArray(notification) ? notification : [notification]).map(notification2 => {
+      const id = notification2.id || `${prefix}-${Math.random()}`;
+      return {
+        ...notification2,
+        id
+      };
+    }).filter((notification2, index, notifications2) => {
+      return notifications2.findIndex(n => {
+        return n.id === notification2.id;
+      }) === index;
+    });
+    const toastNotifications = newNotifications.filter(notification2 => {
+      if (notification2.viewType === "toast") {
+        return true;
+      }
+      if (!notification2.viewType && props.defaultViewType === "toast") {
+        return true;
+      }
+      return false;
+    });
+    toastNotifications.forEach(notification2 => {
+      toast(notification2.message, {
+        ...notification2.toast,
+        type: notification2.type,
+        onClose: /* @__PURE__ */__name(() => {
+          removeNotification(notification2.id);
+          notification2.toast?.onClose?.();
+        }, "onClose")
+      });
+    });
+    setNotifications((prevNotifications = []) => {
+      const nonToastNewNotifications = newNotifications.filter(notification2 => {
+        if (notification2.viewType === "toast") {
+          return false;
+        }
+        if (!notification2.viewType && props.defaultViewType === "toast") {
+          return false;
+        }
+        return true;
+      });
+      const oldNotifications = prevNotifications.filter(prevNotification => {
+        return !nonToastNewNotifications.some(newNotification => {
+          return newNotification.id === prevNotification.id;
+        });
+      });
+      return [...oldNotifications, ...nonToastNewNotifications];
+    });
+  }, [prefix, props.defaultViewType, removeNotification]);
+  const clearNotifications = React2.useCallback(() => {
+    setNotifications(prevNotifications => {
+      return prevNotifications?.filter(notification => {
+        return notification.persist === true;
+      });
+    });
+  }, []);
+  return /* @__PURE__ */React2.createElement(NotificationsContext.Provider, {
+    value: {
+      isLoading,
+      setLoading,
+      notifications,
+      addNotification,
+      removeNotification,
+      clearNotifications,
+      defaultViewType: props.defaultViewType || "box"
+    }
+  }, /* @__PURE__ */React2.createElement(ToastContainer, props.toast), /* @__PURE__ */React2.createElement(NotificationsModal, null), isLoading && /* @__PURE__ */React2.createElement(Flex, {
+    sx: {
+      position: "absolute",
+      width: "100%",
+      top: 0
+    }
+  }, /* @__PURE__ */React2.createElement(InfiniteLinearProgress, null)), /* @__PURE__ */React2.createElement(NotificationsHeader, null), props.children);
+}, "NotificationsProvider");
+var useNotifications = /* @__PURE__ */__name(() => {
+  return React2.useContext(NotificationsContext);
+}, "useNotifications");
+
+// src/NotificationsBox.tsx
+var NotificationsBox = /* @__PURE__ */__name(props => {
+  const {
+    notifications,
+    removeNotification,
+    defaultViewType
+  } = useNotifications();
+  const boxNotifications = props.notifications || notifications?.filter(notification => {
+    if (notification.viewType !== "box" && defaultViewType !== "box") {
+      return false;
+    }
+    if (!props.id && notification.boxId) {
+      return false;
+    }
+    if (!props.id && !notification.boxId) {
+      return true;
+    }
+    return notification.boxId === props.id;
+  });
+  const hasBoxNotifications = Array.isArray(boxNotifications);
+  if (!hasBoxNotifications) {
+    return null;
+  }
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      width: "full",
+      gap: "1"
+    }
+  }, boxNotifications.map(notification => {
+    return /* @__PURE__ */React.createElement(NotificationCard, {
+      key: notification.id,
+      type: notification.type,
+      title: notification.title,
+      message: notification.message,
+      onClose: /* @__PURE__ */__name(() => {
+        if (notification.id) {
+          removeNotification(notification.id);
+        }
+      }, "onClose")
+    });
+  }));
+}, "NotificationsBox");
+export { NotificationsBox, NotificationsProvider, toast, useNotifications };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToastOptions, ToastContainerProps } from '@ttoss/components/Toast';
+export { toast } from '@ttoss/components/Toast';
+import * as React from 'react';
+
+type ViewType = 'toast' | 'modal' | 'box' | 'header';
+type Notification = {
+    id?: string | number;
+    title?: string;
+    message: string;
+    type: 'warning' | 'error' | 'info' | 'success';
+    viewType?: ViewType;
+    toast?: ToastOptions;
+    boxId?: string | number;
+    persist?: boolean;
+};
+type NotificationsProviderProps = {
+    children: React.ReactNode;
+    defaultViewType?: ViewType;
+    toast?: ToastContainerProps;
+};
+declare const NotificationsProvider: (props: NotificationsProviderProps) => react_jsx_runtime.JSX.Element;
+declare const useNotifications: () => {
+    isLoading: boolean;
+    setLoading: (arg: boolean) => void;
+    defaultViewType: ViewType;
+    notifications?: Notification[];
+    addNotification(notification: Notification | Notification[]): void;
+    removeNotification(id: string | number): void;
+    clearNotifications(): void;
+};
+
+declare const NotificationsBox: (props: {
+    id?: string | number;
+    notifications?: Notification[] | undefined;
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { type Notification, NotificationsBox, NotificationsProvider, type NotificationsProviderProps, useNotifications };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-notifications",
-  "version": "2.4.39",
+  "version": "2.5.0",
   "description": "ttoss notifications module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -25,19 +25,19 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.10.2",
-    "@ttoss/ui": "^6.1.0",
-    "@ttoss/react-icons": "^0.5.6"
+    "@ttoss/react-icons": "^0.5.6",
+    "@ttoss/ui": "^6.2.0",
+    "@ttoss/components": "^2.11.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "jest": "^30.2.0",
     "react": "^19.2.1",
     "tsup": "^8.5.1",
-    "@ttoss/config": "^1.35.12",
-    "@ttoss/components": "^2.10.2",
+    "@ttoss/components": "^2.11.0",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.1.0",
+    "@ttoss/ui": "^6.2.0",
+    "@ttoss/config": "^1.35.12",
     "@ttoss/test-utils": "^4.0.2"
   },
   "keywords": [