Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-focus-lock

Package Overview
Dependencies
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-focus-lock - npm Package Compare versions

Comparing version 1.16.0 to 1.16.1

18

dist/cjs/AutoFocusInside.js

@@ -19,6 +19,6 @@ 'use strict';

var _util = require('./util');
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) {

@@ -30,3 +30,3 @@ var disabled = _ref.disabled,

'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), { className: className }),
_extends({}, (0, _util.inlineProp)(_focusLock.constants.FOCUS_AUTO, !disabled), { className: className }),
children

@@ -36,7 +36,9 @@ );

AutoFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
if (process.env.NODE_ENV !== 'production') {
AutoFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
}

@@ -43,0 +45,0 @@ AutoFocusInside.defaultProps = {

@@ -19,6 +19,6 @@ 'use strict';

var _util = require('./util');
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 FreeFocusInside = function FreeFocusInside(_ref) {

@@ -29,3 +29,3 @@ var children = _ref.children,

'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_ALLOW, true), { className: className }),
_extends({}, (0, _util.inlineProp)(_focusLock.constants.FOCUS_ALLOW, true), { className: className }),
children

@@ -35,6 +35,8 @@ );

FreeFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
className: _propTypes2.default.string
};
if (process.env.NODE_ENV !== 'production') {
FreeFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
className: _propTypes2.default.string
};
}

@@ -41,0 +43,0 @@ FreeFocusInside.defaultProps = {

@@ -162,23 +162,25 @@ 'use strict';

FocusLock.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
returnFocus: _propTypes2.default.bool,
noFocusGuards: _propTypes2.default.bool,
if (process.env.NODE_ENV !== 'production') {
FocusLock.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
returnFocus: _propTypes2.default.bool,
noFocusGuards: _propTypes2.default.bool,
allowTextSelection: _propTypes2.default.bool,
autoFocus: _propTypes2.default.bool,
persistentFocus: _propTypes2.default.bool,
allowTextSelection: _propTypes2.default.bool,
autoFocus: _propTypes2.default.bool,
persistentFocus: _propTypes2.default.bool,
group: _propTypes2.default.string,
className: _propTypes2.default.string,
group: _propTypes2.default.string,
className: _propTypes2.default.string,
whiteList: _propTypes2.default.func,
whiteList: _propTypes2.default.func,
as: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
lockProps: _propTypes2.default.object,
as: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
lockProps: _propTypes2.default.object,
onActivation: _propTypes2.default.func,
onDeactivation: _propTypes2.default.func
};
onActivation: _propTypes2.default.func,
onDeactivation: _propTypes2.default.func
};
}

@@ -185,0 +187,0 @@ FocusLock.defaultProps = {

@@ -23,6 +23,6 @@ 'use strict';

var _util = require('./util');
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; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -86,3 +86,3 @@

'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), {
_extends({}, (0, _util.inlineProp)(_focusLock.constants.FOCUS_AUTO, !disabled), {
ref: this.setObserveNode,

@@ -99,7 +99,2 @@ className: className

MoveFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
MoveFocusInside.defaultProps = {

@@ -109,2 +104,11 @@ disabled: false,

};
exports.default = MoveFocusInside;
exports.default = MoveFocusInside;
if (process.env.NODE_ENV !== 'production') {
MoveFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
}

@@ -120,5 +120,7 @@ 'use strict';

FocusTrap.propTypes = {
children: _propTypes2.default.node.isRequired
};
if (process.env.NODE_ENV !== 'production') {
FocusTrap.propTypes = {
children: _propTypes2.default.node.isRequired
};
}

@@ -125,0 +127,0 @@ var attachHandler = function attachHandler() {

@@ -13,2 +13,8 @@ 'use strict';

}
}
}
var inlineProp = exports.inlineProp = function inlineProp(name, value) {
var obj = {};
obj[name] = value;
return obj;
};

@@ -1,23 +0,8 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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');
import React from 'react';
import PropTypes from 'prop-types';
import { constants } from 'focus-lock';
import { inlineProp } from './util';
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
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) {

@@ -27,5 +12,5 @@ var disabled = _ref.disabled,

className = _ref.className;
return _react2.default.createElement(
return React.createElement(
'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), { className: className }),
_extends({}, inlineProp(constants.FOCUS_AUTO, !disabled), { className: className }),
children

@@ -35,7 +20,9 @@ );

AutoFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
if (process.env.NODE_ENV !== 'production') {
AutoFocusInside.propTypes = {
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
className: PropTypes.string
};
}

@@ -47,2 +34,2 @@ AutoFocusInside.defaultProps = {

exports.default = AutoFocusInside;
export default AutoFocusInside;

@@ -1,29 +0,14 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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');
import React from 'react';
import PropTypes from 'prop-types';
import { constants } from 'focus-lock';
import { inlineProp } from './util';
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
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 FreeFocusInside = function FreeFocusInside(_ref) {
var children = _ref.children,
className = _ref.className;
return _react2.default.createElement(
return React.createElement(
'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_ALLOW, true), { className: className }),
_extends({}, inlineProp(constants.FOCUS_ALLOW, true), { className: className }),
children

@@ -33,6 +18,8 @@ );

FreeFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
className: _propTypes2.default.string
};
if (process.env.NODE_ENV !== 'production') {
FreeFocusInside.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string
};
}

@@ -44,2 +31,2 @@ FreeFocusInside.defaultProps = {

exports.default = FreeFocusInside;
export default FreeFocusInside;

@@ -1,29 +0,8 @@

'use strict';
import FocusLock from './Lock';
import AutoFocusInside from './AutoFocusInside';
import MoveFocusInside from './MoveFocusInside';
import FreeFocusInside from './FreeFocusInside';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FreeFocusInside = exports.MoveFocusInside = exports.AutoFocusInside = undefined;
export { AutoFocusInside, MoveFocusInside, FreeFocusInside };
var _Lock = require('./Lock');
var _Lock2 = _interopRequireDefault(_Lock);
var _AutoFocusInside = require('./AutoFocusInside');
var _AutoFocusInside2 = _interopRequireDefault(_AutoFocusInside);
var _MoveFocusInside = require('./MoveFocusInside');
var _MoveFocusInside2 = _interopRequireDefault(_MoveFocusInside);
var _FreeFocusInside = require('./FreeFocusInside');
var _FreeFocusInside2 = _interopRequireDefault(_FreeFocusInside);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.AutoFocusInside = _AutoFocusInside2.default;
exports.MoveFocusInside = _MoveFocusInside2.default;
exports.FreeFocusInside = _FreeFocusInside2.default;
exports.default = _Lock2.default;
export default FocusLock;

@@ -1,7 +0,1 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };

@@ -11,18 +5,2 @@

var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _focusLock = require('focus-lock');
var _Trap = require('./Trap');
var _Trap2 = _interopRequireDefault(_Trap);
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; }

@@ -36,5 +14,10 @@

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { constants } from 'focus-lock';
import FocusTrap, { onBlur, onFocus } from './Trap';
var RenderChildren = function RenderChildren(_ref) {
var children = _ref.children;
return _react2.default.createElement(
return React.createElement(
'div',

@@ -46,5 +29,5 @@ null,

RenderChildren.propTypes = {
children: _propTypes2.default.node.isRequired
children: PropTypes.node.isRequired
};
var Fragment = _react2.default.Fragment ? _react2.default.Fragment : RenderChildren;
var Fragment = React.Fragment ? React.Fragment : RenderChildren;

@@ -130,10 +113,10 @@ var hidden = {

var lockProps = Object.assign((_Object$assign = {}, _defineProperty(_Object$assign, _focusLock.constants.FOCUS_DISABLED, disabled && 'disabled'), _defineProperty(_Object$assign, _focusLock.constants.FOCUS_GROUP, group), _Object$assign), containerProps);
var lockProps = Object.assign((_Object$assign = {}, _defineProperty(_Object$assign, constants.FOCUS_DISABLED, disabled && 'disabled'), _defineProperty(_Object$assign, constants.FOCUS_GROUP, group), _Object$assign), containerProps);
return _react2.default.createElement(
return React.createElement(
Fragment,
null,
!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(
!noFocusGuards && [React.createElement('div', { key: 'guard-first', 'data-focus-guard': true, tabIndex: disabled ? -1 : 0, style: hidden }), // nearest focus guard
React.createElement('div', { key: 'guard-nearest', 'data-focus-guard': true, tabIndex: disabled ? -1 : 1, style: hidden })],
React.createElement(
Container,

@@ -144,6 +127,6 @@ _extends({

className: className,
onBlur: _Trap.onBlur,
onFocus: _Trap.onFocus
onBlur: onBlur,
onFocus: onFocus
}),
_react2.default.createElement(_Trap2.default, {
React.createElement(FocusTrap, {
observed: observed,

@@ -159,3 +142,3 @@ disabled: disabled,

),
!noFocusGuards && _react2.default.createElement('div', { 'data-focus-guard': true, tabIndex: disabled ? -1 : 0, style: hidden })
!noFocusGuards && React.createElement('div', { 'data-focus-guard': true, tabIndex: disabled ? -1 : 0, style: hidden })
);

@@ -166,25 +149,27 @@ }

return FocusLock;
}(_react.Component);
}(Component);
FocusLock.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
returnFocus: _propTypes2.default.bool,
noFocusGuards: _propTypes2.default.bool,
if (process.env.NODE_ENV !== 'production') {
FocusLock.propTypes = {
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
returnFocus: PropTypes.bool,
noFocusGuards: PropTypes.bool,
allowTextSelection: _propTypes2.default.bool,
autoFocus: _propTypes2.default.bool,
persistentFocus: _propTypes2.default.bool,
allowTextSelection: PropTypes.bool,
autoFocus: PropTypes.bool,
persistentFocus: PropTypes.bool,
group: _propTypes2.default.string,
className: _propTypes2.default.string,
group: PropTypes.string,
className: PropTypes.string,
whiteList: _propTypes2.default.func,
whiteList: PropTypes.func,
as: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
lockProps: _propTypes2.default.object,
as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
lockProps: PropTypes.object,
onActivation: _propTypes2.default.func,
onDeactivation: _propTypes2.default.func
};
onActivation: PropTypes.func,
onDeactivation: PropTypes.func
};
}

@@ -207,2 +192,2 @@ FocusLock.defaultProps = {

exports.default = FocusLock;
export default FocusLock;

@@ -1,7 +0,1 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };

@@ -11,18 +5,2 @@

var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _focusLock = require('focus-lock');
var _focusLock2 = _interopRequireDefault(_focusLock);
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; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -34,2 +12,7 @@

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moveFocusInside, { focusInside, constants } from 'focus-lock';
import { inlineProp } from './util';
var MoveFocusInside = function (_Component) {

@@ -72,4 +55,4 @@ _inherits(MoveFocusInside, _Component);

if (!this.props.disabled && observed) {
if (!(0, _focusLock.focusInside)(observed)) {
(0, _focusLock2.default)(observed, null);
if (!focusInside(observed)) {
moveFocusInside(observed, null);
}

@@ -86,5 +69,5 @@ }

return _react2.default.createElement(
return React.createElement(
'div',
_extends({}, _defineProperty({}, _focusLock.constants.FOCUS_AUTO, !disabled), {
_extends({}, inlineProp(constants.FOCUS_AUTO, !disabled), {
ref: this.setObserveNode,

@@ -99,9 +82,4 @@ className: className

return MoveFocusInside;
}(_react.Component);
}(Component);
MoveFocusInside.propTypes = {
children: _propTypes2.default.node.isRequired,
disabled: _propTypes2.default.bool,
className: _propTypes2.default.string
};
MoveFocusInside.defaultProps = {

@@ -111,2 +89,11 @@ disabled: false,

};
exports.default = MoveFocusInside;
export default MoveFocusInside;
if (process.env.NODE_ENV !== 'production') {
MoveFocusInside.propTypes = {
children: PropTypes.node.isRequired,
disabled: PropTypes.bool,
className: PropTypes.string
};
}

@@ -1,28 +0,7 @@

'use strict';
import React from 'react';
import PropTypes from 'prop-types';
import withSideEffect from 'react-clientside-effect';
import moveFocusInside, { focusInside, focusIsHidden } from 'focus-lock';
import { deferAction } from './util';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.onFocus = exports.onBlur = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactClientsideEffect = require('react-clientside-effect');
var _reactClientsideEffect2 = _interopRequireDefault(_reactClientsideEffect);
var _focusLock = require('focus-lock');
var _focusLock2 = _interopRequireDefault(_focusLock);
var _util = require('./util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var focusOnBody = function focusOnBody() {

@@ -33,3 +12,3 @@ return document && document.activeElement === document.body;

var isFreeFocus = function isFreeFocus() {
return focusOnBody() || (0, _focusLock.focusIsHidden)();
return focusOnBody() || focusIsHidden();
};

@@ -71,3 +50,3 @@

if (persistentFocus || !isFreeFocus() || !lastActiveFocus && autoFocus) {
if (workingNode && !((0, _focusLock.focusInside)(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
if (workingNode && !(focusInside(workingNode) || focusIsPortaledPair(activeElement, workingNode))) {
if (document && !lastActiveFocus && activeElement && !autoFocus) {

@@ -77,3 +56,3 @@ activeElement.blur();

} else {
result = (0, _focusLock2.default)(workingNode, lastActiveFocus);
result = moveFocusInside(workingNode, lastActiveFocus);
lastPortaledElement = {};

@@ -97,7 +76,7 @@ }

var onBlur = exports.onBlur = function onBlur() {
return (0, _util.deferAction)(activateTrap);
export var onBlur = function onBlur() {
return deferAction(activateTrap);
};
var onFocus = exports.onFocus = function onFocus(event) {
export var onFocus = function onFocus(event) {
// detect portal

@@ -117,3 +96,3 @@ var source = event.target;

var children = _ref.children;
return _react2.default.createElement(
return React.createElement(
'div',

@@ -125,5 +104,7 @@ { onBlur: onBlur, onFocus: onFocus },

FocusTrap.propTypes = {
children: _propTypes2.default.node.isRequired
};
if (process.env.NODE_ENV !== 'production') {
FocusTrap.propTypes = {
children: PropTypes.node.isRequired
};
}

@@ -167,3 +148,3 @@ var attachHandler = function attachHandler() {

activateTrap(true);
(0, _util.deferAction)(activateTrap);
deferAction(activateTrap);
} else {

@@ -175,2 +156,2 @@ detachHandler();

exports.default = (0, _reactClientsideEffect2.default)(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
export default withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);

@@ -1,8 +0,2 @@

'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.deferAction = deferAction;
function deferAction(action) {
export function deferAction(action) {
if (typeof setImmediate !== 'undefined') {

@@ -13,2 +7,8 @@ setImmediate(action);

}
}
}
export var inlineProp = function inlineProp(name, value) {
var obj = {};
obj[name] = value;
return obj;
};
{
"name": "react-focus-lock",
"version": "1.16.0",
"version": "1.16.1",
"description": "It is a trap! (for a focus)",

@@ -78,3 +78,3 @@ "main": "dist/cjs/index.js",

"dependencies": {
"focus-lock": "^0.5.0",
"focus-lock": "^0.5.1",
"prop-types": "^15.6.2",

@@ -81,0 +81,0 @@ "react-clientside-effect": "^1.0.0"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc