@lobehub/ui/es/base-ui/FocusScope/FocusScope.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { registerScope, setActiveScope, useFocusScopeActive } from "./store.mjs";
import { styles } from "./style.mjs";
import { createContext, use, useEffect, useId } from "react";
import { jsx } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/base-ui/FocusScope/FocusScope.tsx
const FocusScopeIdContext = createContext(null);
const useFocusScopeId = () => use(FocusScopeIdContext);
const FocusScope = ({ id, debugOutline = false, className, children, onKeyDown, ...rest }) => {
	const generatedId = useId();
	const scopeId = id ?? generatedId;
	const isActive = useFocusScopeActive(scopeId);
	useEffect(() => registerScope(scopeId), [scopeId]);
	return /* @__PURE__ */ jsx(FocusScopeIdContext, {
		value: scopeId,
		children: /* @__PURE__ */ jsx("div", {
			"data-focus-scope": scopeId,
			"data-scope-active": isActive ? "" : void 0,
			tabIndex: -1,
			...rest,
			className: cx(styles.root, debugOutline && styles.debugOutline, className),
			onKeyDown: (event) => {
				onKeyDown?.(event);
				if (event.defaultPrevented) return;
				if (event.key === "Escape") setActiveScope(null);
			},
			children
		})
	});
};
FocusScope.displayName = "FocusScope";
//#endregion
export { FocusScope, useFocusScopeId };

//# sourceMappingURL=FocusScope.mjs.map