react-focus-lock - npm Package Compare versions

Comparing version 1.5.5 to 1.6.0

dist/Lock.js

@@ -87,3 +87,4 @@ 'use strict';
           disabled = _props.disabled,
-          noFocusGuards = _props.noFocusGuards;
+          noFocusGuards = _props.noFocusGuards,
+          allowTextSelection = _props.allowTextSelection;
       var observed = this.state.observed;
@@ -107,2 +108,3 @@
               disabled: disabled,
+              allowTextSelection: allowTextSelection,
               onActivation: this.onActivation
@@ -125,3 +127,4 @@ },
   returnFocus: _propTypes2.default.bool,
-  noFocusGuards: _propTypes2.default.bool
+  noFocusGuards: _propTypes2.default.bool,
+  allowTextSelection: _propTypes2.default.bool
 };
@@ -133,5 +136,6 @@
   sandboxed: false,
-  noFocusGuards: false
+  noFocusGuards: false,
+  allowTextSelection: false
 };
 
 exports.default = FocusLock;

dist/Trap.js

@@ -33,2 +33,6 @@ 'use strict';
 
+var focusOnBody = function focusOnBody() {
+  return document.activeElement !== document.body;
+};
+
 var lastActiveTrap = 0;
@@ -41,9 +45,12 @@ var lastActiveFocus = null;
         observed = _lastActiveTrap.observed,
-        onActivation = _lastActiveTrap.onActivation;
+        onActivation = _lastActiveTrap.onActivation,
+        allowTextSelection = _lastActiveTrap.allowTextSelection;
 
-    if (observed && !(0, _focusLock.focusInside)(observed)) {
-      onActivation();
-      result = (0, _focusLock2.default)(observed, lastActiveFocus);
+    if (!allowTextSelection || focusOnBody()) {
+      if (observed && !(0, _focusLock.focusInside)(observed)) {
+        onActivation();
+        result = (0, _focusLock2.default)(observed, lastActiveFocus);
+      }
+      lastActiveFocus = document.activeElement;
     }
-    lastActiveFocus = document.activeElement;
   }
@@ -50,0 +57,0 @@ return result;

package.json

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

README.md

@@ -50,6 +50,8 @@ # react-focus-lock
 # API
- FocusLock has only 3 props, 2 of them you will never use(I hope):
+ 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.
      
@@ -56,0 +58,0 @@ # Autofocus

src/Lock.js

@@ -50,3 +50,3 @@ import React, { Component } from 'react';
   render() {
-    const { children, disabled, noFocusGuards } = this.props;
+    const { children, disabled, noFocusGuards, allowTextSelection } = this.props;
     const { observed } = this.state;
@@ -66,2 +66,3 @@ return (
             disabled={disabled}
+            allowTextSelection={allowTextSelection}
             onActivation={this.onActivation}
@@ -83,2 +84,3 @@ >
   noFocusGuards: PropTypes.bool,
+  allowTextSelection: PropTypes.bool,
 };
@@ -91,2 +93,3 @@
   noFocusGuards: false,
+  allowTextSelection: false,
 };
@@ -93,0 +96,0 @@

src/Trap.js

@@ -14,2 +14,4 @@ import React from 'react';
 
+const focusOnBody = () => document.activeElement !== document.body;
+
 let lastActiveTrap = 0;
@@ -20,8 +22,10 @@ let lastActiveFocus = null;
   if (lastActiveTrap) {
-    const { observed, onActivation } = lastActiveTrap;
-    if (observed && !focusInside(observed)) {
-      onActivation();
-      result = moveFocusInside(observed, lastActiveFocus);
+    const { observed, onActivation, allowTextSelection } = lastActiveTrap;
+    if (!allowTextSelection || focusOnBody()) {
+      if (observed && !focusInside(observed)) {
+        onActivation();
+        result = moveFocusInside(observed, lastActiveFocus);
+      }
+      lastActiveFocus = document.activeElement;
     }
-    lastActiveFocus = document.activeElement;
   }
@@ -28,0 +32,0 @@ return result;

stories/Default.js

@@ -58,7 +58,9 @@ import React, {Component} from "react";
   <div style={styles}>
+    <input placeholder="input1"/>
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
     <Trap />
     <div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
+    <input placeholder="input1"/>
   </div>;
 
 export default App;

stories/index.js

@@ -12,2 +12,3 @@ import React from 'react';
 import {Trap1, Trap2, Trap3, Trap4} from './Checkboxes';
+import {TextSelectionEnabled, TextSelectionDisabled} from './TextSelection';
 
@@ -24,4 +25,4 @@ const frameStyle = {
   .add('codesanbox example', () => <Frame><DefaultAll/></Frame>)
-  .add('TabIndex example', () => <Frame><TabIndex /></Frame>)
-  .add('autofocus', () => <Frame><AutoFocus/></Frame>)
+  .add('TabIndex example', () => <Frame><TabIndex/></Frame>)
+  .add('autofocus', () => <Frame><AutoFocus/></Frame>);
 
@@ -34,1 +35,6 @@ storiesOf('Checkboxes', module)
 
+storiesOf('Text selection', module)
+  .add('enabled', () => <Frame><TextSelectionEnabled/></Frame>)
+  .add('disabled', () => <Frame><TextSelectionDisabled/></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

283631

increased by0.89%

Number of package files

25

increased by4.17%

Lines of code

1243

increased by6.7%

Number of lines in readme file

101

increased by2.02%

No dependency changes