react-untabbable - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

CHANGELOG.md

@@ -0,1 +1,9 @@
+## 1.0.3 (May 10, 2020)
+
+- Fix misleading documentation
+
+## 1.0.2 (May 9, 2020)
+
+- Fix latest tag in npm
+
 ## 1.0.1 (May 9, 2020)
@@ -2,0 +10,0 @@

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":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"}
+{"/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":2,"1":16,"2":16,"3":16,"4":16,"5":26,"6":22,"7":16,"8":16,"9":26,"10":22,"11":4},"f":{"0":16,"1":26,"2":26},"b":{"0":[22,4],"1":[22,4]},"_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":20,"1":20,"2":20,"3":19,"4":5,"5":14,"6":14,"7":22,"8":2,"9":20,"10":20,"11":42,"12":42,"13":14,"14":14,"15":42,"16":42,"17":22,"18":20},"f":{"0":20,"1":19,"2":42,"3":14},"b":{"0":[4],"1":[16],"2":[20],"3":[18,2],"4":[5,14],"5":[19,15],"6":[2,20],"7":[22,21],"8":[22,20]},"_coverageSchema":"1a1c01bbd47fc00a2c39e90264f33305004495a9","hash":"8ae21c201b2f7a801048ae9eb2ad16f37b9983de"}
 }

package.json

 {
   "name": "react-untabbable",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An extremely simple hook to make a container and all its children untabbable, but still focusable.",
@@ -42,4 +42,4 @@ "source": "src/index.ts",
     "jest": "^26.0.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "16.8",
+    "react-dom": "16.8",
     "rollup": "^2.8.2",
@@ -46,0 +46,0 @@ "rollup-plugin-commonjs": "^10.1.0",

README.md

 [![npm](https://img.shields.io/npm/v/react-untabbable.svg?color=green&style=flat-square)](https://www.npmjs.com/package/react-untabbable)
 
 # react-untabbable
-An extremely simple utility to make a container and all its children untabbable, but still focusable.
+An extremely simple and tiny (1.3kB) utility to make a container and all its children untabbable, but still focusable.
 This can be useful in achieving a better accessibility for you components, like a menu with nested panels or the dreaded __carousel__ where you probably want some of the items to be untabbable.
 
+## Install
+
+```bash
+yarn add react-untabbable
+```
+
+or
+
+```bash
+npm i react-untabbable
+```
+
 ## How does it work?
@@ -16,6 +28,9 @@ It quite simply applies the value __-1__ to the tabbable elements inside a container, restoring afterwards when needed.
 ## How to use
-You can either use the hook or the component itself, pick what better suits your needs. Both have the same API.
+You can either use the hook or the component itself, pick what better suits your needs.
 
 ### Component
 
+The component supports having more than 1 child and you can mix React elements with simples nodes (string, number, etc..).
+Elements **must** support receiving a ref.
+
 | Prop            | Type      | Default | Description                     |
@@ -29,6 +44,6 @@ |-----------------|-----------|---------|---------------------------------|
 <Untabbable>
-    <button>Can't click me 😢</button>
-    You can mix react elements and simple nodes! (string, number, etc...)
+    <button>Can't tab into me 😢</button>
+    You can mix React elements with simple nodes! (string, number, etc...)
     <div>
-        <button>Can't click me as well 😭</button>
+        <button>Can't tab into me as well 😭</button>
     </div>
@@ -56,8 +71,13 @@ </Untabbable>
 
+    useUntabbable([firstButtonRef, secondButtonRef]);
+
     return (
-        <button ref={firstButtonRef}>
-            Can't click me 😢
-        </button>
         <div>
-            <button ref={secondButtonRef}>Can't click me as well 😭</button>
+            <button ref={firstButtonRef}>
+                Can't tab into me 😢
+            </button>
+            <div ref={secondButtonRef}>
+                <button>Can't tab into me as well 😭</button>
+            </div>
+            <button>Still tabbable 🎉</button>
         </div>
@@ -64,0 +84,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

82606

increased by0.69%

Number of lines in readme file

84

increased by31.25%

No dependency changes