Socket
Socket
Sign inDemoInstall

react-untabbable

Package Overview
Dependencies
7
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

4

coverage/coverage-final.json

@@ -1,3 +0,3 @@

{"/home/diogo/Documents/repositories/react-untabbable/src/Untabbable.tsx": {"path":"/home/diogo/Documents/repositories/react-untabbable/src/Untabbable.tsx","statementMap":{"0":{"start":{"line":6,"column":47},"end":{"line":31,"column":1}},"1":{"start":{"line":7,"column":53},"end":{"line":7,"column":58}},"2":{"start":{"line":9,"column":28},"end":{"line":9,"column":54}},"3":{"start":{"line":11,"column":57},"end":{"line":11,"column":59}},"4":{"start":{"line":12,"column":4},"end":{"line":16,"column":7}},"5":{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},"6":{"start":{"line":14,"column":12},"end":{"line":14,"column":51}},"7":{"start":{"line":18,"column":4},"end":{"line":18,"column":71}},"8":{"start":{"line":20,"column":4},"end":{"line":30,"column":6}},"9":{"start":{"line":23,"column":16},"end":{"line":25,"column":17}},"10":{"start":{"line":24,"column":20},"end":{"line":24,"column":69}},"11":{"start":{"line":27,"column":16},"end":{"line":27,"column":29}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":6,"column":47},"end":{"line":6,"column":48}},"loc":{"start":{"line":6,"column":58},"end":{"line":31,"column":1}},"line":6},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":28},"end":{"line":12,"column":29}},"loc":{"start":{"line":12,"column":46},"end":{"line":16,"column":5}},"line":12},"2":{"name":"(anonymous_2)","decl":{"start":{"line":22,"column":33},"end":{"line":22,"column":34}},"loc":{"start":{"line":22,"column":51},"end":{"line":28,"column":13}},"line":22}},"branchMap":{"0":{"loc":{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},"type":"if","locations":[{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},{"start":{"line":13,"column":8},"end":{"line":15,"column":9}}],"line":13},"1":{"loc":{"start":{"line":23,"column":16},"end":{"line":25,"column":17}},"type":"if","locations":[{"start":{"line":23,"column":16},"end":{"line":25,"column":17}},{"start":{"line":23,"column":16},"end":{"line":25,"column":17}}],"line":23}},"s":{"0":1,"1":8,"2":8,"3":8,"4":8,"5":13,"6":11,"7":8,"8":8,"9":13,"10":11,"11":2},"f":{"0":8,"1":13,"2":13},"b":{"0":[11,2],"1":[11,2]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"b1cd51e02322d82e54b61f31d21a5575d0cb06ea"}
,"/home/diogo/Documents/repositories/react-untabbable/src/useUntabbable.ts": {"path":"/home/diogo/Documents/repositories/react-untabbable/src/useUntabbable.ts","statementMap":{"0":{"start":{"line":18,"column":59},"end":{"line":18,"column":66}},"1":{"start":{"line":20,"column":17},"end":{"line":20,"column":49}},"2":{"start":{"line":22,"column":4},"end":{"line":62,"column":46}},"3":{"start":{"line":23,"column":8},"end":{"line":25,"column":9}},"4":{"start":{"line":24,"column":12},"end":{"line":24,"column":19}},"5":{"start":{"line":31,"column":14},"end":{"line":31,"column":16}},"6":{"start":{"line":33,"column":8},"end":{"line":49,"column":9}},"7":{"start":{"line":34,"column":12},"end":{"line":36,"column":13}},"8":{"start":{"line":35,"column":16},"end":{"line":35,"column":25}},"9":{"start":{"line":38,"column":37},"end":{"line":38,"column":80}},"10":{"start":{"line":40,"column":12},"end":{"line":48,"column":15}},"11":{"start":{"line":41,"column":16},"end":{"line":45,"column":19}},"12":{"start":{"line":47,"column":16},"end":{"line":47,"column":54}},"13":{"start":{"line":51,"column":8},"end":{"line":61,"column":10}},"14":{"start":{"line":52,"column":12},"end":{"line":60,"column":13}},"15":{"start":{"line":53,"column":59},"end":{"line":53,"column":69}},"16":{"start":{"line":55,"column":16},"end":{"line":59,"column":17}},"17":{"start":{"line":56,"column":20},"end":{"line":56,"column":56}},"18":{"start":{"line":58,"column":20},"end":{"line":58,"column":68}}},"fnMap":{"0":{"name":"useUntabbable","decl":{"start":{"line":17,"column":9},"end":{"line":17,"column":22}},"loc":{"start":{"line":17,"column":102},"end":{"line":63,"column":1}},"line":17},"1":{"name":"(anonymous_1)","decl":{"start":{"line":22,"column":14},"end":{"line":22,"column":15}},"loc":{"start":{"line":22,"column":20},"end":{"line":62,"column":5}},"line":22},"2":{"name":"(anonymous_2)","decl":{"start":{"line":40,"column":37},"end":{"line":40,"column":38}},"loc":{"start":{"line":40,"column":48},"end":{"line":48,"column":13}},"line":40},"3":{"name":"(anonymous_3)","decl":{"start":{"line":51,"column":15},"end":{"line":51,"column":16}},"loc":{"start":{"line":51,"column":21},"end":{"line":61,"column":9}},"line":51}},"branchMap":{"0":{"loc":{"start":{"line":17,"column":79},"end":{"line":17,"column":100}},"type":"default-arg","locations":[{"start":{"line":17,"column":98},"end":{"line":17,"column":100}}],"line":17},"1":{"loc":{"start":{"line":18,"column":12},"end":{"line":18,"column":28}},"type":"default-arg","locations":[{"start":{"line":18,"column":23},"end":{"line":18,"column":28}}],"line":18},"2":{"loc":{"start":{"line":18,"column":30},"end":{"line":18,"column":54}},"type":"default-arg","locations":[{"start":{"line":18,"column":49},"end":{"line":18,"column":54}}],"line":18},"3":{"loc":{"start":{"line":20,"column":17},"end":{"line":20,"column":49}},"type":"cond-expr","locations":[{"start":{"line":20,"column":38},"end":{"line":20,"column":41}},{"start":{"line":20,"column":44},"end":{"line":20,"column":49}}],"line":20},"4":{"loc":{"start":{"line":23,"column":8},"end":{"line":25,"column":9}},"type":"if","locations":[{"start":{"line":23,"column":8},"end":{"line":25,"column":9}},{"start":{"line":23,"column":8},"end":{"line":25,"column":9}}],"line":23},"5":{"loc":{"start":{"line":23,"column":12},"end":{"line":23,"column":41}},"type":"binary-expr","locations":[{"start":{"line":23,"column":12},"end":{"line":23,"column":20}},{"start":{"line":23,"column":24},"end":{"line":23,"column":41}}],"line":23},"6":{"loc":{"start":{"line":34,"column":12},"end":{"line":36,"column":13}},"type":"if","locations":[{"start":{"line":34,"column":12},"end":{"line":36,"column":13}},{"start":{"line":34,"column":12},"end":{"line":36,"column":13}}],"line":34},"7":{"loc":{"start":{"line":34,"column":16},"end":{"line":34,"column":36}},"type":"binary-expr","locations":[{"start":{"line":34,"column":16},"end":{"line":34,"column":20}},{"start":{"line":34,"column":24},"end":{"line":34,"column":36}}],"line":34},"8":{"loc":{"start":{"line":55,"column":16},"end":{"line":59,"column":17}},"type":"if","locations":[{"start":{"line":55,"column":16},"end":{"line":59,"column":17}},{"start":{"line":55,"column":16},"end":{"line":59,"column":17}}],"line":55}},"s":{"0":12,"1":12,"2":12,"3":11,"4":3,"5":8,"6":8,"7":13,"8":2,"9":11,"10":11,"11":17,"12":17,"13":8,"14":8,"15":17,"16":17,"17":16,"18":1},"f":{"0":12,"1":11,"2":17,"3":8},"b":{"0":[4],"1":[10],"2":[9],"3":[10,2],"4":[3,8],"5":[11,9],"6":[2,11],"7":[13,12],"8":[16,1]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"a3cc95e9c0cc1309cb3de9d18d5c0851565238ba"}
{"/home/diogo/Documents/repositories/react-untabbable/src/Untabbable.tsx": {"path":"/home/diogo/Documents/repositories/react-untabbable/src/Untabbable.tsx","statementMap":{"0":{"start":{"line":7,"column":50},"end":{"line":32,"column":1}},"1":{"start":{"line":8,"column":35},"end":{"line":8,"column":40}},"2":{"start":{"line":10,"column":28},"end":{"line":10,"column":54}},"3":{"start":{"line":12,"column":57},"end":{"line":12,"column":59}},"4":{"start":{"line":13,"column":4},"end":{"line":17,"column":7}},"5":{"start":{"line":14,"column":8},"end":{"line":16,"column":9}},"6":{"start":{"line":15,"column":12},"end":{"line":15,"column":51}},"7":{"start":{"line":19,"column":4},"end":{"line":19,"column":53}},"8":{"start":{"line":21,"column":4},"end":{"line":31,"column":6}},"9":{"start":{"line":24,"column":16},"end":{"line":26,"column":17}},"10":{"start":{"line":25,"column":20},"end":{"line":25,"column":69}},"11":{"start":{"line":28,"column":16},"end":{"line":28,"column":29}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":7,"column":50},"end":{"line":7,"column":51}},"loc":{"start":{"line":7,"column":61},"end":{"line":32,"column":1}},"line":7},"1":{"name":"(anonymous_1)","decl":{"start":{"line":13,"column":28},"end":{"line":13,"column":29}},"loc":{"start":{"line":13,"column":46},"end":{"line":17,"column":5}},"line":13},"2":{"name":"(anonymous_2)","decl":{"start":{"line":23,"column":33},"end":{"line":23,"column":34}},"loc":{"start":{"line":23,"column":51},"end":{"line":29,"column":13}},"line":23}},"branchMap":{"0":{"loc":{"start":{"line":14,"column":8},"end":{"line":16,"column":9}},"type":"if","locations":[{"start":{"line":14,"column":8},"end":{"line":16,"column":9}},{"start":{"line":14,"column":8},"end":{"line":16,"column":9}}],"line":14},"1":{"loc":{"start":{"line":24,"column":16},"end":{"line":26,"column":17}},"type":"if","locations":[{"start":{"line":24,"column":16},"end":{"line":26,"column":17}},{"start":{"line":24,"column":16},"end":{"line":26,"column":17}}],"line":24}},"s":{"0":1,"1":8,"2":8,"3":8,"4":8,"5":13,"6":11,"7":8,"8":8,"9":13,"10":11,"11":2},"f":{"0":8,"1":13,"2":13},"b":{"0":[11,2],"1":[11,2]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"98ba8c64c48cc2c91458483f4f9ac7e83e4b5a70"}
,"/home/diogo/Documents/repositories/react-untabbable/src/useUntabbable.ts": {"path":"/home/diogo/Documents/repositories/react-untabbable/src/useUntabbable.ts","statementMap":{"0":{"start":{"line":8,"column":58},"end":{"line":8,"column":65}},"1":{"start":{"line":10,"column":17},"end":{"line":10,"column":49}},"2":{"start":{"line":12,"column":4},"end":{"line":52,"column":46}},"3":{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},"4":{"start":{"line":14,"column":12},"end":{"line":14,"column":19}},"5":{"start":{"line":21,"column":14},"end":{"line":21,"column":16}},"6":{"start":{"line":23,"column":8},"end":{"line":39,"column":9}},"7":{"start":{"line":24,"column":12},"end":{"line":26,"column":13}},"8":{"start":{"line":25,"column":16},"end":{"line":25,"column":25}},"9":{"start":{"line":28,"column":37},"end":{"line":28,"column":80}},"10":{"start":{"line":30,"column":12},"end":{"line":38,"column":15}},"11":{"start":{"line":31,"column":16},"end":{"line":35,"column":19}},"12":{"start":{"line":37,"column":16},"end":{"line":37,"column":54}},"13":{"start":{"line":41,"column":8},"end":{"line":51,"column":10}},"14":{"start":{"line":42,"column":12},"end":{"line":50,"column":13}},"15":{"start":{"line":43,"column":59},"end":{"line":43,"column":69}},"16":{"start":{"line":45,"column":16},"end":{"line":49,"column":17}},"17":{"start":{"line":46,"column":20},"end":{"line":46,"column":56}},"18":{"start":{"line":48,"column":20},"end":{"line":48,"column":68}}},"fnMap":{"0":{"name":"useUntabbable","decl":{"start":{"line":7,"column":9},"end":{"line":7,"column":22}},"loc":{"start":{"line":7,"column":102},"end":{"line":53,"column":1}},"line":7},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":14},"end":{"line":12,"column":15}},"loc":{"start":{"line":12,"column":20},"end":{"line":52,"column":5}},"line":12},"2":{"name":"(anonymous_2)","decl":{"start":{"line":30,"column":37},"end":{"line":30,"column":38}},"loc":{"start":{"line":30,"column":48},"end":{"line":38,"column":13}},"line":30},"3":{"name":"(anonymous_3)","decl":{"start":{"line":41,"column":15},"end":{"line":41,"column":16}},"loc":{"start":{"line":41,"column":21},"end":{"line":51,"column":9}},"line":41}},"branchMap":{"0":{"loc":{"start":{"line":7,"column":79},"end":{"line":7,"column":100}},"type":"default-arg","locations":[{"start":{"line":7,"column":98},"end":{"line":7,"column":100}}],"line":7},"1":{"loc":{"start":{"line":8,"column":12},"end":{"line":8,"column":28}},"type":"default-arg","locations":[{"start":{"line":8,"column":23},"end":{"line":8,"column":28}}],"line":8},"2":{"loc":{"start":{"line":8,"column":30},"end":{"line":8,"column":53}},"type":"default-arg","locations":[{"start":{"line":8,"column":49},"end":{"line":8,"column":53}}],"line":8},"3":{"loc":{"start":{"line":10,"column":17},"end":{"line":10,"column":49}},"type":"cond-expr","locations":[{"start":{"line":10,"column":38},"end":{"line":10,"column":41}},{"start":{"line":10,"column":44},"end":{"line":10,"column":49}}],"line":10},"4":{"loc":{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},"type":"if","locations":[{"start":{"line":13,"column":8},"end":{"line":15,"column":9}},{"start":{"line":13,"column":8},"end":{"line":15,"column":9}}],"line":13},"5":{"loc":{"start":{"line":13,"column":12},"end":{"line":13,"column":41}},"type":"binary-expr","locations":[{"start":{"line":13,"column":12},"end":{"line":13,"column":20}},{"start":{"line":13,"column":24},"end":{"line":13,"column":41}}],"line":13},"6":{"loc":{"start":{"line":24,"column":12},"end":{"line":26,"column":13}},"type":"if","locations":[{"start":{"line":24,"column":12},"end":{"line":26,"column":13}},{"start":{"line":24,"column":12},"end":{"line":26,"column":13}}],"line":24},"7":{"loc":{"start":{"line":24,"column":16},"end":{"line":24,"column":36}},"type":"binary-expr","locations":[{"start":{"line":24,"column":16},"end":{"line":24,"column":20}},{"start":{"line":24,"column":24},"end":{"line":24,"column":36}}],"line":24},"8":{"loc":{"start":{"line":45,"column":16},"end":{"line":49,"column":17}},"type":"if","locations":[{"start":{"line":45,"column":16},"end":{"line":49,"column":17}},{"start":{"line":45,"column":16},"end":{"line":49,"column":17}}],"line":45}},"s":{"0":12,"1":12,"2":12,"3":11,"4":3,"5":8,"6":8,"7":13,"8":2,"9":11,"10":11,"11":21,"12":21,"13":8,"14":8,"15":21,"16":21,"17":11,"18":10},"f":{"0":12,"1":11,"2":21,"3":8},"b":{"0":[4],"1":[10],"2":[12],"3":[10,2],"4":[3,8],"5":[11,9],"6":[2,11],"7":[13,12],"8":[11,10]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"8ae21c201b2f7a801048ae9eb2ad16f37b9983de"}
}

87

index.cjs.js

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

var react = require('react');
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var candidateSelectors = [

@@ -162,42 +165,54 @@ 'input',

function createDescriptor(element) {
return {
element: element,
hadTabindex: element.hasAttribute('tabindex'),
tabindex: element.getAttribute('tabindex'),
};
}
function setElementUntabbable(element) {
element.setAttribute('tabindex', '-1');
}
function restoreTabbable(descriptor) {
var element = descriptor.element, hadTabindex = descriptor.hadTabindex, tabindex = descriptor.tabindex;
if (!hadTabindex) {
element.removeAttribute('tabindex');
}
else {
element.setAttribute('tabindex', "" + tabindex);
}
}
function useUntabbable(ref, options) {
if (options === void 0) { options = {}; }
var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? false : _b;
react.useEffect(function () {
if (disabled || !ref.current) {
function useUntabbable(ref, options = {}) {
const { disabled = false, includeContainer = true } = options;
const refs = Array.isArray(ref) ? ref : [ref];
React.useEffect(() => {
if (disabled || refs.length === 0) {
return;
}
var tabbableElements = tabbable_1(ref.current, { includeContainer: includeContainer });
var descriptors = tabbableElements.map(createDescriptor);
tabbableElements.forEach(setElementUntabbable);
return function () {
descriptors.forEach(restoreTabbable);
const descriptors = [];
for (const ref of refs) {
if (!ref || !ref.current) {
continue;
}
const tabbableElements = tabbable_1(ref.current, { includeContainer });
tabbableElements.forEach(element => {
descriptors.push({
element,
hadTabIndex: element.hasAttribute('tabindex'),
tabIndex: element.getAttribute('tabindex'),
});
element.setAttribute('tabindex', '-1');
});
}
return () => {
for (const descriptor of descriptors) {
const { element, hadTabIndex, tabIndex } = descriptor;
if (!hadTabIndex) {
element.removeAttribute('tabindex');
}
else {
element.setAttribute('tabindex', `${tabIndex}`);
}
}
};
}, [ref, disabled, includeContainer]);
}, [...refs, disabled, includeContainer]);
}
var Untabbable = function (props) {
var children = props.children, disabled = props.disabled, includeContainer = props.includeContainer;
var ref = react.useRef(null);
useUntabbable(ref, { disabled: disabled, includeContainer: includeContainer });
return react.cloneElement(children, { ref: ref });
const Untabbable = (props) => {
const { children, disabled } = props;
const childrenAsArray = React.Children.toArray(children);
const refs = {};
childrenAsArray.forEach((child, index) => {
if (React.isValidElement(child)) {
refs[index] = React.createRef();
}
});
useUntabbable(Object.values(refs), { disabled });
return (React__default.createElement(React__default.Fragment, null, childrenAsArray.map((child, index) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, { ref: refs[index] });
}
return child;
})));
};

@@ -204,0 +219,0 @@

84

index.js

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

import { useEffect, useRef, cloneElement } from 'react';
import React, { useEffect, Children, isValidElement, createRef, cloneElement } from 'react';

@@ -157,42 +157,54 @@ var candidateSelectors = [

function createDescriptor(element) {
return {
element: element,
hadTabindex: element.hasAttribute('tabindex'),
tabindex: element.getAttribute('tabindex'),
};
}
function setElementUntabbable(element) {
element.setAttribute('tabindex', '-1');
}
function restoreTabbable(descriptor) {
var element = descriptor.element, hadTabindex = descriptor.hadTabindex, tabindex = descriptor.tabindex;
if (!hadTabindex) {
element.removeAttribute('tabindex');
}
else {
element.setAttribute('tabindex', "" + tabindex);
}
}
function useUntabbable(ref, options) {
if (options === void 0) { options = {}; }
var _a = options.disabled, disabled = _a === void 0 ? false : _a, _b = options.includeContainer, includeContainer = _b === void 0 ? false : _b;
useEffect(function () {
if (disabled || !ref.current) {
function useUntabbable(ref, options = {}) {
const { disabled = false, includeContainer = true } = options;
const refs = Array.isArray(ref) ? ref : [ref];
useEffect(() => {
if (disabled || refs.length === 0) {
return;
}
var tabbableElements = tabbable_1(ref.current, { includeContainer: includeContainer });
var descriptors = tabbableElements.map(createDescriptor);
tabbableElements.forEach(setElementUntabbable);
return function () {
descriptors.forEach(restoreTabbable);
const descriptors = [];
for (const ref of refs) {
if (!ref || !ref.current) {
continue;
}
const tabbableElements = tabbable_1(ref.current, { includeContainer });
tabbableElements.forEach(element => {
descriptors.push({
element,
hadTabIndex: element.hasAttribute('tabindex'),
tabIndex: element.getAttribute('tabindex'),
});
element.setAttribute('tabindex', '-1');
});
}
return () => {
for (const descriptor of descriptors) {
const { element, hadTabIndex, tabIndex } = descriptor;
if (!hadTabIndex) {
element.removeAttribute('tabindex');
}
else {
element.setAttribute('tabindex', `${tabIndex}`);
}
}
};
}, [ref, disabled, includeContainer]);
}, [...refs, disabled, includeContainer]);
}
var Untabbable = function (props) {
var children = props.children, disabled = props.disabled, includeContainer = props.includeContainer;
var ref = useRef(null);
useUntabbable(ref, { disabled: disabled, includeContainer: includeContainer });
return cloneElement(children, { ref: ref });
const Untabbable = (props) => {
const { children, disabled } = props;
const childrenAsArray = Children.toArray(children);
const refs = {};
childrenAsArray.forEach((child, index) => {
if (isValidElement(child)) {
refs[index] = createRef();
}
});
useUntabbable(Object.values(refs), { disabled });
return (React.createElement(React.Fragment, null, childrenAsArray.map((child, index) => {
if (isValidElement(child)) {
return cloneElement(child, { ref: refs[index] });
}
return child;
})));
};

@@ -199,0 +211,0 @@

3

package.json
{
"name": "react-untabbable",
"version": "1.0.0",
"version": "1.0.1",
"description": "An extremely simple hook to make a container and all its children untabbable, but still focusable.",

@@ -45,3 +45,2 @@ "source": "src/index.ts",

"rollup": "^2.8.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",

@@ -48,0 +47,0 @@ "rollup-plugin-node-resolve": "^5.2.0",

coverage/clover.xml

Sorry, the diff of this file is not supported yet

coverage/lcov-report/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/Untabbable.tsx.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/useUntabbable.ts.html

Sorry, the diff of this file is not supported yet

coverage/lcov.info

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc