);
}
/* generic dropdown. Pass `portal` when the trigger sits inside an overflow:auto/hidden
container (e.g. the .filterbar): the menu then renders to document.body with fixed
positioning so it isn't clipped by the scroll container. */
function Dropdown({ label, value, icon, children, small, portal }) {
const [open, setOpen] = useState(false);
const [pos, setPos] = useState(null);
const ref = useRef(null); // wraps the trigger button
const menuRef = useRef(null); // the (possibly portaled) menu
useEffect(() => {
function out(e) {
const inBtn = ref.current && ref.current.contains(e.target);
const inMenu = menuRef.current && menuRef.current.contains(e.target);
if (!inBtn && !inMenu) setOpen(false);
}
document.addEventListener("mousedown", out);
return () => document.removeEventListener("mousedown", out);
}, []);
// Anchor the portaled menu under the trigger, clamped to the viewport.
useEffect(() => {
if (!open || !portal || !ref.current) return;
const r = ref.current.getBoundingClientRect();
const menuWidth = 190;
const left = Math.max(8, Math.min(r.right - menuWidth, window.innerWidth - menuWidth - 8));
setPos({ top: r.bottom + 6, left });
}, [open, portal]);
const menuBody = open ? children(() => setOpen(false)) : null;
return (
{open && (portal
? ReactDOM.createPortal(
{menuBody}
,
// Portal into the themed wrapper (not document.body) so the menu inherits
// the --bg-panel/--text/etc. CSS variables defined on `.app`. position:fixed
// still lets it escape the .filterbar overflow clip.
(ref.current && ref.current.closest(".app")) || document.body)
:
{menuBody}
)}
);
}
/* column-header filter — popover uses portal to escape overflow */
function ColHead({ className, label, count, children, align }) {
const [open, setOpen] = useState(false);
const btnRef = useRef(null), cellRef = useRef(null);
useEffect(() => {
if (!open) return;
function out(e) {
if (cellRef.current && !cellRef.current.contains(e.target)) setOpen(false);
}
// Close when the page scrolls (the menu is fixed-positioned and would detach
// from its column), but NOT when the user scrolls the menu's own list.
function onScroll(e) {
if (e.target instanceof Element && e.target.closest(".colfilt-menu")) return;
setOpen(false);
}
document.addEventListener("mousedown", out);
window.addEventListener("scroll", onScroll, true);
return () => {
document.removeEventListener("mousedown", out);
window.removeEventListener("scroll", onScroll, true);
};
}, [open]);
function toggleOpen() {
setOpen((o) => !o);
}
return (
{label}
{open &&
ReactDOM.createPortal(
setOpen(false)}
>
{children(() => setOpen(false))}
,
// Portal into the themed .app wrapper (not document.body) so the menu
// picks up data-theme and the CSS variables defined on it.
(cellRef.current && cellRef.current.closest(".app")) || document.body
)
}
);
}
function ColHeadMenu({ btnRef, cellRef, align, onClose, children }) {
const [pos, setPos] = useState(null);
const menuRef = useRef(null);
useEffect(() => {
if (cellRef.current && btnRef.current) {
const r = cellRef.current.getBoundingClientRect();
const menuWidth = 190;
let left = r.left;
if (align === "right") {
left = Math.max(8, r.right - menuWidth);
} else {
left = Math.min(r.left, window.innerWidth - menuWidth - 8);
}
// Cap the menu to the space left below the header so long lists
// (e.g. the Affects filter) scroll instead of running off-screen.
const maxH = Math.max(160, window.innerHeight - r.bottom - 24);
setPos({ top: r.bottom + 8, left, maxH });
}
}, [cellRef, btnRef, align]);
useEffect(() => {
function out(e) {
if (menuRef.current && !menuRef.current.contains(e.target) && cellRef.current && !cellRef.current.contains(e.target)) {
onClose();
}
}
document.addEventListener("mousedown", out);
return () => document.removeEventListener("mousedown", out);
}, [onClose, cellRef]);
if (!pos) return null;
return (