react-focus-lock - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+# [2.4.0](https://github.com/theKashey/react-focus-lock/compare/v2.3.1...v2.4.0) (2020-06-18)
+
+
+### Bug Fixes
+
+* avoid crash on IE ([1cbc9e5](https://github.com/theKashey/react-focus-lock/commit/1cbc9e53a14eb196ef74397d03cfaa1e91eaf909))
+* tabIndex=-1 elements should be autofocusable if pointed, fixes [#108](https://github.com/theKashey/react-focus-lock/issues/108) ([258e6aa](https://github.com/theKashey/react-focus-lock/commit/258e6aa4e1b09c12e8ff1e59bb00247ea3bf06bb))
+* update interfaces ([7f977fb](https://github.com/theKashey/react-focus-lock/commit/7f977fb409fc84f028cd39f2d95aa761e572bdd3))
+
+
+
 ## [2.3.1](https://github.com/theKashey/react-focus-lock/compare/v2.3.0...v2.3.1) (2020-04-17)
@@ -10,3 +21,3 @@
 
-* 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))
+* 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/9dac85167508ed3e761545ffcc877ef891013d2c))
 
@@ -16,3 +27,3 @@
 
-* 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))
+* 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/486a7e08428487286d09ef7bfeaa701e8376318d))
 
@@ -30,3 +41,3 @@
 
-* use forwardRef, and allow custom as prop ([af0e560](https://github.com/theKashey/react-focus-lock/commit/af0e560))
+* use forwardRef, and allow custom as prop ([af0e560](https://github.com/theKashey/react-focus-lock/commit/af0e560966ce3dd936d6fb7f3665ecab972bdd20))
 
@@ -56,3 +67,3 @@
 
-* onActivation hooks not called in v2 ([ee1cb14](https://github.com/theKashey/react-focus-lock/commit/ee1cb14))
+* onActivation hooks not called in v2 ([ee1cb14](https://github.com/theKashey/react-focus-lock/commit/ee1cb14b8cd3c28f5ce8e093f1b7aa95779f3563))
 
@@ -70,4 +81,4 @@
 
-* nested return focus, fixes [#68](https://github.com/theKashey/react-focus-lock/issues/68) ([df4b313](https://github.com/theKashey/react-focus-lock/commit/df4b313))
-* useLayoutEffect for focus actions ([254e2ae](https://github.com/theKashey/react-focus-lock/commit/254e2ae))
+* nested return focus, fixes [#68](https://github.com/theKashey/react-focus-lock/issues/68) ([df4b313](https://github.com/theKashey/react-focus-lock/commit/df4b31389494a3dc7a3ebe5ce928721b1c289490))
+* useLayoutEffect for focus actions ([254e2ae](https://github.com/theKashey/react-focus-lock/commit/254e2aee9433da048704dda159582fcb90b7f4c1))
 
@@ -77,4 +88,4 @@
 
-* sidecar code splitting pattern ([187c3c8](https://github.com/theKashey/react-focus-lock/commit/187c3c8))
-* sidecar FocusLock ([5493986](https://github.com/theKashey/react-focus-lock/commit/5493986))
+* sidecar code splitting pattern ([187c3c8](https://github.com/theKashey/react-focus-lock/commit/187c3c8adc3d5613a7a3092398e024b78e545d02))
+* sidecar FocusLock ([5493986](https://github.com/theKashey/react-focus-lock/commit/5493986ccb49b3f3a189a8859c478fbb7089d520))
 
@@ -92,3 +103,3 @@
 
-* infinite loop on ref set ([29e9691](https://github.com/theKashey/react-focus-lock/commit/29e9691))
+* infinite loop on ref set ([29e9691](https://github.com/theKashey/react-focus-lock/commit/29e9691fb516a92e99322a9832ceb120bb2e475e))
 
@@ -98,3 +109,3 @@
 
-* no tail guard ([c0c5fde](https://github.com/theKashey/react-focus-lock/commit/c0c5fde))
+* no tail guard ([c0c5fde](https://github.com/theKashey/react-focus-lock/commit/c0c5fde64d6d07414ab5a57c807dc8ac6bdb2ac3))
 
@@ -108,3 +119,3 @@
 
-* simplify proptype for shards, fixes [#59](https://github.com/theKashey/react-focus-lock/issues/59) ([55b7129](https://github.com/theKashey/react-focus-lock/commit/55b7129))
+* simplify proptype for shards, fixes [#59](https://github.com/theKashey/react-focus-lock/issues/59) ([55b7129](https://github.com/theKashey/react-focus-lock/commit/55b7129eb117aaf66c0c835d89deb74c27d59446))
 
@@ -118,3 +129,3 @@
 
-* use only auto guards ([12dab4a](https://github.com/theKashey/react-focus-lock/commit/12dab4a))
+* use only auto guards ([12dab4a](https://github.com/theKashey/react-focus-lock/commit/12dab4a636b96a12fc19f4ad4574d4498c25407a))
 
@@ -128,3 +139,3 @@
 
-* support old refs ([8b87c2f](https://github.com/theKashey/react-focus-lock/commit/8b87c2f))
+* support old refs ([8b87c2f](https://github.com/theKashey/react-focus-lock/commit/8b87c2f938e5dba4b303625068b9eaafe858d51b))
 
@@ -138,3 +149,3 @@
 
-* introduce shards ([7bc46f0](https://github.com/theKashey/react-focus-lock/commit/7bc46f0))
+* introduce shards ([7bc46f0](https://github.com/theKashey/react-focus-lock/commit/7bc46f0f81255455238999f56bf001c5c83797ea))
 
@@ -148,3 +159,3 @@
 
-* nested portals ([9878ba7](https://github.com/theKashey/react-focus-lock/commit/9878ba7))
+* nested portals ([9878ba7](https://github.com/theKashey/react-focus-lock/commit/9878ba72550272c7638781db7b923bf4c138bf4e))
 
@@ -162,3 +173,3 @@
 
-* initially disabled buttons with tabindex set, [#50](https://github.com/theKashey/react-focus-lock/issues/50) ([12e33e5](https://github.com/theKashey/react-focus-lock/commit/12e33e5))
+* initially disabled buttons with tabindex set, [#50](https://github.com/theKashey/react-focus-lock/issues/50) ([12e33e5](https://github.com/theKashey/react-focus-lock/commit/12e33e5e3d721d48045d7f8ba40d68cdd04db866))
 
@@ -212,3 +223,3 @@
 
-* add 'as' and 'lockProps', [#44](https://github.com/theKashey/react-focus-lock/issues/44) ([5274e24](https://github.com/theKashey/react-focus-lock/commit/5274e24))
+* add 'as' and 'lockProps', [#44](https://github.com/theKashey/react-focus-lock/issues/44) ([5274e24](https://github.com/theKashey/react-focus-lock/commit/5274e2433a471c70640675a72a8285d563aaba88))
 
@@ -246,3 +257,3 @@
 
-* Safary and Negative TabIndex, [#33](https://github.com/theKashey/react-focus-lock/issues/33) ([f4a6a6d](https://github.com/theKashey/react-focus-lock/commit/f4a6a6d))
+* Safary and Negative TabIndex, [#33](https://github.com/theKashey/react-focus-lock/issues/33) ([f4a6a6d](https://github.com/theKashey/react-focus-lock/commit/f4a6a6d2aaf3b52deaa376f497b6a329f9b2a7e3))
 
@@ -249,0 +260,0 @@

dist/cjs/AutoFocusInside.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -27,3 +27,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
       className = _ref.className;
-  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !disabled), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !disabled), {
     className: className
@@ -34,5 +34,5 @@ }), children);
 AutoFocusInside.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes.default.node.isRequired,
-  disabled: _propTypes.default.bool,
-  className: _propTypes.default.string
+  children: _propTypes["default"].node.isRequired,
+  disabled: _propTypes["default"].bool,
+  className: _propTypes["default"].string
 } : {};
@@ -44,2 +44,2 @@ AutoFocusInside.defaultProps = {
 var _default = AutoFocusInside;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/clientSideEffect.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -60,3 +60,3 @@ var React = _interopRequireWildcard(require("react"));
 
-      return React.createElement(WrappedComponent, props);
+      return /*#__PURE__*/React.createElement(WrappedComponent, props);
     };
@@ -69,2 +69,2 @@
 var _default = withSideEffect;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/Combination.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -31,5 +31,5 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 */
-var FocusLockCombination = React.forwardRef(function (props, ref) {
-  return React.createElement(_Lock.default, (0, _extends2.default)({
-    sideCar: _Trap.default,
+var FocusLockCombination = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(_Lock["default"], (0, _extends2["default"])({
+    sideCar: _Trap["default"],
     ref: ref
@@ -39,8 +39,8 @@ }, props));
 
-var _ref = _Lock.default.propTypes || {},
+var _ref = _Lock["default"].propTypes || {},
     sideCar = _ref.sideCar,
-    propTypes = (0, _objectWithoutProperties2.default)(_ref, ["sideCar"]);
+    propTypes = (0, _objectWithoutProperties2["default"])(_ref, ["sideCar"]);
 
 FocusLockCombination.propTypes = propTypes;
 var _default = FocusLockCombination;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/FocusGuard.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = exports.hiddenGuard = void 0;
+exports["default"] = exports.hiddenGuard = void 0;
 
@@ -30,3 +30,3 @@ var React = _interopRequireWildcard(require("react"));
   var children = _ref.children;
-  return React.createElement(React.Fragment, null, React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     key: "guard-first",
@@ -36,3 +36,3 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }), children, children && React.createElement("div", {
+  }), children, children && /*#__PURE__*/React.createElement("div", {
     key: "guard-last",
@@ -46,3 +46,3 @@ "data-focus-guard": true,
 InFocusGuard.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes.default.node
+  children: _propTypes["default"].node
 } : {};
@@ -53,2 +53,2 @@ InFocusGuard.defaultProps = {
 var _default = InFocusGuard;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/FreeFocusInside.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -26,3 +26,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
       className = _ref.className;
-  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_ALLOW, true), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _util.inlineProp)(constants.FOCUS_ALLOW, true), {
     className: className
@@ -33,4 +33,4 @@ }), children);
 FreeFocusInside.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string
+  children: _propTypes["default"].node.isRequired,
+  className: _propTypes["default"].string
 } : {};
@@ -41,2 +41,2 @@ FreeFocusInside.defaultProps = {
 var _default = FreeFocusInside;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/index.js

@@ -9,3 +9,3 @@ "use strict";
 var _exportNames = {};
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -26,3 +26,3 @@ var _Combination = _interopRequireDefault(require("./Combination"));
 });
-var _default = _Combination.default;
-exports.default = _default;
+var _default = _Combination["default"];
+exports["default"] = _default;

dist/cjs/Lock.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,4 +17,2 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -36,8 +34,12 @@
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var emptyArray = [];
-var FocusLock = React.forwardRef(function (props, parentRef) {
+var FocusLock = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var _objectSpread2;
 
   var _React$useState = React.useState(),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       realObserved = _React$useState2[0],
@@ -71,3 +73,3 @@ setObserved = _React$useState2[1];
   var _React$useState3 = React.useState({}),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 1),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 1),
       id = _React$useState4[0]; // SIDE EFFECT CALLBACKS
@@ -96,3 +98,3 @@
     if (Boolean(shouldReturnFocus) && current && current.focus) {
-      var focusOptions = (0, _typeof2.default)(shouldReturnFocus) === 'object' ? shouldReturnFocus : undefined;
+      var focusOptions = (0, _typeof2["default"])(shouldReturnFocus) === 'object' ? shouldReturnFocus : undefined;
       originalFocusedElement.current = null;
@@ -141,7 +143,8 @@
 
-  var lockProps = (0, _objectSpread3.default)((_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, constants.FOCUS_DISABLED, disabled && 'disabled'), (0, _defineProperty2.default)(_objectSpread2, constants.FOCUS_GROUP, group), _objectSpread2), containerProps);
+  var lockProps = _objectSpread((_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, constants.FOCUS_DISABLED, disabled && 'disabled'), (0, _defineProperty2["default"])(_objectSpread2, constants.FOCUS_GROUP, group), _objectSpread2), containerProps);
+
   var hasLeadingGuards = noFocusGuards !== true;
   var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
   var mergedRef = (0, _useCallbackRef.useMergeRefs)([parentRef, setObserveNode]);
-  return React.createElement(React.Fragment, null, hasLeadingGuards && [React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/React.createElement("div", {
     key: "guard-first",
@@ -151,3 +154,5 @@ "data-focus-guard": true,
     style: _FocusGuard.hiddenGuard
-  }), // nearest focus guard
+  }),
+  /*#__PURE__*/
+  // nearest focus guard
   React.createElement("div", {
@@ -158,3 +163,4 @@ key: "guard-nearest",
     style: _FocusGuard.hiddenGuard
-  })], !disabled && React.createElement(SideCar, {
+  }) // first tabbed element guard
+  ], !disabled && /*#__PURE__*/React.createElement(SideCar, {
     id: id,
@@ -172,3 +178,3 @@ sideCar: _medium.mediumSidecar,
     returnFocus: returnFocus
-  }), React.createElement(Container, (0, _extends2.default)({
+  }), /*#__PURE__*/React.createElement(Container, (0, _extends2["default"])({
     ref: mergedRef
@@ -179,3 +185,3 @@ }, lockProps, {
     onFocus: onFocus
-  }), children), hasTailingGuards && React.createElement("div", {
+  }), children), hasTailingGuards && /*#__PURE__*/React.createElement("div", {
     "data-focus-guard": true,
@@ -224,2 +230,2 @@ tabIndex: disabled ? -1 : 0,
 var _default = FocusLock;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/MoveFocusInside.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = exports.useFocusInside = void 0;
 
@@ -25,14 +25,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function MoveFocusInside(_ref) {
-  var isDisabled = _ref.disabled,
-      className = _ref.className,
-      children = _ref.children;
-  var ref = React.useRef(null);
-  var disabled = React.useRef(isDisabled);
+var useFocusInside = function useFocusInside(observedRef) {
+  React.useEffect(function () {
+    var enabled = true;
 
-  var moveFocus = function moveFocus() {
-    var observed = ref.current;
+    _medium.mediumEffect.useMedium(function (car) {
+      var observed = observedRef && observedRef.current;
 
-    _medium.mediumEffect.useMedium(function (car) {
-      if (!disabled.current && observed) {
+      if (enabled && observed) {
         if (!car.focusInside(observed)) {
@@ -43,9 +39,18 @@ car.moveFocusInside(observed, null);
     });
-  };
 
-  React.useEffect(function () {
-    disabled.current = isDisabled;
-    moveFocus();
-  }, [isDisabled]);
-  return React.createElement("div", (0, _extends2.default)({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !isDisabled), {
+    return function () {
+      enabled = false;
+    };
+  }, [observedRef]);
+};
+
+exports.useFocusInside = useFocusInside;
+
+function MoveFocusInside(_ref) {
+  var isDisabled = _ref.disabled,
+      className = _ref.className,
+      children = _ref.children;
+  var ref = React.useRef(null);
+  useFocusInside(isDisabled ? undefined : ref);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _util.inlineProp)(constants.FOCUS_AUTO, !isDisabled), {
     ref: ref,
@@ -57,5 +62,5 @@ className: className
 MoveFocusInside.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes.default.node.isRequired,
-  disabled: _propTypes.default.bool,
-  className: _propTypes.default.string
+  children: _propTypes["default"].node.isRequired,
+  disabled: _propTypes["default"].bool,
+  className: _propTypes["default"].string
 } : {};
@@ -67,2 +72,2 @@ MoveFocusInside.defaultProps = {
 var _default = MoveFocusInside;
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/sidecar.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -17,4 +17,4 @@ var _useSidecar = require("use-sidecar");
 
-var _default = (0, _useSidecar.exportSidecar)(_medium.mediumSidecar, _Trap.default);
+var _default = (0, _useSidecar.exportSidecar)(_medium.mediumSidecar, _Trap["default"]);
 
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/Trap.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -98,3 +98,3 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-  return focusWasOutsideWindow === "meanwhile";
+  return focusWasOutsideWindow === 'meanwhile';
 };
@@ -116,3 +116,3 @@
     if (workingNode) {
-      var workingArea = [workingNode].concat((0, _toConsumableArray2.default)(shards.map(extractRef).filter(Boolean)));
+      var workingArea = [workingNode].concat((0, _toConsumableArray2["default"])(shards.map(extractRef).filter(Boolean)));
 
@@ -123,6 +123,10 @@ if (!activeElement || focusWhitelisted(activeElement)) {
             if (document && !lastActiveFocus && activeElement && !autoFocus) {
-              activeElement.blur();
+              // Check if blur() exists, which is missing on certain elements on IE
+              if (activeElement.blur) {
+                activeElement.blur();
+              }
+
               document.body.focus();
             } else {
-              result = (0, _focusLock.default)(workingArea, lastActiveFocus);
+              result = (0, _focusLock["default"])(workingArea, lastActiveFocus);
               lastPortaledElement = {};
@@ -194,3 +198,3 @@ }
   var children = _ref4.children;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     onBlur: onBlur,
@@ -202,10 +206,10 @@ onFocus: onFocus
 FocusTrap.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes.default.node.isRequired
+  children: _propTypes["default"].node.isRequired
 } : {};
 
 var onWindowBlur = function onWindowBlur() {
-  focusWasOutsideWindow = "just"; // using setTimeout to set  this variable after React/sidecar reaction
+  focusWasOutsideWindow = 'just'; // using setTimeout to set  this variable after React/sidecar reaction
 
   setTimeout(function () {
-    focusWasOutsideWindow = "meanwhile";
+    focusWasOutsideWindow = 'meanwhile';
   }, 0);
@@ -278,3 +282,3 @@ };
   return cb({
-    moveFocusInside: _focusLock.default,
+    moveFocusInside: _focusLock["default"],
     focusInside: _focusLock.focusInside
@@ -284,4 +288,4 @@ });
 
-var _default = (0, _reactClientsideEffect.default)(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
+var _default = (0, _reactClientsideEffect["default"])(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
 
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/UI.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -11,3 +13,3 @@
   get: function get() {
-    return _Lock.default;
+    return _Lock["default"];
   }
@@ -18,3 +20,3 @@ });
   get: function get() {
-    return _AutoFocusInside.default;
+    return _AutoFocusInside["default"];
   }
@@ -25,9 +27,15 @@ });
   get: function get() {
-    return _MoveFocusInside.default;
+    return _MoveFocusInside["default"];
   }
 });
+Object.defineProperty(exports, "useFocusInside", {
+  enumerable: true,
+  get: function get() {
+    return _MoveFocusInside.useFocusInside;
+  }
+});
 Object.defineProperty(exports, "FreeFocusInside", {
   enumerable: true,
   get: function get() {
-    return _FreeFocusInside.default;
+    return _FreeFocusInside["default"];
   }
@@ -38,6 +46,6 @@ });
   get: function get() {
-    return _FocusGuard.default;
+    return _FocusGuard["default"];
   }
 });
-exports.default = void 0;
+exports["default"] = void 0;
 
@@ -48,3 +56,3 @@ var _Lock = _interopRequireDefault(require("./Lock"));
 
-var _MoveFocusInside = _interopRequireDefault(require("./MoveFocusInside"));
+var _MoveFocusInside = _interopRequireWildcard(require("./MoveFocusInside"));
 
@@ -55,3 +63,3 @@ var _FreeFocusInside = _interopRequireDefault(require("./FreeFocusInside"));
 
-var _default = _Lock.default;
-exports.default = _default;
+var _default = _Lock["default"];
+exports["default"] = _default;

dist/es2015/AutoFocusInside.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       className = _ref.className;
-  return React.createElement("div", _extends({}, inlineProp(constants.FOCUS_AUTO, !disabled), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, inlineProp(constants.FOCUS_AUTO, !disabled), {
     className: className
@@ -14,0 +14,0 @@ }), children);

dist/es2015/clientSideEffect.js

@@ -49,3 +49,3 @@ /* eslint-disable */
 
-      return React.createElement(WrappedComponent, props);
+      return /*#__PURE__*/React.createElement(WrappedComponent, props);
     };
@@ -52,0 +52,0 @@

dist/es2015/Combination.js

@@ -15,4 +15,4 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var FocusLockCombination = React.forwardRef(function (props, ref) {
-  return React.createElement(FocusLockUI, _extends({
+var FocusLockCombination = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(FocusLockUI, _extends({
     sideCar: FocusTrap,
@@ -19,0 +19,0 @@ ref: ref

dist/es2015/FocusGuard.js

@@ -15,3 +15,3 @@ import * as React from 'react';
   var children = _ref.children;
-  return React.createElement(React.Fragment, null, React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     key: "guard-first",
@@ -21,3 +21,3 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }), children, children && React.createElement("div", {
+  }), children, children && /*#__PURE__*/React.createElement("div", {
     key: "guard-last",
@@ -24,0 +24,0 @@ "data-focus-guard": true,

dist/es2015/FreeFocusInside.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       className = _ref.className;
-  return React.createElement("div", _extends({}, inlineProp(constants.FOCUS_ALLOW, true), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, inlineProp(constants.FOCUS_ALLOW, true), {
     className: className
@@ -13,0 +13,0 @@ }), children);

dist/es2015/Lock.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 var emptyArray = [];
-var FocusLock = React.forwardRef(function (props, parentRef) {
+var FocusLock = /*#__PURE__*/React.forwardRef(function (props, parentRef) {
   var _extends2;
@@ -114,3 +114,3 @@
   var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  return React.createElement(React.Fragment, null, hasLeadingGuards && [React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [/*#__PURE__*/React.createElement("div", {
     key: "guard-first",
@@ -120,3 +120,5 @@ "data-focus-guard": true,
     style: hiddenGuard
-  }), // nearest focus guard
+  }),
+  /*#__PURE__*/
+  // nearest focus guard
   React.createElement("div", {
@@ -127,3 +129,4 @@ key: "guard-nearest",
     style: hiddenGuard
-  })], !disabled && React.createElement(SideCar, {
+  }) // first tabbed element guard
+  ], !disabled && /*#__PURE__*/React.createElement(SideCar, {
     id: id,
@@ -141,3 +144,3 @@ sideCar: mediumSidecar,
     returnFocus: returnFocus
-  }), React.createElement(Container, _extends({
+  }), /*#__PURE__*/React.createElement(Container, _extends({
     ref: mergedRef
@@ -148,3 +151,3 @@ }, lockProps, {
     onFocus: onFocus
-  }), children), hasTailingGuards && React.createElement("div", {
+  }), children), hasTailingGuards && /*#__PURE__*/React.createElement("div", {
     "data-focus-guard": true,
@@ -151,0 +154,0 @@ tabIndex: disabled ? -1 : 0,

dist/es2015/MoveFocusInside.js

@@ -7,14 +7,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { mediumEffect } from './medium';
+export var useFocusInside = function useFocusInside(observedRef) {
+  React.useEffect(function () {
+    var enabled = true;
+    mediumEffect.useMedium(function (car) {
+      var observed = observedRef && observedRef.current;
 
-function MoveFocusInside(_ref) {
-  var isDisabled = _ref.disabled,
-      className = _ref.className,
-      children = _ref.children;
-  var ref = React.useRef(null);
-  var disabled = React.useRef(isDisabled);
-
-  var moveFocus = function moveFocus() {
-    var observed = ref.current;
-    mediumEffect.useMedium(function (car) {
-      if (!disabled.current && observed) {
+      if (enabled && observed) {
         if (!car.focusInside(observed)) {
@@ -25,9 +20,15 @@ car.moveFocusInside(observed, null);
     });
-  };
+    return function () {
+      enabled = false;
+    };
+  }, [observedRef]);
+};
 
-  React.useEffect(function () {
-    disabled.current = isDisabled;
-    moveFocus();
-  }, [isDisabled]);
-  return React.createElement("div", _extends({}, inlineProp(constants.FOCUS_AUTO, !isDisabled), {
+function MoveFocusInside(_ref) {
+  var isDisabled = _ref.disabled,
+      className = _ref.className,
+      children = _ref.children;
+  var ref = React.useRef(null);
+  useFocusInside(isDisabled ? undefined : ref);
+  return /*#__PURE__*/React.createElement("div", _extends({}, inlineProp(constants.FOCUS_AUTO, !isDisabled), {
     ref: ref,
@@ -34,0 +35,0 @@ className: className

dist/es2015/Trap.js

@@ -79,3 +79,3 @@ import * as React from 'react';
 
-  return focusWasOutsideWindow === "meanwhile";
+  return focusWasOutsideWindow === 'meanwhile';
 };
@@ -103,3 +103,7 @@
             if (document && !lastActiveFocus && activeElement && !autoFocus) {
-              activeElement.blur();
+              // Check if blur() exists, which is missing on certain elements on IE
+              if (activeElement.blur) {
+                activeElement.blur();
+              }
+
               document.body.focus();
@@ -174,3 +178,3 @@ } else {
   var children = _ref4.children;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     onBlur: onBlur,
@@ -186,6 +190,6 @@ onFocus: onFocus
 var onWindowBlur = function onWindowBlur() {
-  focusWasOutsideWindow = "just"; // using setTimeout to set  this variable after React/sidecar reaction
+  focusWasOutsideWindow = 'just'; // using setTimeout to set  this variable after React/sidecar reaction
 
   setTimeout(function () {
-    focusWasOutsideWindow = "meanwhile";
+    focusWasOutsideWindow = 'meanwhile';
   }, 0);
@@ -192,0 +196,0 @@ };

dist/es2015/UI.js

 import FocusLockUI from './Lock';
 import AutoFocusInside from './AutoFocusInside';
-import MoveFocusInside from './MoveFocusInside';
+import MoveFocusInside, { useFocusInside } from './MoveFocusInside';
 import FreeFocusInside from './FreeFocusInside';
 import InFocusGuard from './FocusGuard';
-export { AutoFocusInside, MoveFocusInside, FreeFocusInside, InFocusGuard, FocusLockUI };
+export { AutoFocusInside, MoveFocusInside, FreeFocusInside, InFocusGuard, FocusLockUI, useFocusInside };
 export default FocusLockUI;

interfaces.d.ts

@@ -92,2 +92,3 @@ import * as React from 'react';
   children: React.ReactNode;
+  disabled?: boolean;
   className?: string;
@@ -94,0 +95,0 @@ }

package.json

 {
   "name": "react-focus-lock",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "It is a trap! (for a focus)",
@@ -18,9 +18,9 @@ "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 && npm run changelog",
+    "prepublish": "npm run lint:fix && npm run build && npm run changelog",
     "lint": "eslint src",
-    "lint:fix": "eslint src tests --fix",
+    "lint:fix": "eslint src --fix",
     "storybook": "NODE_ENV=es2015 start-storybook -p 6006",
     "build-storybook": "NODE_ENV=es2015 build-storybook",
     "package-self": "package-self",
-    "size": "npm run build && npx size-limit",
+    "size": "yarn build && yarn size-limit",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
@@ -64,3 +64,3 @@ },
     "@babel/register": "^7.0.0",
-    "@size-limit/preset-small-lib": "^2.1.1",
+    "@size-limit/preset-small-lib": "^4.5.0",
     "@storybook/addon-actions": "^5.1.8",
@@ -77,3 +77,3 @@ "@storybook/addon-links": "^5.1.8",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",
@@ -91,7 +91,7 @@ "eslint-config-airbnb": "^17.1.0",
     "react": "^16.8.6",
-    "react-compat": "^0.0.1",
     "react-dom": "^16.8.6",
     "react-hot-loader": "^4.11.0",
     "react-test-renderer": "^16.2.0",
-    "sinon": "7.3.2"
+    "sinon": "7.3.2",
+    "size-limit": "^4.5.0"
   },
@@ -101,3 +101,3 @@ "homepage": "https://github.com/theKashey/react-focus-lock#readme",
     "@babel/runtime": "^7.0.0",
-    "focus-lock": "^0.6.7",
+    "focus-lock": "^0.7.0",
     "prop-types": "^15.6.2",
@@ -104,0 +104,0 @@ "react-clientside-effect": "^1.2.2",

UI/UI.d.ts

@@ -33,2 +33,7 @@ import * as React from 'react';
 export class InFocusGuard extends React.Component<InFocusGuardProps> {
-}
+}
+
+/**
+ * Moves focus inside a given node
+ */
+export function useFocusInside(node: React.RefObject<HTMLElement>):void;

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

82192

increased by4.57%

Lines of code

1509

increased by2.17%

Dependency changes

• + Addedfocus-lock@0.7.0(transitive)

• - Removedfocus-lock@0.6.8(transitive)

• Updatedfocus-lock@^0.7.0