react-focus-lock - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

CHANGELOG.md

@@ -0,1 +1,19 @@
+# [2.3.0](https://github.com/theKashey/react-focus-lock/compare/v2.2.1...v2.3.0) (2020-04-17)
+
+
+### Bug Fixes
+
+* correct behavior for radio buttons at the edge of lock, fixes [#103](https://github.com/theKashey/react-focus-lock/issues/103) ([9dac851](https://github.com/theKashey/react-focus-lock/commit/9dac851))
+
+
+### Features
+
+* add crossFrame property to control iframe behaviour, fixes [#104](https://github.com/theKashey/react-focus-lock/issues/104) ([486a7e0](https://github.com/theKashey/react-focus-lock/commit/486a7e0))
+
+
+
+## [2.2.1](https://github.com/theKashey/react-focus-lock/compare/v2.2.0...v2.2.1) (2019-10-17)
+
+
+
 # [2.2.0](https://github.com/theKashey/react-focus-lock/compare/v2.1.1...v2.2.0) (2019-10-13)
@@ -2,0 +20,0 @@

dist/cjs/AutoFocusInside.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -27,3 +27,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
       className = _ref.className;
-  return _react.default.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !disabled), {
+  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !disabled), {
     className: className
@@ -30,0 +30,0 @@ }), children);

dist/cjs/clientSideEffect.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
@@ -10,3 +10,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -44,10 +44,8 @@ /* eslint-disable */
     var SideEffect = function SideEffect(props) {
-      var lastProps = _react.default.useRef(props);
-
-      _react.default.useEffect(function () {
+      var lastProps = React.useRef(props);
+      React.useEffect(function () {
         lastProps.current = props;
       }); // handle mounted instances
 
-
-      _react.default.useEffect(function () {
+      React.useEffect(function () {
         console.log('ins added');
@@ -63,4 +61,3 @@ mountedInstances.push(lastProps);
 
-
-      return _react.default.createElement(WrappedComponent, props);
+      return React.createElement(WrappedComponent, props);
     };
@@ -67,0 +64,0 @@

dist/cjs/Combination.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -14,3 +16,3 @@
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -29,4 +31,4 @@ var _Lock = _interopRequireDefault(require("./Lock"));
 */
-var FocusLockCombination = _react.default.forwardRef(function (props, ref) {
-  return _react.default.createElement(_Lock.default, (0, _extends2.default)({
+var FocusLockCombination = React.forwardRef(function (props, ref) {
+  return React.createElement(_Lock.default, (0, _extends2.default)({
     sideCar: _Trap.default,
@@ -33,0 +35,0 @@ ref: ref

dist/cjs/FocusGuard.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
@@ -11,3 +13,3 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -29,3 +31,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
   var children = _ref.children;
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+  return React.createElement(React.Fragment, null, React.createElement("div", {
     key: "guard-first",
@@ -35,3 +37,3 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }), children, children && _react.default.createElement("div", {
+  }), children, children && React.createElement("div", {
     key: "guard-last",
@@ -38,0 +40,0 @@ "data-focus-guard": true,

dist/cjs/FreeFocusInside.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -26,3 +26,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
       className = _ref.className;
-  return _react.default.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_ALLOW, true), {
+  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_ALLOW, true), {
     className: className
@@ -29,0 +29,0 @@ }), children);

dist/cjs/Lock.js

@@ -22,3 +22,3 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -36,14 +36,13 @@ var _propTypes = require("prop-types");
 var emptyArray = [];
-
-var FocusLock = _react.default.forwardRef(function (props, parentRef) {
+var FocusLock = React.forwardRef(function (props, parentRef) {
   var _objectSpread2;
 
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      realObserved = _useState2[0],
-      setObserved = _useState2[1];
+  var _React$useState = React.useState(),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      realObserved = _React$useState2[0],
+      setObserved = _React$useState2[1];
 
-  var observed = (0, _react.useRef)();
-  var isActive = (0, _react.useRef)(false);
-  var originalFocusedElement = (0, _react.useRef)(null);
+  var observed = React.useRef();
+  var isActive = React.useRef(false);
+  var originalFocusedElement = React.useRef(null);
   var children = props.children,
@@ -53,2 +52,3 @@ disabled = props.disabled,
       persistentFocus = props.persistentFocus,
+      crossFrame = props.crossFrame,
       autoFocus = props.autoFocus,
@@ -70,8 +70,8 @@ allowTextSelection = props.allowTextSelection,
 
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-      id = _useState4[0]; // SIDE EFFECT CALLBACKS
+  var _React$useState3 = React.useState({}),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 1),
+      id = _React$useState4[0]; // SIDE EFFECT CALLBACKS
 
 
-  var onActivation = (0, _react.useCallback)(function () {
+  var onActivation = React.useCallback(function () {
     originalFocusedElement.current = originalFocusedElement.current || document && document.activeElement;
@@ -85,3 +85,3 @@
   }, [onActivationCallback]);
-  var onDeactivation = (0, _react.useCallback)(function () {
+  var onDeactivation = React.useCallback(function () {
     isActive.current = false;
@@ -93,3 +93,3 @@
   }, [onDeactivationCallback]);
-  var returnFocus = (0, _react.useCallback)(function (allowDefer) {
+  var returnFocus = React.useCallback(function (allowDefer) {
     var current = originalFocusedElement.current;
@@ -113,3 +113,3 @@
 
-  var onFocus = (0, _react.useCallback)(function (event) {
+  var onFocus = React.useCallback(function (event) {
     if (isActive.current) {
@@ -122,3 +122,3 @@ _medium.mediumFocus.useMedium(event);
 
-  var setObserveNode = (0, _react.useCallback)(function (newObserved) {
+  var setObserveNode = React.useCallback(function (newObserved) {
     if (observed.current !== newObserved) {
@@ -136,3 +136,3 @@ observed.current = newObserved;
 
-    _react.default.useEffect(function () {
+    React.useEffect(function () {
       if (!observed.current) {
@@ -149,3 +149,3 @@ // eslint-disable-next-line no-console
   var mergedRef = (0, _useCallbackRef.useMergeRefs)([parentRef, setObserveNode]);
-  return _react.default.createElement(_react.default.Fragment, null, hasLeadingGuards && [_react.default.createElement("div", {
+  return React.createElement(React.Fragment, null, hasLeadingGuards && [React.createElement("div", {
     key: "guard-first",
@@ -156,3 +156,3 @@ "data-focus-guard": true,
   }), // nearest focus guard
-  _react.default.createElement("div", {
+  React.createElement("div", {
     key: "guard-nearest",
@@ -162,3 +162,3 @@ "data-focus-guard": true,
     style: _FocusGuard.hiddenGuard
-  })], !disabled && _react.default.createElement(SideCar, {
+  })], !disabled && React.createElement(SideCar, {
     id: id,
@@ -169,2 +169,3 @@ sideCar: _medium.mediumSidecar,
     persistentFocus: persistentFocus,
+    crossFrame: crossFrame,
     autoFocus: autoFocus,
@@ -176,3 +177,3 @@ whiteList: whiteList,
     returnFocus: returnFocus
-  }), _react.default.createElement(Container, (0, _extends2.default)({
+  }), React.createElement(Container, (0, _extends2.default)({
     ref: mergedRef
@@ -183,3 +184,3 @@ }, lockProps, {
     onFocus: onFocus
-  }), children), hasTailingGuards && _react.default.createElement("div", {
+  }), children), hasTailingGuards && React.createElement("div", {
     "data-focus-guard": true,
@@ -190,3 +191,2 @@ tabIndex: disabled ? -1 : 0,
 });
-
 FocusLock.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -200,2 +200,3 @@ children: _propTypes.node,
   persistentFocus: _propTypes.bool,
+  crossFrame: _propTypes.bool,
   group: _propTypes.string,
@@ -218,2 +219,3 @@ className: _propTypes.string,
   persistentFocus: false,
+  crossFrame: true,
   allowTextSelection: undefined,
@@ -220,0 +222,0 @@ group: undefined,

dist/cjs/MoveFocusInside.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -29,7 +29,5 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
       children = _ref.children;
+  var ref = React.useRef(null);
+  var disabled = React.useRef(isDisabled);
 
-  var ref = _react.default.useRef(null);
-
-  var disabled = _react.default.useRef(isDisabled);
-
   var moveFocus = function moveFocus() {
@@ -47,8 +45,7 @@ var observed = ref.current;
 
-  _react.default.useEffect(function () {
+  React.useEffect(function () {
     disabled.current = isDisabled;
     moveFocus();
   }, [isDisabled]);
-
-  return _react.default.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !isDisabled), {
+  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !isDisabled), {
     ref: ref,
@@ -55,0 +52,0 @@ className: className

dist/cjs/Trap.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
@@ -91,2 +91,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var focusWasOutside = function focusWasOutside(crossFrameOption) {
+  if (crossFrameOption) {
+    // with cross frame return true for any value
+    return Boolean(focusWasOutsideWindow);
+  } // in other case return only of focus went a while aho
+
+
+  return focusWasOutsideWindow === "meanwhile";
+};
+
 var activateTrap = function activateTrap() {
@@ -100,3 +110,4 @@ var result = false;
         autoFocus = _lastActiveTrap.autoFocus,
-        shards = _lastActiveTrap.shards;
+        shards = _lastActiveTrap.shards,
+        crossFrame = _lastActiveTrap.crossFrame;
     var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;
@@ -109,3 +120,3 @@ var activeElement = document && document.activeElement;
       if (!activeElement || focusWhitelisted(activeElement)) {
-        if (persistentFocus || focusWasOutsideWindow || !isFreeFocus() || !lastActiveFocus && autoFocus) {
+        if (persistentFocus || focusWasOutside(crossFrame) || !isFreeFocus() || !lastActiveFocus && autoFocus) {
           if (workingNode && !((0, _focusLock.focusInside)(workingArea) || focusIsPortaledPair(activeElement, workingNode))) {
@@ -183,3 +194,3 @@ if (document && !lastActiveFocus && activeElement && !autoFocus) {
   var children = _ref4.children;
-  return _react.default.createElement("div", {
+  return React.createElement("div", {
     onBlur: onBlur,
@@ -195,3 +206,7 @@ onFocus: onFocus
 var onWindowBlur = function onWindowBlur() {
-  focusWasOutsideWindow = true;
+  focusWasOutsideWindow = "just"; // using setTimeout to set  this variable after React/sidecar reaction
+
+  setTimeout(function () {
+    focusWasOutsideWindow = "meanwhile";
+  }, 0);
 };
@@ -198,0 +213,0 @@

dist/es2015/AutoFocusInside.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -4,0 +4,0 @@ import * as constants from 'focus-lock/constants';

dist/es2015/clientSideEffect.js

 /* eslint-disable */
-import React from 'react'; // NOT USED
+import * as React from 'react'; // NOT USED
 
@@ -4,0 +4,0 @@ function withSideEffect(reducePropsToState, handleStateChangeOnClient) {

dist/es2015/Combination.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import * as React from 'react';
 import FocusLockUI from './Lock';
@@ -5,0 +5,0 @@ import FocusTrap from './Trap';

dist/es2015/FocusGuard.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -3,0 +3,0 @@ export var hiddenGuard = {

dist/es2015/FreeFocusInside.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -4,0 +4,0 @@ import * as constants from 'focus-lock/constants';

dist/es2015/Lock.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useRef, useCallback } from 'react';
+import * as React from 'react';
 import { node, bool, string, any, arrayOf, oneOfType, object, func } from 'prop-types';
@@ -12,9 +12,9 @@ import * as constants from 'focus-lock/constants';
 
-  var _useState = useState(),
-      realObserved = _useState[0],
-      setObserved = _useState[1];
+  var _React$useState = React.useState(),
+      realObserved = _React$useState[0],
+      setObserved = _React$useState[1];
 
-  var observed = useRef();
-  var isActive = useRef(false);
-  var originalFocusedElement = useRef(null);
+  var observed = React.useRef();
+  var isActive = React.useRef(false);
+  var originalFocusedElement = React.useRef(null);
   var children = props.children,
@@ -24,2 +24,3 @@ disabled = props.disabled,
       persistentFocus = props.persistentFocus,
+      crossFrame = props.crossFrame,
       autoFocus = props.autoFocus,
@@ -41,7 +42,7 @@ allowTextSelection = props.allowTextSelection,
 
-  var _useState2 = useState({}),
-      id = _useState2[0]; // SIDE EFFECT CALLBACKS
+  var _React$useState2 = React.useState({}),
+      id = _React$useState2[0]; // SIDE EFFECT CALLBACKS
 
 
-  var onActivation = useCallback(function () {
+  var onActivation = React.useCallback(function () {
     originalFocusedElement.current = originalFocusedElement.current || document && document.activeElement;
@@ -55,3 +56,3 @@
   }, [onActivationCallback]);
-  var onDeactivation = useCallback(function () {
+  var onDeactivation = React.useCallback(function () {
     isActive.current = false;
@@ -63,3 +64,3 @@
   }, [onDeactivationCallback]);
-  var returnFocus = useCallback(function (allowDefer) {
+  var returnFocus = React.useCallback(function (allowDefer) {
     var current = originalFocusedElement.current;
@@ -83,3 +84,3 @@
 
-  var onFocus = useCallback(function (event) {
+  var onFocus = React.useCallback(function (event) {
     if (isActive.current) {
@@ -92,3 +93,3 @@ mediumFocus.useMedium(event);
 
-  var setObserveNode = useCallback(function (newObserved) {
+  var setObserveNode = React.useCallback(function (newObserved) {
     if (observed.current !== newObserved) {
@@ -136,2 +137,3 @@ observed.current = newObserved;
     persistentFocus: persistentFocus,
+    crossFrame: crossFrame,
     autoFocus: autoFocus,
@@ -163,2 +165,3 @@ whiteList: whiteList,
   persistentFocus: bool,
+  crossFrame: bool,
   group: string,
@@ -181,2 +184,3 @@ className: string,
   persistentFocus: false,
+  crossFrame: true,
   allowTextSelection: undefined,
@@ -183,0 +187,0 @@ group: undefined,

dist/es2015/MoveFocusInside.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -4,0 +4,0 @@ import * as constants from 'focus-lock/constants';

dist/es2015/Trap.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -72,2 +72,12 @@ import withSideEffect from 'react-clientside-effect';
 
+var focusWasOutside = function focusWasOutside(crossFrameOption) {
+  if (crossFrameOption) {
+    // with cross frame return true for any value
+    return Boolean(focusWasOutsideWindow);
+  } // in other case return only of focus went a while aho
+
+
+  return focusWasOutsideWindow === "meanwhile";
+};
+
 var activateTrap = function activateTrap() {
@@ -81,3 +91,4 @@ var result = false;
         autoFocus = _lastActiveTrap.autoFocus,
-        shards = _lastActiveTrap.shards;
+        shards = _lastActiveTrap.shards,
+        crossFrame = _lastActiveTrap.crossFrame;
     var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;
@@ -90,3 +101,3 @@ var activeElement = document && document.activeElement;
       if (!activeElement || focusWhitelisted(activeElement)) {
-        if (persistentFocus || focusWasOutsideWindow || !isFreeFocus() || !lastActiveFocus && autoFocus) {
+        if (persistentFocus || focusWasOutside(crossFrame) || !isFreeFocus() || !lastActiveFocus && autoFocus) {
           if (workingNode && !(focusInside(workingArea) || focusIsPortaledPair(activeElement, workingNode))) {
@@ -175,3 +186,7 @@ if (document && !lastActiveFocus && activeElement && !autoFocus) {
 var onWindowBlur = function onWindowBlur() {
-  focusWasOutsideWindow = true;
+  focusWasOutsideWindow = "just"; // using setTimeout to set  this variable after React/sidecar reaction
+
+  setTimeout(function () {
+    focusWasOutsideWindow = "meanwhile";
+  }, 0);
 };
@@ -178,0 +193,0 @@

interfaces.d.ts

@@ -28,2 +28,10 @@ import * as React from 'react';
   /**
+   * enables aggressive focus capturing within iframes
+   * - once disabled allows focus to move outside of iframe, if enabled inside iframe
+   * - once enabled keep focus in the lock, no matter where lock is active (default)
+   * @default true
+   */
+  crossFrame: boolean;
+
+  /**
    * enables or disables autoFocusing feature.
@@ -30,0 +38,0 @@ * If enabled - will move focus inside Lock, selecting the first or autoFocusable element

package.json

 {
   "name": "react-focus-lock",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "It is a trap! (for a focus)",
@@ -18,3 +18,3 @@ "main": "dist/cjs/index.js",
     "test:pick": "NODE_ENV=cjs mocha --require @babel/register --require jsdom-global/register --require _tests/spinup/scaffolding ",
-    "prepublish": "npm run build",
+    "prepublish": "npm run build && npm run changelog",
     "lint": "eslint src",
@@ -98,3 +98,3 @@ "lint:fix": "eslint src tests --fix",
     "@babel/runtime": "^7.0.0",
-    "focus-lock": "^0.6.6",
+    "focus-lock": "^0.6.7",
     "prop-types": "^15.6.2",
@@ -101,0 +101,0 @@ "react-clientside-effect": "^1.2.2",

README.md

@@ -84,5 +84,5 @@ <div align="left">
 
-### Focusing in OSX (Safari/FireFox) is strange!
-By default `tabbing` in OSX `sees` only controls, but not links or anything else `tabbable`. This is system settings, and Safari/FireFox obey.
-Press Option+Tab in Safary to loop across all tabbables, or change the Safary settings. There is no way to _fix_ FireFox, unless change system settings (Control+F7). See [this issue](https://github.com/theKashey/react-focus-lock/issues/24) for more information.
+### Focusing in OSX (Safari/Firefox) is strange!
+By default `tabbing` in OSX `sees` only controls, but not links or anything else `tabbable`. This is system settings, and Safari/Firefox obey.
+Press Option+Tab in Safari to loop across all tabbables, or change the Safari settings. There is no way to _fix_ Firefox, unless change system settings (Control+F7). See [this issue](https://github.com/theKashey/react-focus-lock/issues/24) for more information.
 
@@ -127,5 +127,3 @@ ## Set up
 # Autofocus
- As long you cannot use `autoFocus` prop - 
- cos "focusing" should be delayed to Trap activation, and autoFocus will effect immediately - 
- Focus Lock provide a special API for it
+ Use when you cannot use the native `autoFocus` prop - because you only want to autofocus once the Trap has been activated
       
@@ -132,0 +130,0 @@ - prop `data-autofocus` on the element.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78500

increased by2.79%

Lines of code

1477

increased by2.71%

Worsened metrics

Number of lines in readme file

332

decreased by-0.6%

Dependency changes

• Updatedfocus-lock@^0.6.7