react-focus-lock - npm Package Compare versions

Comparing version 1.15.0 to 1.16.0

dist/cjs/Lock.js

@@ -25,4 +25,2 @@ 'use strict';
 
-var _util = require('./util');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,3 +54,2 @@
   overflow: 'hidden',
-  // visibility: 'hidden',
   position: 'fixed',
@@ -81,2 +78,13 @@ top: '1px',
       _this.originalFocusedElement = _this.originalFocusedElement || document && document.activeElement;
+      if (_this.state.observed && _this.props.onActivation) {
+        _this.props.onActivation(_this.state.observed);
+      }
+    }, _this.onDeactivation = function () {
+      if (_this.props.returnFocus && _this.originalFocusedElement && _this.originalFocusedElement.focus) {
+        _this.originalFocusedElement.focus();
+        _this.originalFocusedElement = null;
+      }
+      if (_this.props.onDeactivation) {
+        _this.props.onDeactivation(_this.state.observed);
+      }
     }, _this.setObserveNode = function (observed) {
@@ -96,20 +104,2 @@ return _this.setState({
   _createClass(FocusLock, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.disabled && !this.props.disabled) {
-        this.originalFocusedElement = null;
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      var _this2 = this;
-
-      if (this.props.returnFocus && this.originalFocusedElement && this.originalFocusedElement.focus) {
-        (0, _util.deferAction)(function () {
-          return _this2.originalFocusedElement.focus();
-        }, 0);
-      }
-    }
-  }, {
     key: 'render',
@@ -163,3 +153,4 @@ value: function render() {
             whiteList: whiteList,
-            onActivation: this.onActivation
+            onActivation: this.onActivation,
+            onDeactivation: this.onDeactivation
           }),
@@ -192,3 +183,6 @@ children
   as: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  lockProps: _propTypes2.default.object
+  lockProps: _propTypes2.default.object,
+
+  onActivation: _propTypes2.default.func,
+  onDeactivation: _propTypes2.default.func
 };
@@ -207,5 +201,7 @@
   as: 'div',
-  lockProps: {}
+  lockProps: {},
+  onActivation: undefined,
+  onDeactivation: undefined
 };
 
 exports.default = FocusLock;

dist/cjs/Trap.js

@@ -62,3 +62,2 @@ 'use strict';
         observed = _lastActiveTrap.observed,
-        onActivation = _lastActiveTrap.onActivation,
         persistentFocus = _lastActiveTrap.persistentFocus,
@@ -73,3 +72,2 @@ autoFocus = _lastActiveTrap.autoFocus;
         if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
-          onActivation();
           if (document && !lastActiveFocus && activeElement && !autoFocus) {
@@ -150,5 +148,16 @@ activeElement.blur();
 
+  var lastTrap = lastActiveTrap;
+  var sameTrap = lastTrap && trap && trap.onActivation === lastTrap.onActivation;
+
   lastActiveTrap = trap;
+
+  if (lastTrap && !sameTrap) {
+    lastTrap.onDeactivation();
+  }
+
   if (trap) {
     lastActiveFocus = null;
+    if (!sameTrap || lastTrap.observed !== trap.observed) {
+      trap.onActivation();
+    }
     activateTrap(true);
@@ -155,0 +164,0 @@ (0, _util.deferAction)(activateTrap);

dist/es2015/Lock.js

@@ -25,4 +25,2 @@ 'use strict';
 
-var _util = require('./util');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,3 +54,2 @@
   overflow: 'hidden',
-  // visibility: 'hidden',
   position: 'fixed',
@@ -81,2 +78,13 @@ top: '1px',
       _this.originalFocusedElement = _this.originalFocusedElement || document && document.activeElement;
+      if (_this.state.observed && _this.props.onActivation) {
+        _this.props.onActivation(_this.state.observed);
+      }
+    }, _this.onDeactivation = function () {
+      if (_this.props.returnFocus && _this.originalFocusedElement && _this.originalFocusedElement.focus) {
+        _this.originalFocusedElement.focus();
+        _this.originalFocusedElement = null;
+      }
+      if (_this.props.onDeactivation) {
+        _this.props.onDeactivation(_this.state.observed);
+      }
     }, _this.setObserveNode = function (observed) {
@@ -96,20 +104,2 @@ return _this.setState({
   _createClass(FocusLock, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.disabled && !this.props.disabled) {
-        this.originalFocusedElement = null;
-      }
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      var _this2 = this;
-
-      if (this.props.returnFocus && this.originalFocusedElement && this.originalFocusedElement.focus) {
-        (0, _util.deferAction)(function () {
-          return _this2.originalFocusedElement.focus();
-        }, 0);
-      }
-    }
-  }, {
     key: 'render',
@@ -163,3 +153,4 @@ value: function render() {
             whiteList: whiteList,
-            onActivation: this.onActivation
+            onActivation: this.onActivation,
+            onDeactivation: this.onDeactivation
           }),
@@ -192,3 +183,6 @@ children
   as: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  lockProps: _propTypes2.default.object
+  lockProps: _propTypes2.default.object,
+
+  onActivation: _propTypes2.default.func,
+  onDeactivation: _propTypes2.default.func
 };
@@ -207,5 +201,7 @@
   as: 'div',
-  lockProps: {}
+  lockProps: {},
+  onActivation: undefined,
+  onDeactivation: undefined
 };
 
 exports.default = FocusLock;

dist/es2015/Trap.js

@@ -62,3 +62,2 @@ 'use strict';
         observed = _lastActiveTrap.observed,
-        onActivation = _lastActiveTrap.onActivation,
         persistentFocus = _lastActiveTrap.persistentFocus,
@@ -73,3 +72,2 @@ autoFocus = _lastActiveTrap.autoFocus;
         if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
-          onActivation();
           if (document && !lastActiveFocus && activeElement && !autoFocus) {
@@ -150,5 +148,16 @@ activeElement.blur();
 
+  var lastTrap = lastActiveTrap;
+  var sameTrap = lastTrap && trap && trap.onActivation === lastTrap.onActivation;
+
   lastActiveTrap = trap;
+
+  if (lastTrap && !sameTrap) {
+    lastTrap.onDeactivation();
+  }
+
   if (trap) {
     lastActiveFocus = null;
+    if (!sameTrap || lastTrap.observed !== trap.observed) {
+      trap.onActivation();
+    }
     activateTrap(true);
@@ -155,0 +164,0 @@ (0, _util.deferAction)(activateTrap);

package.json

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

react-focus-lock.d.ts

 declare module 'react-focus-lock' {
-    import * as React from 'react';
+  import * as React from 'react';
 
-    interface Props {
-        disabled?: boolean;
+  interface Props {
+    disabled?: boolean;
 
-        /**
-         * will return focus to the previous position on trap disable.
-         */
-        returnFocus?: boolean;
+    /**
+     * 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;
+    /**
+     * @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 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;
+    /**
+     * 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.
-         */
-        noFocusGuards?: boolean;
-        
-        /**
-         * named focus group for focus scattering aka combined lock targets
-         */
-        group?: string;
+    /**
+     * disables hidden inputs before and after the lock.
+     */
+    noFocusGuards?: boolean;
 
-        className?: string;
+    /**
+     * named focus group for focus scattering aka combined lock targets
+     */
+    group?: string;
 
-         /**
-          * Component to use, defaults to 'div'
-          */
-        as?: React.ReactType,
-        lockProps?: { [key:string]: any },
+    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;
-
-        children: React.ReactNode;
-    }
-
-    interface AutoFocusProps {
-        children: React.ReactNode;
-        className?: string;
-    }
-
-    interface FreeFocusProps {
-        className?: string;
-    }
-
     /**
-     * Traps Focus inside a Lock
+     * life-cycle hook, called on lock activation
+     * @param node the observed node
      */
-    export default class ReactFocusLock extends React.Component<Props> {}
+    onActivation?(node: HTMLElement): void;
 
     /**
-     * Autofocus on children on Lock activation
+     * life-cycle hook, called on deactivation
+     * @param node the observed node
      */
-    export class AutoFocusInside extends React.Component<AutoFocusProps> {}
+    onDeactivation?(node: HTMLElement): void;
 
     /**
-     * Autofocus on children
+     * Component to use, defaults to 'div'
      */
-    export class MoveFocusInside extends React.Component<AutoFocusProps> {}
+    as?: React.ReactType,
+    lockProps?: { [key: string]: any },
 
     /**
-     * Allow free focus inside on children
+     * 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
      */
-    export class FreeFocusInside extends React.Component<FreeFocusProps> {}
+    whiteList?: (activeElement: HTMLElement) => boolean;
+
+    children: React.ReactNode;
+  }
+
+  interface AutoFocusProps {
+    children: React.ReactNode;
+    className?: string;
+  }
+
+  interface FreeFocusProps {
+    className?: string;
+  }
+
+  /**
+   * Traps Focus inside a Lock
+   */
+  export default class ReactFocusLock extends React.Component<Props> {
+  }
+
+  /**
+   * Autofocus on children on Lock activation
+   */
+  export class AutoFocusInside extends React.Component<AutoFocusProps> {
+  }
+
+  /**
+   * Autofocus on children
+   */
+  export class MoveFocusInside extends React.Component<AutoFocusProps> {
+  }
+
+  /**
+   * Allow free focus inside on children
+   */
+  export class FreeFocusInside extends React.Component<FreeFocusProps> {
+  }
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77395

increased by0.77%

Lines of code

1014

increased by2.01%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes