@vuu-ui/vuu-notifications 4.0.0-alpha.2 → 4.0.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "VUU notifications - Toast, WorkspaceNotification etc",
   "main": "./src/index.js",
   "author": "heswell",
@@ -11,11 +11,11 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "dependencies": {
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.2",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.2"
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.21"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -30,8 +30,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "module": "./src/index.js",

package/src/NotificationsCenter.js

@@ -95,15 +95,9 @@ const NotificationsCenter = ({ notificationsContext, startupToastNotification })
                 return newToast;
             }
         }));
-        if (scheduledUpdate) {
-            const updateNotifications = notificationsRef.current.map((n)=>{
-                if (n.id === scheduledUpdate?.id) return scheduledUpdate;
-                return n;
-            });
-            requestAnimationFrame(()=>{
-                setNotifications(updateNotifications);
-            });
-        }
+        if (scheduledUpdate) requestAnimationFrame(()=>{
+            setNotifications(notificationsRef.current.map((n)=>n.id === scheduledUpdate?.id ? scheduledUpdate : n));
+        });
     }, [
         setNotifications
     ]);

package/src/NotificationsProvider.js

@@ -1,26 +1,47 @@
 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";
+import { createContext, useContext, useMemo, useState } from "react";
+import { NotificationsCenter } from "./NotificationsCenter.js";
+const globalContext = (name, defaultValue)=>{
+    const key = Symbol.for(name);
+    const contexts = globalThis;
+    let context = contexts[key];
+    if (void 0 === context) {
+        context = /*#__PURE__*/ createContext(defaultValue);
+        contexts[key] = context;
+    }
+    return context;
+};
 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);
+    interceptor = void 0;
+    showNotification = (notification)=>this.interceptor?.(notification) === "suppress" ? void 0 : this.#showNotification(notification);
     hideNotification = (id)=>this.#hideNotification(id);
     setNotify = (showNotificationDispatcher, hideNotificationDispatcher)=>{
         this.#showNotification = showNotificationDispatcher;
         this.#hideNotification = hideNotificationDispatcher;
     };
 }
-const NotificationsContext = /*#__PURE__*/ react.createContext(new NotificationsContextObject());
-const NotificationsProvider = (props)=>{
-    const context = useContext(NotificationsContext);
+const NotificationsContext = globalContext("vuu.notifications.context", null);
+const NotificationOriginContext = globalContext("vuu.notifications.origin", void 0);
+const noProvider = new NotificationsContextObject();
+const NotificationsProvider = ({ children, interceptor })=>{
+    const outerContext = useContext(NotificationsContext);
+    return outerContext ? children : /*#__PURE__*/ jsx(OutermostNotificationsProvider, {
+        interceptor: interceptor,
+        children: children
+    });
+};
+const OutermostNotificationsProvider = ({ children, interceptor })=>{
+    const [context] = useState(()=>new NotificationsContextObject());
+    context.interceptor = interceptor;
     const startupToastNotification = useMemo(()=>{
         const toast = getLocalEntity("startup-notification", true);
         if (toast && toast.expires >= +Date.now()) {
-            const { expires, ...toastDescriptor } = toast;
+            const { expires: _expires, ...toastDescriptor } = toast;
             return toastDescriptor;
         }
     }, []);
@@ -31,15 +52,41 @@ const NotificationsProvider = (props)=>{
                 startupToastNotification: startupToastNotification,
                 notificationsContext: context
             }),
-            props.children
+            children
         ]
     });
 };
+const NotificationOriginProvider = ({ children, connectionId, moduleId })=>{
+    const outerOrigin = useContext(NotificationOriginContext);
+    const outerModuleId = outerOrigin?.moduleId ?? outerOrigin?.parentModuleId;
+    const parentModuleId = outerModuleId !== moduleId ? outerModuleId : outerOrigin?.parentModuleId;
+    const origin = useMemo(()=>({
+            connectionId,
+            moduleId,
+            parentModuleId
+        }), [
+        connectionId,
+        moduleId,
+        parentModuleId
+    ]);
+    return /*#__PURE__*/ jsx(NotificationOriginContext.Provider, {
+        value: origin,
+        children: children
+    });
+};
+const useNotificationOrigin = ()=>useContext(NotificationOriginContext);
 const useNotifications = ()=>{
-    const { hideNotification, showNotification } = useContext(NotificationsContext);
-    return {
-        hideNotification,
-        showNotification
-    };
+    const context = useContext(NotificationsContext) ?? noProvider;
+    const origin = useContext(NotificationOriginContext);
+    return useMemo(()=>({
+            hideNotification: context.hideNotification,
+            showNotification: origin ? (notification)=>context.showNotification(notification.origin ? notification : {
+                    ...notification,
+                    origin
+                }) : context.showNotification
+        }), [
+        context,
+        origin
+    ]);
 };
-export { NotificationsProvider, useNotifications };
+export { NotificationOriginProvider, NotificationsProvider, useNotificationOrigin, useNotifications };

package/src/index.js

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

package/types/NotificationsCenter.d.ts

@@ -3,4 +3,4 @@ export interface NotificationsCenterProps {
     notificationsContext: NotificationsContextProps;
     startupToastNotification?: ToastNotificationDescriptor;
 }
-export declare const NotificationsCenter: ({ notificationsContext, startupToastNotification, }: NotificationsCenterProps) => import("react").JSX.Element;
+export declare const NotificationsCenter: ({ notificationsContext, startupToastNotification, }: NotificationsCenterProps) => import("react/jsx-runtime").JSX.Element;

package/types/NotificationsContext.d.ts

@@ -10,6 +10,18 @@ export declare const NotificationType: {
 export type NotificationType = ValueOf<typeof NotificationType>;
 export type DismissalStyle = "automatic" | "manual";
 export type NotificationAnimationType = "slide-in" | "slide-out" | "slide-in,slide-out";
+/**
+ * Where a notification was raised. Filled in by `useNotifications` from the
+ * nearest `NotificationOriginProvider`, e.g. the portal module rendering the
+ * caller.
+ */
+export interface NotificationOrigin {
+    moduleId?: string | number;
+    /** The Vuu server the module uses. */
+    connectionId?: string;
+    /** The module hosting the origin's module, for nested modules. */
+    parentModuleId?: string | number;
+}
 interface NotificationDescriptorBase<T extends NotificationType> {
     animationType?: NotificationAnimationType;
     /**
@@ -23,6 +35,13 @@ interface NotificationDescriptorBase<T extends NotificationType> {
      * Default icons will be rendered for the different status values.
      */
     icon?: string | false;
+    /** Set automatically by `useNotifications`, when a provider gives one. */
+    origin?: NotificationOrigin;
+    /**
+     * Whether a host that keeps a notification history (e.g. a portal) should
+     * record this notification. Hosts choose the default.
+     */
+    record?: boolean;
     renderPostRefresh?: boolean;
     showCloseButton?: boolean;
     status: ValidationStatus;
@@ -39,6 +58,12 @@ export interface WorkspaceNotificationDescriptor extends NotificationDescriptorB
 export type Notification = ToastNotificationDescriptor | WorkspaceNotificationDescriptor;
 export declare const isToastNotification: (n: Notification) => n is ToastNotificationDescriptor;
 export declare const isWorkspaceNotification: (n: Notification) => n is WorkspaceNotificationDescriptor;
+/**
+ * Decides whether a notification is shown. Given to the outermost
+ * `NotificationsProvider`, it sees every notification raised beneath it,
+ * including those raised inside nested providers.
+ */
+export type NotificationInterceptor = (notification: Notification) => "present" | "suppress";
 export type NotificationsContextProps = {
     hideNotification: DispatchHideNotification;
     showNotification: DispatchShowNotification;

package/types/NotificationsProvider.d.ts

@@ -1,8 +1,29 @@
-import React, { type ReactElement } from "react";
-import type { DispatchHideNotification, DispatchShowNotification } from "./NotificationsContext";
-export declare const NotificationsProvider: (props: {
-    children: ReactElement | ReactElement[];
-}) => React.JSX.Element;
+import { type ReactNode } from "react";
+import type { DispatchHideNotification, DispatchShowNotification, NotificationInterceptor, NotificationOrigin } from "./NotificationsContext";
+export interface NotificationsProviderProps {
+    children?: ReactNode;
+    /**
+     * Sees every notification raised beneath the provider before it is shown.
+     * Only used by the outermost provider.
+     */
+    interceptor?: NotificationInterceptor;
+}
+/**
+ * Shows the notifications raised beneath it. Inside another
+ * `NotificationsProvider` it renders only its children, so notifications
+ * from nested applications are shown, once, by the outermost provider.
+ */
+export declare const NotificationsProvider: ({ children, interceptor, }: NotificationsProviderProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/**
+ * Tags notifications raised beneath it with their origin. A nested provider
+ * records the enclosing origin's module as its `parentModuleId`.
+ */
+export declare const NotificationOriginProvider: ({ children, connectionId, moduleId, }: {
+    children?: ReactNode;
+    connectionId?: string;
+    moduleId?: string | number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useNotificationOrigin: () => NotificationOrigin | undefined;
 export declare const useNotifications: () => {
     hideNotification: DispatchHideNotification;
     showNotification: DispatchShowNotification;

package/types/ToastNotification.d.ts

@@ -12,4 +12,4 @@ export type ToastNotificationProps = {
     opacity?: number;
     top?: number;
 };
-export declare const ToastNotification: ({ hidden, id, left, onDismiss, onMeasured, top, notification, onHoverEntry, onHoverExit, opacity, }: ToastNotificationProps) => import("react").JSX.Element;
+export declare const ToastNotification: ({ hidden, id, left, onDismiss, onMeasured, top, notification, onHoverEntry, onHoverExit, opacity, }: ToastNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/types/WorkspaceNotification.d.ts

@@ -2,4 +2,4 @@ import { HTMLAttributes, ReactNode } from "react";
 export interface WorkspaceNotificationProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-export declare const WorkspaceNotification: ({ children, className, style: styleProp, ...htmlAttributes }: WorkspaceNotificationProps) => import("react").JSX.Element;
+export declare const WorkspaceNotification: ({ children, className, style: styleProp, ...htmlAttributes }: WorkspaceNotificationProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -1,3 +1,3 @@
-export { NotificationType, type Notification, type NotificationAnimationType, } from "./NotificationsContext";
-export { NotificationsProvider, useNotifications, } from "./NotificationsProvider";
+export { NotificationType, type Notification, type NotificationAnimationType, type NotificationInterceptor, type NotificationOrigin, type ToastNotificationDescriptor, type WorkspaceNotificationDescriptor, isToastNotification, isWorkspaceNotification, } from "./NotificationsContext";
+export { NotificationOriginProvider, NotificationsProvider, type NotificationsProviderProps, useNotificationOrigin, useNotifications, } from "./NotificationsProvider";
 export { ToastNotification, type ToastNotificationProps, } from "./ToastNotification";