/* eslint-disable */
// Mobile overflow sheet — phone-only "More" button + full-screen overlay.
//
// Companion to bottom-tab-bar.jsx. The bottom tab bar exposes 4 primary
// destinations (Praxia / Chairside / Lead / Roles); this sheet exposes
// everything else in SUITE_PRODUCTS that isn't in the tab bar (My Practice,
// Patterns, Difficult, Friday, Handoffs).
//
// Self-mounting IIFE matching the bottom-tab-bar.jsx pattern. Creates its
// own container under documentElement (immune to React mount wipes) and
// renders both the floating MoreButton (visible only at <640px via CSS)
// and the overlay component into it.
//
// Visibility is controlled entirely by CSS in styles/tokens.css. JS does
// not gate on viewport width, so it works regardless of resize timing.
(function () {
const { useEffect, useState } = React;
// The 4 destinations that ARE in the bottom tab bar; everything else in
// SUITE_PRODUCTS shows up in the More overlay.
const TAB_BAR_IDS = new Set(["praxia", "course", "lead", "roles"]);
// ─── Icons ─────────────────────────────────────────────────────────────
function MoreIcon({ color, size }) {
return (
);
}
// ─── Overflow item flatten ─────────────────────────────────────────────
function getOverflowItems() {
const products = window.SUITE_PRODUCTS;
if (!Array.isArray(products)) return [];
const out = [];
for (const group of products) {
const items = Array.isArray(group?.items) ? group.items : (Array.isArray(group) ? group : null);
if (!items) continue;
for (const p of items) {
if (!p || typeof p.id !== "string") continue;
if (TAB_BAR_IDS.has(p.id)) continue;
out.push(p);
}
}
return out;
}
// ─── Component (renders both button and overlay) ───────────────────────
function MoreSheet() {
const [open, setOpen] = useState(false);
// Expose a global toggle so other code (e.g. integration tests) can drive it.
useEffect(() => {
window.toggleMoreSheet = () => setOpen((prev) => !prev);
return () => { delete window.toggleMoreSheet; };
}, []);
// ESC closes
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open]);
const items = open ? getOverflowItems() : [];
return (
<>
{/* Floating MoreButton — visible only at <640px via .more-button-floating CSS */}
{/* Full-screen overlay — only mounted while open */}
{open && (