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

package/src/context/notification-center.tsx

@@ -5,7 +5,7 @@ import {
   useCallback,
   useContext,
   useMemo,
-  useState,
+  useReducer,
   type MouseEvent,
   type PropsWithChildren,
   type ReactNode,
@@ -19,6 +19,13 @@ import { Portal, type PortalProps } from '../components/Portal'
 import { notification } from '@cerberus/styled-system/recipes'
 import { Button } from '../components/Button'
 import { cx } from '@cerberus/styled-system/css'
+import {
+  addNotification,
+  clearNotificationState,
+  notificationCenterReducer,
+  removeNotification,
+  updateNotificationState,
+} from './notification-center/store'
 
 /**
  * This module provides a context and hook for notifications.
@@ -55,7 +62,13 @@ export interface NotificationsValue {
 
 const NotificationsContext = createContext<NotificationsValue | null>(null)
 
-export type NotificationsProviderProps = PortalProps
+export type NotificationsProviderProps = PortalProps & {
+  /**
+   * The duration in milliseconds to show the notification.
+   * @default 6000
+   */
+  duration?: number
+}
 
 /**
  * Provides a notification center to the app.
@@ -82,35 +95,58 @@ export type NotificationsProviderProps = PortalProps
 export function NotificationCenter(
   props: PropsWithChildren<NotificationsProviderProps>,
 ) {
-  const [activeNotifications, setActiveNotifications] = useState<
-    NotifyOptions[]
-  >([])
+  const [state, dispatch] = useReducer(notificationCenterReducer, [])
   const styles = notification()
 
-  const handleNotify = useCallback((options: NotifyOptions) => {
-    setActiveNotifications((prev) => {
-      const id = `${options.palette}:${prev.length + 1}`
-      return [...prev, { ...options, id }]
-    })
-  }, [])
-
-  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-    const target = e.currentTarget as HTMLButtonElement
-    setActiveNotifications((prev) => {
-      const item = prev.find((option) => option.id === target.value)
-      if (item?.onClose) item.onClose()
-      return prev.filter((option) => option.id !== target.value)
-    })
-  }, [])
+  const timeout = useMemo<number>(
+    () => props.duration || 6000,
+    [props.duration],
+  )
 
-  const handleCloseAll = useCallback(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose()
+  const closeNotification = useCallback(
+    (id: string) => {
+      updateNotificationState(dispatch, {
+        id,
+        state: 'closed',
+      })
+      setTimeout(() => {
+        removeNotification(dispatch, id)
+      }, 150)
+    },
+    [dispatch],
+  )
+
+  const handleNotify = useCallback(
+    (options: NotifyOptions) => {
+      const id = `${options.palette}:${state.length + 1}`
+      addNotification(dispatch, {
+        ...options,
+        id,
+        state: 'open',
       })
-      return []
+
+      setTimeout(() => {
+        closeNotification(id)
+      }, timeout)
+    },
+    [dispatch, state, timeout, closeNotification],
+  )
+
+  const handleClose = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = e.currentTarget as HTMLButtonElement
+      closeNotification(target.value)
+    },
+    [closeNotification],
+  )
+
+  const handleCloseAll = useCallback(() => {
+    state.forEach((item) => {
+      if (item.onClose) item.onClose()
     })
-  }, [])
+    // we don't want to animate out for this one
+    clearNotificationState(dispatch)
+  }, [state, dispatch])
 
   const value = useMemo(
     () => ({
@@ -126,10 +162,10 @@ export function NotificationCenter(
     <NotificationsContext.Provider value={value}>
       {props.children}
 
-      <Show when={activeNotifications.length > 0}>
+      <Show when={state.length > 0}>
         <Portal container={props.container}>
           <div className={styles.center}>
-            <Show when={activeNotifications.length >= 4}>
+            <Show when={state.length >= 4}>
               <Button
                 className={cx(styles.closeAll, animateIn())}
                 onClick={handleCloseAll}
@@ -151,11 +187,12 @@ export function NotificationCenter(
                 alignItems: 'flex-end',
               }}
             >
-              {activeNotifications.map((option) => (
+              {state.map((option) => (
                 <MatchNotification
                   key={option.id}
                   {...option}
                   onClose={handleClose}
+                  open={option.state}
                 />
               ))}
             </div>
@@ -167,23 +204,27 @@ export function NotificationCenter(
 }
 
 interface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {
+  open: 'open' | 'closed'
   onClose: (e: MouseEvent<HTMLButtonElement>) => void
   key: string | undefined
 }
 
 function MatchNotification(props: MatchNotificationProps) {
-  const { palette, id, onClose, heading, description } = props
+  const { palette, id, onClose, heading, description, open } = props
+  const sharedProps = useMemo(
+    () => ({
+      id: id!,
+      open: true,
+      onClose,
+      'data-state': open,
+    }),
+    [id, open, onClose],
+  )
 
   switch (palette) {
     case 'success':
       return (
-        <Notification
-          id={id!}
-          key={id}
-          onClose={onClose}
-          open
-          palette="success"
-        >
+        <Notification {...sharedProps} palette="success">
           <NotificationHeading palette="success">{heading}</NotificationHeading>
           <NotificationDescription palette="success">
             {description}
@@ -193,13 +234,7 @@ function MatchNotification(props: MatchNotificationProps) {
 
     case 'warning':
       return (
-        <Notification
-          id={id!}
-          key={id}
-          onClose={onClose}
-          open
-          palette="warning"
-        >
+        <Notification {...sharedProps} palette="warning">
           <NotificationHeading palette="warning">{heading}</NotificationHeading>
           <NotificationDescription palette="warning">
             {description}
@@ -209,7 +244,7 @@ function MatchNotification(props: MatchNotificationProps) {
 
     case 'danger':
       return (
-        <Notification id={id!} key={id} onClose={onClose} open palette="danger">
+        <Notification {...sharedProps} palette="danger">
           <NotificationHeading palette="danger">{heading}</NotificationHeading>
           <NotificationDescription palette="danger">
             {description}
@@ -220,7 +255,7 @@ function MatchNotification(props: MatchNotificationProps) {
     case 'info':
     default:
       return (
-        <Notification id={id!} key={id} onClose={onClose} open palette="info">
+        <Notification {...sharedProps} palette="info">
           <NotificationHeading palette="info">{heading}</NotificationHeading>
           <NotificationDescription palette="info">
             {description}

package/build/modern/chunk-N3L3PEMF.js

@@ -1,162 +0,0 @@
-import {
-  Notification
-} from "./chunk-KF35CYT4.js";
-import {
-  NotificationDescription
-} from "./chunk-UXY3KCC3.js";
-import {
-  NotificationHeading
-} from "./chunk-SLHYBPJ5.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-
-// src/context/notification-center.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState
-} from "react";
-import { animateIn, vstack } from "@cerberus/styled-system/patterns";
-import { notification } from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var NotificationsContext = createContext(null);
-function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = useState([]);
-  const styles = notification();
-  const handleNotify = useCallback((options) => {
-    setActiveNotifications((prev) => {
-      const id = `${options.palette}:${prev.length + 1}`;
-      return [...prev, { ...options, id }];
-    });
-  }, []);
-  const handleClose = useCallback((e) => {
-    const target = e.currentTarget;
-    setActiveNotifications((prev) => {
-      const item = prev.find((option) => option.id === target.value);
-      if (item?.onClose) item.onClose();
-      return prev.filter((option) => option.id !== target.value);
-    });
-  }, []);
-  const handleCloseAll = useCallback(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose();
-      });
-      return [];
-    });
-  }, []);
-  const value = useMemo(
-    () => ({
-      notify: handleNotify
-    }),
-    [handleNotify]
-  );
-  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
-    props.children,
-    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
-      /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          className: cx(styles.closeAll, animateIn()),
-          onClick: handleCloseAll,
-          palette: "action",
-          shape: "rounded",
-          size: "sm",
-          usage: "ghost",
-          children: "Close all"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: vstack({
-            alignItems: "flex-end",
-            gap: "4"
-          }),
-          style: {
-            alignItems: "flex-end"
-          },
-          children: activeNotifications.map((option) => /* @__PURE__ */ jsx(
-            MatchNotification,
-            {
-              ...option,
-              onClose: handleClose
-            },
-            option.id
-          ))
-        }
-      )
-    ] }) }) })
-  ] });
-}
-function MatchNotification(props) {
-  const { palette, id, onClose, heading, description } = props;
-  switch (palette) {
-    case "success":
-      return /* @__PURE__ */ jsxs(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "success",
-          children: [
-            /* @__PURE__ */ jsx(NotificationHeading, { palette: "success", children: heading }),
-            /* @__PURE__ */ jsx(NotificationDescription, { palette: "success", children: description })
-          ]
-        },
-        id
-      );
-    case "warning":
-      return /* @__PURE__ */ jsxs(
-        Notification,
-        {
-          id,
-          onClose,
-          open: true,
-          palette: "warning",
-          children: [
-            /* @__PURE__ */ jsx(NotificationHeading, { palette: "warning", children: heading }),
-            /* @__PURE__ */ jsx(NotificationDescription, { palette: "warning", children: description })
-          ]
-        },
-        id
-      );
-    case "danger":
-      return /* @__PURE__ */ jsxs(Notification, { id, onClose, open: true, palette: "danger", children: [
-        /* @__PURE__ */ jsx(NotificationHeading, { palette: "danger", children: heading }),
-        /* @__PURE__ */ jsx(NotificationDescription, { palette: "danger", children: description })
-      ] }, id);
-    case "info":
-    default:
-      return /* @__PURE__ */ jsxs(Notification, { id, onClose, open: true, palette: "info", children: [
-        /* @__PURE__ */ jsx(NotificationHeading, { palette: "info", children: heading }),
-        /* @__PURE__ */ jsx(NotificationDescription, { palette: "info", children: description })
-      ] }, id);
-  }
-}
-function useNotificationCenter() {
-  const context = useContext(NotificationsContext);
-  if (!context) {
-    throw new Error(
-      "useNotificationCenter must be used within a NotificationsProvider"
-    );
-  }
-  return context;
-}
-
-export {
-  NotificationCenter,
-  useNotificationCenter
-};
-//# sourceMappingURL=chunk-N3L3PEMF.js.map

package/build/modern/chunk-N3L3PEMF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [activeNotifications, setActiveNotifications] = useState<\n    NotifyOptions[]\n  >([])\n  const styles = notification()\n\n  const handleNotify = useCallback((options: NotifyOptions) => {\n    setActiveNotifications((prev) => {\n      const id = `${options.palette}:${prev.length + 1}`\n      return [...prev, { ...options, id }]\n    })\n  }, [])\n\n  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    setActiveNotifications((prev) => {\n      const item = prev.find((option) => option.id === target.value)\n      if (item?.onClose) item.onClose()\n      return prev.filter((option) => option.id !== target.value)\n    })\n  }, [])\n\n  const handleCloseAll = useCallback(() => {\n    setActiveNotifications((prev) => {\n      prev.forEach((item) => {\n        if (item.onClose) item.onClose()\n      })\n      return []\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={activeNotifications.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={activeNotifications.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {activeNotifications.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description } = props\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"success\"\n        >\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"warning\"\n        >\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}