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

package/dist/Components/NotificationCenter/inbox/inboxLabels.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withInboxLabels = void 0;
+const labels_1 = require("../core/labels");
+const withInboxLabels = (shared, format, overrides = {}) => (0, labels_1.mergeDefined)({
+    ...shared,
+    title: "Inbox",
+    subtitle: ({ needsYou, unread }) => `${format.number(needsYou)} need you · ${format.number(unread)} unread`,
+    listsLabel: "Inbox lists",
+    needsYouTab: "Needs you",
+    activityTab: "Activity",
+    archivedTab: "Archived",
+    search: "Search notifications",
+    typeFilter: "Type",
+    allTypes: "All types",
+    unreadOnly: "Unread only",
+    filters: "Filters",
+    markAllRead: "Mark all read",
+    settings: "Notification settings",
+    keyboardShortcuts: "Keyboard shortcuts",
+    shortcutsHint: "They work when focus is in the inbox, not while typing.",
+    shortcuts: {
+        next: "Next notification",
+        previous: "Previous notification",
+        show: "Show the details",
+        openInApp: "Open in the app",
+        toggleRead: "Mark as read or unread",
+        archive: "Archive",
+        select: "Select",
+        undo: "Undo the last action",
+        search: "Search",
+        clear: "Clear selection",
+        help: "Show these shortcuts",
+    },
+    selected: (count) => `${format.number(count)} selected`,
+    selectAll: "Select all",
+    clearSelection: "Clear selection",
+    bulkDecide: (actionLabel, count) => `${actionLabel} ${format.number(count)}`,
+    nothingSelected: "Nothing selected",
+    nothingSelectedHint: "Pick a notification to read it here.",
+    nothingToUndo: "Nothing to undo",
+    results: (count) => (count === 1 ? "1 result" : `${format.number(count)} results`),
+    caughtUpTitle: "You're all caught up",
+    caughtUpBody: "Nothing is waiting for your decision.",
+    activityEmptyTitle: "No activity yet",
+    activityEmptyBody: "Updates about your work and requests show up here.",
+    archivedEmptyTitle: "Nothing archived",
+    archivedEmptyBody: "Archived notifications stay here until you move them back.",
+    loadErrorTitle: "Couldn't load notifications",
+    loadErrorBody: "Check your connection, then try again. Nothing you did was lost.",
+    noAccessTitle: "Notifications aren't turned on for you",
+    noAccessBody: (appName) => `Your ${appName !== null && appName !== void 0 ? appName : "app"} admin hasn't given your role access to notifications in this workspace.`,
+    loading: "Loading notifications",
+    loadMore: "Load more",
+}, overrides);
+exports.withInboxLabels = withInboxLabels;

package/dist/Components/NotificationCenter/inbox/inboxModel.d.ts

@@ -0,0 +1,17 @@
+import type { LiveNotificationEntry, NotificationGroup, NotificationThread } from "../core/NotificationEngineProps";
+import type { NotificationAction } from "../core/NotificationSourceProps";
+import type { NotificationInboxTab } from "./NotificationInboxProps";
+export declare const ALL_TYPES = "all";
+export interface InboxFilters {
+    type: string;
+    unreadOnly: boolean;
+    query: string;
+    keepId: string | null;
+}
+export declare const filterItems: (items: LiveNotificationEntry[], filters: InboxFilters) => LiveNotificationEntry[];
+export declare const isShown: (item: LiveNotificationEntry) => boolean;
+export declare const visibleRowIds: (groups: NotificationGroup[], openThreads: ReadonlySet<string>) => string[];
+export declare const threadsByLead: (groups: NotificationGroup[]) => Map<string, NotificationThread>;
+export declare const bulkDecision: (items: LiveNotificationEntry[]) => NotificationAction | undefined;
+export declare const tabZoneMatches: (tab: NotificationInboxTab, item: LiveNotificationEntry) => boolean;
+export declare const isTypingTarget: (target: EventTarget | null) => boolean;

package/dist/Components/NotificationCenter/inbox/inboxModel.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTypingTarget = exports.tabZoneMatches = exports.bulkDecision = exports.threadsByLead = exports.visibleRowIds = exports.isShown = exports.filterItems = exports.ALL_TYPES = void 0;
+const grouping_1 = require("../core/grouping");
+exports.ALL_TYPES = "all";
+const filterItems = (items, filters) => items.filter(({ entry }) => (filters.type === exports.ALL_TYPES || entry.category === filters.type) &&
+    (!filters.unreadOnly || entry.isRead === false || entry.id === filters.keepId) &&
+    (0, grouping_1.matchesNotificationQuery)(entry, filters.query));
+exports.filterItems = filterItems;
+const isShown = (item) => !item.state.isHidden;
+exports.isShown = isShown;
+const visibleRowIds = (groups, openThreads) => groups.flatMap((group) => group.threads.flatMap((thread) => {
+    const rows = openThreads.has(thread.key) ? (0, grouping_1.threadEntries)(thread) : [thread.lead];
+    return rows.filter(exports.isShown).map((item) => item.entry.id);
+}));
+exports.visibleRowIds = visibleRowIds;
+const threadsByLead = (groups) => new Map(groups.flatMap((group) => group.threads.map((thread) => [thread.key, thread])));
+exports.threadsByLead = threadsByLead;
+const bulkDecision = (items) => {
+    var _a, _b;
+    const quick = (action) => action.href === undefined && action.reason === undefined;
+    const candidate = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.entry.actions) === null || _b === void 0 ? void 0 : _b.find((action) => quick(action) && action.intent === "positive");
+    if (!candidate)
+        return undefined;
+    const everyone = items.every(({ entry, state }) => {
+        var _a;
+        return state.zone === "needsYou" &&
+            state.status === "open" &&
+            ((_a = entry.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === candidate.id && quick(action)));
+    });
+    return everyone ? candidate : undefined;
+};
+exports.bulkDecision = bulkDecision;
+const tabZoneMatches = (tab, item) => (item.state.zone === "archived") === (tab === "archived");
+exports.tabZoneMatches = tabZoneMatches;
+const TYPING_ROLES = '[role="combobox"],[role="listbox"],[role="menu"],[role="textbox"],[role="searchbox"]';
+const NON_TEXT_INPUTS = ["checkbox", "radio", "button", "submit"];
+const isTypingTarget = (target) => {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable || target.closest(TYPING_ROLES))
+        return true;
+    if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)
+        return true;
+    return target instanceof HTMLInputElement && !NON_TEXT_INPUTS.includes(target.type);
+};
+exports.isTypingTarget = isTypingTarget;

package/dist/Components/NotificationCenter/inbox/useControllable.d.ts

@@ -0,0 +1 @@
+export declare const useControllable: <T>(controlled: T | undefined, initial: T, onChange?: (value: T) => void) => [value: T, set: (value: T) => void, isControlled: boolean];

package/dist/Components/NotificationCenter/inbox/useControllable.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControllable = void 0;
+const react_1 = require("react");
+const useControllable = (controlled, initial, onChange) => {
+    const [inner, setInner] = (0, react_1.useState)(initial);
+    const isControlled = controlled !== undefined;
+    const set = (0, react_1.useCallback)((next) => {
+        if (!isControlled)
+            setInner(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    return [isControlled ? controlled : inner, set, isControlled];
+};
+exports.useControllable = useControllable;

package/dist/Components/NotificationCenter/index.d.ts

@@ -0,0 +1,8 @@
+export { NotificationCenterProvider, useNotificationCenter } from "./core/NotificationCenterProvider";
+export { isNotificationActionError, notificationActionError, toNotificationActionError } from "./core/actionError";
+export { DEFAULT_NOTIFICATION_LOCALE, defaultNotificationLabels } from "./core/labels";
+export { default as NotificationRow } from "./row/NotificationRow";
+export { default as NotificationDetail } from "./row/NotificationDetail";
+export { default as NotificationCenter } from "./center/NotificationCenter";
+export { default as NotificationInbox } from "./inbox/NotificationInbox";
+export { default as NotificationPreferences } from "./preferences/NotificationPreferences";

package/dist/Components/NotificationCenter/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationPreferences = exports.NotificationInbox = exports.NotificationCenter = exports.NotificationDetail = exports.NotificationRow = exports.defaultNotificationLabels = exports.DEFAULT_NOTIFICATION_LOCALE = exports.toNotificationActionError = exports.notificationActionError = exports.isNotificationActionError = exports.useNotificationCenter = exports.NotificationCenterProvider = void 0;
+var NotificationCenterProvider_1 = require("./core/NotificationCenterProvider");
+Object.defineProperty(exports, "NotificationCenterProvider", { enumerable: true, get: function () { return NotificationCenterProvider_1.NotificationCenterProvider; } });
+Object.defineProperty(exports, "useNotificationCenter", { enumerable: true, get: function () { return NotificationCenterProvider_1.useNotificationCenter; } });
+var actionError_1 = require("./core/actionError");
+Object.defineProperty(exports, "isNotificationActionError", { enumerable: true, get: function () { return actionError_1.isNotificationActionError; } });
+Object.defineProperty(exports, "notificationActionError", { enumerable: true, get: function () { return actionError_1.notificationActionError; } });
+Object.defineProperty(exports, "toNotificationActionError", { enumerable: true, get: function () { return actionError_1.toNotificationActionError; } });
+var labels_1 = require("./core/labels");
+Object.defineProperty(exports, "DEFAULT_NOTIFICATION_LOCALE", { enumerable: true, get: function () { return labels_1.DEFAULT_NOTIFICATION_LOCALE; } });
+Object.defineProperty(exports, "defaultNotificationLabels", { enumerable: true, get: function () { return labels_1.defaultNotificationLabels; } });
+var NotificationRow_1 = require("./row/NotificationRow");
+Object.defineProperty(exports, "NotificationRow", { enumerable: true, get: function () { return __importDefault(NotificationRow_1).default; } });
+var NotificationDetail_1 = require("./row/NotificationDetail");
+Object.defineProperty(exports, "NotificationDetail", { enumerable: true, get: function () { return __importDefault(NotificationDetail_1).default; } });
+var NotificationCenter_1 = require("./center/NotificationCenter");
+Object.defineProperty(exports, "NotificationCenter", { enumerable: true, get: function () { return __importDefault(NotificationCenter_1).default; } });
+var NotificationInbox_1 = require("./inbox/NotificationInbox");
+Object.defineProperty(exports, "NotificationInbox", { enumerable: true, get: function () { return __importDefault(NotificationInbox_1).default; } });
+var NotificationPreferences_1 = require("./preferences/NotificationPreferences");
+Object.defineProperty(exports, "NotificationPreferences", { enumerable: true, get: function () { return __importDefault(NotificationPreferences_1).default; } });

package/dist/Components/NotificationCenter/preferences/NotificationPreferences.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationPreferencesProps } from "./NotificationPreferencesProps";
+/** Notification settings: a type-by-channel grid with locked cells and an email summary choice; every change autosaves and rolls back on failure. */
+declare const NotificationPreferences: ({ channels, groups, values, onChange, emailSummary, onEmailSummaryChange, status, onRetry, isOffline, note, appName, variant, labels: labelOverrides, "data-testid": testId, }: NotificationPreferencesProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationPreferences;

package/dist/Components/NotificationCenter/preferences/NotificationPreferences.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Card_1 = __importDefault(require("../../Card/Card"));
+const PageHeader_1 = __importDefault(require("../../PageHeader/PageHeader"));
+const SettingRow_1 = __importDefault(require("../../SettingRow/SettingRow"));
+const SettingsSection_1 = __importDefault(require("../../SettingRow/SettingsSection"));
+const SegmentedControl_1 = __importDefault(require("../../SegmentedControl/SegmentedControl"));
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const Spinner_1 = __importDefault(require("../../Spinner/Spinner"));
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const Button_1 = __importDefault(require("../../Button/Button"));
+const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
+const Toaster_1 = require("../../Toaster/Toaster");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const PreferenceGroups_1 = __importDefault(require("./PreferenceGroups"));
+const preferencesLabels_1 = require("./preferencesLabels");
+const useAutosave_1 = require("./useAutosave");
+const EMAIL_KEY = "email-summary";
+const SaveStatus = ({ isSaving, hasSaved, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: "status", align: "center", gap: 1.5, fontSize: "xs", color: hasSaved && !isSaving ? colors.semanticText.success : colors.textMuted, fontWeight: hasSaved && !isSaving ? 500 : 400, children: [isSaving && (0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "xs", label: "" }), !isSaving && hasSaved && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: isSaving ? labels.saving : hasSaved ? labels.saved : labels.autosave })] }));
+};
+const Banner = ({ icon, children }) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Alert, { status: "info", borderRadius: "lg", alignItems: "flex-start", children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 0.5, mr: 2, flexShrink: 0, children: icon }), (0, jsx_runtime_1.jsx)(Primitives_1.AlertDescription, { fontSize: "sm", children: children })] }));
+const SkeletonCard = ({ rows }) => ((0, jsx_runtime_1.jsx)(Card_1.default, { header: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "8rem" }), children: (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { direction: "column", gap: 5, children: Array.from({ length: rows }, (_, index) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { justify: "space-between", align: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.875rem", width: "9rem" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "14rem" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "6rem" })] }, index))) }) }));
+/** Notification settings: a type-by-channel grid with locked cells and an email summary choice; every change autosaves and rolls back on failure. */
+const NotificationPreferences = ({ channels, groups, values, onChange, emailSummary, onEmailSummaryChange, status = "ready", onRetry, isOffline = false, note, appName, variant = "desktop", labels: labelOverrides, "data-testid": testId, }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { showToast } = (0, Toaster_1.useToaster)();
+    const labels = (0, react_1.useMemo)(() => (0, preferencesLabels_1.resolvePreferencesLabels)(labelOverrides), [labelOverrides]);
+    const saved = (0, react_1.useMemo)(() => ({ values, emailSummary }), [values, emailSummary]);
+    const notifyFailed = (0, react_1.useCallback)((what) => showToast({ status: "error", title: labels.saveFailed(what) }), [showToast, labels]);
+    const { draft, pendingKeys, hasSaved, commit } = (0, useAutosave_1.useAutosave)(saved, notifyFailed);
+    const isFrozen = status !== "ready" || isOffline;
+    const isReadOnly = status === "readOnly";
+    const pagePadding = variant === "phone" ? 4 : 6;
+    const cellKey = (rowId, channelId) => `cell:${rowId}:${channelId}`;
+    const valueOf = (rowId, channelId) => {
+        const pending = draft[cellKey(rowId, channelId)];
+        if (typeof pending === "boolean")
+            return pending;
+        const row = values[rowId];
+        return Boolean(row && row[channelId]);
+    };
+    const isPending = (rowId, channelId) => pendingKeys.includes(cellKey(rowId, channelId));
+    const toggle = (row, channel, next) => commit(cellKey(row.id, channel.id), next, () => onChange(row.id, channel.id, next), `${row.label} by ${channel.label.toLowerCase()}`);
+    const shownEmail = (_a = draft[EMAIL_KEY]) !== null && _a !== void 0 ? _a : emailSummary;
+    const changeEmail = (next) => {
+        if (!onEmailSummaryChange || next === shownEmail)
+            return;
+        commit(EMAIL_KEY, next, () => onEmailSummaryChange(next), labels.email);
+    };
+    const header = ((0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: labels.title, subtitle: labels.subtitle(appName), actions: status === "ready" && !isOffline ? (0, jsx_runtime_1.jsx)(SaveStatus, { isSaving: pendingKeys.length > 0, hasSaved: hasSaved, labels: labels }) : undefined, actionsLayout: "inline" }));
+    if (status === "loading") {
+        return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "aria-busy": "true", "data-testid": testId, children: [header, (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { role: "status", children: labels.loading }), (0, jsx_runtime_1.jsx)(SkeletonCard, { rows: 1 }), (0, jsx_runtime_1.jsx)(SkeletonCard, { rows: 4 })] }));
+    }
+    if (status === "error") {
+        return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "data-testid": testId, children: [header, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { role: "alert", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "error", icon: lucide_react_1.AlertTriangle, titleAs: "h2", title: labels.errorTitle, description: labels.errorDescription, size: "md", action: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", label: labels.retry, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: onRetry }) }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", gap: 5, px: pagePadding, py: 5, maxW: "57.5rem", "data-testid": testId, children: [header, isReadOnly && (0, jsx_runtime_1.jsx)(Banner, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { size: 16, "aria-hidden": "true" }), children: labels.readOnlyBanner }), isOffline && (0, jsx_runtime_1.jsx)(Banner, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.WifiOff, { size: 16, "aria-hidden": "true" }), children: labels.offlineBanner }), shownEmail && ((0, jsx_runtime_1.jsx)(SettingsSection_1.default, { title: labels.email, children: (0, jsx_runtime_1.jsx)(SettingRow_1.default, { title: labels.emailTiming, description: labels.emailHint(appName), control: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { "aria-label": labels.emailTiming, options: [
+                            { value: "asItHappens", label: labels.asItHappens, isDisabled: isFrozen },
+                            { value: "daily", label: labels.daily, isDisabled: isFrozen },
+                        ], value: shownEmail, onChange: changeEmail }) }) })), (0, jsx_runtime_1.jsx)(PreferenceGroups_1.default, { channels: channels, groups: groups, labels: labels, variant: variant, isFrozen: isFrozen, valueOf: valueOf, isPending: isPending, onToggle: toggle, testId: testId }), note && ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 1.5, maxW: "72ch", fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 0.5, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { size: 12, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)(Primitives_1.Text, { children: note })] }))] }));
+};
+exports.default = NotificationPreferences;

package/dist/Components/NotificationCenter/preferences/NotificationPreferencesProps.d.ts

@@ -0,0 +1,111 @@
+/** A delivery column, e.g. In-app, Email, Mobile push. */
+export interface NotificationPreferenceChannel {
+    /** Key into each row's values. */
+    id: string;
+    /** Column heading and part of every cell's accessible name. */
+    label: string;
+}
+/** One notification type: a row of channel switches. */
+export interface NotificationPreferenceRow {
+    /** Passed to `onChange`. */
+    id: string;
+    /** e.g. "Leave requests". */
+    label: string;
+    /** One muted line under the label. */
+    hint?: string;
+    /** Channel ids that are always on, shown checked, disabled and with a lock; in-app for approvals. */
+    locked?: string[];
+}
+/** A titled card of rows, e.g. "Requests you approve". */
+export interface NotificationPreferenceGroup {
+    /** Stable key. */
+    id: string;
+    /** Card heading. */
+    label: string;
+    /** In display order. */
+    rows: NotificationPreferenceRow[];
+}
+/** Saved state as `values[rowId][channelId]`; a missing cell reads as off. */
+export type NotificationPreferenceValues = {
+    [rowId: string]: {
+        [channelId: string]: boolean | undefined;
+    } | undefined;
+};
+/** How email arrives: one per notification, or one summary a day at 9:00. */
+export type NotificationEmailSummary = "asItHappens" | "daily";
+/** Load state; "readOnly" shows the settings an admin manages but nothing can change. */
+export type NotificationPreferencesStatus = "loading" | "ready" | "error" | "readOnly";
+/** Strings for the settings page; anything left out stays English. */
+export interface NotificationPreferencesLabels {
+    /** Page heading. */
+    title: string;
+    /** Under the heading; gets the app name. */
+    subtitle: (appName?: string) => string;
+    /** Email card heading. */
+    email: string;
+    /** Title of the email timing row. */
+    emailTiming: string;
+    /** Under the email timing title; gets the app name. */
+    emailHint: (appName?: string) => string;
+    /** Screen-reader heading of the type column. */
+    typeColumn: string;
+    /** Tooltip and label explaining why a locked cell cannot be turned off. */
+    lockedTip: string;
+    /** "As it happens" option. */
+    asItHappens: string;
+    /** "Daily at 9:00 am" option. */
+    daily: string;
+    /** Accessible suffix of a locked cell. */
+    alwaysOn: string;
+    /** Status while a change is in flight. */
+    saving: string;
+    /** Status after the last change saved. */
+    saved: string;
+    /** Status before any change. */
+    autosave: string;
+    /** Toast after a failed save; gets what was put back. */
+    saveFailed: (what: string) => string;
+    /** Banner while `status` is "readOnly". */
+    readOnlyBanner: string;
+    /** Banner while offline. */
+    offlineBanner: string;
+    /** Screen-reader text while `status` is "loading". */
+    loading: string;
+    /** Error state title. */
+    errorTitle: string;
+    /** Error state description. */
+    errorDescription: string;
+    /** Error state retry button. */
+    retry: string;
+}
+/** Notification settings: a type-by-channel grid with locked cells and an email summary choice; every change autosaves and rolls back on failure. */
+export interface NotificationPreferencesProps {
+    /** Columns, in order. */
+    channels: NotificationPreferenceChannel[];
+    /** Cards of rows, in order. */
+    groups: NotificationPreferenceGroup[];
+    /** Saved state; the page shows changes optimistically until `onChange` settles. */
+    values: NotificationPreferenceValues;
+    /** Saves one cell; reject to roll the cell back with a toast. */
+    onChange: (rowId: string, channelId: string, enabled: boolean) => Promise<unknown>;
+    /** Shows the email card. */
+    emailSummary?: NotificationEmailSummary;
+    /** Saves the email choice; reject to roll it back with a toast. */
+    onEmailSummaryChange?: (value: NotificationEmailSummary) => Promise<unknown>;
+    /** Defaults to "ready". */
+    status?: NotificationPreferencesStatus;
+    /** Retries a failed load from the error state. */
+    onRetry?: () => void;
+    /** Disables every cell and shows the offline banner. */
+    isOffline?: boolean;
+    /** Footnote under the cards, e.g. what admins lock. */
+    note?: string;
+    /** As in "Choose where hrms tells you about things". */
+    appName?: string;
+    /** "desktop" is a table per card; "phone" stacks a row's switches under its label. Defaults to "desktop". */
+    variant?: "desktop" | "phone";
+    /** Overrides for the page strings. */
+    labels?: Partial<NotificationPreferencesLabels>;
+    /** Test id root; each cell gets `-<rowId>-<channelId>`. */
+    "data-testid"?: string;
+}

package/dist/Components/NotificationCenter/preferences/NotificationPreferencesProps.js

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

package/dist/Components/NotificationCenter/preferences/PreferenceCells.d.ts

@@ -0,0 +1,16 @@
+import type { NotificationPreferenceChannel, NotificationPreferenceRow, NotificationPreferencesLabels } from "./NotificationPreferencesProps";
+/** One type-by-channel cell: its saved state, lock and in-flight flags. */
+interface PreferenceCellProps {
+    row: NotificationPreferenceRow;
+    channel: NotificationPreferenceChannel;
+    labels: NotificationPreferencesLabels;
+    isOn: boolean;
+    isLocked: boolean;
+    isFrozen: boolean;
+    isPending: boolean;
+    onToggle: (next: boolean) => void;
+    "data-testid"?: string;
+}
+export declare const GridCell: ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }: PreferenceCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SwitchCell: ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }: PreferenceCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/preferences/PreferenceCells.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.SwitchCell = exports.GridCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const ToggleSwitch_1 = __importDefault(require("../../ToggleSwitch/ToggleSwitch"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const LockMark = ({ label }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", role: "img", "aria-label": label, tabIndex: 0, display: "inline-flex", color: colors.textMuted, borderRadius: "sm", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { size: 12, "aria-hidden": "true" }) }));
+};
+const GridCell = ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }) => {
+    const name = `${row.label}: ${channel.label}`;
+    const checkbox = ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": isLocked ? `${name}, ${labels.alwaysOn}` : name, isChecked: isOn, isDisabled: isLocked || isFrozen, onChange: (event) => onToggle(event.target.checked) }));
+    if (!isLocked) {
+        return ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { "data-testid": testId, justify: "center", opacity: isPending ? 0.6 : 1, children: checkbox }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.lockedTip, placement: "top", children: (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { "data-testid": testId, justify: "center", position: "relative", w: "fit-content", mx: "auto", children: [checkbox, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", left: "calc(100% + 0.375rem)", top: "50%", transform: "translateY(-50%)", children: (0, jsx_runtime_1.jsx)(LockMark, { label: labels.lockedTip }) })] }) }));
+};
+exports.GridCell = GridCell;
+const touchTarget = {
+    "& label": { display: "inline-flex", alignItems: "center", minHeight: "2.75rem" },
+    "& input[role='switch']": { top: "-0.6875rem", height: "calc(100% + 1.375rem)", left: "-0.25rem", width: "calc(100% + 0.5rem)" },
+};
+const SwitchCell = ({ row, channel, labels, isOn, isLocked, isFrozen, isPending, onToggle, "data-testid": testId }) => {
+    const name = `${row.label}: ${channel.label}`;
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { "data-testid": testId, align: "center", gap: 1.5, minH: "2.75rem", opacity: isPending ? 0.6 : 1, sx: touchTarget, children: [(0, jsx_runtime_1.jsx)(ToggleSwitch_1.default, { size: "md", label: isLocked ? `${channel.label} (${labels.alwaysOn})` : channel.label, "aria-label": isLocked ? `${name}, ${labels.alwaysOn}` : name, isChecked: isOn, isDisabled: isLocked || isFrozen, onChange: onToggle }), isLocked && (0, jsx_runtime_1.jsx)(LockMark, { label: labels.lockedTip })] }));
+};
+exports.SwitchCell = SwitchCell;

package/dist/Components/NotificationCenter/preferences/PreferenceGroups.d.ts

@@ -0,0 +1,15 @@
+import type { NotificationPreferenceChannel, NotificationPreferenceGroup, NotificationPreferenceRow, NotificationPreferencesLabels } from "./NotificationPreferencesProps";
+/** The grouped cards of the settings page, as tables or phone rows. */
+interface PreferenceGroupsProps {
+    channels: NotificationPreferenceChannel[];
+    groups: NotificationPreferenceGroup[];
+    labels: NotificationPreferencesLabels;
+    variant: "desktop" | "phone";
+    isFrozen: boolean;
+    valueOf: (rowId: string, channelId: string) => boolean;
+    isPending: (rowId: string, channelId: string) => boolean;
+    onToggle: (row: NotificationPreferenceRow, channel: NotificationPreferenceChannel, next: boolean) => void;
+    testId?: string;
+}
+declare const PreferenceGroups: (props: PreferenceGroupsProps) => import("react/jsx-runtime").JSX.Element;
+export default PreferenceGroups;

package/dist/Components/NotificationCenter/preferences/PreferenceGroups.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Primitives_1 = require("../../Primitives/Primitives");
+const SettingRow_1 = __importDefault(require("../../SettingRow/SettingRow"));
+const SettingsSection_1 = __importDefault(require("../../SettingRow/SettingsSection"));
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const PreferenceCells_1 = require("./PreferenceCells");
+const isLockedCell = (row, channelId) => Boolean(row.locked && row.locked.includes(channelId));
+const cellId = (testId, rowId, channelId) => (testId ? `${testId}-${rowId}-${channelId}` : undefined);
+const GroupTable = ({ group, channels, labels, isFrozen, valueOf, isPending, onToggle, testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rule = (0, planeStep_1.cardRule)(colors);
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "table", w: "100%", sx: { borderCollapse: "collapse" }, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "thead", children: (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "tr", children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "th", scope: "col", textAlign: "left", pb: 2, children: (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: labels.typeColumn }) }), channels.map((channel) => ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "th", scope: "col", w: "7rem", pb: 2, textAlign: "center", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: channel.label }, channel.id)))] }) }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "tbody", children: group.rows.map((row) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "tr", borderTop: "1px solid", borderColor: rule, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Box, { as: "th", scope: "row", textAlign: "left", fontWeight: 400, py: 3, pr: 4, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "sm", fontWeight: 500, color: colors.text[800], children: row.label }), row.hint && ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "xs", color: colors.textMuted, children: row.hint }))] }), channels.map((channel) => ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "td", textAlign: "center", verticalAlign: "middle", py: 3, children: (0, jsx_runtime_1.jsx)(PreferenceCells_1.GridCell, { row: row, channel: channel, labels: labels, isOn: isLockedCell(row, channel.id) || valueOf(row.id, channel.id), isLocked: isLockedCell(row, channel.id), isFrozen: isFrozen, isPending: isPending(row.id, channel.id), onToggle: (next) => onToggle(row, channel, next), "data-testid": cellId(testId, row.id, channel.id) }) }, channel.id)))] }, row.id))) })] }));
+};
+const GroupRows = ({ group, channels, labels, isFrozen, valueOf, isPending, onToggle, testId }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: group.rows.map((row) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(SettingRow_1.default, { title: row.label, description: (_a = row.hint) !== null && _a !== void 0 ? _a : null, control: (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": row.label, wrap: "wrap", columnGap: 5, rowGap: 0, children: channels.map((channel) => ((0, jsx_runtime_1.jsx)(PreferenceCells_1.SwitchCell, { row: row, channel: channel, labels: labels, isOn: isLockedCell(row, channel.id) || valueOf(row.id, channel.id), isLocked: isLockedCell(row, channel.id), isFrozen: isFrozen, isPending: isPending(row.id, channel.id), onToggle: (next) => onToggle(row, channel, next), "data-testid": cellId(testId, row.id, channel.id) }, channel.id))) }) }, row.id));
+    }) }));
+const PreferenceGroups = (props) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.groups.map((group) => ((0, jsx_runtime_1.jsx)(SettingsSection_1.default, { title: group.label, children: props.variant === "phone" ? (0, jsx_runtime_1.jsx)(GroupRows, { ...props, group: group }) : (0, jsx_runtime_1.jsx)(GroupTable, { ...props, group: group }) }, group.id))) }));
+exports.default = PreferenceGroups;

package/dist/Components/NotificationCenter/preferences/preferencesLabels.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationPreferencesLabels } from "./NotificationPreferencesProps";
+export declare const resolvePreferencesLabels: (overrides?: Partial<NotificationPreferencesLabels>) => NotificationPreferencesLabels;

package/dist/Components/NotificationCenter/preferences/preferencesLabels.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePreferencesLabels = void 0;
+const labels_1 = require("../core/labels");
+const DEFAULT_PREFERENCES_LABELS = {
+    title: "Notification settings",
+    subtitle: (appName) => (appName ? `Choose where ${appName} tells you about things.` : "Choose where you hear about things."),
+    email: "Email",
+    emailTiming: "Email timing",
+    emailHint: (appName) => appName ? `A summary skips anything you've already read in ${appName}.` : "A summary skips anything you've already read.",
+    typeColumn: "Notification type",
+    lockedTip: "Always on for this type",
+    asItHappens: "As it happens",
+    daily: "Daily at 9:00 am",
+    alwaysOn: "always on",
+    saving: "Saving…",
+    saved: "Saved",
+    autosave: "Changes save automatically",
+    saveFailed: (what) => `Couldn't save that change. ${what} was put back.`,
+    readOnlyBanner: "Your admin manages notification settings for your role. You can see them, but not change them.",
+    offlineBanner: "You're offline. Settings can't be changed until you reconnect.",
+    loading: "Loading settings",
+    errorTitle: "Couldn't load your settings",
+    errorDescription: "Nothing was changed. Try again in a moment.",
+    retry: "Try again",
+};
+const resolvePreferencesLabels = (overrides) => (0, labels_1.mergeDefined)(DEFAULT_PREFERENCES_LABELS, overrides);
+exports.resolvePreferencesLabels = resolvePreferencesLabels;

package/dist/Components/NotificationCenter/preferences/useAutosave.d.ts

@@ -0,0 +1,8 @@
+type Draft = Record<string, boolean | string>;
+export declare const useAutosave: <Saved>(saved: Saved, onFailed: (what: string) => void) => {
+    draft: Draft;
+    pendingKeys: string[];
+    hasSaved: boolean;
+    commit: (key: string, next: boolean | string, save: () => Promise<unknown>, what: string) => void;
+};
+export {};

package/dist/Components/NotificationCenter/preferences/useAutosave.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutosave = void 0;
+const react_1 = require("react");
+const useAutosave = (saved, onFailed) => {
+    const [draft, setDraft] = (0, react_1.useState)({});
+    const [pendingKeys, setPendingKeys] = (0, react_1.useState)([]);
+    const [hasSaved, setHasSaved] = (0, react_1.useState)(false);
+    const inFlight = (0, react_1.useRef)(new Set());
+    (0, react_1.useEffect)(() => {
+        setDraft((current) => {
+            const kept = Object.keys(current).filter((key) => inFlight.current.has(key));
+            return kept.length === Object.keys(current).length ? current : Object.fromEntries(kept.map((key) => [key, current[key]]));
+        });
+    }, [saved]);
+    const commit = (0, react_1.useCallback)((key, next, save, what) => {
+        if (inFlight.current.has(key))
+            return;
+        inFlight.current.add(key);
+        setDraft((current) => ({ ...current, [key]: next }));
+        setPendingKeys(Array.from(inFlight.current));
+        const settle = () => {
+            inFlight.current.delete(key);
+            setPendingKeys(Array.from(inFlight.current));
+        };
+        save().then(() => {
+            setHasSaved(true);
+            settle();
+        }, () => {
+            setDraft((current) => {
+                const rest = { ...current };
+                delete rest[key];
+                return rest;
+            });
+            settle();
+            onFailed(what);
+        });
+    }, [onFailed]);
+    return { draft, pendingKeys, hasSaved, commit };
+};
+exports.useAutosave = useAutosave;

package/dist/Components/NotificationCenter/row/NotificationDetail.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationDetailProps } from "./NotificationDetailProps";
+/** One notification in full for a reading pane or a phone screen; text only, never markup. */
+declare const NotificationDetail: ({ item, variant, onBack, titleRef }: NotificationDetailProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationDetail;