);
}
function Preferences({ open, onClose, prefs, setPref, onReset }) {
// Open without freezing the slide-in transition on the first open after a
// (re)mount: when `open` flips true, force a synchronous reflow on the
// panel (read offsetWidth) so its closed transform is committed as the
// transition start value, THEN add `is-open`. A forced reflow is reliable
// even when rAF is throttled (e.g. a backgrounded iframe).
const { useState, useLayoutEffect, useRef } = React;
const [active, setActive] = useState(false);
const panelRef = useRef(null);
useLayoutEffect(() => {
const node = panelRef.current;
if (open) {
if (node) {
// A backgrounded tab pauses CSS transitions, which would hold the
// panel at its off-screen start. Snap (no transition) when hidden so
// it's correctly placed the moment the tab is shown; restore the
// animated transition once visible again for future opens.
if (document.hidden) {
node.style.transition = 'none';
const restore = () => { node.style.transition = ''; document.removeEventListener('visibilitychange', restore); };
document.addEventListener('visibilitychange', restore);
}
void node.offsetWidth; // commit closed transform as the transition start
}
setActive(true);
} else {
setActive(false);
}
}, [open]);
return (
<>
);
}
window.Preferences = Preferences;
})();