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

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

@@ -0,0 +1,434 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 Button_1 = __importDefault(require("../../Button/Button"));
+const BulkSelectionBar_1 = __importDefault(require("../../BulkSelectionBar/BulkSelectionBar"));
+const Drawer_1 = __importStar(require("../../Drawer/Drawer"));
+const EmptyState_1 = __importDefault(require("../../EmptyState/EmptyState"));
+const FilteredEmptyState_1 = __importDefault(require("../../EmptyState/FilteredEmptyState"));
+const FilterBar_1 = __importDefault(require("../../FilterBar/FilterBar"));
+const IconButton_1 = __importDefault(require("../../IconButton/IconButton"));
+const PageHeader_1 = __importDefault(require("../../PageHeader/PageHeader"));
+const Primitives_1 = require("../../Primitives/Primitives");
+const Search_1 = __importDefault(require("../../Search/Search"));
+const Select_1 = __importDefault(require("../../Select/Select"));
+const Tabs_1 = __importDefault(require("../../Tabs/Tabs"));
+const ToggleSwitch_1 = __importDefault(require("../../ToggleSwitch/ToggleSwitch"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const grouping_1 = require("../core/grouping");
+const NotificationDetail_1 = __importDefault(require("../row/NotificationDetail"));
+const InboxStates_1 = require("./InboxStates");
+const InboxList_1 = require("./InboxList");
+const ShortcutsDialog_1 = require("./ShortcutsDialog");
+const inboxModel_1 = require("./inboxModel");
+const inboxLabels_1 = require("./inboxLabels");
+const useControllable_1 = require("./useControllable");
+const TAB_BY_ID = { needsYou: "needsYou", activity: "activity", archived: "archived" };
+const NotificationInboxBody = ({ variant = "desktop", tab: tabProp, onTabChange, selectedId: selectedProp, onSelectedChange, onOpenSettings, labels: labelOverrides, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const center = (0, NotificationCenterProvider_1.useNotificationCenter)();
+    const { lists, counts, categories, features, format, now, status, isOffline, hasMore, isLoadingMore, appName, actions, find } = center;
+    const labels = (0, react_1.useMemo)(() => (0, inboxLabels_1.withInboxLabels)(center.labels, format, labelOverrides), [center.labels, format, labelOverrides]);
+    const baseId = (0, react_1.useId)();
+    const isPhone = variant === "phone";
+    const plane = colors.surfaceRaised;
+    const rule = `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.ruleOn)(colors, plane)}`;
+    const outline = `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`;
+    const [tabValue, setTab] = (0, useControllable_1.useControllable)(tabProp, "needsYou", onTabChange);
+    const [selectedId, setSelectedRaw, isSelectionControlled] = (0, useControllable_1.useControllable)(selectedProp, null, onSelectedChange);
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [type, setType] = (0, react_1.useState)(inboxModel_1.ALL_TYPES);
+    const [unreadOnly, setUnreadOnly] = (0, react_1.useState)(false);
+    const [checked, setChecked] = (0, react_1.useState)(() => new Set());
+    const [openThreads, setOpenThreads] = (0, react_1.useState)(() => new Set());
+    const [keysOpen, setKeysOpen] = (0, react_1.useState)(false);
+    const [filtersOpen, setFiltersOpen] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const searchRef = (0, react_1.useRef)(null);
+    const titleRef = (0, react_1.useRef)(null);
+    const links = (0, react_1.useRef)(new Map());
+    const linkRefs = (0, react_1.useRef)(new Map());
+    const pendingFocus = (0, react_1.useRef)(null);
+    const orderRef = (0, react_1.useRef)([]);
+    const activeTab = tabValue === "archived" && !features.archive ? "needsYou" : tabValue;
+    const showUnreadOnly = unreadOnly && activeTab !== "needsYou";
+    const selectedItem = selectedId === null ? undefined : find(selectedId);
+    const isDetailOpen = isPhone && selectedItem !== undefined;
+    const isReady = status === "ready";
+    const canSelect = features.decide || features.markRead || features.archive || features.restore;
+    const base = lists[activeTab];
+    const filtered = (0, react_1.useMemo)(() => (0, inboxModel_1.filterItems)(base, { type, unreadOnly: showUnreadOnly, query, keepId: selectedId }), [base, type, showUnreadOnly, query, selectedId]);
+    const groups = (0, react_1.useMemo)(() => activeTab === "needsYou"
+        ? (0, grouping_1.groupByCategory)(filtered, categories, labels.otherCategory)
+        : (0, grouping_1.groupByDay)(filtered, format, now), [activeTab, filtered, categories, labels.otherCategory, format, now]);
+    const visibleItems = (0, react_1.useMemo)(() => filtered.filter(inboxModel_1.isShown), [filtered]);
+    const rowIds = (0, react_1.useMemo)(() => (0, inboxModel_1.visibleRowIds)(groups, openThreads), [groups, openThreads]);
+    const filterCount = (query.trim() === "" ? 0 : 1) + (type === inboxModel_1.ALL_TYPES ? 0 : 1) + (showUnreadOnly ? 1 : 0);
+    const typeOptions = (0, react_1.useMemo)(() => {
+        const tally = new Map();
+        base.filter(inboxModel_1.isShown).forEach(({ entry }) => { var _a; return tally.set(entry.category, ((_a = tally.get(entry.category)) !== null && _a !== void 0 ? _a : 0) + 1); });
+        const present = Object.keys(categories).filter((key) => tally.has(key) || key === type);
+        return [
+            { id: inboxModel_1.ALL_TYPES, label: labels.allTypes },
+            ...present.map((key) => { var _a; return ({ id: key, label: `${categories[key].label} (${format.number((_a = tally.get(key)) !== null && _a !== void 0 ? _a : 0)})` }); }),
+        ];
+    }, [base, categories, type, labels.allTypes, format]);
+    const visibleIds = (0, react_1.useMemo)(() => new Set(visibleItems.map((item) => item.entry.id)), [visibleItems]);
+    const leadThreads = (0, react_1.useMemo)(() => (0, inboxModel_1.threadsByLead)(groups), [groups]);
+    const checkedIds = (0, react_1.useMemo)(() => [...checked].filter((id) => visibleIds.has(id)), [checked, visibleIds]);
+    const checkedItems = (0, react_1.useMemo)(() => checkedIds.flatMap((id) => {
+        const item = find(id);
+        if (!item)
+            return [];
+        const thread = leadThreads.get(id);
+        return thread && !openThreads.has(id) ? (0, grouping_1.threadEntries)(thread).filter(inboxModel_1.isShown) : [item];
+    }), [checkedIds, find, leadThreads, openThreads]);
+    const select = (id, isExplicit) => {
+        setSelectedRaw(id);
+        if (id === null || !isExplicit)
+            return;
+        const item = find(id);
+        if (item && item.state.zone === "activity" && item.entry.isRead === false)
+            actions.setRead([id], true);
+        if (isPhone)
+            pendingFocus.current = { kind: "title" };
+    };
+    const clearChecked = () => setChecked(new Set());
+    const clearFilters = () => {
+        setQuery("");
+        setType(inboxModel_1.ALL_TYPES);
+        setUnreadOnly(false);
+    };
+    const latest = (0, react_1.useRef)({ select });
+    latest.current = { select };
+    const onOpenRow = (0, react_1.useCallback)((item) => latest.current.select(item.entry.id, true), []);
+    const onCheckedChange = (0, react_1.useCallback)((item, isChecked) => {
+        setChecked((current) => {
+            const next = new Set(current);
+            if (isChecked)
+                next.add(item.entry.id);
+            else
+                next.delete(item.entry.id);
+            return next;
+        });
+    }, []);
+    const onThreadToggle = (0, react_1.useCallback)((thread) => {
+        setOpenThreads((current) => {
+            const next = new Set(current);
+            if (!next.delete(thread.key))
+                next.add(thread.key);
+            return next;
+        });
+    }, []);
+    const linkRefFor = (0, react_1.useCallback)((id) => {
+        const cached = linkRefs.current.get(id);
+        if (cached)
+            return cached;
+        const ref = (element) => {
+            if (element)
+                links.current.set(id, element);
+            else
+                links.current.delete(id);
+        };
+        linkRefs.current.set(id, ref);
+        return ref;
+    }, []);
+    const goBack = () => {
+        if (selectedId !== null)
+            pendingFocus.current = { kind: "row", id: selectedId };
+        setSelectedRaw(null);
+    };
+    (0, react_1.useEffect)(() => {
+        clearChecked();
+        setType(inboxModel_1.ALL_TYPES);
+    }, [activeTab]);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        const previous = orderRef.current;
+        orderRef.current = rowIds;
+        if (!isReady)
+            return;
+        if (selectedId === null) {
+            if (!isPhone && !isSelectionControlled && rowIds.length > 0)
+                setSelectedRaw(rowIds[0]);
+            return;
+        }
+        if (!previous.includes(selectedId) || rowIds.includes(selectedId))
+            return;
+        if (isPhone) {
+            if (selectedItem === undefined || selectedItem.state.isHidden || selectedItem.state.zone === "archived") {
+                setSelectedRaw(null);
+            }
+            return;
+        }
+        const index = previous.indexOf(selectedId);
+        const after = previous.slice(index + 1).find((id) => rowIds.includes(id));
+        const before = previous.slice(0, index).reverse().find((id) => rowIds.includes(id));
+        const next = (_a = after !== null && after !== void 0 ? after : before) !== null && _a !== void 0 ? _a : null;
+        const active = document.activeElement;
+        const hadFocus = active === document.body || (((_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.contains(active)) === true && !(0, inboxModel_1.isTypingTarget)(active));
+        if (next !== null && hadFocus)
+            pendingFocus.current = { kind: "row", id: next };
+        setSelectedRaw(next);
+    });
+    (0, react_1.useEffect)(() => {
+        const pending = pendingFocus.current;
+        if (!pending)
+            return;
+        if (pending.kind === "title" && isDetailOpen && titleRef.current) {
+            pendingFocus.current = null;
+            titleRef.current.focus();
+        }
+        else if (pending.kind === "row" && !isDetailOpen) {
+            const link = links.current.get(pending.id);
+            if (link) {
+                pendingFocus.current = null;
+                link.focus();
+            }
+        }
+    });
+    const filtersKey = `${activeTab}|${type}|${query}|${showUnreadOnly}`;
+    const lastFiltersKey = (0, react_1.useRef)(filtersKey);
+    (0, react_1.useEffect)(() => {
+        if (lastFiltersKey.current === filtersKey)
+            return undefined;
+        lastFiltersKey.current = filtersKey;
+        const timer = setTimeout(() => actions.announce(labels.results(visibleItems.length)), 500);
+        return () => clearTimeout(timer);
+    }, [filtersKey, actions, labels, visibleItems.length]);
+    const focusSearch = () => { var _a, _b; return (_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input")) === null || _b === void 0 ? void 0 : _b.focus(); };
+    const move = (direction) => {
+        var _a;
+        if (rowIds.length === 0)
+            return;
+        const index = selectedId === null ? -1 : rowIds.indexOf(selectedId);
+        const next = rowIds[Math.max(0, Math.min(rowIds.length - 1, index < 0 ? 0 : index + direction))];
+        if (!isPhone)
+            select(next, true);
+        (_a = links.current.get(next)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKey = (event) => {
+        var _a, _b, _c;
+        const target = event.target;
+        const inside = target instanceof Node && rootRef.current !== null && rootRef.current.contains(target);
+        if (event.defaultPrevented || keysOpen || filtersOpen || (!inside && target !== document.body))
+            return;
+        const typing = (0, inboxModel_1.isTypingTarget)(target);
+        const isUndo = (event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "z";
+        if (typing) {
+            if (event.key === "Escape" && target instanceof HTMLInputElement && ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                setQuery("");
+                target.blur();
+            }
+            return;
+        }
+        if (isUndo) {
+            if (!actions.undoLast())
+                actions.announce(labels.nothingToUndo);
+            event.preventDefault();
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const inList = target instanceof Node && ((_c = (_b = rootRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tabpanel"]')) === null || _c === void 0 ? void 0 : _c.contains(target)) === true;
+        const handled = (() => {
+            switch (event.key) {
+                case "/":
+                    focusSearch();
+                    return true;
+                case "j":
+                    move(1);
+                    return true;
+                case "k":
+                    move(-1);
+                    return true;
+                case "ArrowDown":
+                    if (inList)
+                        move(1);
+                    return inList;
+                case "ArrowUp":
+                    if (inList)
+                        move(-1);
+                    return inList;
+                case "?":
+                    setKeysOpen(true);
+                    return true;
+                case "z":
+                    if (!actions.undoLast())
+                        actions.announce(labels.nothingToUndo);
+                    return true;
+                case "Escape":
+                    if (checked.size === 0)
+                        return false;
+                    clearChecked();
+                    return true;
+                default:
+                    break;
+            }
+            if (!selectedItem || isOffline)
+                return false;
+            const { entry, state } = selectedItem;
+            switch (event.key) {
+                case "o":
+                    actions.open(entry);
+                    return true;
+                case "u":
+                    if (!features.markRead || entry.isRead === undefined)
+                        return false;
+                    actions.setRead([entry.id], !entry.isRead);
+                    return true;
+                case "e":
+                    if (state.zone === "activity" && features.archive)
+                        actions.archive([entry.id]);
+                    else if (state.zone === "archived" && features.restore)
+                        actions.restore([entry.id]);
+                    else
+                        return false;
+                    return true;
+                case "x":
+                    if (!canSelect || !visibleIds.has(entry.id))
+                        return false;
+                    onCheckedChange(selectedItem, !checked.has(entry.id));
+                    return true;
+                default:
+                    return false;
+            }
+        })();
+        if (handled)
+            event.preventDefault();
+    };
+    const keyRef = (0, react_1.useRef)(onKey);
+    keyRef.current = onKey;
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => keyRef.current(event);
+        document.addEventListener("keydown", listener);
+        return () => document.removeEventListener("keydown", listener);
+    }, []);
+    const unreadHere = visibleItems.some((item) => item.entry.isRead === false);
+    const markAllRead = () => {
+        if (activeTab === "archived")
+            return;
+        actions.markAllRead({
+            zone: activeTab,
+            category: type === inboxModel_1.ALL_TYPES ? undefined : type,
+            query: query.trim() === "" ? undefined : query.trim(),
+        });
+    };
+    const bulkActions = (0, react_1.useMemo)(() => {
+        const ids = checkedItems.map((item) => item.entry.id);
+        const afterwards = (run) => () => {
+            run();
+            clearChecked();
+        };
+        const result = [];
+        if (checkedIds.length < visibleItems.length) {
+            result.push({ id: "select-all", label: labels.selectAll, onClick: () => setChecked(new Set(visibleIds)) });
+        }
+        const decision = features.decide ? (0, inboxModel_1.bulkDecision)(checkedItems) : undefined;
+        if (decision) {
+            result.push({
+                id: "decide",
+                label: labels.bulkDecide(decision.label, checkedIds.length),
+                tone: "primary",
+                icon: lucide_react_1.Check,
+                isDisabled: isOffline,
+                onClick: afterwards(() => actions.decide(ids, decision)),
+            });
+        }
+        const unread = checkedItems.filter((item) => item.entry.isRead === false).map((item) => item.entry.id);
+        const read = checkedItems.filter((item) => item.entry.isRead === true).map((item) => item.entry.id);
+        if (features.markRead && unread.length > 0) {
+            result.push({ id: "read", label: labels.markRead, icon: lucide_react_1.MailOpen, isDisabled: isOffline, onClick: afterwards(() => actions.setRead(unread, true)) });
+        }
+        else if (features.markRead && read.length > 0) {
+            result.push({ id: "unread", label: labels.markUnread, icon: lucide_react_1.Mail, isDisabled: isOffline, onClick: afterwards(() => actions.setRead(read, false)) });
+        }
+        if (activeTab === "activity" && features.archive) {
+            result.push({ id: "archive", label: labels.archive, icon: lucide_react_1.Archive, isDisabled: isOffline, onClick: afterwards(() => actions.archive(ids)) });
+        }
+        if (activeTab === "archived" && features.restore) {
+            result.push({ id: "restore", label: labels.restore, icon: lucide_react_1.Archive, isDisabled: isOffline, onClick: afterwards(() => actions.restore(ids)) });
+        }
+        return result;
+    }, [checkedItems, checkedIds.length, visibleItems.length, visibleIds, features, labels, isOffline, activeTab, actions]);
+    const tabItems = [
+        { id: "needsYou", label: labels.needsYouTab, count: counts.needsYou > 0 ? counts.needsYou : undefined },
+        { id: "activity", label: labels.activityTab, count: counts.unread > 0 ? counts.unread : undefined },
+        ...(features.archive ? [{ id: "archived", label: labels.archivedTab }] : []),
+    ];
+    const typeSelect = ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, size: isPhone ? "md" : "sm", "aria-label": labels.typeFilter, options: typeOptions, value: type, isDisabled: !isReady, width: isPhone ? "100%" : "11rem", onChange: (option) => setType(option === undefined ? inboxModel_1.ALL_TYPES : String(option.id)) }));
+    const unreadSwitch = activeTab !== "needsYou" && ((0, jsx_runtime_1.jsx)(ToggleSwitch_1.default, { size: isPhone ? "md" : "sm", label: labels.unreadOnly, isChecked: showUnreadOnly, isDisabled: !isReady, onChange: setUnreadOnly }));
+    const search = ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { ref: searchRef, minW: isPhone ? 0 : "15rem", flex: isPhone ? 1 : undefined, children: (0, jsx_runtime_1.jsx)(Search_1.default, { size: isPhone ? "md" : "sm", placeholder: labels.search, "aria-label": labels.search, shortcut: false, query: query, isDisabled: !isReady, onSearch: (event) => setQuery(event.target.value), onClear: () => {
+                setQuery("");
+                focusSearch();
+            } }) }));
+    const bulkBar = ((0, jsx_runtime_1.jsx)(BulkSelectionBar_1.default, { placement: "inline", selectedCount: checkedIds.length, countLabel: labels.selected(checkedIds.length), actions: bulkActions, clearLabel: labels.clearSelection, onClearSelection: clearChecked, "data-testid": testId ? `${testId}-bulk` : undefined }));
+    const toolbar = checkedIds.length > 0 ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: 1, minW: 0, py: 2, children: bulkBar })) : isPhone ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 2, align: "center", w: "100%", py: 2, children: [search, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.filters, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.SlidersHorizontal, boxSize: 5, "aria-hidden": "true" }), onClick: () => setFiltersOpen(true) }), (type !== inboxModel_1.ALL_TYPES || showUnreadOnly) && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", top: 2, right: 2, boxSize: 2, borderRadius: "full", bg: colors.primary[500], "aria-hidden": "true" }))] })] })) : ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { ml: "auto", py: 2, children: (0, jsx_runtime_1.jsxs)(FilterBar_1.default, { search: search, searchLabel: labels.search, children: [typeSelect, unreadSwitch] }) }));
+    const showMarkAll = features.markAllRead && isReady && activeTab !== "archived";
+    const headerActions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showMarkAll &&
+                (isPhone ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.markAllRead, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.markAllRead, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.CheckCheck, boxSize: 5, "aria-hidden": "true" }), isDisabled: !unreadHere || isOffline, onClick: markAllRead }) })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCheck, { size: 16, "aria-hidden": "true" }), label: labels.markAllRead, isDisabled: !unreadHere || isOffline, onClick: markAllRead }))), !isPhone && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.keyboardShortcuts, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", "aria-label": labels.keyboardShortcuts, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.Keyboard, boxSize: 4, "aria-hidden": "true" }), onClick: () => setKeysOpen(true) }) })), onOpenSettings && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.settings, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: isPhone ? "md" : "sm", variant: "ghost", colorScheme: "gray", "aria-label": labels.settings, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.Settings, boxSize: isPhone ? 5 : 4, "aria-hidden": "true" }), onClick: onOpenSettings }) }))] }));
+    const loadMore = hasMore && features.loadMore ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { justify: "center", p: 3, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: isPhone ? "md" : "sm", variant: "outline", colorScheme: "gray", label: labels.loadMore, isLoading: isLoadingMore, onClick: actions.loadMore }) })) : null;
+    let listBody;
+    if (status === "loading")
+        listBody = (0, jsx_runtime_1.jsx)(InboxStates_1.InboxSkeleton, { isPhone: isPhone, label: labels.loading });
+    else if (status === "error" || status === "noAccess") {
+        listBody = (0, jsx_runtime_1.jsx)(InboxStates_1.InboxLoadFailure, { kind: status, labels: labels, appName: appName, onRetry: actions.retryLoad });
+    }
+    else if (visibleItems.length === 0) {
+        listBody =
+            filterCount > 0 && base.some(inboxModel_1.isShown) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FilteredEmptyState_1.default, { scale: "card", filterCount: filterCount, onClearFilters: clearFilters }), loadMore] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InboxStates_1.InboxEmpty, { tab: activeTab, labels: labels }), loadMore] }));
+    }
+    else {
+        listBody = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InboxList_1.InboxList, { groups: groups, isPhone: isPhone, selectedId: selectedId, checked: checked, openThreads: openThreads, idPrefix: baseId, onOpenRow: onOpenRow, onCheckedChange: canSelect ? onCheckedChange : undefined, onThreadToggle: onThreadToggle, linkRefFor: linkRefFor }), loadMore] }));
+    }
+    const detail = selectedItem ? ((0, jsx_runtime_1.jsx)(NotificationDetail_1.default, { item: selectedItem, variant: isPhone ? "phone" : "desktop", onBack: goBack, titleRef: titleRef }, selectedItem.entry.id)) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "md", icon: lucide_react_1.Inbox, colorScheme: "gray", title: labels.nothingSelected, description: labels.nothingSelectedHint, minH: "100%" }));
+    const scroll = (0, scrollbar_1.scrollbarStyles)(colors, "hover");
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: rootRef, direction: "column", h: "100%", minH: isPhone ? undefined : "32rem", "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Box, { display: isDetailOpen ? "none" : "block", flexShrink: 0, px: isPhone ? 4 : 0, pt: isPhone ? 4 : 0, pb: isPhone ? 3 : 0, children: [(0, jsx_runtime_1.jsx)(PageHeader_1.default, { title: labels.title, subtitle: isReady ? labels.subtitle(counts) : appName, actions: headerActions }), isOffline && ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 2, mt: 3, px: 4, py: 2, fontSize: "xs", bg: colors.backgroundColor.subtle, color: colors.text[800], borderRadius: isPhone ? undefined : radii_1.RADIUS_ROLE.control, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.WifiOff, boxSize: 3.5, mt: 0.5, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(Primitives_1.Text, { children: labels.offlineMessage })] }))] }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", flex: 1, minH: 0, mt: isPhone ? 0 : 4, bg: plane, border: isPhone ? undefined : outline, borderRadius: isPhone ? undefined : radii_1.RADIUS_ROLE.card, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { display: isDetailOpen ? "none" : "flex", flexShrink: 0, direction: isPhone ? "column" : "row", wrap: "wrap", align: isPhone ? "stretch" : "flex-end", justify: "space-between", columnGap: 4, px: isPhone ? 2 : 3, pt: isPhone ? 0 : 2, pb: 0, borderBottom: rule, children: [(0, jsx_runtime_1.jsx)(Tabs_1.default, { id: baseId, "aria-label": labels.listsLabel, size: isPhone ? "md" : "sm", items: tabItems, value: activeTab, onChange: (value) => setTab(TAB_BY_ID[value]) }), toolbar] }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { flex: 1, minH: 0, display: isDetailOpen ? "none" : "flex", children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { role: "tabpanel", id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${activeTab}`, "aria-busy": status === "loading" ? true : undefined, flex: isPhone ? 1 : undefined, w: isPhone ? undefined : "clamp(17.5rem, 32%, 22.5rem)", flexShrink: 0, minW: 0, overflowY: "auto", borderRight: isPhone ? undefined : rule, pt: 1, sx: scroll, children: listBody }), !isPhone && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: 1, minW: 0, overflowY: "auto", sx: scroll, children: isReady ? detail : null }))] }), isDetailOpen && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: 1, overflowY: "auto", sx: scroll, children: detail }))] }), (0, jsx_runtime_1.jsx)(ShortcutsDialog_1.ShortcutsDialog, { isOpen: keysOpen, onClose: () => setKeysOpen(false), labels: labels }), isPhone && ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: filtersOpen, onClose: () => setFiltersOpen(false), placement: "bottom", size: "md", children: [(0, jsx_runtime_1.jsx)(Drawer_1.DrawerHeader, { children: labels.filters }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { direction: "column", gap: 4, children: [typeSelect, unreadSwitch] }) })] }))] }));
+};
+/** Full-page inbox: Needs you, Activity and Archived tabs, search, a type filter, bulk actions and a reading pane. */
+const NotificationInbox = (props) => ((0, jsx_runtime_1.jsx)(NotificationCenterProvider_1.NotificationScope, { source: props, children: (0, jsx_runtime_1.jsx)(NotificationInboxBody, { ...props }) }));
+exports.default = NotificationInbox;

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

@@ -0,0 +1,106 @@
+import type { NotificationCounts, NotificationLabels, NotificationSourceBinding } from "../core/NotificationSourceProps";
+/** Strings the inbox page adds to the shared ones; anything left out stays English. */
+export interface NotificationInboxLabels extends NotificationLabels {
+    /** Page heading. */
+    title: string;
+    /** Muted line under the heading, built from the server counts. */
+    subtitle: (counts: NotificationCounts) => string;
+    /** Accessible name of the tab list. */
+    listsLabel: string;
+    /** Decisions and unread mentions. */
+    needsYouTab: string;
+    /** Everything else. */
+    activityTab: string;
+    /** Only with `onArchive`. */
+    archivedTab: string;
+    /** Search field label and placeholder. */
+    search: string;
+    /** Type filter label. */
+    typeFilter: string;
+    /** The type filter's first option. */
+    allTypes: string;
+    /** Unread-only switch. */
+    unreadOnly: string;
+    /** Phone button and sheet title for the type filter and the unread switch. */
+    filters: string;
+    /** Header action for the open tab and filters. */
+    markAllRead: string;
+    /** Header gear. */
+    settings: string;
+    /** Header button and dialog title for the keyboard shortcuts. */
+    keyboardShortcuts: string;
+    /** Muted line under the shortcuts dialog title. */
+    shortcutsHint: string;
+    /** One line per shortcut in the help dialog. */
+    shortcuts: {
+        next: string;
+        previous: string;
+        show: string;
+        openInApp: string;
+        toggleRead: string;
+        archive: string;
+        select: string;
+        undo: string;
+        search: string;
+        clear: string;
+        help: string;
+    };
+    /** The bulk bar's count. */
+    selected: (count: number) => string;
+    /** Bulk bar button that selects every row in view. */
+    selectAll: string;
+    /** Bulk bar button that drops the selection. */
+    clearSelection: string;
+    /** Bulk decision button, e.g. "Approve 3". */
+    bulkDecide: (actionLabel: string, count: number) => string;
+    /** Empty reading pane title. */
+    nothingSelected: string;
+    /** Empty reading pane hint. */
+    nothingSelectedHint: string;
+    /** Spoken when Undo has nothing left to undo. */
+    nothingToUndo: string;
+    /** Spoken after a search or filter change. */
+    results: (count: number) => string;
+    /** Needs you is empty. */
+    caughtUpTitle: string;
+    caughtUpBody: string;
+    /** Activity is empty. */
+    activityEmptyTitle: string;
+    activityEmptyBody: string;
+    /** Archived is empty. */
+    archivedEmptyTitle: string;
+    archivedEmptyBody: string;
+    /** The list failed to load. */
+    loadErrorTitle: string;
+    loadErrorBody: string;
+    /** The person's role cannot see notifications. */
+    noAccessTitle: string;
+    noAccessBody: (appName?: string) => string;
+    /** Accessible name of the list while it loads. */
+    loading: string;
+    /** Button below the list when `hasMore`. */
+    loadMore: string;
+}
+/** The inbox lists; Archived exists only with `onArchive`. */
+export type NotificationInboxTab = "needsYou" | "activity" | "archived";
+/** "desktop" is list plus reading pane; "phone" shows one at a time with a Back button. */
+export type NotificationInboxVariant = "desktop" | "phone";
+/** Full-page inbox: tabs, type filter, search, bulk actions and a reading pane; pass the source props or use a provider. */
+export type NotificationInboxProps = NotificationSourceBinding & {
+    /** Defaults to "desktop". */
+    variant?: NotificationInboxVariant;
+    /** Controlled tab; leave it out to start on Needs you. */
+    tab?: NotificationInboxTab;
+    /** Called when the person switches tabs. */
+    onTabChange?: (tab: NotificationInboxTab) => void;
+    /** Controlled reading-pane entry id, e.g. from the URL; null shows nothing. Leave it out and desktop opens the first row. */
+    selectedId?: string | null;
+    /** Called when the reading pane opens or closes an entry. */
+    onSelectedChange?: (id: string | null) => void;
+    /** Shows the settings gear in the header. */
+    onOpenSettings?: () => void;
+    /** Page strings; shared keys override the provider's for this component only. */
+    labels?: Partial<NotificationInboxLabels>;
+    /** Test id root for the page. */
+    "data-testid"?: string;
+};

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

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

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

@@ -0,0 +1,8 @@
+import type { NotificationInboxLabels } from "./NotificationInboxProps";
+interface ShortcutsDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    labels: NotificationInboxLabels;
+}
+export declare const ShortcutsDialog: ({ isOpen, onClose, labels }: ShortcutsDialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShortcutsDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Kbd_1 = __importDefault(require("../../Kbd/Kbd"));
+const Modal_1 = __importStar(require("../../Modal/Modal"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const ShortcutsDialog = ({ isOpen, onClose, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rows = [
+        [["j", "↓"], labels.shortcuts.next],
+        [["k", "↑"], labels.shortcuts.previous],
+        [[labels.keyEnter], labels.shortcuts.show],
+        [["o"], labels.shortcuts.openInApp],
+        [["u"], labels.shortcuts.toggleRead],
+        [["e"], labels.shortcuts.archive],
+        [["x"], labels.shortcuts.select],
+        [["z"], labels.shortcuts.undo],
+        [["/"], labels.shortcuts.search],
+        [[labels.keyEsc], labels.shortcuts.clear],
+        [["?"], labels.shortcuts.help],
+    ];
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "sm", isCentered: true, title: labels.keyboardShortcuts, subtitle: labels.shortcutsHint, children: (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { as: "dl", direction: "column", gap: 2, m: 0, children: rows.map(([keys, name]) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { justify: "space-between", align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Text, { as: "dt", fontSize: "sm", color: colors.text[800], children: name }), (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { as: "dd", gap: 1, align: "center", m: 0, children: keys.map((key, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(Primitives_1.Text, { color: colors.textMuted, children: "/" }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { children: key })] }, key))) })] }, name))) }) }) }));
+};
+exports.ShortcutsDialog = ShortcutsDialog;

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

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