@vuu-ui/vuu-notifications 2.1.18 → 2.1.19-beta.2

package/package.json

@@ -1,14 +1,15 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
   "description": "VUU notifications - Toast, WorkspaceNotification etc",
   "author": "heswell",
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
     "@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.18",
-    "@vuu-ui/vuu-utils": "2.1.18"
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -18,20 +19,16 @@
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-notifications",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/NotificationsCenter.js

@@ -0,0 +1,185 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getUniqueId, saveLocalEntity } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isToastNotification, isWorkspaceNotification } from "./NotificationsContext.js";
+import { ToastNotification } from "./ToastNotification.js";
+import { WorkspaceNotification } from "./WorkspaceNotification.js";
+const ZeroSize = {
+    height: 0,
+    width: 0
+};
+const toastContainerRightPadding = 20;
+const toastOffsetTop = 60;
+const toastDisplayDuration = 6000;
+const toastDisplayDurationPostHover = 2000;
+const toastContainerContentGap = 10;
+const RuntimeToast = (toast)=>{
+    const slidesIn = !!toast.animationType?.includes("slide-in");
+    return {
+        ...toast,
+        hidden: slidesIn,
+        id: getUniqueId(),
+        left: document.body.clientWidth,
+        opacity: slidesIn ? void 0 : 0,
+        size: ZeroSize
+    };
+};
+const NotificationsCenter = ({ notificationsContext, startupToastNotification })=>{
+    const toastNotifications = useMemo(()=>startupToastNotification ? [
+            RuntimeToast(startupToastNotification)
+        ] : [], [
+        startupToastNotification
+    ]);
+    const [workspaceNotification, setWorkspaceNotification] = useState(null);
+    const hoveredToastRef = useRef(void 0);
+    const notificationsRef = useRef(toastNotifications);
+    const [notifications, _setNotifications] = useState(toastNotifications);
+    const setNotifications = useCallback((notifications)=>{
+        _setNotifications(notificationsRef.current = notifications);
+    }, []);
+    const showNotification = useCallback((notification)=>{
+        if (isToastNotification(notification)) if (notification.renderPostRefresh) saveLocalEntity("startup-notification", {
+            ...notification,
+            expires: +new Date() + 10000
+        });
+        else setNotifications(notificationsRef.current.concat(RuntimeToast(notification)));
+        else if (isWorkspaceNotification(notification)) setWorkspaceNotification(/*#__PURE__*/ jsx(WorkspaceNotification, {
+            children: notification.content
+        }));
+        else throw Error("[NotificationsCenter] invalid notification received");
+    }, [
+        setNotifications
+    ]);
+    const hideNotification = useCallback(()=>{
+        setWorkspaceNotification(null);
+    }, []);
+    useMemo(()=>{
+        notificationsContext.setNotify(showNotification, hideNotification);
+    }, [
+        hideNotification,
+        notificationsContext,
+        showNotification
+    ]);
+    const onMeasured = useCallback((id, height, width)=>{
+        let scheduledUpdate;
+        const pageWidth = document.body.clientWidth;
+        setNotifications(notificationsRef.current.map((n)=>{
+            if (n.id !== id) return n;
+            {
+                const slideIn = n.animationType?.includes("slide-in");
+                const newToast = {
+                    ...n,
+                    hidden: !!slideIn,
+                    left: slideIn ? pageWidth + width - toastContainerRightPadding : pageWidth - width - toastContainerRightPadding,
+                    size: {
+                        height,
+                        width
+                    },
+                    transitionStatus: "entry"
+                };
+                scheduledUpdate = slideIn ? {
+                    ...newToast,
+                    hidden: false,
+                    left: pageWidth - width - toastContainerRightPadding
+                } : {
+                    ...newToast,
+                    opacity: 1
+                };
+                return newToast;
+            }
+        }));
+        if (scheduledUpdate) {
+            const updateNotifications = notificationsRef.current.map((n)=>{
+                if (n.id === scheduledUpdate?.id) return scheduledUpdate;
+                return n;
+            });
+            requestAnimationFrame(()=>{
+                setNotifications(updateNotifications);
+            });
+        }
+    }, [
+        setNotifications
+    ]);
+    useEffect(()=>{
+        document.body.addEventListener("transitionend", (e)=>{
+            const { classList, id } = e.target;
+            if (classList?.contains("vuuToastNotification")) {
+                const notification = notificationsRef.current.find((n)=>n.id === id);
+                if (notification?.transitionStatus === "exit") setNotifications(notificationsRef.current.filter((n)=>n.id !== id));
+                else if (notification?.dismissal !== "manual") setTimeout(()=>{
+                    if (notification && hoveredToastRef.current !== id) {
+                        const pageWidth = document.body.clientWidth;
+                        setNotifications(notificationsRef.current.map((n)=>{
+                            if (n.id !== id) return n;
+                            if (n.animationType?.includes("slide-out")) return {
+                                ...n,
+                                transitionStatus: "exit",
+                                left: pageWidth + toastContainerRightPadding
+                            };
+                            return {
+                                ...n,
+                                transitionStatus: "exit",
+                                opacity: 0
+                            };
+                        }).filter((v)=>null !== v));
+                    }
+                }, toastDisplayDuration);
+            }
+        });
+    }, [
+        setNotifications
+    ]);
+    const handleDismiss = useCallback((id)=>{
+        if (id) setNotifications(notificationsRef.current.filter((n)=>n.id !== id));
+    }, [
+        setNotifications
+    ]);
+    const handleHoverEntry = useCallback((id)=>{
+        hoveredToastRef.current = id;
+    }, []);
+    const handleHoverExit = useCallback((id)=>{
+        hoveredToastRef.current = void 0;
+        const notification = notificationsRef.current.find((n)=>n.id === id);
+        setTimeout(()=>{
+            if (notification) {
+                const pageWidth = document.body.clientWidth;
+                setNotifications(notificationsRef.current.map((n)=>{
+                    if (n.id !== id) return n;
+                    if (n.animationType?.includes("slide-out")) return {
+                        ...n,
+                        transitionStatus: "exit",
+                        left: pageWidth + toastContainerRightPadding
+                    };
+                    return {
+                        ...n,
+                        transitionStatus: "exit",
+                        opacity: 0
+                    };
+                }).filter((v)=>null !== v));
+            }
+        }, toastDisplayDurationPostHover);
+    }, [
+        setNotifications
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            workspaceNotification,
+            notifications.map(({ hidden, id, left = 0, opacity, size, ...toast }, i)=>{
+                const height = size ? size.height : 80;
+                return /*#__PURE__*/ jsx(ToastNotification, {
+                    hidden: hidden,
+                    id: id,
+                    left: left,
+                    notification: toast,
+                    onHoverEntry: handleHoverEntry,
+                    onHoverExit: handleHoverExit,
+                    onMeasured: onMeasured,
+                    onDismiss: handleDismiss,
+                    opacity: opacity,
+                    top: toastOffsetTop + (height + toastContainerContentGap) * i
+                }, id);
+            })
+        ]
+    });
+};
+export { NotificationsCenter };

package/src/NotificationsContext.js

@@ -0,0 +1,7 @@
+const NotificationType = {
+    Toast: "toast",
+    Workspace: "workspace"
+};
+const isToastNotification = (n)=>n.type === NotificationType.Toast;
+const isWorkspaceNotification = (n)=>n.type === NotificationType.Workspace;
+export { NotificationType, isToastNotification, isWorkspaceNotification };

package/src/NotificationsProvider.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useContext, useMemo } from "react";
+import { NotificationsCenter } from "./NotificationsCenter.js";
+import { getLocalEntity } from "@vuu-ui/vuu-utils";
+class NotificationsContextObject {
+    #showNotification = ()=>console.log("have you forgotten to provide a NotificationsCenter?");
+    #hideNotification = ()=>console.log("have you forgotten to provide a NotificationsCenter?");
+    showNotification = (notification)=>this.#showNotification(notification);
+    hideNotification = ()=>this.#hideNotification();
+    setNotify = (showNotificationDispatcher, hideNotificationDispatcher)=>{
+        this.#showNotification = showNotificationDispatcher;
+        this.#hideNotification = hideNotificationDispatcher;
+    };
+}
+const NotificationsContext = /*#__PURE__*/ react.createContext(new NotificationsContextObject());
+const NotificationsProvider = (props)=>{
+    const context = useContext(NotificationsContext);
+    const startupToastNotification = useMemo(()=>{
+        const toast = getLocalEntity("startup-notification", true);
+        if (toast && toast.expires >= +Date.now()) {
+            const { expires, ...toastDescriptor } = toast;
+            return toastDescriptor;
+        }
+    }, []);
+    return /*#__PURE__*/ jsxs(NotificationsContext.Provider, {
+        value: context,
+        children: [
+            /*#__PURE__*/ jsx(NotificationsCenter, {
+                startupToastNotification: startupToastNotification,
+                notificationsContext: context
+            }),
+            props.children
+        ]
+    });
+};
+const useNotifications = ()=>{
+    const { hideNotification, showNotification } = useContext(NotificationsContext);
+    return {
+        hideNotification,
+        showNotification
+    };
+};
+export { NotificationsProvider, useNotifications };

package/src/ToastNotification.css.js

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

package/src/ToastNotification.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFloatingComponent } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { useCallback } from "react";
+import ToastNotification from "./ToastNotification.css";
+const classBase = "vuuToastNotification";
+const ToastNotification_ToastNotification = ({ hidden, id, left, onDismiss, onMeasured, top, notification, onHoverEntry, onHoverExit, opacity = 1 })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toast-notification",
+        css: ToastNotification,
+        window: targetWindow
+    });
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const { animationType, content, dismissal, header, icon, showCloseButton, status } = notification;
+    const iconName = false === icon ? void 0 : icon ?? status;
+    const callbackRef = useCallback((el)=>{
+        if (el) setTimeout(()=>{
+            const { height, width } = el.getBoundingClientRect();
+            if (id) onMeasured?.(id, height, width);
+        }, 60);
+    }, [
+        id,
+        onMeasured
+    ]);
+    const handleDismiss = useCallback(()=>{
+        onDismiss?.(id);
+    }, [
+        id,
+        onDismiss
+    ]);
+    const handleMouseEnter = useCallback(()=>onHoverEntry?.(id), [
+        id,
+        onHoverEntry
+    ]);
+    const handleMouseLeave = useCallback(()=>onHoverExit?.(id), [
+        id,
+        onHoverExit
+    ]);
+    if ("manual" === dismissal && false === showCloseButton) console.warn("[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false");
+    const withCloseButton = showCloseButton || "manual" === dismissal;
+    return /*#__PURE__*/ jsxs(FloatingComponent, {
+        className: clsx(classBase, `${classBase}-${notification.status}`, {
+            [`${classBase}-hidden`]: hidden,
+            [`${classBase}-transparent`]: 0 === opacity,
+            [`${classBase}-withContent`]: void 0 !== content,
+            [`${classBase}-withIcon`]: false !== icon,
+            [`${classBase}-withTransition`]: void 0 !== animationType && !hidden,
+            [`${classBase}-withCloseButton`]: withCloseButton
+        }),
+        id: id,
+        left: left,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        open: true,
+        position: "absolute",
+        ref: callbackRef,
+        role: "alert",
+        top: top,
+        children: [
+            iconName ? /*#__PURE__*/ jsx(Icon, {
+                name: iconName
+            }) : null,
+            /*#__PURE__*/ jsx("h3", {
+                className: `${classBase}-header`,
+                children: header
+            }),
+            content ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                children: content
+            }) : null,
+            withCloseButton ? /*#__PURE__*/ jsx(IconButton, {
+                className: `${classBase}-closeButton`,
+                icon: "close",
+                onClick: handleDismiss,
+                appearance: "transparent",
+                sentiment: "neutral"
+            }) : null
+        ]
+    });
+};
+export { ToastNotification_ToastNotification as ToastNotification };

package/src/WorkspaceNotification.css.js

@@ -0,0 +1,16 @@
+const css = `
+.vuuWorkspaceNotification {
+  z-index: var(--salt-zIndex-notification);
+  position: absolute;
+
+  & .vuuWorkspaceNotification-content {
+    background: var(--salt-container-primary-background);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+}
+
+
+`;
+export default css;

package/src/WorkspaceNotification.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useFloatingComponent } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { VuuShellLocation } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useMemo } from "react";
+import WorkspaceNotification from "./WorkspaceNotification.css";
+const classBase = "vuuWorkspaceNotification";
+const WorkspaceNotification_WorkspaceNotification = ({ children, className, style: styleProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toast-notification",
+        css: WorkspaceNotification,
+        window: targetWindow
+    });
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const [left, top, width, height] = useMemo(()=>{
+        const target = document.querySelector(`#${VuuShellLocation.WorkspaceContainer}`);
+        if (!target) return [
+            0,
+            0,
+            200,
+            200
+        ];
+        {
+            const { left, top, width, height } = target.getBoundingClientRect();
+            return [
+                left,
+                top,
+                width,
+                height
+            ];
+        }
+    }, []);
+    return /*#__PURE__*/ jsx(FloatingComponent, {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        open: true,
+        role: "alert",
+        left: left,
+        top: top,
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${classBase}-content`,
+            style: {
+                height,
+                width
+            },
+            children: children
+        })
+    });
+};
+export { WorkspaceNotification_WorkspaceNotification as WorkspaceNotification };

package/src/index.js

@@ -0,0 +1,3 @@
+export { NotificationType } from "./NotificationsContext.js";
+export { NotificationsProvider, useNotifications } from "./NotificationsProvider.js";
+export { ToastNotification } from "./ToastNotification.js";