react-focus-lock - npm Package Compare versions

Comparing version 1.12.1 to 1.13.0

dist/Lock.js

@@ -123,3 +123,4 @@ 'use strict';
           group = _props.group,
-          className = _props.className;
+          className = _props.className,
+          whiteList = _props.whiteList;
       var observed = this.state.observed;
@@ -154,2 +155,3 @@
             autoFocus: autoFocus,
+            whiteList: whiteList,
             onActivation: this.onActivation
@@ -178,3 +180,5 @@ }),
   group: _propTypes2.default.string,
-  className: _propTypes2.default.string
+  className: _propTypes2.default.string,
+
+  whiteList: _propTypes2.default.func
 };
@@ -190,5 +194,6 @@
   group: undefined,
-  className: undefined
+  className: undefined,
+  whiteList: undefined
 };
 
 exports.default = FocusLock;

dist/Trap.js

@@ -29,6 +29,10 @@ 'use strict';
 var focusOnBody = function focusOnBody() {
-  return document && (document.activeElement === document.body || (0, _focusLock.focusIsHidden)());
+  return document && document.activeElement === document.body;
 };
 
-var lastActiveTrap = 0;
+var isFreeFocus = function isFreeFocus() {
+  return focusOnBody() || (0, _focusLock.focusIsHidden)();
+};
+
+var lastActiveTrap = null;
 var lastActiveFocus = null;
@@ -38,2 +42,10 @@
 
+var defaultWhitelist = function defaultWhitelist() {
+  return true;
+};
+
+var focusWhitelisted = function focusWhitelisted(activeElement) {
+  return (lastActiveTrap.whiteList || defaultWhitelist)(activeElement);
+};
+
 var recordPortal = function recordPortal(observerNode, portaledElement) {
@@ -59,14 +71,16 @@ lastPortaledElement = { observerNode: observerNode, portaledElement: portaledElement };
 
-    if (persistentFocus || !focusOnBody() || !lastActiveFocus && autoFocus) {
-      if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
-        onActivation();
-        if (document && !lastActiveFocus && activeElement && !autoFocus) {
-          activeElement.blur();
-          document.body.focus();
-        } else {
-          result = (0, _focusLock2.default)(workingNode, lastActiveFocus);
-          lastPortaledElement = {};
+    if (!activeElement || focusWhitelisted(activeElement)) {
+      if (persistentFocus || !isFreeFocus() || !lastActiveFocus && autoFocus) {
+        if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
+          onActivation();
+          if (document && !lastActiveFocus && activeElement && !autoFocus) {
+            activeElement.blur();
+            document.body.focus();
+          } else {
+            result = (0, _focusLock2.default)(workingNode, lastActiveFocus);
+            lastPortaledElement = {};
+          }
         }
+        lastActiveFocus = document && document.activeElement;
       }
-      lastActiveFocus = document && document.activeElement;
     }
@@ -73,0 +87,0 @@ }

package.json

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

react-focus-lock.d.ts

@@ -46,2 +46,9 @@ declare module 'react-focus-lock' {
         className?: string;
+
+        /**
+         * Controls focus lock working areas. Lock will silently ignore all the events from `not allowed` areas
+         * @param activeElement
+         * @returns {Boolean} true if focus lock should handle activeElement, false if not
+         */
+        whiteList?: (activeElement: HTMLElement) => boolean;
     }
@@ -48,0 +55,0 @@

README.md

@@ -73,2 +73,3 @@ <div align="left">
   - `group` named focus group for focus scattering aka [combined lock targets](https://github.com/theKashey/vue-focus-lock/issues/2)
+  - `whiteList` you could _whitelist_ locations FocusLock should carry about. Everything outside it will ignore. For example - any modals.
 
@@ -170,2 +171,9 @@ # Behavior
 
+Even the better is to `whiteList` FocusLock areas - for example "you should handle only React Stuff in React Root"
+```js
+<FocusLock whiteList={node => document.getElementById('root').contains(node)}>
+ ...
+</FocusLock>
+```
+
 # Licence
@@ -172,0 +180,0 @@ MIT

stories/index.js

@@ -17,3 +17,3 @@ import React from 'react';
 import PortalCase from './Portal';
-import {MUISelect} from './MUI';
+import {MUISelect, MUISelectWhite} from './MUI';
 import Fight from './FocusFighting';
@@ -56,3 +56,4 @@
 storiesOf('Material UI', module)
-  .add('Select', () => <Frame><MUISelect /></Frame>);
+  .add('Select', () => <Frame><MUISelect /></Frame>)
+  .add('Select White', () => <Frame><MUISelectWhite /></Frame>)
 
@@ -59,0 +60,0 @@ storiesOf('Focus fighting', module)

stories/MUI.js

@@ -25,2 +25,10 @@ import React, {Component} from "react";
         </SelectField>
+
+        <SelectField floatingLabelText="Handle focus">
+          <MenuItem value={1} primaryText="Never"/>
+          <MenuItem value={2} primaryText="Every Night"/>
+          <MenuItem value={3} primaryText="Weeknights"/>
+          <MenuItem value={4} primaryText="Weekends"/>
+          <MenuItem value={5} primaryText="Weekly"/>
+        </SelectField>
       </FocusLock>
@@ -30,2 +38,35 @@ <br/>
   </div>
+);
+
+export const MUISelectWhite = () => (
+  <div>
+    <h2>With focus lock active</h2>
+    <h3>
+      will work, due to whitelisting
+    </h3>
+    <MuiThemeProvider>
+      <FocusLock
+        noFocusGuards
+        persistentFocus={true}
+        whiteList={node => document.getElementById('root').contains(node)}
+      >
+        <SelectField floatingLabelText="Frequency">
+          <MenuItem value={1} primaryText="Never"/>
+          <MenuItem value={2} primaryText="Every Night"/>
+          <MenuItem value={3} primaryText="Weeknights"/>
+          <MenuItem value={4} primaryText="Weekends"/>
+          <MenuItem value={5} primaryText="Weekly"/>
+        </SelectField>
+
+        <SelectField floatingLabelText="Handle focus">
+          <MenuItem value={1} primaryText="Never"/>
+          <MenuItem value={2} primaryText="Every Night"/>
+          <MenuItem value={3} primaryText="Weeknights"/>
+          <MenuItem value={4} primaryText="Weekends"/>
+          <MenuItem value={5} primaryText="Weekly"/>
+        </SelectField>
+      </FocusLock>
+      <br/>
+    </MuiThemeProvider>
+  </div>
 );

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

83130

increased by3.38%

Lines of code

1522

increased by4.1%

Number of lines in readme file

181

increased by4.62%

No dependency changes