pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/NotificationCenter/center/NotificationCenterProps.d.ts

@@ -0,0 +1,71 @@
+import type { NotificationCounts, NotificationLabels, NotificationSourceBinding } from "../core/NotificationSourceProps";
+/** Strings the bell and the panel add to the shared ones; anything left out stays English. */
+export interface NotificationCenterLabels extends NotificationLabels {
+    /** The bell's accessible name, built from the server counts. */
+    bell: (counts: NotificationCounts) => string;
+    /** Panel heading. */
+    title: string;
+    /** First tab: decisions and unread mentions. */
+    needsYouTab: string;
+    /** Second tab: everything else. */
+    activityTab: string;
+    /** Accessible name of the tab list. */
+    tabsLabel: string;
+    /** Header action for the open tab. */
+    markAllRead: string;
+    /** Footer link to the full inbox. */
+    openInbox: string;
+    /** Header gear. */
+    settings: string;
+    /** Close button of the phone sheet. */
+    close: string;
+    /** Spoken while the first fetch is running. */
+    loading: string;
+    /** Heading of the failed-load panel. */
+    loadErrorTitle: string;
+    /** Body of the failed-load panel. */
+    loadErrorDescription: string;
+    /** Heading shown when the person's role can't see notifications. */
+    noAccessTitle: string;
+    /** Body of the no-access panel; `appName` comes from the source. */
+    noAccessDescription: (appName?: string) => string;
+    /** Heading of an empty Needs you tab. */
+    emptyNeedsYouTitle: string;
+    /** Body of an empty Needs you tab. */
+    emptyNeedsYouDescription: string;
+    /** Heading of an empty Activity tab. */
+    emptyActivityTitle: string;
+    /** Body of an empty Activity tab. */
+    emptyActivityDescription: string;
+    /** Offline banner; `loadedAt` is the already formatted time of the last fetch, if known. */
+    offlineBanner: (loadedAt: string | undefined) => string;
+    /** Visible text of the "N new" pill. */
+    newCount: (count: number) => string;
+    /** Accessible name of the "N new" pill; must start with the visible text. */
+    newCountName: (count: number) => string;
+    /** A tab count above the cap, e.g. "99+". */
+    overflowCount: (cap: number) => string;
+}
+/** Forces one presentation; leave it out and the panel follows the viewport. */
+export type NotificationCenterVariant = "popover" | "sheet";
+/** The panel's two tabs; type filters live only in the inbox. */
+export type NotificationCenterTab = "needsYou" | "activity";
+/** Bell plus panel with exactly two tabs; pass the source props, or render it inside a `NotificationCenterProvider`. Needs a `ToasterProvider` above. */
+export type NotificationCenterProps = NotificationSourceBinding & {
+    /** "popover" anchors the panel to the bell, "sheet" opens it full screen; defaults to a popover from 48em up and a sheet below. */
+    variant?: NotificationCenterVariant;
+    /** Shows "Open inbox" in the panel footer; the library never routes. */
+    onOpenInbox?: () => void;
+    /** Shows the settings gear in the panel header. */
+    onOpenSettings?: () => void;
+    /** Controlled open state; leave it out and the bell toggles the panel itself. */
+    isOpen?: boolean;
+    /** Called when the bell, Esc, an outside click or opening a row asks to open or close. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Tab on open; defaults to Needs you while it holds anything, else Activity. */
+    defaultTab?: NotificationCenterTab;
+    /** Bell and panel strings; shared keys override the provider's for this component only. */
+    labels?: Partial<NotificationCenterLabels>;
+    /** Test id root: the bell gets `-bell`, the panel `-panel`. */
+    "data-testid"?: string;
+};

package/dist/Components/NotificationCenter/center/NotificationCenterProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NotificationCenter/center/PanelRows.d.ts

@@ -0,0 +1,10 @@
+import type { NotificationRowOpenEvent } from "../row/NotificationRowProps";
+import type { LiveNotificationEntry, NotificationFormatter, NotificationGroup } from "../core/NotificationEngineProps";
+interface PanelRowsProps {
+    groups: NotificationGroup[];
+    variant: "panel" | "phone";
+    format: NotificationFormatter;
+    onOpenItem: (item: LiveNotificationEntry, event: NotificationRowOpenEvent) => void;
+}
+export declare const PanelRows: ({ groups, variant, format, onOpenItem }: PanelRowsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/center/PanelRows.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelRows = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const NotificationRow_1 = __importDefault(require("../row/NotificationRow"));
+const PanelRows = ({ groups, variant, format, onOpenItem }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const idPrefix = (0, react_1.useId)();
+    const [openThreads, setOpenThreads] = (0, react_1.useState)(() => new Set());
+    const toggleThread = (0, react_1.useCallback)((thread) => {
+        setOpenThreads((current) => {
+            const next = new Set(current);
+            if (next.has(thread.key))
+                next.delete(thread.key);
+            else
+                next.add(thread.key);
+            return next;
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { pb: 2, children: groups.map((group) => {
+            const headingId = `${idPrefix}-${group.key}`;
+            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "section", "aria-labelledby": group.label === null ? undefined : headingId, children: [group.label !== null && ((0, jsx_runtime_1.jsxs)(Primitives_1.Heading, { as: "h3", id: headingId, position: "sticky", top: 0, zIndex: 3, display: "flex", alignItems: "center", gap: 1.5, px: 4, pt: 3, pb: 1.5, bg: colors.surfaceRaised, color: colors.textMuted, fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", children: [(0, jsx_runtime_1.jsx)("span", { children: group.label }), group.count > 0 && (0, jsx_runtime_1.jsx)("span", { children: format.number(group.count) })] })), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "ul", role: "list", listStyleType: "none", m: 0, px: "6px", display: "grid", gap: "2px", children: group.threads.map((thread) => {
+                            const isOpen = openThreads.has(thread.key);
+                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NotificationRow_1.default, { item: thread.lead, variant: variant, thread: thread, isThreadOpen: isOpen, onThreadToggle: toggleThread, onOpen: onOpenItem }), isOpen &&
+                                        thread.rest.map((item) => ((0, jsx_runtime_1.jsx)(NotificationRow_1.default, { item: item, variant: variant, isThreadChild: true, onOpen: onOpenItem }, item.entry.id)))] }, thread.key));
+                        }) })] }, group.key));
+        }) }));
+};
+exports.PanelRows = PanelRows;

package/dist/Components/NotificationCenter/center/PanelStates.d.ts

@@ -0,0 +1,17 @@
+import type { NotificationCenterLabels, NotificationCenterTab } from "./NotificationCenterProps";
+export declare const PanelSkeleton: ({ isSheet }: {
+    isSheet: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+interface StateProps {
+    labels: NotificationCenterLabels;
+}
+export declare const PanelError: ({ labels, onRetry }: StateProps & {
+    onRetry: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelNoAccess: ({ labels, appName }: StateProps & {
+    appName?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelEmpty: ({ labels, tab }: StateProps & {
+    tab: NotificationCenterTab;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/center/PanelStates.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelEmpty = exports.PanelNoAccess = exports.PanelError = exports.PanelSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
+const ErrorState_1 = __importDefault(require("../../QueryState/ErrorState"));
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const SKELETON_ROWS = 4;
+const PanelSkeleton = ({ isSheet }) => ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { "aria-hidden": "true", py: 2, px: "6px", children: Array.from({ length: SKELETON_ROWS }, (_, index) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, py: 2.5, pl: 5, pr: 3, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: isSheet ? "10" : "8" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { flex: 1, direction: "column", gap: 2, pt: 1, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: `${88 - index * 9}%` }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.625rem", width: `${54 + index * 7}%` }), index % 2 === 0 && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: index === 0 ? "1.5rem" : "0.625rem", width: "6rem" })] })] }, index))) }));
+exports.PanelSkeleton = PanelSkeleton;
+const PanelError = ({ labels, onRetry }) => ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { size: "sm", title: labels.loadErrorTitle, description: labels.loadErrorDescription, retryLabel: labels.retry, onRetry: onRetry }));
+exports.PanelError = PanelError;
+const PanelNoAccess = ({ labels, appName }) => ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { role: "status", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", icon: lucide_react_1.Lock, colorScheme: "gray", title: labels.noAccessTitle, description: labels.noAccessDescription(appName) }) }));
+exports.PanelNoAccess = PanelNoAccess;
+const PanelEmpty = ({ labels, tab }) => tab === "needsYou" ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", icon: lucide_react_1.CheckCircle2, colorScheme: "success", title: labels.emptyNeedsYouTitle, description: labels.emptyNeedsYouDescription })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", icon: lucide_react_1.Bell, title: labels.emptyActivityTitle, description: labels.emptyActivityDescription }));
+exports.PanelEmpty = PanelEmpty;

package/dist/Components/NotificationCenter/center/centerLabels.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationLabels } from "../core/NotificationSourceProps";
+import type { NotificationFormatter } from "../core/NotificationEngineProps";
+import type { NotificationCenterLabels } from "./NotificationCenterProps";
+export declare const withCenterLabels: (shared: NotificationLabels, format: NotificationFormatter, overrides?: Partial<NotificationCenterLabels>) => NotificationCenterLabels;

package/dist/Components/NotificationCenter/center/centerLabels.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withCenterLabels = void 0;
+const labels_1 = require("../core/labels");
+const withCenterLabels = (shared, format, overrides = {}) => (0, labels_1.mergeDefined)({
+    ...shared,
+    bell: ({ needsYou, unread }) => {
+        if (needsYou > 0)
+            return `Notifications, ${format.number(needsYou)} need you`;
+        if (unread > 0)
+            return `Notifications, ${format.number(unread)} unread`;
+        return "Notifications";
+    },
+    title: "Notifications",
+    needsYouTab: "Needs you",
+    activityTab: "Activity",
+    tabsLabel: "Notification lists",
+    markAllRead: "Mark all read",
+    openInbox: "Open inbox",
+    settings: "Notification settings",
+    close: "Close notifications",
+    loading: "Loading notifications",
+    loadErrorTitle: "Couldn't load notifications",
+    loadErrorDescription: "Check your connection, then try again. Nothing you did was lost.",
+    noAccessTitle: "Notifications aren't turned on for you",
+    noAccessDescription: (appName) => `Your ${appName !== null && appName !== void 0 ? appName : "workspace"} admin hasn't given your role access to notifications in this workspace.`,
+    emptyNeedsYouTitle: "You're all caught up",
+    emptyNeedsYouDescription: "Nothing is waiting for your decision.",
+    emptyActivityTitle: "No activity yet",
+    emptyActivityDescription: "Updates about your work and requests show up here.",
+    offlineBanner: (loadedAt) => loadedAt === undefined
+        ? "You're offline. Changes are paused."
+        : `You're offline. These are from ${loadedAt}, and changes are paused.`,
+    newCount: (count) => `${format.number(count)} new`,
+    newCountName: (count) => `${format.number(count)} new notifications`,
+    overflowCount: (count) => `${format.number(count)}+`,
+}, overrides);
+exports.withCenterLabels = withCenterLabels;

package/dist/Components/NotificationCenter/center/useArrivals.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from "react";
+export declare const useArrivals: (ids: string[], scope: string, bodyRef: RefObject<HTMLElement>) => {
+    heldIds: string[];
+    reveal: () => void;
+    track: {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        onFocus: () => void;
+        onBlur: (event: {
+            currentTarget: Element;
+            relatedTarget: EventTarget | null;
+        }) => void;
+    };
+};

package/dist/Components/NotificationCenter/center/useArrivals.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArrivals = void 0;
+const react_1 = require("react");
+const ROW_SELECTOR = "[data-notification-id]";
+const FOCUS_SELECTOR = "a[href], button";
+const useArrivals = (ids, scope, bodyRef) => {
+    const latest = (0, react_1.useRef)(ids);
+    latest.current = ids;
+    const known = (0, react_1.useRef)(new Set(ids));
+    const seenScope = (0, react_1.useRef)(scope);
+    const busy = (0, react_1.useRef)(false);
+    const [held, setHeld] = (0, react_1.useState)({ scope, ids: [] });
+    const key = ids.join();
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (seenScope.current !== scope) {
+            seenScope.current = scope;
+            known.current = new Set(latest.current);
+            setHeld({ scope, ids: [] });
+            if (bodyRef.current)
+                bodyRef.current.scrollTop = 0;
+            return;
+        }
+        const fresh = latest.current.filter((id) => !known.current.has(id));
+        if (!fresh.length)
+            return;
+        fresh.forEach((id) => known.current.add(id));
+        const scrolled = ((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) > 4;
+        if (busy.current || scrolled)
+            setHeld((current) => ({ scope, ids: [...current.ids, ...fresh] }));
+    }, [key, scope, bodyRef]);
+    const heldIds = (0, react_1.useMemo)(() => {
+        if (held.scope !== scope)
+            return [];
+        const present = new Set(ids);
+        return held.ids.filter((id) => present.has(id));
+    }, [held, scope, ids]);
+    const reveal = (0, react_1.useCallback)(() => {
+        setHeld({ scope, ids: [] });
+        requestAnimationFrame(() => {
+            var _a;
+            const body = bodyRef.current;
+            if (!body)
+                return;
+            const row = [...body.querySelectorAll(ROW_SELECTOR)].find((node) => { var _a; return heldIds.includes((_a = node.dataset.notificationId) !== null && _a !== void 0 ? _a : ""); });
+            if (!row)
+                return;
+            const top = row.getBoundingClientRect().top - body.getBoundingClientRect().top;
+            body.scrollTop += top - 8;
+            (_a = row.querySelector(FOCUS_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        });
+    }, [heldIds, scope, bodyRef]);
+    const track = (0, react_1.useMemo)(() => ({
+        onPointerEnter: () => {
+            busy.current = true;
+        },
+        onPointerLeave: () => {
+            busy.current = false;
+        },
+        onFocus: () => {
+            busy.current = true;
+        },
+        onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                busy.current = false;
+        },
+    }), []);
+    return { heldIds, reveal, track };
+};
+exports.useArrivals = useArrivals;

package/dist/Components/NotificationCenter/center/useIsSheet.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationCenterVariant } from "./NotificationCenterProps";
+export declare const useIsSheet: (variant?: NotificationCenterVariant) => boolean;

package/dist/Components/NotificationCenter/center/useIsSheet.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSheet = void 0;
+const react_1 = require("react");
+const DESKTOP = "(min-width: 48em)";
+const isNarrow = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia(DESKTOP).matches;
+const useIsSheet = (variant) => {
+    const [narrow, setNarrow] = (0, react_1.useState)(isNarrow);
+    (0, react_1.useEffect)(() => {
+        if (variant !== undefined || typeof window.matchMedia !== "function")
+            return undefined;
+        const query = window.matchMedia(DESKTOP);
+        const sync = () => setNarrow(!query.matches);
+        sync();
+        query.addEventListener("change", sync);
+        return () => query.removeEventListener("change", sync);
+    }, [variant]);
+    return variant === undefined ? narrow : variant === "sheet";
+};
+exports.useIsSheet = useIsSheet;

package/dist/Components/NotificationCenter/core/NotificationCenterProvider.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type NotificationShared } from "./useNotificationEngine";
+import type { NotificationCenterProviderProps, NotificationSourceBinding, NotificationSourceProps } from "./NotificationSourceProps";
+import type { NotificationCenterValue } from "./NotificationEngineProps";
+/** One overlay, one undo queue and one polite live region for every notification component inside it. */
+export declare const NotificationCenterProvider: ({ children, ...source }: NotificationCenterProviderProps) => import("react/jsx-runtime").JSX.Element;
+/** The live lists, counts and actions of the nearest `NotificationCenterProvider`; throws outside one. */
+export declare const useNotificationCenter: () => NotificationCenterValue;
+export declare const useNotificationShared: () => NotificationShared;
+export declare const hasNotificationSource: (binding: NotificationSourceBinding) => binding is NotificationSourceProps;
+interface NotificationScopeProps {
+    source: NotificationSourceBinding;
+    children: ReactNode;
+}
+/** A component's own source props win with a private provider; without them it joins the provider above. */
+export declare const NotificationScope: ({ source, children }: NotificationScopeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/core/NotificationCenterProvider.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationScope = exports.hasNotificationSource = exports.useNotificationShared = exports.useNotificationCenter = exports.NotificationCenterProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useNotificationEngine_1 = require("./useNotificationEngine");
+const NotificationCenterContext = (0, react_1.createContext)(null);
+const NotificationSharedContext = (0, react_1.createContext)(null);
+const MISSING_PROVIDER = "This notification component has no data: pass entries, counts, categories and onOpen, or render it inside a NotificationCenterProvider.";
+/** One overlay, one undo queue and one polite live region for every notification component inside it. */
+const NotificationCenterProvider = ({ children, ...source }) => {
+    const { value, shared, announcement } = (0, useNotificationEngine_1.useNotificationEngine)(source);
+    return ((0, jsx_runtime_1.jsx)(NotificationCenterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)(NotificationSharedContext.Provider, { value: shared, children: [children, (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { role: "status", "aria-live": "polite", "aria-atomic": "true", "data-testid": "notification-center-announcer", children: announcement })] }) }));
+};
+exports.NotificationCenterProvider = NotificationCenterProvider;
+/** The live lists, counts and actions of the nearest `NotificationCenterProvider`; throws outside one. */
+const useNotificationCenter = () => {
+    const value = (0, react_1.useContext)(NotificationCenterContext);
+    if (!value)
+        throw new Error(MISSING_PROVIDER);
+    return value;
+};
+exports.useNotificationCenter = useNotificationCenter;
+const useNotificationShared = () => {
+    const value = (0, react_1.useContext)(NotificationSharedContext);
+    if (!value)
+        throw new Error(MISSING_PROVIDER);
+    return value;
+};
+exports.useNotificationShared = useNotificationShared;
+const hasNotificationSource = (binding) => binding.entries !== undefined;
+exports.hasNotificationSource = hasNotificationSource;
+/** A component's own source props win with a private provider; without them it joins the provider above. */
+const NotificationScope = ({ source, children }) => {
+    const parent = (0, react_1.useContext)(NotificationCenterContext);
+    if ((0, exports.hasNotificationSource)(source))
+        return (0, jsx_runtime_1.jsx)(exports.NotificationCenterProvider, { ...source, children: children });
+    if (!parent)
+        throw new Error(MISSING_PROVIDER);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+exports.NotificationScope = NotificationScope;

package/dist/Components/NotificationCenter/core/NotificationEngineProps.d.ts

@@ -0,0 +1,182 @@
+import type { NotificationAction, NotificationActionError, NotificationActionIntent, NotificationCategories, NotificationCounts, NotificationEntry, NotificationExtraAction, NotificationLabels, NotificationLoadStatus, NotificationMarkAllScope, NotificationOpenEvent, NotificationZoneKey } from "./NotificationSourceProps";
+/** Where a decision is: undo is the 6 s window, sending is in flight, resolved has folded away. */
+export type NotificationRowStatus = "open" | "undo" | "sending" | "resolved" | "failed" | "denied";
+/** The decision the person made, kept while it is undoable, in flight, failed or denied. */
+export interface NotificationDecision {
+    /** The decided action's id. */
+    actionId: string;
+    /** The action's button text, for "Couldn't approve." */
+    label: string;
+    /** Past tense for the status line, e.g. "Approved". */
+    doneLabel: string;
+    /** The action's intent; negative decisions read in a neutral tone. */
+    intent: NotificationActionIntent;
+    /** The comment sent with it. */
+    reason?: string;
+}
+/** What the server asked for when it rejected a decision without a comment. */
+export interface NotificationReasonRequest {
+    /** The action to reopen the reason form for. */
+    actionId: string;
+    /** The server's own words; without them the row shows `labels.reasonRequiredMessage`. */
+    message?: string;
+}
+/** What the overlay adds to one entry. */
+export interface NotificationLiveState {
+    /** The list the entry shows in now, after optimistic changes. */
+    zone: NotificationZoneKey;
+    /** "open" unless a decision is underway or came back. */
+    status: NotificationRowStatus;
+    /** Set for every status but "open". */
+    decision?: NotificationDecision;
+    /** Why the decision failed or was denied. */
+    error?: NotificationActionError;
+    /** The server wants a comment: the row reopens the reason form for this action. */
+    reasonRequest?: NotificationReasonRequest;
+    /** Folding away: the row animates closed and leaves the accessibility tree. */
+    isHidden: boolean;
+    /** Still waiting on the person: a Needs-you entry that is open or failed. */
+    isPending: boolean;
+}
+/** One entry with the overlay applied; what every list renders. */
+export interface LiveNotificationEntry {
+    /** The app's entry with the optimistic read and archive state applied. */
+    entry: NotificationEntry;
+    /** Status, list and visibility from the overlay. */
+    state: NotificationLiveState;
+}
+/** Live entries per list, newest first. Hidden entries stay in place so they can animate back. */
+export interface NotificationZoneLists {
+    /** Decisions and unread `untilRead` entries. */
+    needsYou: LiveNotificationEntry[];
+    /** Everything else that is not archived. */
+    activity: LiveNotificationEntry[];
+    /** Archived entries; empty without `onArchive`. */
+    archived: LiveNotificationEntry[];
+}
+/** Which optional features the source turned on, one per callback. */
+export interface NotificationFeatures {
+    /** `onAction` was passed. */
+    decide: boolean;
+    /** `onMarkRead` was passed. */
+    markRead: boolean;
+    /** `onMarkAllRead` was passed. */
+    markAllRead: boolean;
+    /** `onArchive` was passed. */
+    archive: boolean;
+    /** `onRestore` was passed. */
+    restore: boolean;
+    /** `onLoadMore` was passed. */
+    loadMore: boolean;
+}
+/** A thread: the newest entry of a `groupKey`, and the older ones behind it. */
+export interface NotificationThread {
+    /** The lead entry's id. */
+    key: string;
+    /** The newest entry. */
+    lead: LiveNotificationEntry;
+    /** Older entries with the same `groupKey`, newest first; empty for a single entry. */
+    rest: LiveNotificationEntry[];
+}
+/** One heading and its threads: a category in Needs you, a day in Activity. */
+export interface NotificationGroup {
+    /** A category key or a day bucket. */
+    key: string;
+    /** Null when Needs you holds a single category, so no heading repeats the tab. */
+    label: string | null;
+    /** Pending entries for a category group; 0 for a day group. */
+    count: number;
+    /** In list order. */
+    threads: NotificationThread[];
+}
+/** Activity's day headings. */
+export type NotificationDayBucket = "today" | "yesterday" | "thisWeek" | "older";
+/** Locale-aware date, time and number formatting; every function takes the current time explicitly. */
+export interface NotificationFormatter {
+    /** "now", "5m", "3h", "2d", then a date such as "12 Oct". */
+    shortAge: (at: number, now: number) => string;
+    /** The spoken form: "just now", "5 minutes ago", then a full date and time. */
+    longAge: (at: number, now: number) => string;
+    /** "Today, 2:05 pm", "Yesterday, 2:05 pm", or a full date and time. */
+    absolute: (at: number, now: number) => string;
+    /** The Activity heading an entry falls under. */
+    dayBucket: (at: number, now: number) => NotificationDayBucket;
+    /** The heading text for a bucket. */
+    dayLabel: (bucket: NotificationDayBucket) => string;
+    /** Whole days between `at` and `now`, never negative. */
+    daysSince: (at: number, now: number) => number;
+    /** A count in the locale's digits and grouping. */
+    number: (value: number) => string;
+    /** The `dateTime` attribute value. */
+    iso: (at: number) => string;
+}
+/** Everything a notification layout can do; each call works whether or not its feature is on, doing nothing when it is off. */
+export interface NotificationCenterActions {
+    /** Marks an unread entry read, then calls `onOpen`. */
+    open: (entry: NotificationEntry, event?: NotificationOpenEvent, action?: NotificationAction) => void;
+    /** Starts one undo window for the ids; several ids make one bulk decision with one toast. */
+    decide: (ids: string[], action: NotificationAction, reason?: string) => void;
+    /** Undoes the open window this entry belongs to. */
+    undo: (id: string) => void;
+    /** Undoes the most recent open window; false when there was none. */
+    undoLast: () => boolean;
+    /** Sends a failed decision again, at once. */
+    retry: (id: string) => void;
+    /** Clears a denied decision; the entry stays hidden until fresh data drops it. */
+    dismiss: (id: string) => void;
+    /** Closes a server request for a comment without sending. */
+    clearReasonRequest: (id: string) => void;
+    /** Read or unread, sent at once; a failure rolls back with a toast. */
+    setRead: (ids: string[], read: boolean) => void;
+    /** Marks the loaded matches read and sends the scope after the undo window. */
+    markAllRead: (scope: NotificationMarkAllScope) => void;
+    /** Activity entries only; sent after the undo window. */
+    archive: (ids: string[]) => void;
+    /** Archived entries back to Activity, sent at once. */
+    restore: (ids: string[]) => void;
+    /** The source's `extraActions` for an entry, or none. */
+    extraActionsFor: (entry: NotificationEntry) => NotificationExtraAction[];
+    /** Runs an extra action and toasts its outcome. */
+    runExtraAction: (entry: NotificationEntry, action: NotificationExtraAction) => void;
+    /** Calls `onLoadMore`. */
+    loadMore: () => void;
+    /** Calls `onRetry`. */
+    retryLoad: () => void;
+    /** Speaks a message through the shared polite live region. */
+    announce: (message: string) => void;
+    /** Sends every open undo window now, as on page hide. */
+    flush: () => void;
+}
+/** What `useNotificationCenter()` returns: the live lists, counts and every action. */
+export interface NotificationCenterValue {
+    /** Live entries per list, newest first. */
+    lists: NotificationZoneLists;
+    /** Server counts moved by the overlay, never below 0. */
+    counts: NotificationCounts;
+    /** The source's categories. */
+    categories: NotificationCategories;
+    /** Which callbacks the source passed. */
+    features: NotificationFeatures;
+    /** The shared strings, defaults merged with the source's overrides. */
+    labels: NotificationLabels;
+    /** Formatting in the source's locale. */
+    format: NotificationFormatter;
+    /** The current time, refreshed every minute so relative times move. */
+    now: number;
+    /** The source's load state. */
+    status: NotificationLoadStatus;
+    /** True while offline; every change is disabled. */
+    isOffline: boolean;
+    /** When the loaded entries were fetched. */
+    loadedAt?: number;
+    /** As in "Open in hrms". */
+    appName?: string;
+    /** A next page exists. */
+    hasMore: boolean;
+    /** The next page is loading. */
+    isLoadingMore: boolean;
+    /** Every action, stable across renders. */
+    actions: NotificationCenterActions;
+    /** The live entry for an id, if loaded. */
+    find: (id: string) => LiveNotificationEntry | undefined;
+}

package/dist/Components/NotificationCenter/core/NotificationEngineProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });