react-focus-on 3.8.2 → 3.9.0

package/README.md

@@ -56,6 +56,7 @@ import {FocusOn} from 'react-focus-on';
  - `[autoFocus=true]` - enables or disables `auto focus` management (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
  - `[returnFocus=true]` - enables or disables `return focus` on lock deactivation (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
  - `[whiteList=fn]` - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))
+ - `[crossFrame=true]` - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (see [react-focus-lock issue](https://github.com/theKashey/react-focus-lock/issues/104))
 ---
  - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.
  - `[noIsolation]` - disables aria-hidden isolation

package/dist/es2015/UI.js

@@ -5,7 +5,7 @@ import ReactFocusLock from 'react-focus-lock/UI';
 import { effectCar } from './medium';
 export var FocusOn = React.forwardRef(function (props, parentRef) {
     var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
-    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, 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", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as", "gapMode"]);
+    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, crossFrame = props.crossFrame, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, 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 onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = __rest(lockProps, ["onActivation", "onDeactivation"]);
     var appliedLockProps = __assign(__assign({}, restProps), { as: as,
@@ -16,7 +16,7 @@ export var FocusOn = React.forwardRef(function (props, parentRef) {
         gapMode: gapMode,
         inert: inert, enabled: enabled && scrollLock });
     return (React.createElement(React.Fragment, null,
-        React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: RemoveScroll }, children),
+        React.createElement(ReactFocusLock, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, crossFrame: crossFrame, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: RemoveScroll }, children),
         enabled && (React.createElement(SideCar, __assign({}, rest, { sideCar: effectCar, setLockProps: setLockProps, shards: shards })))));
 });
 export * from './reExports';

package/dist/es2015/types.d.ts

@@ -82,6 +82,13 @@ export interface ReactFocusOnProps extends CommonProps {
      * @default false
      */
     preventScrollOnFocus?: boolean | undefined;
+    /**
+     * [focus-lock] enables or disables cross-frame focus management when within an iframe.
+     * `true` means that focus will be restricted within the iframe
+     * `false` allows focus to leave the iframe and move to elements outside of it
+     * @default true
+     */
+    crossFrame?: boolean | undefined;
     /**
      * [focus-lock] allows "ignoring" focus on some elements
      * @see {@link https://github.com/theKashey/react-focus-lock#api}

package/dist/es5/UI.js

@@ -8,7 +8,7 @@ var UI_2 = require("react-focus-lock/UI");
 var medium_1 = require("./medium");
 exports.FocusOn = React.forwardRef(function (props, parentRef) {
     var _a = React.useState(false), lockProps = _a[0], setLockProps = _a[1];
-    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, 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 = tslib_1.__rest(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as", "gapMode"]);
+    var children = props.children, autoFocus = props.autoFocus, shards = props.shards, crossFrame = props.crossFrame, _b = props.enabled, enabled = _b === void 0 ? true : _b, _c = props.scrollLock, scrollLock = _c === void 0 ? true : _c, _d = props.focusLock, focusLock = _d === void 0 ? true : _d, _e = props.returnFocus, returnFocus = _e === void 0 ? true : _e, 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 = tslib_1.__rest(props, ["children", "autoFocus", "shards", "crossFrame", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "preventScrollOnFocus", "style", "as", "gapMode"]);
     var SideCar = sideCar;
     var onActivation = lockProps.onActivation, onDeactivation = lockProps.onDeactivation, restProps = tslib_1.__rest(lockProps, ["onActivation", "onDeactivation"]);
     var appliedLockProps = tslib_1.__assign(tslib_1.__assign({}, restProps), { as: as,
@@ -19,7 +19,7 @@ exports.FocusOn = React.forwardRef(function (props, parentRef) {
         gapMode: gapMode,
         inert: inert, enabled: enabled && scrollLock });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: UI_1.RemoveScroll }, children),
+        React.createElement(UI_2.default, { ref: parentRef, sideCar: sideCar, disabled: !(lockProps && enabled && focusLock), returnFocus: returnFocus, autoFocus: autoFocus, shards: shards, crossFrame: crossFrame, onActivation: onActivation, onDeactivation: onDeactivation, className: className, whiteList: shouldIgnore, lockProps: appliedLockProps, focusOptions: preventScrollOnFocus ? { preventScroll: true } : undefined, as: UI_1.RemoveScroll }, children),
         enabled && (React.createElement(SideCar, tslib_1.__assign({}, rest, { sideCar: medium_1.effectCar, setLockProps: setLockProps, shards: shards })))));
 });
 tslib_1.__exportStar(require("./reExports"), exports);

package/dist/es5/types.d.ts

@@ -82,6 +82,13 @@ export interface ReactFocusOnProps extends CommonProps {
      * @default false
      */
     preventScrollOnFocus?: boolean | undefined;
+    /**
+     * [focus-lock] enables or disables cross-frame focus management when within an iframe.
+     * `true` means that focus will be restricted within the iframe
+     * `false` allows focus to leave the iframe and move to elements outside of it
+     * @default true
+     */
+    crossFrame?: boolean | undefined;
     /**
      * [focus-lock] allows "ignoring" focus on some elements
      * @see {@link https://github.com/theKashey/react-focus-lock#api}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-focus-on",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.",
   "main": "dist/es5/index.js",
   "scripts": {