@vuu-ui/vuu-notifications 2.1.0 → 2.1.2

package/cjs/NotificationsCenter.js

@@ -9,30 +9,32 @@ var WorkspaceNotification = require('./WorkspaceNotification.js');
 
 const ZeroSize = { height: 0, width: 0 };
 const toastContainerRightPadding = 20;
-const NO_NOTIFICATIONS = [];
 const toastOffsetTop = 60;
 const toastDisplayDuration = 6e3;
 const toastDisplayDurationPostHover = 2e3;
 const toastContainerContentGap = 10;
+const RuntimeToast = (toast) => {
+  const slidesIn = toast.animationType?.includes("slide-in") ? true : false;
+  return {
+    ...toast,
+    hidden: slidesIn,
+    id: vuuUtils.getUniqueId(),
+    left: -1,
+    opacity: slidesIn ? void 0 : 0,
+    size: ZeroSize
+  };
+};
 const NotificationsCenter = ({
   notificationsContext,
   startupToastNotification
 }) => {
   const toastNotifications = React.useMemo(
-    () => startupToastNotification ? [
-      {
-        ...startupToastNotification,
-        hidden: false,
-        id: vuuUtils.getUniqueId(),
-        left: -1,
-        size: ZeroSize
-      }
-    ] : [],
+    () => startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],
     [startupToastNotification]
   );
   const [workspaceNotification, setWorkspaceNotification] = React.useState(null);
   const hoveredToastRef = React.useRef(void 0);
-  const notificationsRef = React.useRef(NO_NOTIFICATIONS);
+  const notificationsRef = React.useRef(toastNotifications);
   const [notifications, _setNotifications] = React.useState(toastNotifications);
   const setNotifications = React.useCallback(
     (notifications2) => {
@@ -43,34 +45,15 @@ const NotificationsCenter = ({
   const showNotification = React.useCallback(
     (notification) => {
       if (NotificationsContext.isToastNotification(notification)) {
-        const { animationType = "none", renderPostRefresh } = notification;
-        if (renderPostRefresh) {
+        if (notification.renderPostRefresh) {
           vuuUtils.saveLocalEntity("startup-notification", {
             ...notification,
             expires: +/* @__PURE__ */ new Date() + 1e4
           });
         } else {
-          if (animationType.includes("slide-in")) {
-            setNotifications(
-              notificationsRef.current.concat({
-                ...notification,
-                hidden: true,
-                id: vuuUtils.getUniqueId(),
-                left: -1,
-                size: ZeroSize
-              })
-            );
-          } else
-            setNotifications(
-              notificationsRef.current.concat({
-                ...notification,
-                hidden: false,
-                id: vuuUtils.getUniqueId(),
-                left: -1,
-                opacity: 0,
-                size: ZeroSize
-              })
-            );
+          setNotifications(
+            notificationsRef.current.concat(RuntimeToast(notification))
+          );
         }
       } else if (NotificationsContext.isWorkspaceNotification(notification)) {
         setWorkspaceNotification(

package/cjs/NotificationsCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isToastNotification,\n  isWorkspaceNotification,\n  Notification,\n  NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { ToastHoverHandler, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\n\nconst ZeroSize: MeasuredSize = { height: 0, width: 0 };\nconst toastContainerRightPadding = 20;\nconst NO_NOTIFICATIONS: RuntimeToastNotification[] = [];\nexport interface NotificationsCenterProps {\n  notificationsContext: NotificationsContext;\n  startupToastNotification?: ToastNotificationDescriptor;\n}\n\ntype TransitionStatus = \"entry\" | \"exit\";\ninterface RuntimeToastNotification extends ToastNotificationDescriptor {\n  hidden: boolean;\n  id: string;\n  left: number;\n  opacity?: number;\n  size: MeasuredSize;\n  transitionStatus?: TransitionStatus;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst toastDisplayDurationPostHover = 2000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nexport const NotificationsCenter = ({\n  notificationsContext,\n  startupToastNotification,\n}: NotificationsCenterProps) => {\n  const toastNotifications = useMemo<RuntimeToastNotification[]>(\n    () =>\n      startupToastNotification\n        ? [\n            {\n              ...startupToastNotification,\n              hidden: false,\n              id: getUniqueId(),\n              left: -1,\n              size: ZeroSize,\n            },\n          ]\n        : [],\n    [startupToastNotification],\n  );\n\n  const [workspaceNotification, setWorkspaceNotification] =\n    useState<ReactNode>(null);\n\n  const hoveredToastRef = useRef<string | undefined>(undefined);\n  const notificationsRef = useRef<RuntimeToastNotification[]>(NO_NOTIFICATIONS);\n  const [notifications, _setNotifications] =\n    useState<RuntimeToastNotification[]>(toastNotifications);\n\n  const setNotifications = useCallback(\n    (notifications: RuntimeToastNotification[]) => {\n      _setNotifications((notificationsRef.current = notifications));\n    },\n    [],\n  );\n\n  const showNotification = useCallback(\n    (notification: Notification) => {\n      if (isToastNotification(notification)) {\n        const { animationType = \"none\", renderPostRefresh } = notification;\n        if (renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...notification,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          if (animationType.includes(\"slide-in\")) {\n            setNotifications(\n              notificationsRef.current.concat({\n                ...notification,\n                hidden: true,\n                id: getUniqueId(),\n                left: -1,\n                size: ZeroSize,\n              }),\n            );\n          } else\n            setNotifications(\n              notificationsRef.current.concat({\n                ...notification,\n                hidden: false,\n                id: getUniqueId(),\n                left: -1,\n                opacity: 0,\n                size: ZeroSize,\n              }),\n            );\n        }\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(() => {\n    setWorkspaceNotification(null);\n  }, []);\n\n  useMemo(() => {\n    notificationsContext.setNotify(showNotification, hideNotification);\n  }, [hideNotification, notificationsContext, showNotification]);\n\n  const onMeasured = useCallback(\n    (id: string, height: number, width: number) => {\n      let scheduledUpdate: RuntimeToastNotification | undefined = undefined;\n      const pageWidth = document.body.clientWidth;\n\n      setNotifications(\n        notificationsRef.current.map((n) => {\n          if (n.id === id) {\n            const slideIn = n.animationType?.includes(\"slide-in\");\n            const newToast: RuntimeToastNotification = {\n              ...n,\n              hidden: slideIn ? true : false,\n              left: slideIn\n                ? pageWidth + width - toastContainerRightPadding\n                : pageWidth - width - toastContainerRightPadding,\n              size: { height, width },\n              transitionStatus: \"entry\",\n            };\n\n            if (slideIn) {\n              scheduledUpdate = {\n                ...newToast,\n                hidden: false,\n                left: pageWidth - width - toastContainerRightPadding,\n              };\n            } else {\n              scheduledUpdate = {\n                ...newToast,\n                opacity: 1,\n              };\n            }\n\n            return newToast;\n          } else {\n            return n;\n          }\n        }),\n      );\n\n      if (scheduledUpdate) {\n        const updateNotifications = notificationsRef.current.map((n) => {\n          if (n.id === scheduledUpdate?.id) {\n            return scheduledUpdate;\n          } else {\n            return n;\n          }\n        });\n        requestAnimationFrame(() => {\n          setNotifications(updateNotifications);\n        });\n      }\n    },\n    [setNotifications],\n  );\n\n  useEffect(() => {\n    // This handles both the entry transition and the exit transition\n    document.body.addEventListener(\"transitionend\", (e) => {\n      const { classList, id } = e.target as HTMLElement;\n      if (classList?.contains(\"vuuToastNotification\")) {\n        const notification = notificationsRef.current.find((n) => n.id === id);\n        if (notification?.transitionStatus === \"exit\") {\n          setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n        } else if (notification?.dismissal !== \"manual\") {\n          setTimeout(() => {\n            // In case notification has been manually cancelled ...\n            if (notification && hoveredToastRef.current !== id) {\n              const pageWidth = document.body.clientWidth;\n              setNotifications(\n                notificationsRef.current\n                  .map((n) => {\n                    if (n.id === id) {\n                      if (n.animationType?.includes(\"slide-out\")) {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          left: pageWidth + toastContainerRightPadding,\n                        };\n                      } else {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          opacity: 0,\n                        };\n                      }\n                    } else {\n                      return n;\n                    }\n                  })\n                  .filter((v) => v !== null),\n              );\n            }\n          }, toastDisplayDuration);\n        }\n      }\n    });\n  }, [setNotifications]);\n\n  const handleDismiss = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      }\n    },\n    [setNotifications],\n  );\n\n  const handleHoverEntry = useCallback<ToastHoverHandler>((id) => {\n    hoveredToastRef.current = id;\n  }, []);\n\n  const handleHoverExit = useCallback<ToastHoverHandler>(\n    (id) => {\n      hoveredToastRef.current = undefined;\n      const notification = notificationsRef.current.find((n) => n.id === id);\n      setTimeout(() => {\n        // In case notification has been manually cancelled ...\n        if (notification) {\n          const pageWidth = document.body.clientWidth;\n          setNotifications(\n            notificationsRef.current\n              .map((n) => {\n                if (n.id === id) {\n                  if (n.animationType?.includes(\"slide-out\")) {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      left: pageWidth + toastContainerRightPadding,\n                    };\n                  } else {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      opacity: 0,\n                    };\n                  }\n                } else {\n                  return n;\n                }\n              })\n              .filter((v) => v !== null),\n          );\n        }\n      }, toastDisplayDurationPostHover);\n    },\n    [setNotifications],\n  );\n\n  return (\n    <>\n      {workspaceNotification}\n      {notifications.map(\n        ({ hidden, id, left = 0, opacity, size, ...toast }, i) => {\n          const height = size ? size.height : 80;\n          return (\n            <ToastNotification\n              hidden={hidden}\n              id={id}\n              key={id}\n              left={left}\n              notification={toast}\n              onHoverEntry={handleHoverEntry}\n              onHoverExit={handleHoverExit}\n              onMeasured={onMeasured}\n              onDismiss={handleDismiss}\n              opacity={opacity}\n              top={toastOffsetTop + (height + toastContainerContentGap) * i}\n            />\n          );\n        },\n      )}\n    </>\n  );\n};\n"],"names":["useMemo","getUniqueId","useState","useRef","useCallback","notifications","isToastNotification","saveLocalEntity","isWorkspaceNotification","jsx","WorkspaceNotification","useEffect","jsxs","Fragment","ToastNotification"],"mappings":"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"}
+{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isToastNotification,\n  isWorkspaceNotification,\n  Notification,\n  NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { ToastHoverHandler, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\n\nconst ZeroSize: MeasuredSize = { height: 0, width: 0 };\nconst toastContainerRightPadding = 20;\nexport interface NotificationsCenterProps {\n  notificationsContext: NotificationsContext;\n  startupToastNotification?: ToastNotificationDescriptor;\n}\n\ntype TransitionStatus = \"entry\" | \"exit\";\ninterface RuntimeToastNotification extends ToastNotificationDescriptor {\n  hidden: boolean;\n  id: string;\n  left: number;\n  opacity?: number;\n  size: MeasuredSize;\n  transitionStatus?: TransitionStatus;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst toastDisplayDurationPostHover = 2000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nconst RuntimeToast = (\n  toast: ToastNotificationDescriptor,\n): RuntimeToastNotification => {\n  const slidesIn = toast.animationType?.includes(\"slide-in\") ? true : false;\n  return {\n    ...toast,\n    hidden: slidesIn,\n    id: getUniqueId(),\n    left: -1,\n    opacity: slidesIn ? undefined : 0,\n    size: ZeroSize,\n  };\n};\n\nexport const NotificationsCenter = ({\n  notificationsContext,\n  startupToastNotification,\n}: NotificationsCenterProps) => {\n  const toastNotifications = useMemo<RuntimeToastNotification[]>(\n    () =>\n      startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],\n    [startupToastNotification],\n  );\n\n  const [workspaceNotification, setWorkspaceNotification] =\n    useState<ReactNode>(null);\n\n  const hoveredToastRef = useRef<string | undefined>(undefined);\n  const notificationsRef =\n    useRef<RuntimeToastNotification[]>(toastNotifications);\n  const [notifications, _setNotifications] =\n    useState<RuntimeToastNotification[]>(toastNotifications);\n\n  const setNotifications = useCallback(\n    (notifications: RuntimeToastNotification[]) => {\n      _setNotifications((notificationsRef.current = notifications));\n    },\n    [],\n  );\n\n  const showNotification = useCallback(\n    (notification: Notification) => {\n      if (isToastNotification(notification)) {\n        if (notification.renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...notification,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          setNotifications(\n            notificationsRef.current.concat(RuntimeToast(notification)),\n          );\n        }\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(() => {\n    setWorkspaceNotification(null);\n  }, []);\n\n  useMemo(() => {\n    notificationsContext.setNotify(showNotification, hideNotification);\n  }, [hideNotification, notificationsContext, showNotification]);\n\n  const onMeasured = useCallback(\n    (id: string, height: number, width: number) => {\n      let scheduledUpdate: RuntimeToastNotification | undefined = undefined;\n      const pageWidth = document.body.clientWidth;\n\n      setNotifications(\n        notificationsRef.current.map((n) => {\n          if (n.id === id) {\n            const slideIn = n.animationType?.includes(\"slide-in\");\n            const newToast: RuntimeToastNotification = {\n              ...n,\n              hidden: slideIn ? true : false,\n              left: slideIn\n                ? pageWidth + width - toastContainerRightPadding\n                : pageWidth - width - toastContainerRightPadding,\n              size: { height, width },\n              transitionStatus: \"entry\",\n            };\n\n            if (slideIn) {\n              scheduledUpdate = {\n                ...newToast,\n                hidden: false,\n                left: pageWidth - width - toastContainerRightPadding,\n              };\n            } else {\n              scheduledUpdate = {\n                ...newToast,\n                opacity: 1,\n              };\n            }\n\n            return newToast;\n          } else {\n            return n;\n          }\n        }),\n      );\n\n      if (scheduledUpdate) {\n        const updateNotifications = notificationsRef.current.map((n) => {\n          if (n.id === scheduledUpdate?.id) {\n            return scheduledUpdate;\n          } else {\n            return n;\n          }\n        });\n        requestAnimationFrame(() => {\n          setNotifications(updateNotifications);\n        });\n      }\n    },\n    [setNotifications],\n  );\n\n  useEffect(() => {\n    // This handles both the entry transition and the exit transition\n    document.body.addEventListener(\"transitionend\", (e) => {\n      const { classList, id } = e.target as HTMLElement;\n      if (classList?.contains(\"vuuToastNotification\")) {\n        const notification = notificationsRef.current.find((n) => n.id === id);\n        if (notification?.transitionStatus === \"exit\") {\n          setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n        } else if (notification?.dismissal !== \"manual\") {\n          setTimeout(() => {\n            // In case notification has been manually cancelled ...\n            if (notification && hoveredToastRef.current !== id) {\n              const pageWidth = document.body.clientWidth;\n              setNotifications(\n                notificationsRef.current\n                  .map((n) => {\n                    if (n.id === id) {\n                      if (n.animationType?.includes(\"slide-out\")) {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          left: pageWidth + toastContainerRightPadding,\n                        };\n                      } else {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          opacity: 0,\n                        };\n                      }\n                    } else {\n                      return n;\n                    }\n                  })\n                  .filter((v) => v !== null),\n              );\n            }\n          }, toastDisplayDuration);\n        }\n      }\n    });\n  }, [setNotifications]);\n\n  const handleDismiss = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      }\n    },\n    [setNotifications],\n  );\n\n  const handleHoverEntry = useCallback<ToastHoverHandler>((id) => {\n    hoveredToastRef.current = id;\n  }, []);\n\n  const handleHoverExit = useCallback<ToastHoverHandler>(\n    (id) => {\n      hoveredToastRef.current = undefined;\n      const notification = notificationsRef.current.find((n) => n.id === id);\n      setTimeout(() => {\n        // In case notification has been manually cancelled ...\n        if (notification) {\n          const pageWidth = document.body.clientWidth;\n          setNotifications(\n            notificationsRef.current\n              .map((n) => {\n                if (n.id === id) {\n                  if (n.animationType?.includes(\"slide-out\")) {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      left: pageWidth + toastContainerRightPadding,\n                    };\n                  } else {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      opacity: 0,\n                    };\n                  }\n                } else {\n                  return n;\n                }\n              })\n              .filter((v) => v !== null),\n          );\n        }\n      }, toastDisplayDurationPostHover);\n    },\n    [setNotifications],\n  );\n  return (\n    <>\n      {workspaceNotification}\n      {notifications.map(\n        ({ hidden, id, left = 0, opacity, size, ...toast }, i) => {\n          const height = size ? size.height : 80;\n          return (\n            <ToastNotification\n              hidden={hidden}\n              id={id}\n              key={id}\n              left={left}\n              notification={toast}\n              onHoverEntry={handleHoverEntry}\n              onHoverExit={handleHoverExit}\n              onMeasured={onMeasured}\n              onDismiss={handleDismiss}\n              opacity={opacity}\n              top={toastOffsetTop + (height + toastContainerContentGap) * i}\n            />\n          );\n        },\n      )}\n    </>\n  );\n};\n"],"names":["getUniqueId","useMemo","useState","useRef","useCallback","notifications","isToastNotification","saveLocalEntity","isWorkspaceNotification","jsx","WorkspaceNotification","useEffect","jsxs","Fragment","ToastNotification"],"mappings":"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"}

package/cjs/ToastNotification.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var toastNotificationCss = ".vuuToastNotification {\n    --toast-transition-duration: .4s;\n    --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n    align-items: center;;\n    background: var(--vuuToast-background, var(--toast-background));\n    border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n    box-sizing: border-box;\n    box-shadow: var(--salt-overlayable-shadow-popout);\n    color: var(--vuuToast-foreground, var(--toast-foreground));\n    column-gap: var(--salt-spacing-100);\n    display: grid;\n    grid-template-areas: var(--vuuToast-grid-template-areas, \n    \"toast-header\"\n    );\n    grid-template-columns: auto;\n    max-width: var(--vuuToast-maxWidth, 600px);\n    min-width: var(--vuuToast-minWidth, 300px);\n    opacity: 1;\n    padding: var(--padding-base);\n    row-gap: var(--salt-spacing-100);\n    transition: opacity .4s, top;\n\n    &.vuuToastNotification-hidden {\n        visibility: hidden;\n    }\n\n    &.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withIcon {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header\"\n        \"toast-content\"\n        );\n    }\n    &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        \"toast-content close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withTransition {\n        transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n    }\n\n    &.vuuToastNotification-transparent {\n        opacity: 0;\n        transition: top .2s ease-out, opacity .4s;\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        \"toast-icon toast-content\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        \"toast-icon toast-content close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-error {\n        --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n    }\n\n    &.vuuToastNotification-success {\n        --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-warning {\n        --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-info {\n        --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-tick));\n    }\n\n    .vuuIcon {\n        --vuu-icon-color: var(--toast-foreground);\n        --vuu-icon-size: 20px;\n        grid-area:toast-icon;\n        justify-self: center;\n    }\n\n    .vuuToastNotification-header {\n        font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n        font-weight: var(--salt-text-display1-fontWeight-strong);\n        grid-area: toast-header;\n        justify-self: start;\n        line-height: var(--salt-text-h3-lineHeight);\n        margin: 0;\n        white-space: nowrap;\n    }\n\n    .vuuToastNotification-content {\n        grid-area: toast-content;\n        justify-self: start;\n    }\n\n    .vuuToastNotification-closeButton.saltButton {\n        grid-area: close-button;\n        justify-self: center;\n        .vuuIcon {\n            --vuu-icon-size: 16px;\n        }\n    }\n\n}";
+var toastNotificationCss = ".vuuToastNotification {\n    --toast-transition-duration: .4s;\n    --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n    align-items: center;;\n    background: var(--vuuToast-background, var(--toast-background));\n    border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n    box-sizing: border-box;\n    box-shadow: var(--salt-overlayable-shadow-popout);\n    color: var(--vuuToast-foreground, var(--toast-foreground));\n    column-gap: var(--salt-spacing-100);\n    display: grid;\n    grid-template-areas: var(--vuuToast-grid-template-areas, \n    \"toast-header\"\n    );\n    grid-template-columns: auto;\n    max-width: var(--vuuToast-maxWidth, 600px);\n    min-width: var(--vuuToast-minWidth, 300px);\n    opacity: 1;\n    padding: var(--padding-base);\n    row-gap: var(--salt-spacing-100);\n    transition: opacity .4s, top;\n    z-index: var(--salt-zIndex-notification);\n\n    &.vuuToastNotification-hidden {\n        visibility: hidden;\n    }\n\n    &.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withIcon {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header\"\n        \"toast-content\"\n        );\n    }\n    &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        \"toast-content close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withTransition {\n        transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n    }\n\n    &.vuuToastNotification-transparent {\n        opacity: 0;\n        transition: top .2s ease-out, opacity .4s;\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        \"toast-icon toast-content\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        \"toast-icon toast-content close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-error {\n        --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n    }\n\n    &.vuuToastNotification-success {\n        --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-warning {\n        --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-info {\n        --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-tick));\n    }\n\n    .vuuIcon {\n        --vuu-icon-color: var(--toast-foreground);\n        --vuu-icon-size: 20px;\n        grid-area:toast-icon;\n        justify-self: center;\n    }\n\n    .vuuToastNotification-header {\n        font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n        font-weight: var(--salt-text-display1-fontWeight-strong);\n        grid-area: toast-header;\n        justify-self: start;\n        line-height: var(--salt-text-h3-lineHeight);\n        margin: 0;\n        white-space: nowrap;\n    }\n\n    .vuuToastNotification-content {\n        grid-area: toast-content;\n        justify-self: start;\n    }\n\n    .vuuToastNotification-closeButton.saltButton {\n        grid-area: close-button;\n        justify-self: center;\n        .vuuIcon {\n            --vuu-icon-size: 16px;\n        }\n    }\n\n}";
 
 module.exports = toastNotificationCss;
 //# sourceMappingURL=ToastNotification.css.js.map

package/esm/NotificationsCenter.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { getUniqueId, saveLocalEntity } from '@vuu-ui/vuu-utils';
+import { saveLocalEntity, getUniqueId } from '@vuu-ui/vuu-utils';
 import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
 import { isToastNotification, isWorkspaceNotification } from './NotificationsContext.js';
 import { ToastNotification } from './ToastNotification.js';
@@ -7,30 +7,32 @@ import { WorkspaceNotification } from './WorkspaceNotification.js';
 
 const ZeroSize = { height: 0, width: 0 };
 const toastContainerRightPadding = 20;
-const NO_NOTIFICATIONS = [];
 const toastOffsetTop = 60;
 const toastDisplayDuration = 6e3;
 const toastDisplayDurationPostHover = 2e3;
 const toastContainerContentGap = 10;
+const RuntimeToast = (toast) => {
+  const slidesIn = toast.animationType?.includes("slide-in") ? true : false;
+  return {
+    ...toast,
+    hidden: slidesIn,
+    id: getUniqueId(),
+    left: -1,
+    opacity: slidesIn ? void 0 : 0,
+    size: ZeroSize
+  };
+};
 const NotificationsCenter = ({
   notificationsContext,
   startupToastNotification
 }) => {
   const toastNotifications = useMemo(
-    () => startupToastNotification ? [
-      {
-        ...startupToastNotification,
-        hidden: false,
-        id: getUniqueId(),
-        left: -1,
-        size: ZeroSize
-      }
-    ] : [],
+    () => startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],
     [startupToastNotification]
   );
   const [workspaceNotification, setWorkspaceNotification] = useState(null);
   const hoveredToastRef = useRef(void 0);
-  const notificationsRef = useRef(NO_NOTIFICATIONS);
+  const notificationsRef = useRef(toastNotifications);
   const [notifications, _setNotifications] = useState(toastNotifications);
   const setNotifications = useCallback(
     (notifications2) => {
@@ -41,34 +43,15 @@ const NotificationsCenter = ({
   const showNotification = useCallback(
     (notification) => {
       if (isToastNotification(notification)) {
-        const { animationType = "none", renderPostRefresh } = notification;
-        if (renderPostRefresh) {
+        if (notification.renderPostRefresh) {
           saveLocalEntity("startup-notification", {
             ...notification,
             expires: +/* @__PURE__ */ new Date() + 1e4
           });
         } else {
-          if (animationType.includes("slide-in")) {
-            setNotifications(
-              notificationsRef.current.concat({
-                ...notification,
-                hidden: true,
-                id: getUniqueId(),
-                left: -1,
-                size: ZeroSize
-              })
-            );
-          } else
-            setNotifications(
-              notificationsRef.current.concat({
-                ...notification,
-                hidden: false,
-                id: getUniqueId(),
-                left: -1,
-                opacity: 0,
-                size: ZeroSize
-              })
-            );
+          setNotifications(
+            notificationsRef.current.concat(RuntimeToast(notification))
+          );
         }
       } else if (isWorkspaceNotification(notification)) {
         setWorkspaceNotification(

package/esm/NotificationsCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isToastNotification,\n  isWorkspaceNotification,\n  Notification,\n  NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { ToastHoverHandler, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\n\nconst ZeroSize: MeasuredSize = { height: 0, width: 0 };\nconst toastContainerRightPadding = 20;\nconst NO_NOTIFICATIONS: RuntimeToastNotification[] = [];\nexport interface NotificationsCenterProps {\n  notificationsContext: NotificationsContext;\n  startupToastNotification?: ToastNotificationDescriptor;\n}\n\ntype TransitionStatus = \"entry\" | \"exit\";\ninterface RuntimeToastNotification extends ToastNotificationDescriptor {\n  hidden: boolean;\n  id: string;\n  left: number;\n  opacity?: number;\n  size: MeasuredSize;\n  transitionStatus?: TransitionStatus;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst toastDisplayDurationPostHover = 2000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nexport const NotificationsCenter = ({\n  notificationsContext,\n  startupToastNotification,\n}: NotificationsCenterProps) => {\n  const toastNotifications = useMemo<RuntimeToastNotification[]>(\n    () =>\n      startupToastNotification\n        ? [\n            {\n              ...startupToastNotification,\n              hidden: false,\n              id: getUniqueId(),\n              left: -1,\n              size: ZeroSize,\n            },\n          ]\n        : [],\n    [startupToastNotification],\n  );\n\n  const [workspaceNotification, setWorkspaceNotification] =\n    useState<ReactNode>(null);\n\n  const hoveredToastRef = useRef<string | undefined>(undefined);\n  const notificationsRef = useRef<RuntimeToastNotification[]>(NO_NOTIFICATIONS);\n  const [notifications, _setNotifications] =\n    useState<RuntimeToastNotification[]>(toastNotifications);\n\n  const setNotifications = useCallback(\n    (notifications: RuntimeToastNotification[]) => {\n      _setNotifications((notificationsRef.current = notifications));\n    },\n    [],\n  );\n\n  const showNotification = useCallback(\n    (notification: Notification) => {\n      if (isToastNotification(notification)) {\n        const { animationType = \"none\", renderPostRefresh } = notification;\n        if (renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...notification,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          if (animationType.includes(\"slide-in\")) {\n            setNotifications(\n              notificationsRef.current.concat({\n                ...notification,\n                hidden: true,\n                id: getUniqueId(),\n                left: -1,\n                size: ZeroSize,\n              }),\n            );\n          } else\n            setNotifications(\n              notificationsRef.current.concat({\n                ...notification,\n                hidden: false,\n                id: getUniqueId(),\n                left: -1,\n                opacity: 0,\n                size: ZeroSize,\n              }),\n            );\n        }\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(() => {\n    setWorkspaceNotification(null);\n  }, []);\n\n  useMemo(() => {\n    notificationsContext.setNotify(showNotification, hideNotification);\n  }, [hideNotification, notificationsContext, showNotification]);\n\n  const onMeasured = useCallback(\n    (id: string, height: number, width: number) => {\n      let scheduledUpdate: RuntimeToastNotification | undefined = undefined;\n      const pageWidth = document.body.clientWidth;\n\n      setNotifications(\n        notificationsRef.current.map((n) => {\n          if (n.id === id) {\n            const slideIn = n.animationType?.includes(\"slide-in\");\n            const newToast: RuntimeToastNotification = {\n              ...n,\n              hidden: slideIn ? true : false,\n              left: slideIn\n                ? pageWidth + width - toastContainerRightPadding\n                : pageWidth - width - toastContainerRightPadding,\n              size: { height, width },\n              transitionStatus: \"entry\",\n            };\n\n            if (slideIn) {\n              scheduledUpdate = {\n                ...newToast,\n                hidden: false,\n                left: pageWidth - width - toastContainerRightPadding,\n              };\n            } else {\n              scheduledUpdate = {\n                ...newToast,\n                opacity: 1,\n              };\n            }\n\n            return newToast;\n          } else {\n            return n;\n          }\n        }),\n      );\n\n      if (scheduledUpdate) {\n        const updateNotifications = notificationsRef.current.map((n) => {\n          if (n.id === scheduledUpdate?.id) {\n            return scheduledUpdate;\n          } else {\n            return n;\n          }\n        });\n        requestAnimationFrame(() => {\n          setNotifications(updateNotifications);\n        });\n      }\n    },\n    [setNotifications],\n  );\n\n  useEffect(() => {\n    // This handles both the entry transition and the exit transition\n    document.body.addEventListener(\"transitionend\", (e) => {\n      const { classList, id } = e.target as HTMLElement;\n      if (classList?.contains(\"vuuToastNotification\")) {\n        const notification = notificationsRef.current.find((n) => n.id === id);\n        if (notification?.transitionStatus === \"exit\") {\n          setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n        } else if (notification?.dismissal !== \"manual\") {\n          setTimeout(() => {\n            // In case notification has been manually cancelled ...\n            if (notification && hoveredToastRef.current !== id) {\n              const pageWidth = document.body.clientWidth;\n              setNotifications(\n                notificationsRef.current\n                  .map((n) => {\n                    if (n.id === id) {\n                      if (n.animationType?.includes(\"slide-out\")) {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          left: pageWidth + toastContainerRightPadding,\n                        };\n                      } else {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          opacity: 0,\n                        };\n                      }\n                    } else {\n                      return n;\n                    }\n                  })\n                  .filter((v) => v !== null),\n              );\n            }\n          }, toastDisplayDuration);\n        }\n      }\n    });\n  }, [setNotifications]);\n\n  const handleDismiss = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      }\n    },\n    [setNotifications],\n  );\n\n  const handleHoverEntry = useCallback<ToastHoverHandler>((id) => {\n    hoveredToastRef.current = id;\n  }, []);\n\n  const handleHoverExit = useCallback<ToastHoverHandler>(\n    (id) => {\n      hoveredToastRef.current = undefined;\n      const notification = notificationsRef.current.find((n) => n.id === id);\n      setTimeout(() => {\n        // In case notification has been manually cancelled ...\n        if (notification) {\n          const pageWidth = document.body.clientWidth;\n          setNotifications(\n            notificationsRef.current\n              .map((n) => {\n                if (n.id === id) {\n                  if (n.animationType?.includes(\"slide-out\")) {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      left: pageWidth + toastContainerRightPadding,\n                    };\n                  } else {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      opacity: 0,\n                    };\n                  }\n                } else {\n                  return n;\n                }\n              })\n              .filter((v) => v !== null),\n          );\n        }\n      }, toastDisplayDurationPostHover);\n    },\n    [setNotifications],\n  );\n\n  return (\n    <>\n      {workspaceNotification}\n      {notifications.map(\n        ({ hidden, id, left = 0, opacity, size, ...toast }, i) => {\n          const height = size ? size.height : 80;\n          return (\n            <ToastNotification\n              hidden={hidden}\n              id={id}\n              key={id}\n              left={left}\n              notification={toast}\n              onHoverEntry={handleHoverEntry}\n              onHoverExit={handleHoverExit}\n              onMeasured={onMeasured}\n              onDismiss={handleDismiss}\n              opacity={opacity}\n              top={toastOffsetTop + (height + toastContainerContentGap) * i}\n            />\n          );\n        },\n      )}\n    </>\n  );\n};\n"],"names":["notifications"],"mappings":"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"}
+{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isToastNotification,\n  isWorkspaceNotification,\n  Notification,\n  NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { ToastHoverHandler, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\n\nconst ZeroSize: MeasuredSize = { height: 0, width: 0 };\nconst toastContainerRightPadding = 20;\nexport interface NotificationsCenterProps {\n  notificationsContext: NotificationsContext;\n  startupToastNotification?: ToastNotificationDescriptor;\n}\n\ntype TransitionStatus = \"entry\" | \"exit\";\ninterface RuntimeToastNotification extends ToastNotificationDescriptor {\n  hidden: boolean;\n  id: string;\n  left: number;\n  opacity?: number;\n  size: MeasuredSize;\n  transitionStatus?: TransitionStatus;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst toastDisplayDurationPostHover = 2000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nconst RuntimeToast = (\n  toast: ToastNotificationDescriptor,\n): RuntimeToastNotification => {\n  const slidesIn = toast.animationType?.includes(\"slide-in\") ? true : false;\n  return {\n    ...toast,\n    hidden: slidesIn,\n    id: getUniqueId(),\n    left: -1,\n    opacity: slidesIn ? undefined : 0,\n    size: ZeroSize,\n  };\n};\n\nexport const NotificationsCenter = ({\n  notificationsContext,\n  startupToastNotification,\n}: NotificationsCenterProps) => {\n  const toastNotifications = useMemo<RuntimeToastNotification[]>(\n    () =>\n      startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],\n    [startupToastNotification],\n  );\n\n  const [workspaceNotification, setWorkspaceNotification] =\n    useState<ReactNode>(null);\n\n  const hoveredToastRef = useRef<string | undefined>(undefined);\n  const notificationsRef =\n    useRef<RuntimeToastNotification[]>(toastNotifications);\n  const [notifications, _setNotifications] =\n    useState<RuntimeToastNotification[]>(toastNotifications);\n\n  const setNotifications = useCallback(\n    (notifications: RuntimeToastNotification[]) => {\n      _setNotifications((notificationsRef.current = notifications));\n    },\n    [],\n  );\n\n  const showNotification = useCallback(\n    (notification: Notification) => {\n      if (isToastNotification(notification)) {\n        if (notification.renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...notification,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          setNotifications(\n            notificationsRef.current.concat(RuntimeToast(notification)),\n          );\n        }\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(() => {\n    setWorkspaceNotification(null);\n  }, []);\n\n  useMemo(() => {\n    notificationsContext.setNotify(showNotification, hideNotification);\n  }, [hideNotification, notificationsContext, showNotification]);\n\n  const onMeasured = useCallback(\n    (id: string, height: number, width: number) => {\n      let scheduledUpdate: RuntimeToastNotification | undefined = undefined;\n      const pageWidth = document.body.clientWidth;\n\n      setNotifications(\n        notificationsRef.current.map((n) => {\n          if (n.id === id) {\n            const slideIn = n.animationType?.includes(\"slide-in\");\n            const newToast: RuntimeToastNotification = {\n              ...n,\n              hidden: slideIn ? true : false,\n              left: slideIn\n                ? pageWidth + width - toastContainerRightPadding\n                : pageWidth - width - toastContainerRightPadding,\n              size: { height, width },\n              transitionStatus: \"entry\",\n            };\n\n            if (slideIn) {\n              scheduledUpdate = {\n                ...newToast,\n                hidden: false,\n                left: pageWidth - width - toastContainerRightPadding,\n              };\n            } else {\n              scheduledUpdate = {\n                ...newToast,\n                opacity: 1,\n              };\n            }\n\n            return newToast;\n          } else {\n            return n;\n          }\n        }),\n      );\n\n      if (scheduledUpdate) {\n        const updateNotifications = notificationsRef.current.map((n) => {\n          if (n.id === scheduledUpdate?.id) {\n            return scheduledUpdate;\n          } else {\n            return n;\n          }\n        });\n        requestAnimationFrame(() => {\n          setNotifications(updateNotifications);\n        });\n      }\n    },\n    [setNotifications],\n  );\n\n  useEffect(() => {\n    // This handles both the entry transition and the exit transition\n    document.body.addEventListener(\"transitionend\", (e) => {\n      const { classList, id } = e.target as HTMLElement;\n      if (classList?.contains(\"vuuToastNotification\")) {\n        const notification = notificationsRef.current.find((n) => n.id === id);\n        if (notification?.transitionStatus === \"exit\") {\n          setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n        } else if (notification?.dismissal !== \"manual\") {\n          setTimeout(() => {\n            // In case notification has been manually cancelled ...\n            if (notification && hoveredToastRef.current !== id) {\n              const pageWidth = document.body.clientWidth;\n              setNotifications(\n                notificationsRef.current\n                  .map((n) => {\n                    if (n.id === id) {\n                      if (n.animationType?.includes(\"slide-out\")) {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          left: pageWidth + toastContainerRightPadding,\n                        };\n                      } else {\n                        return {\n                          ...n,\n                          transitionStatus: \"exit\" as TransitionStatus,\n                          opacity: 0,\n                        };\n                      }\n                    } else {\n                      return n;\n                    }\n                  })\n                  .filter((v) => v !== null),\n              );\n            }\n          }, toastDisplayDuration);\n        }\n      }\n    });\n  }, [setNotifications]);\n\n  const handleDismiss = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      }\n    },\n    [setNotifications],\n  );\n\n  const handleHoverEntry = useCallback<ToastHoverHandler>((id) => {\n    hoveredToastRef.current = id;\n  }, []);\n\n  const handleHoverExit = useCallback<ToastHoverHandler>(\n    (id) => {\n      hoveredToastRef.current = undefined;\n      const notification = notificationsRef.current.find((n) => n.id === id);\n      setTimeout(() => {\n        // In case notification has been manually cancelled ...\n        if (notification) {\n          const pageWidth = document.body.clientWidth;\n          setNotifications(\n            notificationsRef.current\n              .map((n) => {\n                if (n.id === id) {\n                  if (n.animationType?.includes(\"slide-out\")) {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      left: pageWidth + toastContainerRightPadding,\n                    };\n                  } else {\n                    return {\n                      ...n,\n                      transitionStatus: \"exit\" as TransitionStatus,\n                      opacity: 0,\n                    };\n                  }\n                } else {\n                  return n;\n                }\n              })\n              .filter((v) => v !== null),\n          );\n        }\n      }, toastDisplayDurationPostHover);\n    },\n    [setNotifications],\n  );\n  return (\n    <>\n      {workspaceNotification}\n      {notifications.map(\n        ({ hidden, id, left = 0, opacity, size, ...toast }, i) => {\n          const height = size ? size.height : 80;\n          return (\n            <ToastNotification\n              hidden={hidden}\n              id={id}\n              key={id}\n              left={left}\n              notification={toast}\n              onHoverEntry={handleHoverEntry}\n              onHoverExit={handleHoverExit}\n              onMeasured={onMeasured}\n              onDismiss={handleDismiss}\n              opacity={opacity}\n              top={toastOffsetTop + (height + toastContainerContentGap) * i}\n            />\n          );\n        },\n      )}\n    </>\n  );\n};\n"],"names":["notifications"],"mappings":"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"}

package/esm/ToastNotification.css.js

@@ -1,4 +1,4 @@
-var toastNotificationCss = ".vuuToastNotification {\n    --toast-transition-duration: .4s;\n    --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n    align-items: center;;\n    background: var(--vuuToast-background, var(--toast-background));\n    border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n    box-sizing: border-box;\n    box-shadow: var(--salt-overlayable-shadow-popout);\n    color: var(--vuuToast-foreground, var(--toast-foreground));\n    column-gap: var(--salt-spacing-100);\n    display: grid;\n    grid-template-areas: var(--vuuToast-grid-template-areas, \n    \"toast-header\"\n    );\n    grid-template-columns: auto;\n    max-width: var(--vuuToast-maxWidth, 600px);\n    min-width: var(--vuuToast-minWidth, 300px);\n    opacity: 1;\n    padding: var(--padding-base);\n    row-gap: var(--salt-spacing-100);\n    transition: opacity .4s, top;\n\n    &.vuuToastNotification-hidden {\n        visibility: hidden;\n    }\n\n    &.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withIcon {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header\"\n        \"toast-content\"\n        );\n    }\n    &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        \"toast-content close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withTransition {\n        transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n    }\n\n    &.vuuToastNotification-transparent {\n        opacity: 0;\n        transition: top .2s ease-out, opacity .4s;\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        \"toast-icon toast-content\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        \"toast-icon toast-content close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-error {\n        --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n    }\n\n    &.vuuToastNotification-success {\n        --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-warning {\n        --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-info {\n        --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-tick));\n    }\n\n    .vuuIcon {\n        --vuu-icon-color: var(--toast-foreground);\n        --vuu-icon-size: 20px;\n        grid-area:toast-icon;\n        justify-self: center;\n    }\n\n    .vuuToastNotification-header {\n        font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n        font-weight: var(--salt-text-display1-fontWeight-strong);\n        grid-area: toast-header;\n        justify-self: start;\n        line-height: var(--salt-text-h3-lineHeight);\n        margin: 0;\n        white-space: nowrap;\n    }\n\n    .vuuToastNotification-content {\n        grid-area: toast-content;\n        justify-self: start;\n    }\n\n    .vuuToastNotification-closeButton.saltButton {\n        grid-area: close-button;\n        justify-self: center;\n        .vuuIcon {\n            --vuu-icon-size: 16px;\n        }\n    }\n\n}";
+var toastNotificationCss = ".vuuToastNotification {\n    --toast-transition-duration: .4s;\n    --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n    align-items: center;;\n    background: var(--vuuToast-background, var(--toast-background));\n    border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n    box-sizing: border-box;\n    box-shadow: var(--salt-overlayable-shadow-popout);\n    color: var(--vuuToast-foreground, var(--toast-foreground));\n    column-gap: var(--salt-spacing-100);\n    display: grid;\n    grid-template-areas: var(--vuuToast-grid-template-areas, \n    \"toast-header\"\n    );\n    grid-template-columns: auto;\n    max-width: var(--vuuToast-maxWidth, 600px);\n    min-width: var(--vuuToast-minWidth, 300px);\n    opacity: 1;\n    padding: var(--padding-base);\n    row-gap: var(--salt-spacing-100);\n    transition: opacity .4s, top;\n    z-index: var(--salt-zIndex-notification);\n\n    &.vuuToastNotification-hidden {\n        visibility: hidden;\n    }\n\n    &.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withIcon {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header\"\n        \"toast-content\"\n        );\n    }\n    &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-header close-button\"\n        \"toast-content close-button\"\n        );\n        grid-template-columns: 1fr 36px;\n    }\n\n    &.vuuToastNotification-withTransition {\n        transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n    }\n\n    &.vuuToastNotification-transparent {\n        opacity: 0;\n        transition: top .2s ease-out, opacity .4s;\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header\"\n        \"toast-icon toast-content\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n    }\n\n    &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n        grid-template-areas: var(--vuuToast-grid-template-areas, \n        \"toast-icon toast-header close-button\"\n        \"toast-icon toast-content close-button\"\n        );\n        grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n    }\n\n    &.vuuToastNotification-error {\n        --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n    }\n\n    &.vuuToastNotification-success {\n        --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-warning {\n        --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-tick));\n    }\n    &.vuuToastNotification-info {\n        --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n        --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n        --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-tick));\n    }\n\n    .vuuIcon {\n        --vuu-icon-color: var(--toast-foreground);\n        --vuu-icon-size: 20px;\n        grid-area:toast-icon;\n        justify-self: center;\n    }\n\n    .vuuToastNotification-header {\n        font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n        font-weight: var(--salt-text-display1-fontWeight-strong);\n        grid-area: toast-header;\n        justify-self: start;\n        line-height: var(--salt-text-h3-lineHeight);\n        margin: 0;\n        white-space: nowrap;\n    }\n\n    .vuuToastNotification-content {\n        grid-area: toast-content;\n        justify-self: start;\n    }\n\n    .vuuToastNotification-closeButton.saltButton {\n        grid-area: close-button;\n        justify-self: center;\n        .vuuIcon {\n            --vuu-icon-size: 16px;\n        }\n    }\n\n}";
 
 export { toastNotificationCss as default };
 //# sourceMappingURL=ToastNotification.css.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "VUU notifications - Toast, WorkspaceNotification etc",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -7,8 +7,8 @@
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-ui-controls": "2.1.0",
-    "@vuu-ui/vuu-utils": "2.1.0"
+    "@vuu-ui/vuu-ui-controls": "2.1.2",
+    "@vuu-ui/vuu-utils": "2.1.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",