@vuu-ui/vuu-notifications 4.0.0-alpha.20 → 4.0.0-alpha.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.22",
   "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.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20"
+    "@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.22",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.22"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

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";

package/types/src/NotificationsCenter.d.ts

@@ -1,6 +0,0 @@
-import { NotificationsContextProps, ToastNotificationDescriptor } from "./NotificationsContext";
-export interface NotificationsCenterProps {
-    notificationsContext: NotificationsContextProps;
-    startupToastNotification?: ToastNotificationDescriptor;
-}
-export declare const NotificationsCenter: ({ notificationsContext, startupToastNotification, }: NotificationsCenterProps) => import("react").JSX.Element;

package/types/src/NotificationsContext.d.ts

@@ -1,47 +0,0 @@
-import type { ValidationStatus } from "@salt-ds/core";
-import type { ValueOf } from "@vuu-ui/vuu-utils";
-import type { ReactNode } from "react";
-export type DispatchShowNotification = (notification: Notification) => string | undefined;
-export type DispatchHideNotification = (id?: string) => void;
-export declare const NotificationType: {
-    readonly Toast: "toast";
-    readonly Workspace: "workspace";
-};
-export type NotificationType = ValueOf<typeof NotificationType>;
-export type DismissalStyle = "automatic" | "manual";
-export type NotificationAnimationType = "slide-in" | "slide-out" | "slide-in,slide-out";
-interface NotificationDescriptorBase<T extends NotificationType> {
-    animationType?: NotificationAnimationType;
-    /**
-     * 'automatic' dismissal means the Notification will be removed after a configurable delay
-     * (6 seconds by default). 'manual' means a close button will be rendered and user must
-     * manually dismiss by clicking the close button.
-     */
-    dismissal?: DismissalStyle;
-    /**
-     * A custom icon can be provided or false can be used to suppress rendering of any icon.
-     * Default icons will be rendered for the different status values.
-     */
-    icon?: string | false;
-    renderPostRefresh?: boolean;
-    showCloseButton?: boolean;
-    status: ValidationStatus;
-    type: T;
-}
-export interface ToastNotificationDescriptor extends NotificationDescriptorBase<"toast"> {
-    className?: string;
-    content?: ReactNode;
-    header: string;
-}
-export interface WorkspaceNotificationDescriptor extends NotificationDescriptorBase<"workspace"> {
-    content: ReactNode;
-}
-export type Notification = ToastNotificationDescriptor | WorkspaceNotificationDescriptor;
-export declare const isToastNotification: (n: Notification) => n is ToastNotificationDescriptor;
-export declare const isWorkspaceNotification: (n: Notification) => n is WorkspaceNotificationDescriptor;
-export type NotificationsContextProps = {
-    hideNotification: DispatchHideNotification;
-    showNotification: DispatchShowNotification;
-    setNotify: (showNotificationDispatcher: DispatchShowNotification, hideNotificationDispatcher: DispatchHideNotification) => void;
-};
-export {};

package/types/src/NotificationsProvider.d.ts

@@ -1,9 +0,0 @@
-import React, { type ReactElement } from "react";
-import type { DispatchHideNotification, DispatchShowNotification } from "./NotificationsContext";
-export declare const NotificationsProvider: (props: {
-    children: ReactElement | ReactElement[];
-}) => React.JSX.Element;
-export declare const useNotifications: () => {
-    hideNotification: DispatchHideNotification;
-    showNotification: DispatchShowNotification;
-};

package/types/src/ToastNotification.d.ts

@@ -1,15 +0,0 @@
-import type { ToastNotificationDescriptor } from "./NotificationsContext";
-export type ToastHoverHandler = (id?: string) => void;
-export type ToastNotificationProps = {
-    hidden?: boolean;
-    id?: string;
-    left?: number;
-    notification: ToastNotificationDescriptor;
-    onMeasured?: (id: string, height: number, width: number) => void;
-    onDismiss?: (id?: string) => void;
-    onHoverEntry?: ToastHoverHandler;
-    onHoverExit?: ToastHoverHandler;
-    opacity?: number;
-    top?: number;
-};
-export declare const ToastNotification: ({ hidden, id, left, onDismiss, onMeasured, top, notification, onHoverEntry, onHoverExit, opacity, }: ToastNotificationProps) => import("react").JSX.Element;

package/types/src/WorkspaceNotification.d.ts

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

package/types/src/index.d.ts

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