react-focus-lock - npm Package Compare versions

Comparing version 1.11.3 to 1.12.0

dist/AutoFocusInside.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -16,10 +18,15 @@
 
+var _focusLock = require('focus-lock');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var AutoFocusInside = function AutoFocusInside(_ref) {
   var disabled = _ref.disabled,
-      children = _ref.children;
+      children = _ref.children,
+      className = _ref.className;
   return _react2.default.createElement(
     'div',
-    { 'data-autofocus-inside': !disabled },
+    _extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), { className: className }),
     children
@@ -31,9 +38,11 @@ );
   children: _propTypes2.default.node.isRequired,
-  disabled: _propTypes2.default.bool
+  disabled: _propTypes2.default.bool,
+  className: _propTypes2.default.string
 };
 
 AutoFocusInside.defaultProps = {
-  disabled: false
+  disabled: false,
+  className: undefined
 };
 
 exports.default = AutoFocusInside;

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.MoveFocusInside = exports.AutoFocusInside = undefined;
+exports.FreeFocusInside = exports.MoveFocusInside = exports.AutoFocusInside = undefined;
 
@@ -21,2 +21,6 @@ var _Lock = require('./Lock');
 
+var _FreeFocusInside = require('./FreeFocusInside');
+
+var _FreeFocusInside2 = _interopRequireDefault(_FreeFocusInside);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,2 +30,3 @@
 exports.MoveFocusInside = _MoveFocusInside2.default;
+exports.FreeFocusInside = _FreeFocusInside2.default;
 exports.default = _Lock2.default;

dist/Lock.js

@@ -55,5 +55,6 @@ 'use strict';
   overflow: 'hidden',
+  // visibility: 'hidden',
   position: 'fixed',
-  top: 0,
-  left: 0
+  top: '1px',
+  left: '1px'
 };
@@ -122,3 +123,4 @@
           allowTextSelection = _props.allowTextSelection,
-          group = _props.group;
+          group = _props.group,
+          className = _props.className;
       var observed = this.state.observed;
@@ -137,4 +139,4 @@
         null,
-        !noFocusGuards && [_react2.default.createElement('div', { key: 'guard-first', tabIndex: disabled ? -1 : 0, style: hidden }), // nearest focus guard
-        _react2.default.createElement('div', { key: 'guard-nearest', tabIndex: disabled ? -1 : 1, style: hidden })],
+        !noFocusGuards && [_react2.default.createElement('div', { key: 'guard-first', 'data-focus-guard': true, tabIndex: disabled ? -1 : 0, style: hidden }), // nearest focus guard
+        _react2.default.createElement('div', { key: 'guard-nearest', 'data-focus-guard': true, tabIndex: disabled ? -1 : 1, style: hidden })],
         _react2.default.createElement(
@@ -144,16 +146,17 @@ 'div',
             ref: this.setObserveNode
-          }, lockProps),
-          _react2.default.createElement(
-            _Trap2.default,
-            {
-              observed: observed,
-              disabled: disabled,
-              persistentFocus: persistentFocus,
-              autoFocus: autoFocus,
-              onActivation: this.onActivation
-            },
-            children
-          )
+          }, lockProps, {
+            className: className,
+            onBlur: _Trap.onBlur,
+            onFocus: _Trap.onFocus
+          }),
+          _react2.default.createElement(_Trap2.default, {
+            observed: observed,
+            disabled: disabled,
+            persistentFocus: persistentFocus,
+            autoFocus: autoFocus,
+            onActivation: this.onActivation
+          }),
+          children
         ),
-        !noFocusGuards && _react2.default.createElement('div', { tabIndex: disabled ? -1 : 0, style: hidden })
+        !noFocusGuards && _react2.default.createElement('div', { 'data-focus-guard': true, tabIndex: disabled ? -1 : 0, style: hidden })
       );
@@ -176,3 +179,4 @@ }
 
-  group: _propTypes2.default.string
+  group: _propTypes2.default.string,
+  className: _propTypes2.default.string
 };
@@ -187,5 +191,6 @@
   allowTextSelection: undefined,
-  group: undefined
+  group: undefined,
+  className: undefined
 };
 
 exports.default = FocusLock;

dist/MoveFocusInside.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -24,2 +26,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -78,7 +82,11 @@
           children = _props.children,
-          disabled = _props.disabled;
+          disabled = _props.disabled,
+          className = _props.className;
 
       return _react2.default.createElement(
         'div',
-        { 'data-autofocus-inside': !disabled, ref: this.setObserveNode },
+        _extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), {
+          ref: this.setObserveNode,
+          className: className
+        }),
         children
@@ -94,7 +102,9 @@ );
   children: _propTypes2.default.node.isRequired,
-  disabled: _propTypes2.default.bool
+  disabled: _propTypes2.default.bool,
+  className: _propTypes2.default.string
 };
 MoveFocusInside.defaultProps = {
-  disabled: false
+  disabled: false,
+  className: undefined
 };
 exports.default = MoveFocusInside;

dist/Trap.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.onFocus = exports.onBlur = undefined;
 
@@ -29,3 +30,3 @@ var _react = require('react');
 var focusOnBody = function focusOnBody() {
-  return document && document.activeElement === document.body;
+  return document && (document.activeElement === document.body || (0, _focusLock.focusIsHidden)());
 };
@@ -59,3 +60,3 @@
     if (persistentFocus || !focusOnBody() || !lastActiveFocus && autoFocus) {
-      if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode) || workingNode.contains && workingNode.contains(activeElement))) {
+      if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
         onActivation();
@@ -84,7 +85,7 @@ if (document && !lastActiveFocus && activeElement && !autoFocus) {
 
-var onBlur = function onBlur() {
+var onBlur = exports.onBlur = function onBlur() {
   return (0, _util.deferAction)(activateTrap);
 };
 
-var onFocus = function onFocus(event) {
+var onFocus = exports.onFocus = function onFocus(event) {
   // detect portal
@@ -98,2 +99,6 @@ var source = event.target;
 
+var FocusWatcher = function FocusWatcher() {
+  return null;
+};
+
 var FocusTrap = function FocusTrap(_ref) {
@@ -145,2 +150,2 @@ var children = _ref.children;
 
-exports.default = (0, _reactClientsideEffect2.default)(reducePropsToState, handleStateChangeOnClient)(FocusTrap);
+exports.default = (0, _reactClientsideEffect2.default)(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);

package.json

 {
   "name": "react-focus-lock",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "It is a trap! (for a focus)",
@@ -74,6 +74,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "focus-lock": "^0.3.0",
-    "prop-types": "^15.0.0",
+    "focus-lock": "^0.4.1",
+    "prop-types": "^15.6.2",
     "react-clientside-effect": "^1.0.0"
   }
 }

react-focus-lock.d.ts

@@ -0,1 +1,3 @@
+import * as React from "react";
+
 declare module 'react-focus-lock' {
@@ -43,9 +45,16 @@ import * as React from 'react';
 
-        children: React.ReactNode
+        children: React.ReactNode;
+
+        className?: string;
     }
 
     interface AutoFocusProps {
-        children: React.ReactNode
+        children: React.ReactNode;
+        className?: string;
     }
 
+    interface FreeFocusProps {
+        className?: string;
+    }
+
     /**
@@ -65,2 +74,7 @@ * Traps Focus inside a Lock
     export class MoveFocusInside extends React.Component<AutoFocusProps> {}
+
+    /**
+     * Allow free focus inside on children
+     */
+    export class FreeFocusInside extends React.Component<FreeFocusProps> {}
 }

README.md

@@ -155,2 +155,16 @@ <div align="left">
 
+__Focus-lock will surrender__, as long any other focus management library will not.
+
+## Focus fighting
+You may wrap some render branch with `FreeFocusInside`, and react-focus-lock __will ignore__
+any focus inside marked node, thus landing a peace.
+
+```js
+<FreeFocusInside>
+ <div id="portal-for-modals">
+   in this div i am going to portal my modals, dont fight with them please
+ </div>
+</FreeFocusInside>
+```
+
 # Licence
@@ -157,0 +171,0 @@ MIT

stories/Autofocus.js

@@ -165,3 +165,3 @@ import React, {Component} from "react";
           <button>BUTTON</button>
-          <MoveFocusInside  disabled={disabled}>
+          <MoveFocusInside disabled={disabled}>
             <button>to be focused</button>
@@ -208,3 +208,3 @@ </MoveFocusInside>
             <button>BUTTON</button>
-            <MoveFocusInside  disabled={disabled}>
+            <MoveFocusInside disabled={disabled}>
               <button>to be focused</button>
@@ -230,3 +230,99 @@ </MoveFocusInside>
 
+class Trap6 extends Component {
+  state = {
+    disabled: true
+  }
 
+  toggle = () => this.setState({disabled: !this.state.disabled});
+
+  render() {
+    const {disabled} = this.state;
+    return (
+      <div>
+        nested locks
+        {disabled && <div>
+          <button onClick={this.toggle}>!SET FOCUS!</button>
+          <br/>
+          <br/>
+        </div>
+        }
+        <FocusLock autoFocus={false} disabled={disabled} className="f1">
+          <button>OUTER</button>
+          lock1
+          <FocusLock autoFocus={false} disabled={disabled} className="f2">
+            lock2
+            <MoveFocusInside disabled={disabled}>
+
+              <button>BUTTON</button>
+              <MoveFocusInside disabled={disabled}>
+                <button>to be focused</button>
+              </MoveFocusInside>
+              <button>BUTTON</button>
+              <br/>
+
+              <a href='#'>link somethere</a> <br/>
+
+              {
+                !disabled && <div>
+                  <button onClick={this.toggle}>DEACTIVATE</button>
+                  <br/>
+                </div>
+              }
+            </MoveFocusInside>
+          </FocusLock>
+        </FocusLock>
+      </div>
+    )
+  }
+}
+
+class Trap7 extends Component {
+  state = {
+    disabled: true
+  }
+
+  toggle = () => this.setState({disabled: !this.state.disabled});
+
+  render() {
+    const {disabled} = this.state;
+    return (
+      <div>
+        nested grouped locks
+        {disabled && <div>
+          <button onClick={this.toggle}>!SET FOCUS!</button>
+          <br/>
+          <br/>
+        </div>
+        }
+        <FocusLock autoFocus={false} disabled={disabled} className="f1" group="42">
+          <button>OUTER</button>
+          lock1
+          <FocusLock autoFocus={false} disabled={disabled} className="f2" group="42">
+            lock2
+            <MoveFocusInside disabled={disabled}>
+
+              <button>BUTTON</button>
+              <MoveFocusInside disabled={disabled}>
+                <button>to be focused</button>
+              </MoveFocusInside>
+              <button>BUTTON</button>
+              <br/>
+
+              <a href='#'>link somethere</a> <br/>
+
+              {
+                !disabled && <div>
+                  <button onClick={this.toggle}>DEACTIVATE</button>
+                  <br/>
+                </div>
+              }
+            </MoveFocusInside>
+          </FocusLock>
+        </FocusLock>
+      </div>
+    )
+  }
+}
+
+
 export default () => <div>
@@ -239,2 +335,4 @@ <div style={box}><Trap1/></div>
   <div style={box}><Trap5/></div>
+  <div style={box}><Trap6/></div>
+  <div style={box}><Trap7/></div>
 </div>;

stories/index.js

@@ -18,2 +18,3 @@ import React from 'react';
 import {MUISelect} from './MUI';
+import Fight from './FocusFighting';
 
@@ -57,1 +58,4 @@ const frameStyle = {
 
+storiesOf('Focus fighting', module)
+  .add('fight', () => <Frame><Fight /></Frame>);
+

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

80444

increased by12.48%

Number of package files

24

increased by9.09%

Lines of code

1463

increased by18.85%

Number of lines in readme file

173

increased by8.81%

Dependency changes

• + Addedfocus-lock@0.4.2(transitive)

• - Removedfocus-lock@0.3.0(transitive)

• Updatedfocus-lock@^0.4.1

• Updatedprop-types@^15.6.2