@yamada-ui/react/dist/esm/components/focus-lock/focus-lock.js

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
import ReactFocusLock from "react-focus-lock";

//#region src/components/focus-lock/focus-lock.tsx
const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
/**
* `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
*
* @see https://yamada-ui.com/docs/components/focus-lock
*/
const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
	return /* @__PURE__ */ jsx(InternalFocusLock, {
		autoFocus,
		crossFrame: lockFocusAcrossFrames,
		disabled,
		persistentFocus,
		returnFocus: restoreFocus && !finalFocusRef,
		onActivation: useCallback(() => {
			if (initialFocusRef?.current) initialFocusRef.current.focus();
			else if (contentRef?.current) {
				if ((0, utils_exports.getFocusableElements)(contentRef.current).length === 0) requestAnimationFrame(() => {
					contentRef.current?.focus();
				});
			}
		}, [initialFocusRef, contentRef]),
		onDeactivation: useCallback(() => {
			finalFocusRef?.current?.focus();
		}, [finalFocusRef]),
		children
	});
};

//#endregion
export { FocusLock };
//# sourceMappingURL=focus-lock.js.map