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

package/src/NotificationsCenter.js

@@ -1,185 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

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