@primer/react/dist/hooks/useDialog.js

An implementation of GitHub's Primer Design System using React

import { useOnEscapePress } from "./useOnEscapePress.js";
import { c } from "react-compiler-runtime";
import { useEffect } from "react";
//#region src/hooks/useDialog.ts
const noop = () => null;
function visible(el) {
	return !el.hidden && (!el.type || el.type !== "hidden") && (el.offsetWidth > 0 || el.offsetHeight > 0);
}
function focusable(el) {
	const inputEl = el;
	return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
}
function useDialog(t0) {
	const $ = c(27);
	const { modalRef, overlayRef, isOpen, onDismiss: t1, initialFocusRef, closeButtonRef } = t0;
	const onDismiss = t1 === void 0 ? noop : t1;
	let t2;
	if ($[0] !== modalRef || $[1] !== onDismiss || $[2] !== overlayRef) {
		t2 = (e) => {
			if (modalRef.current && overlayRef.current && e.target instanceof Node && !modalRef.current.contains(e.target) && overlayRef.current.contains(e.target)) onDismiss();
		};
		$[0] = modalRef;
		$[1] = onDismiss;
		$[2] = overlayRef;
		$[3] = t2;
	} else t2 = $[3];
	const onClickOutside = t2;
	let t3;
	let t4;
	if ($[4] !== isOpen || $[5] !== onClickOutside) {
		t3 = () => {
			if (isOpen) {
				document.addEventListener("click", onClickOutside);
				return () => {
					document.removeEventListener("click", onClickOutside);
				};
			}
		};
		t4 = [isOpen, onClickOutside];
		$[4] = isOpen;
		$[5] = onClickOutside;
		$[6] = t3;
		$[7] = t4;
	} else {
		t3 = $[6];
		t4 = $[7];
	}
	useEffect(t3, t4);
	let t5;
	let t6;
	if ($[8] !== closeButtonRef || $[9] !== initialFocusRef || $[10] !== isOpen) {
		t5 = () => {
			if (isOpen) {
				if (initialFocusRef && initialFocusRef.current) initialFocusRef.current.focus();
				else if (closeButtonRef && closeButtonRef.current) closeButtonRef.current.focus();
			}
		};
		t6 = [
			isOpen,
			initialFocusRef,
			closeButtonRef
		];
		$[8] = closeButtonRef;
		$[9] = initialFocusRef;
		$[10] = isOpen;
		$[11] = t5;
		$[12] = t6;
	} else {
		t5 = $[11];
		t6 = $[12];
	}
	useEffect(t5, t6);
	let t7;
	if ($[13] !== modalRef) {
		t7 = (e_0, movement) => {
			if (modalRef.current) {
				const items = Array.from(modalRef.current.querySelectorAll("*")).filter(focusable);
				if (items.length === 0) return;
				e_0.preventDefault();
				const focusedElement = document.activeElement;
				if (!focusedElement) return;
				const offsetIndex = items.indexOf(focusedElement) + movement;
				const fallbackIndex = movement === 1 ? 0 : items.length - 1;
				return items[offsetIndex] || items[fallbackIndex];
			}
		};
		$[13] = modalRef;
		$[14] = t7;
	} else t7 = $[14];
	const getFocusableItem = t7;
	let t8;
	if ($[15] !== getFocusableItem) {
		t8 = (e_1) => {
			const focusableItem_0 = getFocusableItem(e_1, e_1.shiftKey ? -1 : 1);
			if (!focusableItem_0) return;
			focusableItem_0.focus();
		};
		$[15] = getFocusableItem;
		$[16] = t8;
	} else t8 = $[16];
	const handleTab = t8;
	let t9;
	if ($[17] !== handleTab) {
		t9 = (event) => {
			switch (event.key) {
				case "Tab": handleTab(event);
			}
		};
		$[17] = handleTab;
		$[18] = t9;
	} else t9 = $[18];
	const onKeyDown = t9;
	let t10;
	if ($[19] !== onKeyDown) {
		t10 = () => ({ onKeyDown });
		$[19] = onKeyDown;
		$[20] = t10;
	} else t10 = $[20];
	const getDialogProps = t10;
	let t11;
	let t12;
	if ($[21] !== isOpen || $[22] !== onDismiss) {
		t11 = (event_0) => {
			if (isOpen) {
				onDismiss();
				event_0.preventDefault();
			}
		};
		t12 = [isOpen, onDismiss];
		$[21] = isOpen;
		$[22] = onDismiss;
		$[23] = t11;
		$[24] = t12;
	} else {
		t11 = $[23];
		t12 = $[24];
	}
	useOnEscapePress(t11, t12);
	let t13;
	if ($[25] !== getDialogProps) {
		t13 = { getDialogProps };
		$[25] = getDialogProps;
		$[26] = t13;
	} else t13 = $[26];
	return t13;
}
//#endregion
export { useDialog as default };