kevlar-tabs - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # Changelog
 
+## [0.0.4](https://github.com/neolitec/kevlar-tabs/compare/v0.0.3...v0.0.4) (2022-12-03)
+
+
+### Features
+
+* add styled-components compliance ([#17](https://github.com/neolitec/kevlar-tabs/issues/17)) ([543c0cf](https://github.com/neolitec/kevlar-tabs/commit/543c0cfe51bbb7a32c248d050d85800d7961c943))
+
 ## [0.0.3](https://github.com/neolitec/kevlar-tabs/compare/v0.0.2...v0.0.3) (2022-11-21)
@@ -4,0 +11,0 @@

dist/kevlar-tabs.es.js

@@ -14,19 +14,19 @@ import x, { useRef as $, useEffect as A, useCallback as v, isValidElement as M, useId as V, useMemo as C, useState as j } from "react";
       for (var u = [], d = 0; d < arguments.length; d++) {
-        var i = arguments[d];
-        if (!!i) {
-          var r = typeof i;
-          if (r === "string" || r === "number")
-            u.push(i);
-          else if (Array.isArray(i)) {
-            if (i.length) {
-              var a = e.apply(null, i);
+        var r = arguments[d];
+        if (!!r) {
+          var i = typeof r;
+          if (i === "string" || i === "number")
+            u.push(r);
+          else if (Array.isArray(r)) {
+            if (r.length) {
+              var a = e.apply(null, r);
               a && u.push(a);
             }
-          } else if (r === "object") {
-            if (i.toString !== Object.prototype.toString && !i.toString.toString().includes("[native code]")) {
-              u.push(i.toString());
+          } else if (i === "object") {
+            if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]")) {
+              u.push(r.toString());
               continue;
             }
-            for (var p in i)
-              t.call(i, p) && i[p] && u.push(p);
+            for (var p in r)
+              t.call(r, p) && r[p] && u.push(p);
           }
@@ -46,4 +46,4 @@ }
   classNameDisabled: d,
-  disabled: i,
-  onClick: r,
+  disabled: r,
+  onClick: i,
   ...a
@@ -59,8 +59,9 @@ }) => {
       [u || "tab--active"]: n,
-      [d || "tab--disabled"]: i
+      [d || "tab--disabled"]: r
     }]),
     tabIndex: n ? 0 : -1,
     "aria-selected": n,
+    "aria-disabled": r,
     ...a,
-    onClick: i ? void 0 : r,
+    onClick: r ? void 0 : i,
     children: t
@@ -77,4 +78,4 @@ });
 }) => {
-  const i = v((r) => {
-    r.key === "ArrowLeft" ? (e == null || e(), r.preventDefault()) : r.key === "ArrowRight" && (u == null || u(), r.preventDefault());
+  const r = v((i) => {
+    i.key === "ArrowLeft" ? (e == null || e(), i.preventDefault()) : i.key === "ArrowRight" && (u == null || u(), i.preventDefault());
   }, [e, u]);
@@ -85,3 +86,3 @@ return /* @__PURE__ */ h("ul", {
     ...d,
-    onKeyDown: i,
+    onKeyDown: r,
     children: n
@@ -97,4 +98,4 @@ });
   classNameDisabled: d,
-  disabled: i,
-  ...r
+  disabled: r,
+  ...i
 }) => /* @__PURE__ */ h("div", {
@@ -104,5 +105,5 @@ role: "tabpanel",
     [u || "tabpanel--active"]: n,
-    [d || "tabpanel--disabled"]: i
+    [d || "tabpanel--disabled"]: r
   }),
-  ...r,
+  ...i,
   children: n && t
@@ -141,3 +142,3 @@ });
 }) => {
-  const i = V(), r = C(() => J(n), [n]), a = C(() => r.map((o) => o.name), [r]), p = $(r.map((o, f) => `${i}-${f}`)), [{
+  const r = V(), i = C(() => J(n), [n]), a = C(() => i.map((o) => o.name), [i]), p = $(i.map((o, f) => `${r}-${f}`)), [{
     index: s,
@@ -155,15 +156,15 @@ name: T
   }, [s, T, e, u]), I = v(() => {
-    if (r.every((l) => l.disabled))
+    if (i.every((l) => l.disabled))
       return;
-    const o = Q(s, r), f = a[o];
+    const o = Q(s, i), f = a[o];
     c(o, f);
-  }, [s, c, a, r]), g = v(() => {
-    if (r.every((l) => l.disabled))
+  }, [s, c, a, i]), g = v(() => {
+    if (i.every((l) => l.disabled))
       return;
-    const o = U(s, r), f = a[o];
+    const o = U(s, i), f = a[o];
     c(o, f);
-  }, [s, c, a, r]), F = v(() => {
+  }, [s, c, a, i]), F = v(() => {
     let o = 0;
     const f = a.length - p.current.length;
-    return p.current.push(...Array.from(new Array(f)).map((l, b) => `${i}-${a.length + b - 1}`)), x.Children.map(n, (l) => {
+    return p.current.push(...Array.from(new Array(f)).map((l, b) => `${r}-${a.length + b - 1}`)), x.Children.map(n, (l) => {
       if (L(l))
@@ -193,3 +194,3 @@ return x.cloneElement(l, {
           active: b === s,
-          disabled: r[b].disabled,
+          disabled: i[b].disabled,
           id: `${p.current[b]}-panel`,
@@ -202,3 +203,3 @@ "aria-labelledby": `${p.current[b]}-tab`
     });
-  }, [n, t, s, c, i, I, g, a.length, r]);
+  }, [n, t, s, c, r, I, g, a.length, i]);
   return /* @__PURE__ */ h(q, {
@@ -205,0 +206,0 @@ children: F()

dist/kevlar-tabs.umd.js

@@ -5,3 +5,3 @@ (function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s["kevlar-tabs"]={},s.React,s.jsxRuntime))})(this,function(s,u,h){"use strict";const y=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(u);var C={exports:{}};/*!
 	http://jedwatson.github.io/classnames
-*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var l=[],p=0;p<arguments.length;p++){var i=arguments[p];if(!!i){var r=typeof i;if(r==="string"||r==="number")l.push(i);else if(Array.isArray(i)){if(i.length){var a=n.apply(null,i);a&&l.push(a)}}else if(r==="object"){if(i.toString!==Object.prototype.toString&&!i.toString.toString().includes("[native code]")){l.push(i.toString());continue}for(var d in i)t.call(i,d)&&i[d]&&l.push(d)}}}return l.join(" ")}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(C);const E=C.exports,g=({active:e,children:t,className:n,classNameActive:l,classNameDisabled:p,disabled:i,onClick:r,...a})=>{const d=u.useRef(null);return u.useEffect(()=>{e&&d.current&&d.current.focus()},[e]),h.jsx("li",{ref:d,role:"tab",className:E([n||"tab",{[l||"tab--active"]:e,[p||"tab--disabled"]:i}]),tabIndex:e?0:-1,"aria-selected":e,...a,onClick:i?void 0:r,children:t})};g.displayName="Tab";const I=({children:e,className:t,onArrowLeftKeyDown:n,onArrowRightKeyDown:l,...p})=>{const i=u.useCallback(r=>{r.key==="ArrowLeft"?(n==null||n(),r.preventDefault()):r.key==="ArrowRight"&&(l==null||l(),r.preventDefault())},[n,l]);return h.jsx("ul",{role:"tablist",className:t||"tablist",...p,onKeyDown:i,children:e})};I.displayName="TabList";const P=({active:e,children:t,className:n,classNameActive:l,classNameDisabled:p,disabled:i,...r})=>h.jsx("div",{role:"tabpanel",className:E(n||"tabpanel",{[l||"tabpanel--active"]:e,[p||"tabpanel--disabled"]:i}),...r,children:e&&t});P.displayName="TabPanel";function m(e){return u.isValidElement(e)&&!!e.type.displayName}function k(e){return m(e)&&e.type.displayName==="TabList"}function _(e){return m(e)&&e.type.displayName==="Tab"}function M(e){return m(e)&&e.type.displayName==="TabPanel"}function q(e){const t=y.default.Children.toArray(e).find(n=>k(n));return y.default.Children.toArray(t.props.children).filter(n=>_(n))}function D(e){return q(e).map(t=>t.props)}const F=({children:e,classNames:t,onNameSelect:n,onSelect:l,selected:p})=>{const i=u.useId(),r=u.useMemo(()=>D(e),[e]),a=u.useMemo(()=>r.map(o=>o.name),[r]),d=u.useRef(r.map((o,c)=>`${i}-${c}`)),[{index:x,name:L},j]=u.useState($(a,p));u.useEffect(()=>{j($(a,p))},[p,a]);const v=u.useCallback((o,c)=>{j({index:o,name:c}),l==null||l(o,x),n==null||n(c,L)},[x,L,n,l]),O=u.useCallback(()=>{if(r.every(f=>f.disabled))return;const o=S(x,r),c=a[o];v(o,c)},[x,v,a,r]),A=u.useCallback(()=>{if(r.every(f=>f.disabled))return;const o=V(x,r),c=a[o];v(o,c)},[x,v,a,r]),z=u.useCallback(()=>{let o=0;const c=a.length-d.current.length;return d.current.push(...Array.from(new Array(c)).map((f,b)=>`${i}-${a.length+b-1}`)),y.default.Children.map(e,f=>{if(k(f))return y.default.cloneElement(f,{...f.props,children:y.default.Children.map(f.props.children,(b,T)=>_(b)?y.default.cloneElement(b,{className:t==null?void 0:t.tab,classNameActive:t==null?void 0:t.tabActive,classNameDisabled:t==null?void 0:t.tabDisabled,...b.props,active:T===x,"aria-controls":`${d.current[T]}-panel`,id:`${d.current[T]}-tab`,onClick:()=>v(T,b.props.name)}):b),className:t==null?void 0:t.tabList,onArrowLeftKeyDown:A,onArrowRightKeyDown:O});if(M(f)){const b=Number.isInteger(f.props.index)?f.props.index:o,T=y.default.cloneElement(f,{className:t==null?void 0:t.tabPanel,classNameActive:t==null?void 0:t.tabPanelActive,classNameDisabled:t==null?void 0:t.tabPanelDisabled,...f.props,active:b===x,disabled:r[b].disabled,id:`${d.current[b]}-panel`,"aria-labelledby":`${d.current[b]}-tab`});return o+=1,T}return f})},[e,t,x,v,i,O,A,a.length,r]);return h.jsx(h.Fragment,{children:z()})};function $(e,t){return Number.isInteger(t)?{index:t,name:e[t]}:t?{index:e.indexOf(t),name:t}:{index:0,name:e[0]}}function S(e,t){let n=e<t.length-1?e+1:0;for(;t[n].disabled;)n=n<t.length-1?n+1:0;return n}function V(e,t){let n=e>0?e-1:t.length-1;for(;t[n].disabled;)n=n>0?n-1:t.length-1;return n}s.Tab=g,s.TabList=I,s.TabPanel=P,s.Tabs=F,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var a=[],p=0;p<arguments.length;p++){var r=arguments[p];if(!!r){var i=typeof r;if(i==="string"||i==="number")a.push(r);else if(Array.isArray(r)){if(r.length){var l=n.apply(null,r);l&&a.push(l)}}else if(i==="object"){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){a.push(r.toString());continue}for(var d in r)t.call(r,d)&&r[d]&&a.push(d)}}}return a.join(" ")}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(C);const E=C.exports,g=({active:e,children:t,className:n,classNameActive:a,classNameDisabled:p,disabled:r,onClick:i,...l})=>{const d=u.useRef(null);return u.useEffect(()=>{e&&d.current&&d.current.focus()},[e]),h.jsx("li",{ref:d,role:"tab",className:E([n||"tab",{[a||"tab--active"]:e,[p||"tab--disabled"]:r}]),tabIndex:e?0:-1,"aria-selected":e,"aria-disabled":r,...l,onClick:r?void 0:i,children:t})};g.displayName="Tab";const I=({children:e,className:t,onArrowLeftKeyDown:n,onArrowRightKeyDown:a,...p})=>{const r=u.useCallback(i=>{i.key==="ArrowLeft"?(n==null||n(),i.preventDefault()):i.key==="ArrowRight"&&(a==null||a(),i.preventDefault())},[n,a]);return h.jsx("ul",{role:"tablist",className:t||"tablist",...p,onKeyDown:r,children:e})};I.displayName="TabList";const P=({active:e,children:t,className:n,classNameActive:a,classNameDisabled:p,disabled:r,...i})=>h.jsx("div",{role:"tabpanel",className:E(n||"tabpanel",{[a||"tabpanel--active"]:e,[p||"tabpanel--disabled"]:r}),...i,children:e&&t});P.displayName="TabPanel";function m(e){return u.isValidElement(e)&&!!e.type.displayName}function k(e){return m(e)&&e.type.displayName==="TabList"}function _(e){return m(e)&&e.type.displayName==="Tab"}function M(e){return m(e)&&e.type.displayName==="TabPanel"}function q(e){const t=y.default.Children.toArray(e).find(n=>k(n));return y.default.Children.toArray(t.props.children).filter(n=>_(n))}function D(e){return q(e).map(t=>t.props)}const F=({children:e,classNames:t,onNameSelect:n,onSelect:a,selected:p})=>{const r=u.useId(),i=u.useMemo(()=>D(e),[e]),l=u.useMemo(()=>i.map(o=>o.name),[i]),d=u.useRef(i.map((o,c)=>`${r}-${c}`)),[{index:x,name:L},j]=u.useState($(l,p));u.useEffect(()=>{j($(l,p))},[p,l]);const v=u.useCallback((o,c)=>{j({index:o,name:c}),a==null||a(o,x),n==null||n(c,L)},[x,L,n,a]),O=u.useCallback(()=>{if(i.every(f=>f.disabled))return;const o=S(x,i),c=l[o];v(o,c)},[x,v,l,i]),A=u.useCallback(()=>{if(i.every(f=>f.disabled))return;const o=V(x,i),c=l[o];v(o,c)},[x,v,l,i]),z=u.useCallback(()=>{let o=0;const c=l.length-d.current.length;return d.current.push(...Array.from(new Array(c)).map((f,b)=>`${r}-${l.length+b-1}`)),y.default.Children.map(e,f=>{if(k(f))return y.default.cloneElement(f,{...f.props,children:y.default.Children.map(f.props.children,(b,T)=>_(b)?y.default.cloneElement(b,{className:t==null?void 0:t.tab,classNameActive:t==null?void 0:t.tabActive,classNameDisabled:t==null?void 0:t.tabDisabled,...b.props,active:T===x,"aria-controls":`${d.current[T]}-panel`,id:`${d.current[T]}-tab`,onClick:()=>v(T,b.props.name)}):b),className:t==null?void 0:t.tabList,onArrowLeftKeyDown:A,onArrowRightKeyDown:O});if(M(f)){const b=Number.isInteger(f.props.index)?f.props.index:o,T=y.default.cloneElement(f,{className:t==null?void 0:t.tabPanel,classNameActive:t==null?void 0:t.tabPanelActive,classNameDisabled:t==null?void 0:t.tabPanelDisabled,...f.props,active:b===x,disabled:i[b].disabled,id:`${d.current[b]}-panel`,"aria-labelledby":`${d.current[b]}-tab`});return o+=1,T}return f})},[e,t,x,v,r,O,A,l.length,i]);return h.jsx(h.Fragment,{children:z()})};function $(e,t){return Number.isInteger(t)?{index:t,name:e[t]}:t?{index:e.indexOf(t),name:t}:{index:0,name:e[0]}}function S(e,t){let n=e<t.length-1?e+1:0;for(;t[n].disabled;)n=n<t.length-1?n+1:0;return n}function V(e,t){let n=e>0?e-1:t.length-1;for(;t[n].disabled;)n=n>0?n-1:t.length-1;return n}s.Tab=g,s.TabList=I,s.TabPanel=P,s.Tabs=F,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=kevlar-tabs.umd.js.map

package.json

 {
   "name": "kevlar-tabs",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Yet another better tabs library for React",
@@ -41,2 +41,3 @@ "keywords": [
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
@@ -51,3 +52,3 @@ "@typescript-eslint/parser": "^5.43.0",
     "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "27.1.5",
+    "eslint-plugin-jest": "27.1.6",
     "eslint-plugin-jest-dom": "^4.0.0",
@@ -68,2 +69,3 @@ "eslint-plugin-jsx-a11y": "^6.4.1",
     "sass": "^1.56.1",
+    "styled-components": "^5.3.6",
     "testing-library-selector": "^0.2.1",
@@ -70,0 +72,0 @@ "typescript": "^4.9.3",

readme.md

@@ -0,3 +1,9 @@
+<div align="center">
+  <img width="200" height="200" src="logo.svg" alt="Kevlar Tabs" />
+</div>
+
 # Kevlar Tabs
 
+_Inspired by [react-tabs](https://www.npmjs.com/package/react-tabs)_
+
 ## Install
@@ -63,11 +69,61 @@
 
-### Shopping list
+### Custom classes
+
+You use custom classes for the different states of the elements.
+
+To do it, use the `classNames` property of `Tabs` and pass an object of this shape:
+
+```ts
+export type TabsClassNames = Partial<{
+  tabList: string
+  tab: string
+  tabActive: string
+  tabDisabled: string
+  tabPanel: string
+  tabPanelActive: string
+  tabPanelDisabled: string
+}>
+```
+
+You can also pass this configuration to sub-elements: `className`, `classNameActive` and `classNameDisabled` so that different tabs can have different styling since specific configuration takes precedence over the global one.
+
+### With styled-components
+
+Using `styled-components`, one important thing to know is that you have defined the _displayName_ of the component you want to wrap.
+
+For instance:
+
+```ts
+import { Tab } from 'kevlar-tabs'
+import styled from 'styled-components'
+
+const CustomTab = styled(Tab)`
+  color: white;
+  background-color: purple;
+
+  &[aria-active='true'] {
+    font-weight: bold;
+  }
+
+  &[aria-disabled='true'] {
+    color: #ccc;
+    background-color: #544454;
+  }
+`
+
+// THIS IS IMPORTANT
+CustomTab.displayName = 'Tab'
+```
+
+`displayName` has to be set for `Tab`, `TabList` and `TabPanel`, and it takes the name of the component itself.
+
+## Shopping list
   
   - [x] Disabled tabs
   - [x] Customizable classes
-  - [ ] styled-component compliance (might work but not tested yet)
+  - [x] styled-component compliance
   - [ ] Lazy loading
   - [ ] Prevent auto-activation of tabs when navigating with arrows
-  - [ ] Logo
+  - [x] Logo
   - [ ] Documentation site
   - [ ] Contribution easing

Fixed alerts

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

145568

increased by140.5%

Number of package files

19

increased by18.75%

Lines of code

373

increased by11.01%

Number of lines in readme file

129

increased by76.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

41

increased by5.13%

No dependency changes