react-focus-on
Version:
The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.
32 lines (31 loc) • 2.6 kB
JavaScript
import { __assign, __rest } from "tslib";
import * as React from 'react';
import { RemoveScroll } from 'react-remove-scroll/UI';
import ReactFocusLock from 'react-focus-lock/UI';
import { effectCar } from './medium';
var PREVENT_SCROLL = { preventScroll: true };
export var FocusOn = React.forwardRef(function (props, parentRef) {
var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
var _b = React.useState(null), activeNode = _b[0], setActiveNode = _b[1];
var children = props.children, autoFocus = props.autoFocus, shards = props.shards, crossFrame = props.crossFrame, _c = props.enabled, enabled = _c === void 0 ? true : _c, _d = props.scrollLock, scrollLock = _d === void 0 ? true : _d, _e = props.focusLock, focusLock = _e === void 0 ? true : _e, _f = props.returnFocus, returnFocus = _f === void 0 ? true : _f, inert = props.inert, allowPinchZoom = props.allowPinchZoom, sideCar = props.sideCar, className = props.className, shouldIgnore = props.shouldIgnore, preventScrollOnFocus = props.preventScrollOnFocus, style = props.style, as = props.as, gapMode = props.gapMode, rest = __rest(props, ["children", "autoFocus", "shards", "crossFrame", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as", "gapMode"]);
var SideCar = sideCar;
var appliedLockProps = __assign(__assign({}, lockProps), { as: as,
style: style,
sideCar: sideCar,
shards: shards,
allowPinchZoom: allowPinchZoom,
gapMode: gapMode,
inert: inert, enabled: enabled && scrollLock });
var onActivation = React.useCallback(function (node) {
setActiveNode(node);
}, []);
var onDeactivation = React.useCallback(function () {
setActiveNode(null);
}, []);
return (React.createElement(React.Fragment, null,
React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, crossFrame: crossFrame, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? PREVENT_SCROLL : undefined,
// // ts-expect-error TS2322 - ts v3 "glitch"
as: RemoveScroll }, children),
enabled && (React.createElement(SideCar, __assign({}, rest, { sideCar: effectCar, setLockProps: setLockProps, shards: shards, activeNode: activeNode })))));
});
export * from './reExports';