@cerberus-design/react 0.14.2-next-6531b4c → 0.14.2-next-58af9c8

package/build/legacy/index.cjs

@@ -1895,6 +1895,7 @@ function Notification(props) {
     "dialog",
     {
       ...nativeProps,
+      "data-placement": "left",
       className: (0, import_css30.cx)(
         nativeProps.className,
         (0, import_patterns11.hstack)({
@@ -2816,33 +2817,86 @@ var import_react22 = require("react");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 var import_recipes38 = require("@cerberus/styled-system/recipes");
 var import_css47 = require("@cerberus/styled-system/css");
+
+// src/context/notification-center/store.ts
+function notificationCenterReducer(state, action) {
+  switch (action.type) {
+    case "ADD_NOTIFICATION":
+      return [...state, action.payload];
+    case "REMOVE_NOTIFICATION":
+      return state.filter((n) => n.id !== action.payload.id);
+    case "UPDATE_NOTIFICATION":
+      return state.map(
+        (n) => n.id === action.payload.id ? { ...n, ...action.payload } : n
+      );
+    case "CLEAR_NOTIFICATIONS":
+      return [];
+    default:
+      return state;
+  }
+}
+function addNotification(dispatch, options) {
+  dispatch({ type: "ADD_NOTIFICATION", payload: { ...options } });
+}
+function removeNotification(dispatch, id) {
+  dispatch({ type: "REMOVE_NOTIFICATION", payload: { id } });
+}
+function updateNotificationState(dispatch, options) {
+  dispatch({ type: "UPDATE_NOTIFICATION", payload: { ...options } });
+}
+function clearNotificationState(dispatch) {
+  dispatch({ type: "CLEAR_NOTIFICATIONS" });
+}
+
+// src/context/notification-center.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var NotificationsContext = (0, import_react22.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react22.useState)([]);
+  const [state, dispatch] = (0, import_react22.useReducer)(notificationCenterReducer, []);
   const styles = (0, import_recipes38.notification)();
-  const handleNotify = (0, import_react22.useCallback)((options) => {
-    setActiveNotifications((prev) => {
-      const id = `${options.palette}:${prev.length + 1}`;
-      return [...prev, { ...options, id }];
-    });
-  }, []);
-  const handleClose = (0, import_react22.useCallback)((e) => {
-    const target = e.currentTarget;
-    setActiveNotifications((prev) => {
-      const item = prev.find((option) => option.id === target.value);
-      if (item == null ? void 0 : item.onClose) item.onClose();
-      return prev.filter((option) => option.id !== target.value);
-    });
-  }, []);
-  const handleCloseAll = (0, import_react22.useCallback)(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose();
+  const timeout = (0, import_react22.useMemo)(
+    () => props.duration || 6e3,
+    [props.duration]
+  );
+  const closeNotification = (0, import_react22.useCallback)(
+    (id) => {
+      updateNotificationState(dispatch, {
+        id,
+        state: "closed"
       });
-      return [];
+      setTimeout(() => {
+        removeNotification(dispatch, id);
+      }, 150);
+    },
+    [dispatch]
+  );
+  const handleNotify = (0, import_react22.useCallback)(
+    (options) => {
+      const id = `${options.palette}:${state.length + 1}`;
+      addNotification(dispatch, {
+        ...options,
+        id,
+        state: "open"
+      });
+      setTimeout(() => {
+        closeNotification(id);
+      }, timeout);
+    },
+    [dispatch, state, timeout, closeNotification]
+  );
+  const handleClose = (0, import_react22.useCallback)(
+    (e) => {
+      const target = e.currentTarget;
+      closeNotification(target.value);
+    },
+    [closeNotification]
+  );
+  const handleCloseAll = (0, import_react22.useCallback)(() => {
+    state.forEach((item) => {
+      if (item.onClose) item.onClose();
     });
-  }, []);
+    clearNotificationState(dispatch);
+  }, [state, dispatch]);
   const value = (0, import_react22.useMemo)(
     () => ({
       notify: handleNotify
@@ -2851,8 +2905,8 @@ function NotificationCenter(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(NotificationsContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: styles.center, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Show, { when: state.length > 0, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Portal, { container: props.container, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: styles.center, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Show, { when: state.length >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Button,
         {
           className: (0, import_css47.cx)(styles.closeAll, (0, import_patterns16.animateIn)()),
@@ -2874,11 +2928,12 @@ function NotificationCenter(props) {
           style: {
             alignItems: "flex-end"
           },
-          children: activeNotifications.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          children: state.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             MatchNotification,
             {
               ...option,
-              onClose: handleClose
+              onClose: handleClose,
+              open: option.state
             },
             option.id
           ))
@@ -2888,49 +2943,38 @@ function NotificationCenter(props) {
   ] });
 }
 function MatchNotification(props) {
-  const { palette, id, onClose, heading, description } = props;
+  const { palette, id, onClose, heading, description, open } = props;
+  const sharedProps = (0, import_react22.useMemo)(
+    () => ({
+      id,
+      open: true,
+      onClose,
+      "data-state": open
+    }),
+    [id, open, onClose]
+  );
   switch (palette) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "success",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "success", children: description })
-          ]
-        },
-        id
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { ...sharedProps, palette: "success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "success", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "success", children: description })
+      ] });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "warning",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "warning", children: description })
-          ]
-        },
-        id
-      );
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { ...sharedProps, palette: "warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "warning", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "warning", children: description })
+      ] });
     case "danger":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { id, onClose, open: true, palette: "danger", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { ...sharedProps, palette: "danger", children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "danger", children: heading }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "danger", children: description })
-      ] }, id);
+      ] });
     case "info":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { id, onClose, open: true, palette: "info", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Notification, { ...sharedProps, palette: "info", children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationHeading, { palette: "info", children: heading }),
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NotificationDescription, { palette: "info", children: description })
-      ] }, id);
+      ] });
   }
 }
 function useNotificationCenter() {