@yamada-ui/react/dist/cjs/hooks/use-focus/index.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_event_listener_index = require('../use-event-listener/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);

//#region src/hooks/use-focus/index.ts
/**
* `useFocusOnShow` is a custom hook that focuses on the target element when it is shown.
*
* @see https://yamada-ui.com/docs/hooks/use-focus-on-show
*/
const useFocusOnShow = (refOrEl, { focusTarget: focusRefOrEl, preventScroll, shouldFocus, visible } = {
	preventScroll: true,
	shouldFocus: false
}) => {
	const trulyShouldFocus = shouldFocus && visible;
	const focused = (0, react.useRef)(false);
	const getTarget = (0, react.useCallback)(() => {
		return require_ref.isRefObject(refOrEl) ? refOrEl.current : refOrEl;
	}, [refOrEl]);
	const getFocusTarget = (0, react.useCallback)(() => {
		return require_ref.isRefObject(focusRefOrEl) ? focusRefOrEl.current : focusRefOrEl;
	}, [focusRefOrEl]);
	const onFocus = (0, react.useCallback)(() => {
		const target = getTarget();
		if (!target || !trulyShouldFocus || focused.current) return;
		if (target.contains(document.activeElement)) return;
		const focusTarget = getFocusTarget();
		if (focusTarget) requestAnimationFrame(() => {
			focusTarget.focus({ preventScroll });
			focused.current = true;
		});
		else {
			const firstFocusable = (0, require_utils_index.utils_exports.getFirstFocusableElement)(target);
			if (firstFocusable) requestAnimationFrame(() => {
				firstFocusable.focus({ preventScroll });
				focused.current = true;
			});
			else requestAnimationFrame(() => {
				target.focus({ preventScroll });
				focused.current = true;
			});
		}
	}, [
		getTarget,
		trulyShouldFocus,
		getFocusTarget,
		preventScroll
	]);
	require_effect.useUpdateEffect(() => {
		focused.current = !trulyShouldFocus;
	}, [trulyShouldFocus]);
	require_effect.useUpdateEffect(() => {
		requestAnimationFrame(onFocus);
	}, [onFocus]);
	require_hooks_use_event_listener_index.useEventListener(getTarget, "transitionend", onFocus);
};
/**
* `useFocusOnPointerDown` is a custom hook that focuses on the target element when it is clicked.
*
* @see https://yamada-ui.com/docs/hooks/use-focus-on-pointer-down
*/
const useFocusOnPointerDown = ({ ref, elements, enabled }) => {
	require_hooks_use_event_listener_index.useEventListener(() => (0, require_utils_index.utils_exports.getDocument)(ref.current), "pointerdown", (ev) => {
		if (!(0, require_utils_index.utils_exports.isSafari)() || !enabled) return;
		const target = ev.target;
		const validTarget = (elements ?? [ref]).some((elOrRef) => {
			const el = require_ref.isRefObject(elOrRef) ? elOrRef.current : elOrRef;
			return el?.contains(target) || el === target;
		});
		if ((0, require_utils_index.utils_exports.getActiveElement)((0, require_utils_index.utils_exports.getDocument)(ref.current)) !== target && validTarget) {
			ev.preventDefault();
			target.focus();
		}
	});
};

//#endregion
exports.useFocusOnPointerDown = useFocusOnPointerDown;
exports.useFocusOnShow = useFocusOnShow;
//# sourceMappingURL=index.cjs.map