@veracity/vui

Version:

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

33 lines (31 loc) • 1.06 kB

JavaScript

View Raw

import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
import ReactFocusLock from "react-focus-lock";

//#region src/focusLock/focusLock.tsx
/**
* Traps the focus within the provided content.
*
* Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.
*/
const FocusLock = (props) => {
	const { autoFocus, children, crossFrame, finalFocusRef, initialFocusRef, isDisabled, persistentFocus, returnFocus: returnFocusProp } = props;
	return /* @__PURE__ */ jsx(ReactFocusLock, {
		autoFocus,
		crossFrame,
		disabled: isDisabled,
		onActivation: useCallback(() => {
			initialFocusRef?.current?.focus();
		}, [initialFocusRef]),
		onDeactivation: useCallback(() => {
			finalFocusRef?.current?.focus();
		}, [finalFocusRef]),
		persistentFocus,
		returnFocus: returnFocusProp && !finalFocusRef,
		children
	});
};
FocusLock.displayName = "FocusLock";

//#endregion
export { FocusLock as default };
globalThis.__vuiVersion__ = "5.3.0-alpha.2"
//# sourceMappingURL=focusLock.js.map