@vuu-ui/vuu-notifications 2.1.19-beta.3 → 2.1.19

package/cjs/NotificationsCenter.js

@@ -45,29 +45,37 @@ const NotificationsCenter = ({
   const showNotification = React.useCallback(
     (notification) => {
       if (NotificationsContext.isToastNotification(notification)) {
+        const runtimeToast = RuntimeToast(notification);
         if (notification.renderPostRefresh) {
           vuuUtils.saveLocalEntity("startup-notification", {
-            ...notification,
+            ...runtimeToast,
             expires: +/* @__PURE__ */ new Date() + 1e4
           });
         } else {
-          setNotifications(
-            notificationsRef.current.concat(RuntimeToast(notification))
-          );
+          setNotifications(notificationsRef.current.concat(runtimeToast));
         }
+        return runtimeToast.id;
       } else if (NotificationsContext.isWorkspaceNotification(notification)) {
         setWorkspaceNotification(
           /* @__PURE__ */ jsxRuntime.jsx(WorkspaceNotification.WorkspaceNotification, { children: notification.content })
         );
+        return void 0;
       } else {
         throw Error("[NotificationsCenter] invalid notification received");
       }
     },
     [setNotifications]
   );
-  const hideNotification = React.useCallback(() => {
-    setWorkspaceNotification(null);
-  }, []);
+  const hideNotification = React.useCallback(
+    (id) => {
+      if (id) {
+        setNotifications(notificationsRef.current.filter((n) => n.id !== id));
+      } else {
+        setWorkspaceNotification(null);
+      }
+    },
+    [setNotifications]
+  );
   React.useMemo(() => {
     notificationsContext.setNotify(showNotification, hideNotification);
   }, [hideNotification, notificationsContext, showNotification]);

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;\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: document.body.clientWidth,\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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"}
+{"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: document.body.clientWidth,\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        const runtimeToast = RuntimeToast(notification);\n        if (notification.renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...runtimeToast,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          setNotifications(notificationsRef.current.concat(runtimeToast));\n        }\n        return runtimeToast.id;\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n        return undefined;\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      } else {\n        setWorkspaceNotification(null);\n      }\n    },\n    [setNotifications],\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/NotificationsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n  Toast: \"toast\",\n  Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type DismissalStyle = \"automatic\" | \"manual\";\n\nexport type NotificationAnimationType =\n  | \"slide-in\"\n  | \"slide-out\"\n  | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n  animationType?: NotificationAnimationType;\n  /**\n   * 'automatic' dismissal means the Notification will be removed after a configurable delay\n   * (6 seconds by default). 'manual' means a close button will be rendered and user must\n   * manually dismiss by clicking the close button.\n   */\n  dismissal?: DismissalStyle;\n  /**\n   * A custom icon can be provided or false can be used to suppress rendering of any icon.\n   * Default icons will be rendered for the different status values.\n   */\n  icon?: string | false;\n  renderPostRefresh?: boolean;\n  showCloseButton?: boolean;\n  status: ValidationStatus;\n  type: T;\n}\n\nexport interface ToastNotificationDescriptor\n  extends NotificationDescriptorBase<\"toast\"> {\n  content?: ReactNode;\n  header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n  extends NotificationDescriptorBase<\"workspace\"> {\n  content: ReactNode;\n}\n\nexport type Notification =\n  | ToastNotificationDescriptor\n  | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n  n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n  n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n  n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n  hideNotification: DispatchHideNotification;\n  showNotification: DispatchShowNotification;\n  setNotify: (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => void;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA6CO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;;;"}
+{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (\n  notification: Notification,\n) => string | undefined;\nexport type DispatchHideNotification = (id?: string) => void;\n\nexport const NotificationType = {\n  Toast: \"toast\",\n  Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type DismissalStyle = \"automatic\" | \"manual\";\n\nexport type NotificationAnimationType =\n  | \"slide-in\"\n  | \"slide-out\"\n  | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n  animationType?: NotificationAnimationType;\n  /**\n   * 'automatic' dismissal means the Notification will be removed after a configurable delay\n   * (6 seconds by default). 'manual' means a close button will be rendered and user must\n   * manually dismiss by clicking the close button.\n   */\n  dismissal?: DismissalStyle;\n  /**\n   * A custom icon can be provided or false can be used to suppress rendering of any icon.\n   * Default icons will be rendered for the different status values.\n   */\n  icon?: string | false;\n  renderPostRefresh?: boolean;\n  showCloseButton?: boolean;\n  status: ValidationStatus;\n  type: T;\n}\n\nexport interface ToastNotificationDescriptor\n  extends NotificationDescriptorBase<\"toast\"> {\n  className?: string;\n  content?: ReactNode;\n  header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n  extends NotificationDescriptorBase<\"workspace\"> {\n  content: ReactNode;\n}\n\nexport type Notification =\n  | ToastNotificationDescriptor\n  | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n  n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n  n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n  n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n  hideNotification: DispatchHideNotification;\n  showNotification: DispatchShowNotification;\n  setNotify: (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => void;\n};\n"],"names":[],"mappings":";;AASO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA8CO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;;;"}

package/cjs/NotificationsProvider.js

@@ -18,11 +18,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var _showNotification, _hideNotification;
 class NotificationsContextObject {
   constructor() {
-    __privateAdd(this, _showNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
+    __privateAdd(this, _showNotification, () => {
+      console.log("have you forgotten to provide a NotificationsCenter?");
+      return void 0;
+    });
     __privateAdd(this, _hideNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
     // We want the public notify method to be stable, setNotify call should not trigger re-renders
     __publicField(this, "showNotification", (notification) => __privateGet(this, _showNotification).call(this, notification));
-    __publicField(this, "hideNotification", () => __privateGet(this, _hideNotification).call(this));
+    __publicField(this, "hideNotification", (id) => __privateGet(this, _hideNotification).call(this, id));
     __publicField(this, "setNotify", (showNotificationDispatcher, hideNotificationDispatcher) => {
       __privateSet(this, _showNotification, showNotificationDispatcher);
       __privateSet(this, _hideNotification, hideNotificationDispatcher);

package/cjs/NotificationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsProvider.js","sources":["../../../packages/vuu-notifications/src/NotificationsProvider.tsx"],"sourcesContent":["import React, { ReactElement, useContext, useMemo } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport {\n  DispatchHideNotification,\n  DispatchShowNotification,\n  type NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { getLocalEntity } from \"@vuu-ui/vuu-utils\";\n\ninterface ToastWithExpiry extends ToastNotificationDescriptor {\n  expires: number;\n}\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #showNotification: DispatchShowNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  #hideNotification: DispatchHideNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  showNotification: DispatchShowNotification = (notification) =>\n    this.#showNotification(notification);\n  hideNotification: DispatchHideNotification = () => this.#hideNotification();\n  setNotify = (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => {\n    this.#showNotification = showNotificationDispatcher;\n    this.#hideNotification = hideNotificationDispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject(),\n);\n\nexport const NotificationsProvider = (props: {\n  children: ReactElement | ReactElement[];\n}) => {\n  const context = useContext(NotificationsContext);\n  const startupToastNotification = useMemo<\n    ToastNotificationDescriptor | undefined\n  >(() => {\n    const toast = getLocalEntity<ToastWithExpiry>(\"startup-notification\", true);\n    if (toast && toast.expires >= +Date.now()) {\n      const { expires, ...toastDescriptor } = toast;\n      return toastDescriptor;\n    }\n  }, []);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter\n        startupToastNotification={startupToastNotification}\n        notificationsContext={context}\n      />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { hideNotification, showNotification } =\n    useContext(NotificationsContext);\n  return { hideNotification, showNotification };\n};\n"],"names":["useContext","useMemo","getLocalEntity","jsxs","jsx","NotificationsCenter"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,EAAA,iBAAA;AAuBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AACpE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,YAAA,KAC5C,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AACzB,IAA6C,aAAA,CAAA,IAAA,EAAA,kBAAA,EAAA,MAAM,mBAAK,iBAAL,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;AACnD,IAAY,aAAA,CAAA,IAAA,EAAA,WAAA,EAAA,CACV,4BACA,0BACG,KAAA;AACH,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AACzB,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AAAA,KAC3B,CAAA;AAAA;AACF;AAfE,iBAAA,GAAA,IAAA,OAAA,EAAA;AAEA,iBAAA,GAAA,IAAA,OAAA,EAAA;AAeF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,iBAAW,oBAAoB,CAAA;AAC/C,EAAM,MAAA,wBAAA,GAA2BC,cAE/B,MAAM;AACN,IAAM,MAAA,KAAA,GAAQC,uBAAgC,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC1E,IAAA,IAAI,SAAS,KAAM,CAAA,OAAA,IAAW,CAAC,IAAA,CAAK,KAAO,EAAA;AACzC,MAAA,MAAM,EAAE,OAAA,EAAS,GAAG,eAAA,EAAoB,GAAA,KAAA;AACxC,MAAO,OAAA,eAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AACL,EAAA,uBACGC,eAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,uCAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,oBAAsB,EAAA;AAAA;AAAA,KACxB;AAAA,IACC,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzCL,iBAAW,oBAAoB,CAAA;AACjC,EAAO,OAAA,EAAE,kBAAkB,gBAAiB,EAAA;AAC9C;;;;;"}
+{"version":3,"file":"NotificationsProvider.js","sources":["../../../packages/vuu-notifications/src/NotificationsProvider.tsx"],"sourcesContent":["import React, { ReactElement, useContext, useMemo } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport {\n  DispatchHideNotification,\n  DispatchShowNotification,\n  type NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { getLocalEntity } from \"@vuu-ui/vuu-utils\";\n\ninterface ToastWithExpiry extends ToastNotificationDescriptor {\n  expires: number;\n}\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #showNotification: DispatchShowNotification = () => {\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n    return undefined;\n  };\n  #hideNotification: DispatchHideNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  showNotification: DispatchShowNotification = (notification) =>\n    this.#showNotification(notification);\n  hideNotification: DispatchHideNotification = (id) => this.#hideNotification(id);\n  setNotify = (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => {\n    this.#showNotification = showNotificationDispatcher;\n    this.#hideNotification = hideNotificationDispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject(),\n);\n\nexport const NotificationsProvider = (props: {\n  children: ReactElement | ReactElement[];\n}) => {\n  const context = useContext(NotificationsContext);\n  const startupToastNotification = useMemo<\n    ToastNotificationDescriptor | undefined\n  >(() => {\n    const toast = getLocalEntity<ToastWithExpiry>(\"startup-notification\", true);\n    if (toast && toast.expires >= +Date.now()) {\n      const { expires, ...toastDescriptor } = toast;\n      return toastDescriptor;\n    }\n  }, []);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter\n        startupToastNotification={startupToastNotification}\n        notificationsContext={context}\n      />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { hideNotification, showNotification } =\n    useContext(NotificationsContext);\n  return { hideNotification, showNotification };\n};\n"],"names":["useContext","useMemo","getLocalEntity","jsxs","jsx","NotificationsCenter"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,EAAA,iBAAA;AAuBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAAA,YAAA,CAAA,IAAA,EAAA,iBAAA,EAA8C,MAAM;AAClD,MAAA,OAAA,CAAQ,IAAI,sDAAsD,CAAA;AAClE,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,CAAA;AACA,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,YAAA,KAC5C,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AACzB,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,EAAA,KAAO,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,EAAA,CAAA,CAAA;AAC5E,IAAY,aAAA,CAAA,IAAA,EAAA,WAAA,EAAA,CACV,4BACA,0BACG,KAAA;AACH,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AACzB,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AAAA,KAC3B,CAAA;AAAA;AACF;AAjBE,iBAAA,GAAA,IAAA,OAAA,EAAA;AAIA,iBAAA,GAAA,IAAA,OAAA,EAAA;AAeF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,iBAAW,oBAAoB,CAAA;AAC/C,EAAM,MAAA,wBAAA,GAA2BC,cAE/B,MAAM;AACN,IAAM,MAAA,KAAA,GAAQC,uBAAgC,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC1E,IAAA,IAAI,SAAS,KAAM,CAAA,OAAA,IAAW,CAAC,IAAA,CAAK,KAAO,EAAA;AACzC,MAAA,MAAM,EAAE,OAAA,EAAS,GAAG,eAAA,EAAoB,GAAA,KAAA;AACxC,MAAO,OAAA,eAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AACL,EAAA,uBACGC,eAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,uCAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,oBAAsB,EAAA;AAAA;AAAA,KACxB;AAAA,IACC,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzCL,iBAAW,oBAAoB,CAAA;AACjC,EAAO,OAAA,EAAE,kBAAkB,gBAAiB,EAAA;AAC9C;;;;;"}

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    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        --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\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-info-circle));\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-info-circle));\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        --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\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-info-circle));\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-info-circle));\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        white-space: nowrap;\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/cjs/ToastNotification.js

@@ -78,7 +78,8 @@ const ToastNotification = ({
         [`${classBase}-withContent`]: content !== void 0,
         [`${classBase}-withIcon`]: icon !== false,
         [`${classBase}-withTransition`]: animationType !== void 0 && !hidden,
-        [`${classBase}-withCloseButton`]: withCloseButton
+        [`${classBase}-withCloseButton`]: withCloseButton,
+        [`${classBase}-${notification.status}-${notification.className}`]: notification.className !== void 0
       }),
       id,
       left,

package/cjs/ToastNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { RefCallback, useCallback } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastHoverHandler = (id?: string) => void;\n\nexport type ToastNotificationProps = {\n  hidden?: boolean;\n  id?: string;\n  left?: number;\n  notification: ToastNotificationDescriptor;\n  onMeasured?: (id: string, height: number, width: number) => void;\n  onDismiss?: (id?: string) => void;\n  onHoverEntry?: ToastHoverHandler;\n  onHoverExit?: ToastHoverHandler;\n  opacity?: number;\n  top?: number;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = ({\n  hidden,\n  id,\n  left,\n  onDismiss,\n  onMeasured,\n  top,\n  notification,\n  onHoverEntry,\n  onHoverExit,\n  opacity = 1,\n}: ToastNotificationProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: toastNotificationCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const {\n    animationType,\n    content,\n    dismissal,\n    header,\n    icon,\n    showCloseButton,\n    status,\n  } = notification;\n\n  const iconName = icon === false ? undefined : (icon ?? status);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        setTimeout(() => {\n          const { height, width } = el.getBoundingClientRect();\n          if (id) {\n            onMeasured?.(id, height, width);\n          }\n        }, 60);\n      }\n    },\n    [id, onMeasured],\n  );\n\n  const handleDismiss = useCallback(() => {\n    onDismiss?.(id);\n  }, [id, onDismiss]);\n\n  const handleMouseEnter = useCallback(\n    () => onHoverEntry?.(id),\n    [id, onHoverEntry],\n  );\n  const handleMouseLeave = useCallback(\n    () => onHoverExit?.(id),\n    [id, onHoverExit],\n  );\n\n  if (dismissal === \"manual\" && showCloseButton === false) {\n    console.warn(\n      \"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false\",\n    );\n  }\n\n  const withCloseButton = showCloseButton || dismissal === \"manual\";\n\n  return (\n    <FloatingComponent\n      className={cx(classBase, `${classBase}-${notification.status}`, {\n        [`${classBase}-hidden`]: hidden,\n        [`${classBase}-transparent`]: opacity === 0,\n        [`${classBase}-withContent`]: content !== undefined,\n        [`${classBase}-withIcon`]: icon !== false,\n        [`${classBase}-withTransition`]: animationType !== undefined && !hidden,\n        [`${classBase}-withCloseButton`]: withCloseButton,\n      })}\n      id={id}\n      left={left}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      open\n      position=\"absolute\"\n      ref={callbackRef}\n      role=\"alert\"\n      top={top}\n    >\n      {iconName ? <Icon name={iconName} /> : null}\n      <h3 className={`${classBase}-header`}>{header}</h3>\n      {content ? <div className={`${classBase}-content`}>{content}</div> : null}\n      {withCloseButton ? (\n        <IconButton\n          className={`${classBase}-closeButton`}\n          icon=\"close\"\n          onClick={handleDismiss}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n        />\n      ) : null}\n    </FloatingComponent>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toastNotificationCss","useFloatingComponent","useCallback","jsxs","jsx","Icon","IconButton"],"mappings":"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"}
+{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { RefCallback, useCallback } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastHoverHandler = (id?: string) => void;\n\nexport type ToastNotificationProps = {\n  hidden?: boolean;\n  id?: string;\n  left?: number;\n  notification: ToastNotificationDescriptor;\n  onMeasured?: (id: string, height: number, width: number) => void;\n  onDismiss?: (id?: string) => void;\n  onHoverEntry?: ToastHoverHandler;\n  onHoverExit?: ToastHoverHandler;\n  opacity?: number;\n  top?: number;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = ({\n  hidden,\n  id,\n  left,\n  onDismiss,\n  onMeasured,\n  top,\n  notification,\n  onHoverEntry,\n  onHoverExit,\n  opacity = 1,\n}: ToastNotificationProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: toastNotificationCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const {\n    animationType,\n    content,\n    dismissal,\n    header,\n    icon,\n    showCloseButton,\n    status,\n  } = notification;\n\n  const iconName = icon === false ? undefined : (icon ?? status);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        setTimeout(() => {\n          const { height, width } = el.getBoundingClientRect();\n          if (id) {\n            onMeasured?.(id, height, width);\n          }\n        }, 60);\n      }\n    },\n    [id, onMeasured],\n  );\n\n  const handleDismiss = useCallback(() => {\n    onDismiss?.(id);\n  }, [id, onDismiss]);\n\n  const handleMouseEnter = useCallback(\n    () => onHoverEntry?.(id),\n    [id, onHoverEntry],\n  );\n  const handleMouseLeave = useCallback(\n    () => onHoverExit?.(id),\n    [id, onHoverExit],\n  );\n\n  if (dismissal === \"manual\" && showCloseButton === false) {\n    console.warn(\n      \"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false\",\n    );\n  }\n\n  const withCloseButton = showCloseButton || dismissal === \"manual\";\n\n  return (\n    <FloatingComponent\n      className={cx(classBase, `${classBase}-${notification.status}`, {\n        [`${classBase}-hidden`]: hidden,\n        [`${classBase}-transparent`]: opacity === 0,\n        [`${classBase}-withContent`]: content !== undefined,\n        [`${classBase}-withIcon`]: icon !== false,\n        [`${classBase}-withTransition`]: animationType !== undefined && !hidden,\n        [`${classBase}-withCloseButton`]: withCloseButton,\n        [`${classBase}-${notification.status}-${notification.className}`]: notification.className !== undefined,\n      })}\n      id={id}\n      left={left}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      open\n      position=\"absolute\"\n      ref={callbackRef}\n      role=\"alert\"\n      top={top}\n    >\n      {iconName ? <Icon name={iconName} /> : null}\n      <h3 className={`${classBase}-header`}>{header}</h3>\n      {content ? <div className={`${classBase}-content`}>{content}</div> : null}\n      {withCloseButton ? (\n        <IconButton\n          className={`${classBase}-closeButton`}\n          icon=\"close\"\n          onClick={handleDismiss}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n        />\n      ) : null}\n    </FloatingComponent>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toastNotificationCss","useFloatingComponent","useCallback","jsxs","jsx","Icon","IconButton"],"mappings":"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"}

package/esm/NotificationsCenter.js

@@ -43,29 +43,37 @@ const NotificationsCenter = ({
   const showNotification = useCallback(
     (notification) => {
       if (isToastNotification(notification)) {
+        const runtimeToast = RuntimeToast(notification);
         if (notification.renderPostRefresh) {
           saveLocalEntity("startup-notification", {
-            ...notification,
+            ...runtimeToast,
             expires: +/* @__PURE__ */ new Date() + 1e4
           });
         } else {
-          setNotifications(
-            notificationsRef.current.concat(RuntimeToast(notification))
-          );
+          setNotifications(notificationsRef.current.concat(runtimeToast));
         }
+        return runtimeToast.id;
       } else if (isWorkspaceNotification(notification)) {
         setWorkspaceNotification(
           /* @__PURE__ */ jsx(WorkspaceNotification, { children: notification.content })
         );
+        return void 0;
       } else {
         throw Error("[NotificationsCenter] invalid notification received");
       }
     },
     [setNotifications]
   );
-  const hideNotification = useCallback(() => {
-    setWorkspaceNotification(null);
-  }, []);
+  const hideNotification = useCallback(
+    (id) => {
+      if (id) {
+        setNotifications(notificationsRef.current.filter((n) => n.id !== id));
+      } else {
+        setWorkspaceNotification(null);
+      }
+    },
+    [setNotifications]
+  );
   useMemo(() => {
     notificationsContext.setNotify(showNotification, hideNotification);
   }, [hideNotification, notificationsContext, showNotification]);

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;\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: document.body.clientWidth,\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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"}
+{"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: document.body.clientWidth,\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        const runtimeToast = RuntimeToast(notification);\n        if (notification.renderPostRefresh) {\n          saveLocalEntity(\"startup-notification\", {\n            ...runtimeToast,\n            expires: +new Date() + 10000,\n          });\n        } else {\n          setNotifications(notificationsRef.current.concat(runtimeToast));\n        }\n        return runtimeToast.id;\n      } else if (isWorkspaceNotification(notification)) {\n        setWorkspaceNotification(\n          <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n        );\n        return undefined;\n      } else {\n        throw Error(\"[NotificationsCenter] invalid notification received\");\n      }\n    },\n    [setNotifications],\n  );\n\n  const hideNotification = useCallback(\n    (id?: string) => {\n      if (id) {\n        setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n      } else {\n        setWorkspaceNotification(null);\n      }\n    },\n    [setNotifications],\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/NotificationsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n  Toast: \"toast\",\n  Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type DismissalStyle = \"automatic\" | \"manual\";\n\nexport type NotificationAnimationType =\n  | \"slide-in\"\n  | \"slide-out\"\n  | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n  animationType?: NotificationAnimationType;\n  /**\n   * 'automatic' dismissal means the Notification will be removed after a configurable delay\n   * (6 seconds by default). 'manual' means a close button will be rendered and user must\n   * manually dismiss by clicking the close button.\n   */\n  dismissal?: DismissalStyle;\n  /**\n   * A custom icon can be provided or false can be used to suppress rendering of any icon.\n   * Default icons will be rendered for the different status values.\n   */\n  icon?: string | false;\n  renderPostRefresh?: boolean;\n  showCloseButton?: boolean;\n  status: ValidationStatus;\n  type: T;\n}\n\nexport interface ToastNotificationDescriptor\n  extends NotificationDescriptorBase<\"toast\"> {\n  content?: ReactNode;\n  header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n  extends NotificationDescriptorBase<\"workspace\"> {\n  content: ReactNode;\n}\n\nexport type Notification =\n  | ToastNotificationDescriptor\n  | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n  n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n  n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n  n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n  hideNotification: DispatchHideNotification;\n  showNotification: DispatchShowNotification;\n  setNotify: (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => void;\n};\n"],"names":[],"mappings":"AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA6CO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;"}
+{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (\n  notification: Notification,\n) => string | undefined;\nexport type DispatchHideNotification = (id?: string) => void;\n\nexport const NotificationType = {\n  Toast: \"toast\",\n  Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type DismissalStyle = \"automatic\" | \"manual\";\n\nexport type NotificationAnimationType =\n  | \"slide-in\"\n  | \"slide-out\"\n  | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n  animationType?: NotificationAnimationType;\n  /**\n   * 'automatic' dismissal means the Notification will be removed after a configurable delay\n   * (6 seconds by default). 'manual' means a close button will be rendered and user must\n   * manually dismiss by clicking the close button.\n   */\n  dismissal?: DismissalStyle;\n  /**\n   * A custom icon can be provided or false can be used to suppress rendering of any icon.\n   * Default icons will be rendered for the different status values.\n   */\n  icon?: string | false;\n  renderPostRefresh?: boolean;\n  showCloseButton?: boolean;\n  status: ValidationStatus;\n  type: T;\n}\n\nexport interface ToastNotificationDescriptor\n  extends NotificationDescriptorBase<\"toast\"> {\n  className?: string;\n  content?: ReactNode;\n  header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n  extends NotificationDescriptorBase<\"workspace\"> {\n  content: ReactNode;\n}\n\nexport type Notification =\n  | ToastNotificationDescriptor\n  | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n  n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n  n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n  n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n  hideNotification: DispatchHideNotification;\n  showNotification: DispatchShowNotification;\n  setNotify: (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => void;\n};\n"],"names":[],"mappings":"AASO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA8CO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;"}

package/esm/NotificationsProvider.js

@@ -16,11 +16,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var _showNotification, _hideNotification;
 class NotificationsContextObject {
   constructor() {
-    __privateAdd(this, _showNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
+    __privateAdd(this, _showNotification, () => {
+      console.log("have you forgotten to provide a NotificationsCenter?");
+      return void 0;
+    });
     __privateAdd(this, _hideNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
     // We want the public notify method to be stable, setNotify call should not trigger re-renders
     __publicField(this, "showNotification", (notification) => __privateGet(this, _showNotification).call(this, notification));
-    __publicField(this, "hideNotification", () => __privateGet(this, _hideNotification).call(this));
+    __publicField(this, "hideNotification", (id) => __privateGet(this, _hideNotification).call(this, id));
     __publicField(this, "setNotify", (showNotificationDispatcher, hideNotificationDispatcher) => {
       __privateSet(this, _showNotification, showNotificationDispatcher);
       __privateSet(this, _hideNotification, hideNotificationDispatcher);

package/esm/NotificationsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsProvider.js","sources":["../../../packages/vuu-notifications/src/NotificationsProvider.tsx"],"sourcesContent":["import React, { ReactElement, useContext, useMemo } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport {\n  DispatchHideNotification,\n  DispatchShowNotification,\n  type NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { getLocalEntity } from \"@vuu-ui/vuu-utils\";\n\ninterface ToastWithExpiry extends ToastNotificationDescriptor {\n  expires: number;\n}\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #showNotification: DispatchShowNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  #hideNotification: DispatchHideNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  showNotification: DispatchShowNotification = (notification) =>\n    this.#showNotification(notification);\n  hideNotification: DispatchHideNotification = () => this.#hideNotification();\n  setNotify = (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => {\n    this.#showNotification = showNotificationDispatcher;\n    this.#hideNotification = hideNotificationDispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject(),\n);\n\nexport const NotificationsProvider = (props: {\n  children: ReactElement | ReactElement[];\n}) => {\n  const context = useContext(NotificationsContext);\n  const startupToastNotification = useMemo<\n    ToastNotificationDescriptor | undefined\n  >(() => {\n    const toast = getLocalEntity<ToastWithExpiry>(\"startup-notification\", true);\n    if (toast && toast.expires >= +Date.now()) {\n      const { expires, ...toastDescriptor } = toast;\n      return toastDescriptor;\n    }\n  }, []);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter\n        startupToastNotification={startupToastNotification}\n        notificationsContext={context}\n      />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { hideNotification, showNotification } =\n    useContext(NotificationsContext);\n  return { hideNotification, showNotification };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,EAAA,iBAAA;AAuBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AACpE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,YAAA,KAC5C,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AACzB,IAA6C,aAAA,CAAA,IAAA,EAAA,kBAAA,EAAA,MAAM,mBAAK,iBAAL,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;AACnD,IAAY,aAAA,CAAA,IAAA,EAAA,WAAA,EAAA,CACV,4BACA,0BACG,KAAA;AACH,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AACzB,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AAAA,KAC3B,CAAA;AAAA;AACF;AAfE,iBAAA,GAAA,IAAA,OAAA,EAAA;AAEA,iBAAA,GAAA,IAAA,OAAA,EAAA;AAeF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA;AAC/C,EAAM,MAAA,wBAAA,GAA2B,QAE/B,MAAM;AACN,IAAM,MAAA,KAAA,GAAQ,cAAgC,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC1E,IAAA,IAAI,SAAS,KAAM,CAAA,OAAA,IAAW,CAAC,IAAA,CAAK,KAAO,EAAA;AACzC,MAAA,MAAM,EAAE,OAAA,EAAS,GAAG,eAAA,EAAoB,GAAA,KAAA;AACxC,MAAO,OAAA,eAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AACL,EAAA,uBACG,IAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,oBAAsB,EAAA;AAAA;AAAA,KACxB;AAAA,IACC,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzC,WAAW,oBAAoB,CAAA;AACjC,EAAO,OAAA,EAAE,kBAAkB,gBAAiB,EAAA;AAC9C;;;;"}
+{"version":3,"file":"NotificationsProvider.js","sources":["../../../packages/vuu-notifications/src/NotificationsProvider.tsx"],"sourcesContent":["import React, { ReactElement, useContext, useMemo } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport {\n  DispatchHideNotification,\n  DispatchShowNotification,\n  type NotificationsContext,\n  ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { getLocalEntity } from \"@vuu-ui/vuu-utils\";\n\ninterface ToastWithExpiry extends ToastNotificationDescriptor {\n  expires: number;\n}\n\n/*\n  The Context is not exposed outside this module, only the notify\n  prop can be accessed via the useNotifications hook.\n  The NotificationsCenter receives the full context object and\n  sets the notify method. State management around dispatched\n  notifications is handled entirely within the NotificationsCenter,\n  avoiding rerendering our children when notifications are \n  dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n  #showNotification: DispatchShowNotification = () => {\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n    return undefined;\n  };\n  #hideNotification: DispatchHideNotification = () =>\n    console.log(\"have you forgotten to provide a NotificationsCenter?\");\n  // We want the public notify method to be stable, setNotify call should not trigger re-renders\n  showNotification: DispatchShowNotification = (notification) =>\n    this.#showNotification(notification);\n  hideNotification: DispatchHideNotification = (id) => this.#hideNotification(id);\n  setNotify = (\n    showNotificationDispatcher: DispatchShowNotification,\n    hideNotificationDispatcher: DispatchHideNotification,\n  ) => {\n    this.#showNotification = showNotificationDispatcher;\n    this.#hideNotification = hideNotificationDispatcher;\n  };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n  new NotificationsContextObject(),\n);\n\nexport const NotificationsProvider = (props: {\n  children: ReactElement | ReactElement[];\n}) => {\n  const context = useContext(NotificationsContext);\n  const startupToastNotification = useMemo<\n    ToastNotificationDescriptor | undefined\n  >(() => {\n    const toast = getLocalEntity<ToastWithExpiry>(\"startup-notification\", true);\n    if (toast && toast.expires >= +Date.now()) {\n      const { expires, ...toastDescriptor } = toast;\n      return toastDescriptor;\n    }\n  }, []);\n  return (\n    <NotificationsContext.Provider value={context}>\n      <NotificationsCenter\n        startupToastNotification={startupToastNotification}\n        notificationsContext={context}\n      />\n      {props.children}\n    </NotificationsContext.Provider>\n  );\n};\n\nexport const useNotifications = () => {\n  const { hideNotification, showNotification } =\n    useContext(NotificationsContext);\n  return { hideNotification, showNotification };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,EAAA,iBAAA;AAuBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAAA,YAAA,CAAA,IAAA,EAAA,iBAAA,EAA8C,MAAM;AAClD,MAAA,OAAA,CAAQ,IAAI,sDAAsD,CAAA;AAClE,MAAO,OAAA,KAAA,CAAA;AAAA,KACT,CAAA;AACA,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,YAAA,KAC5C,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AACzB,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,EAAA,KAAO,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,EAAA,CAAA,CAAA;AAC5E,IAAY,aAAA,CAAA,IAAA,EAAA,WAAA,EAAA,CACV,4BACA,0BACG,KAAA;AACH,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AACzB,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AAAA,KAC3B,CAAA;AAAA;AACF;AAjBE,iBAAA,GAAA,IAAA,OAAA,EAAA;AAIA,iBAAA,GAAA,IAAA,OAAA,EAAA;AAeF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA;AAC/C,EAAM,MAAA,wBAAA,GAA2B,QAE/B,MAAM;AACN,IAAM,MAAA,KAAA,GAAQ,cAAgC,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC1E,IAAA,IAAI,SAAS,KAAM,CAAA,OAAA,IAAW,CAAC,IAAA,CAAK,KAAO,EAAA;AACzC,MAAA,MAAM,EAAE,OAAA,EAAS,GAAG,eAAA,EAAoB,GAAA,KAAA;AACxC,MAAO,OAAA,eAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AACL,EAAA,uBACG,IAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,oBAAsB,EAAA;AAAA;AAAA,KACxB;AAAA,IACC,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzC,WAAW,oBAAoB,CAAA;AACjC,EAAO,OAAA,EAAE,kBAAkB,gBAAiB,EAAA;AAC9C;;;;"}

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    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        --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\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-info-circle));\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-info-circle));\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        --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\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-info-circle));\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-info-circle));\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        white-space: nowrap;\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/esm/ToastNotification.js

@@ -76,7 +76,8 @@ const ToastNotification = ({
         [`${classBase}-withContent`]: content !== void 0,
         [`${classBase}-withIcon`]: icon !== false,
         [`${classBase}-withTransition`]: animationType !== void 0 && !hidden,
-        [`${classBase}-withCloseButton`]: withCloseButton
+        [`${classBase}-withCloseButton`]: withCloseButton,
+        [`${classBase}-${notification.status}-${notification.className}`]: notification.className !== void 0
       }),
       id,
       left,

package/esm/ToastNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { RefCallback, useCallback } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastHoverHandler = (id?: string) => void;\n\nexport type ToastNotificationProps = {\n  hidden?: boolean;\n  id?: string;\n  left?: number;\n  notification: ToastNotificationDescriptor;\n  onMeasured?: (id: string, height: number, width: number) => void;\n  onDismiss?: (id?: string) => void;\n  onHoverEntry?: ToastHoverHandler;\n  onHoverExit?: ToastHoverHandler;\n  opacity?: number;\n  top?: number;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = ({\n  hidden,\n  id,\n  left,\n  onDismiss,\n  onMeasured,\n  top,\n  notification,\n  onHoverEntry,\n  onHoverExit,\n  opacity = 1,\n}: ToastNotificationProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: toastNotificationCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const {\n    animationType,\n    content,\n    dismissal,\n    header,\n    icon,\n    showCloseButton,\n    status,\n  } = notification;\n\n  const iconName = icon === false ? undefined : (icon ?? status);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        setTimeout(() => {\n          const { height, width } = el.getBoundingClientRect();\n          if (id) {\n            onMeasured?.(id, height, width);\n          }\n        }, 60);\n      }\n    },\n    [id, onMeasured],\n  );\n\n  const handleDismiss = useCallback(() => {\n    onDismiss?.(id);\n  }, [id, onDismiss]);\n\n  const handleMouseEnter = useCallback(\n    () => onHoverEntry?.(id),\n    [id, onHoverEntry],\n  );\n  const handleMouseLeave = useCallback(\n    () => onHoverExit?.(id),\n    [id, onHoverExit],\n  );\n\n  if (dismissal === \"manual\" && showCloseButton === false) {\n    console.warn(\n      \"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false\",\n    );\n  }\n\n  const withCloseButton = showCloseButton || dismissal === \"manual\";\n\n  return (\n    <FloatingComponent\n      className={cx(classBase, `${classBase}-${notification.status}`, {\n        [`${classBase}-hidden`]: hidden,\n        [`${classBase}-transparent`]: opacity === 0,\n        [`${classBase}-withContent`]: content !== undefined,\n        [`${classBase}-withIcon`]: icon !== false,\n        [`${classBase}-withTransition`]: animationType !== undefined && !hidden,\n        [`${classBase}-withCloseButton`]: withCloseButton,\n      })}\n      id={id}\n      left={left}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      open\n      position=\"absolute\"\n      ref={callbackRef}\n      role=\"alert\"\n      top={top}\n    >\n      {iconName ? <Icon name={iconName} /> : null}\n      <h3 className={`${classBase}-header`}>{header}</h3>\n      {content ? <div className={`${classBase}-content`}>{content}</div> : null}\n      {withCloseButton ? (\n        <IconButton\n          className={`${classBase}-closeButton`}\n          icon=\"close\"\n          onClick={handleDismiss}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n        />\n      ) : null}\n    </FloatingComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { RefCallback, useCallback } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastHoverHandler = (id?: string) => void;\n\nexport type ToastNotificationProps = {\n  hidden?: boolean;\n  id?: string;\n  left?: number;\n  notification: ToastNotificationDescriptor;\n  onMeasured?: (id: string, height: number, width: number) => void;\n  onDismiss?: (id?: string) => void;\n  onHoverEntry?: ToastHoverHandler;\n  onHoverExit?: ToastHoverHandler;\n  opacity?: number;\n  top?: number;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = ({\n  hidden,\n  id,\n  left,\n  onDismiss,\n  onMeasured,\n  top,\n  notification,\n  onHoverEntry,\n  onHoverExit,\n  opacity = 1,\n}: ToastNotificationProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toast-notification\",\n    css: toastNotificationCss,\n    window: targetWindow,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const {\n    animationType,\n    content,\n    dismissal,\n    header,\n    icon,\n    showCloseButton,\n    status,\n  } = notification;\n\n  const iconName = icon === false ? undefined : (icon ?? status);\n\n  const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        setTimeout(() => {\n          const { height, width } = el.getBoundingClientRect();\n          if (id) {\n            onMeasured?.(id, height, width);\n          }\n        }, 60);\n      }\n    },\n    [id, onMeasured],\n  );\n\n  const handleDismiss = useCallback(() => {\n    onDismiss?.(id);\n  }, [id, onDismiss]);\n\n  const handleMouseEnter = useCallback(\n    () => onHoverEntry?.(id),\n    [id, onHoverEntry],\n  );\n  const handleMouseLeave = useCallback(\n    () => onHoverExit?.(id),\n    [id, onHoverExit],\n  );\n\n  if (dismissal === \"manual\" && showCloseButton === false) {\n    console.warn(\n      \"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false\",\n    );\n  }\n\n  const withCloseButton = showCloseButton || dismissal === \"manual\";\n\n  return (\n    <FloatingComponent\n      className={cx(classBase, `${classBase}-${notification.status}`, {\n        [`${classBase}-hidden`]: hidden,\n        [`${classBase}-transparent`]: opacity === 0,\n        [`${classBase}-withContent`]: content !== undefined,\n        [`${classBase}-withIcon`]: icon !== false,\n        [`${classBase}-withTransition`]: animationType !== undefined && !hidden,\n        [`${classBase}-withCloseButton`]: withCloseButton,\n        [`${classBase}-${notification.status}-${notification.className}`]: notification.className !== undefined,\n      })}\n      id={id}\n      left={left}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      open\n      position=\"absolute\"\n      ref={callbackRef}\n      role=\"alert\"\n      top={top}\n    >\n      {iconName ? <Icon name={iconName} /> : null}\n      <h3 className={`${classBase}-header`}>{header}</h3>\n      {content ? <div className={`${classBase}-content`}>{content}</div> : null}\n      {withCloseButton ? (\n        <IconButton\n          className={`${classBase}-closeButton`}\n          icon=\"close\"\n          onClick={handleDismiss}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n        />\n      ) : null}\n    </FloatingComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.19-beta.3",
+  "version": "2.1.19",
   "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.19-beta.3",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.3"
+    "@vuu-ui/vuu-ui-controls": "2.1.19",
+    "@vuu-ui/vuu-utils": "2.1.19"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/NotificationsContext.d.ts

@@ -1,8 +1,8 @@
 import { type ValidationStatus } from "@salt-ds/core";
 import { ValueOf } from "@vuu-ui/vuu-utils";
 import { ReactNode } from "react";
-export type DispatchShowNotification = (notification: Notification) => void;
-export type DispatchHideNotification = () => void;
+export type DispatchShowNotification = (notification: Notification) => string | undefined;
+export type DispatchHideNotification = (id?: string) => void;
 export declare const NotificationType: {
     readonly Toast: "toast";
     readonly Workspace: "workspace";
@@ -29,6 +29,7 @@ interface NotificationDescriptorBase<T extends NotificationType> {
     type: T;
 }
 export interface ToastNotificationDescriptor extends NotificationDescriptorBase<"toast"> {
+    className?: string;
     content?: ReactNode;
     header: string;
 }