react-focus-lock - npm Package Compare versions

Comparing version 1.6.6 to 1.7.0

dist/Lock.js

@@ -31,2 +31,15 @@ 'use strict';
 
+var RenderChildren = function RenderChildren(_ref) {
+  var children = _ref.children;
+  return _react2.default.createElement(
+    'div',
+    null,
+    children
+  );
+};
+RenderChildren.propTypes = {
+  children: _propTypes2.default.node.isRequired
+};
+var Fragment = _react2.default.Fragment ? _react2.default.Fragment : RenderChildren;
+
 var hidden = {
@@ -46,3 +59,3 @@ width: '1px',
   function FocusLock() {
-    var _ref;
+    var _ref2;
 
@@ -57,3 +70,3 @@ var _temp, _this, _ret;
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FocusLock.__proto__ || Object.getPrototypeOf(FocusLock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = FocusLock.__proto__ || Object.getPrototypeOf(FocusLock)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
       observed: undefined
@@ -100,7 +113,15 @@ }, _this.onActivation = function () {
           noFocusGuards = _props.noFocusGuards,
+          persistentFocus = _props.persistentFocus,
+          autoFocus = _props.autoFocus,
           allowTextSelection = _props.allowTextSelection;
       var observed = this.state.observed;
 
+
+      if (typeof allowTextSelection !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
+      }
+
       return _react2.default.createElement(
-        'div',
+        Fragment,
         null,
@@ -112,4 +133,3 @@ !noFocusGuards && [_react2.default.createElement('div', { key: 'guard-first', tabIndex: disabled ? -1 : 0, style: hidden }), // nearest focus guard
           {
-            ref: this.setObserveNode,
-            onBlur: this.onTrapBlur
+            ref: this.setObserveNode
           },
@@ -121,3 +141,4 @@ _react2.default.createElement(
               disabled: disabled,
-              allowTextSelection: allowTextSelection,
+              persistentFocus: persistentFocus,
+              autoFocus: autoFocus,
               onActivation: this.onActivation
@@ -141,3 +162,7 @@ },
   noFocusGuards: _propTypes2.default.bool,
-  allowTextSelection: _propTypes2.default.bool
+
+  allowTextSelection: _propTypes2.default.bool,
+  autoFocus: _propTypes2.default.bool,
+  persistentFocus: _propTypes2.default.bool
+
 };
@@ -148,7 +173,8 @@
   returnFocus: false,
-  sandboxed: false,
   noFocusGuards: false,
-  allowTextSelection: false
+  autoFocus: true,
+  persistentFocus: false,
+  allowTextSelection: undefined
 };
 
 exports.default = FocusLock;

dist/Trap.js

@@ -28,3 +28,3 @@ 'use strict';
 var focusOnBody = function focusOnBody() {
-  return document && document.activeElement !== document.body;
+  return document && document.activeElement === document.body;
 };
@@ -40,8 +40,15 @@
         onActivation = _lastActiveTrap.onActivation,
-        allowTextSelection = _lastActiveTrap.allowTextSelection;
+        persistentFocus = _lastActiveTrap.persistentFocus,
+        autoFocus = _lastActiveTrap.autoFocus;
 
-    if (!allowTextSelection || focusOnBody()) {
+
+    if (persistentFocus || !focusOnBody() || !lastActiveFocus && autoFocus) {
       if (observed && !(0, _focusLock.focusInside)(observed)) {
         onActivation();
-        result = (0, _focusLock2.default)(observed, lastActiveFocus);
+        if (document && !lastActiveFocus && document.activeElement && !autoFocus) {
+          document.activeElement.blur();
+          document.body.focus();
+        } else {
+          result = (0, _focusLock2.default)(observed, lastActiveFocus);
+        }
       }
@@ -103,3 +110,4 @@ lastActiveFocus = document && document.activeElement;
   if (trap) {
-    activateTrap();
+    lastActiveFocus = null;
+    activateTrap(true);
     (0, _util.deferAction)(activateTrap);
@@ -106,0 +114,0 @@ } else {

package.json

 {
   "name": "react-focus-lock",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "description": "It is a trap! (for a focus)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

react-focus-lock.d.ts

@@ -6,2 +6,3 @@ declare module 'react-focus-lock' {
         disabled?: boolean;
+
         /**
@@ -11,7 +12,25 @@ * will return focus to the previous position on trap disable.
         returnFocus?: boolean;
+
         /**
+         * @deprecated Use persistentFocus=false instead
          * enables(or disables) text selection. This also allows not to have ANY focus.
          */
         allowTextSelection?: boolean;
+
         /**
+         * enables of disables "sticky" behavior, when any focusable element shall be focused.
+         * This disallow any text selection on the page.
+         * @default false
+         */
+        persistentFocus?: boolean;
+
+        /**
+         * enables or disables autoFocusing feature.
+         * If enabled - will move focus inside Lock, selecting the first or autoFocusable element
+         * If disable - will blur any focus on Lock activation.
+         * @default true
+         */
+        autoFocus?: boolean;
+
+        /**
          * disables hidden inputs before and after the lock.
@@ -18,0 +37,0 @@ */

README.md

@@ -27,3 +27,3 @@ # react-focus-lock
 ```
- Demo - https://codesandbox.io/s/72prk69z3j
+Demo - https://codesandbox.io/s/5wmrwlvxv4. To be honest - you dont need that demo. Focus lock just works. Always.
 
@@ -39,2 +39,11 @@ # WHY?
 
+# API
+ FocusLock has few props to tune behavior
+  - `disabled`, to disable(enable) behavior without altering the tree.
+  - `returnFocus`, to return focus into initial position on unmount(not disable).
+  This is expected behavior for Modals, but it is better to implement it by your self.
+  - `persistentFocus`, default false, requires any element to be focused. This also disables text selections inside, and __outside__ focus lock.
+  - `autoFocus`, default true, enables or disables focusing into on Lock activation. If disabled Lock will blur an active focus.
+  - `noFocusGuards` disabled _focus guards_ - virtual inputs which secure tab index.
+
 # Behavior
@@ -50,10 +59,2 @@ 0. It will always keep focus inside Lock.
 Only `last`, or `deepest` one will work. No fighting.
-
-# API
- FocusLock has few props to tune behavior
-  - `disabled`, to disable(enable) behavior without altering the tree.
-  - `returnFocus`, to return focus into initial position on unmount(not disable).
-  This is expected behavior for Modals, but it is better to implement it by your self.
-  - `allowTextSelection` enabled text selections inside, and __outside__ focus lock.
-  - `noFocusGuards` disabled _focus guards_ - virtual inputs which secure tab index.
      
@@ -60,0 +61,0 @@ # Autofocus

stories/Autofocus.js

@@ -10,2 +10,9 @@ import React, {Component} from "react";
 
+const box = {
+  border: '1px solid #000',
+  margin: '10px',
+  padding: '10px',
+  fontSize: '14px',
+};
+
 const bg = {
@@ -29,15 +36,15 @@ backgroundColor: '#FEE'
           ! this is a <b>real trap</b>.<br/>
-          We will steal your focus ! <br /><br />
+          We will steal your focus ! <br/><br/>
           <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
-          <br />
-          <br />
+          <br/>
+          <br/>
         </div>
         }
         <FocusLock disabled={this.state.disabled}>
-          <button >BUTTON</button>
+          <button>BUTTON</button>
           <button data-autofocus>Will be autofocused</button>
-          <button >BUTTON</button>
-          <br />
+          <button>BUTTON</button>
+          <br/>
 
-          <a href='#'>link somethere</a> <br />
+          <a href='#'>link somethere</a> <br/>
 
@@ -70,15 +77,15 @@ {
           <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
-          <br />
-          <br />
+          <br/>
+          <br/>
         </div>
         }
         <FocusLock disabled={this.state.disabled}>
-          <button >BUTTON</button>
+          <button>BUTTON</button>
           <AutoFocusInside>
             <button>Will be autofocused</button>
           </AutoFocusInside>
-          <button >BUTTON</button>
-          <br />
+          <button>BUTTON</button>
+          <br/>
 
-          <a href='#'>link somethere</a> <br />
+          <a href='#'>link somethere</a> <br/>
 
@@ -97,2 +104,47 @@ {
 
-export default () => <div><Trap1/><br/><br/><Trap2/></div>;
+
+class Trap3 extends Component {
+  state = {
+    disabled: true
+  }
+
+  toggle = () => this.setState({disabled: !this.state.disabled});
+
+  render() {
+    const {disabled} = this.state;
+    return (
+      <div>
+        Using autofocus: false
+        {disabled && <div>
+          <button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
+          <br/>
+          <br/>
+        </div>
+        }
+        <FocusLock autoFocus={false} disabled={this.state.disabled}>
+          Nothing to be focused...
+          <button>BUTTON</button>
+          <button>BUTTON</button>
+          <button>BUTTON</button>
+          <br/>
+
+          <a href='#'>link somethere</a> <br/>
+
+          {
+            !disabled && <div>
+              <button onClick={this.toggle}>DEACTIVATE</button>
+              <br/>
+            </div>
+          }
+        </FocusLock>
+      </div>
+    )
+  }
+}
+
+
+export default () => <div>
+  <div style={box}><Trap1/></div>
+  <div style={box}><Trap2/></div>
+  <div style={box}><Trap3/></div>
+</div>;

stories/TextSelection.js

@@ -25,3 +25,3 @@ import React, {Component} from "react";
 
-      <FocusLock disabled={this.state.disabled} allowTextSelection={this.props.allowTextSelection}>
+      <FocusLock disabled={this.state.disabled} persistentFocus={!this.props.allowTextSelection}>
 
@@ -28,0 +28,0 @@ <button onClick={this.toggle}>

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

35506

increased by8.98%

Lines of code

884

increased by10.78%

Number of lines in readme file

108

increased by0.93%

No dependency changes