// Shared admin controls with portaled menus, RTL and keyboard support. function AdminControlsStyles() { return ; } function AdminSelect({ value, onValueChange, options, label, disabled = false, style }) { const { lang } = useLang(); const listId = React.useId(); const triggerRef = useRef(null); const menuRef = useRef(null); const typeahead = useRef({ text: "", time: 0 }); const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const [position, setPosition] = useState(null); const selectedIndex = options.findIndex(option => option.value === value); const selected = options[selectedIndex]; const close = (restoreFocus = false) => { setOpen(false); if (restoreFocus) triggerRef.current?.focus({ preventScroll: true }); }; const choose = index => { const option = options[index]; if (!option || option.disabled) return; onValueChange(option.value); close(true); }; const openMenu = index => { if (disabled || !options.length) return; setActive(index ?? Math.max(0, selectedIndex)); setOpen(true); }; React.useLayoutEffect(() => { if (!open) return; const update = event => { if (event && menuRef.current?.contains(event.target)) return; const rect = triggerRef.current?.getBoundingClientRect(); if (!rect) return; const width = Math.min(Math.max(rect.width, 180), window.innerWidth - 16); const below = window.innerHeight - rect.bottom - 16; const above = rect.top - 16; const height = Math.min(options.length * 44 + 12, 280); const flip = below < height && above > below; const maxHeight = Math.max(44, Math.min(height, flip ? above : below)); const left = lang === "fa" ? rect.right - width : rect.left; setPosition({ width, maxHeight, left: Math.max(8, Math.min(left, window.innerWidth - width - 8)), top: flip ? Math.max(8, rect.top - maxHeight - 6) : rect.bottom + 6, }); }; const outside = event => { if (!triggerRef.current?.contains(event.target) && !menuRef.current?.contains(event.target)) setOpen(false); }; update(); window.addEventListener("resize", update); document.addEventListener("scroll", update, true); document.addEventListener("pointerdown", outside, true); return () => { window.removeEventListener("resize", update); document.removeEventListener("scroll", update, true); document.removeEventListener("pointerdown", outside, true); }; }, [open, lang, options.length]); React.useLayoutEffect(() => { if (!open || !menuRef.current) return; const option = menuRef.current.children[active]; if (!option) return; const menu = menuRef.current; if (option.offsetTop < menu.scrollTop) menu.scrollTop = option.offsetTop; if (option.offsetTop + option.offsetHeight > menu.scrollTop + menu.clientHeight) { menu.scrollTop = option.offsetTop + option.offsetHeight - menu.clientHeight; } }, [open, active]); const onKeyDown = event => { if (event.key === "Tab") { close(); return; } if (event.key === "Escape" && open) { event.preventDefault(); event.stopPropagation(); close(true); return; } if (["Enter", " "].includes(event.key)) { event.preventDefault(); open ? choose(active) : openMenu(); return; } if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { event.preventDefault(); if (!open) { openMenu(event.key === "End" ? options.length - 1 : Math.max(0, selectedIndex)); return; } const delta = event.key === "ArrowUp" ? -1 : 1; setActive(index => event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : (index + delta + options.length) % options.length); return; } if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) { const time = Date.now(); const previous = typeahead.current; const text = (time - previous.time < 700 ? previous.text : "") + event.key.toLowerCase(); typeahead.current = { text, time }; const match = options.findIndex(option => option.label.toLowerCase().startsWith(text)); if (match >= 0) { event.preventDefault(); open ? setActive(match) : onValueChange(options[match].value); } } }; return <> {open && ReactDOM.createPortal( , document.body )} ; } Object.assign(window, { AdminSelect, AdminControlsStyles });