kevlar-tabs - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

 # Changelog
 
+## [0.0.6](https://github.com/neolitec/kevlar-tabs/compare/v0.0.5...v0.0.6) (2022-12-04)
+
+
+### Features
+
+* allow auto activation disabling ([#21](https://github.com/neolitec/kevlar-tabs/issues/21)) ([5070b0b](https://github.com/neolitec/kevlar-tabs/commit/5070b0b7593a60358426423f5f93c3606fb81965))
+
 ## [0.0.5](https://github.com/neolitec/kevlar-tabs/compare/v0.0.4...v0.0.5) (2022-12-04)
@@ -4,0 +11,0 @@

dist/helpers/elementTypes.d.ts

@@ -1,2 +0,2 @@
-import type { JSXElementConstructor, ReactElement } from 'react';
+import type { JSXElementConstructor, ReactElement, RefAttributes } from 'react';
 import type { TabProps } from '../Tab';
@@ -12,4 +12,4 @@ import type { TabListProps } from '../TabList';
 export declare function isTabListElement(object: unknown): object is ReactElementWithName<TabListProps>;
-export declare function isTabElement(object: unknown): object is ReactElementWithName<TabProps>;
+export declare function isTabElement(object: unknown): object is ReactElementWithName<TabProps & RefAttributes<HTMLLIElement>>;
 export declare function isTabPanelElement(object: unknown): object is ReactElementWithName<TabPanelProps>;
 export {};

dist/kevlar-tabs.es.js

@@ -1,4 +0,4 @@
-import c, { useRef as v, useEffect as A, useCallback as m, useLayoutEffect as F, isValidElement as M, useId as V, useMemo as P, useState as j } from "react";
-import { jsx as h, Fragment as q } from "react/jsx-runtime";
-var L = { exports: {} };
+import m, { forwardRef as q, useRef as E, useEffect as _, useCallback as v, useLayoutEffect as z, isValidElement as A, useId as G, useMemo as R, useState as H } from "react";
+import { jsx as g, Fragment as J } from "react/jsx-runtime";
+var B = { exports: {} };
 /*!
@@ -9,229 +9,241 @@ Copyright (c) 2018 Jed Watson.
 */
-(function(n) {
+(function(e) {
   (function() {
     var t = {}.hasOwnProperty;
-    function e() {
-      for (var u = [], d = 0; d < arguments.length; d++) {
-        var r = arguments[d];
+    function n() {
+      for (var o = [], f = 0; f < arguments.length; f++) {
+        var r = arguments[f];
         if (!!r) {
-          var i = typeof r;
-          if (i === "string" || i === "number")
-            u.push(r);
+          var a = typeof r;
+          if (a === "string" || a === "number")
+            o.push(r);
           else if (Array.isArray(r)) {
             if (r.length) {
-              var a = e.apply(null, r);
-              a && u.push(a);
+              var i = n.apply(null, r);
+              i && o.push(i);
             }
-          } else if (i === "object") {
+          } else if (a === "object") {
             if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]")) {
-              u.push(r.toString());
+              o.push(r.toString());
               continue;
             }
-            for (var p in r)
-              t.call(r, p) && r[p] && u.push(p);
+            for (var u in r)
+              t.call(r, u) && r[u] && o.push(u);
           }
         }
       }
-      return u.join(" ");
+      return o.join(" ");
     }
-    n.exports ? (e.default = e, n.exports = e) : window.classNames = e;
+    e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
   })();
-})(L);
-const O = L.exports, z = ({
-  active: n,
+})(B);
+const D = B.exports, M = ({
+  active: e,
   children: t,
-  className: e,
-  classNameActive: u,
-  classNameDisabled: d,
+  className: n,
+  classNameActive: o,
+  classNameDisabled: f,
   disabled: r,
-  onClick: i,
-  ...a
-}) => {
-  const p = v(null);
-  return A(() => {
-    n && p.current && p.current.focus();
-  }, [n]), /* @__PURE__ */ h("li", {
-    ref: p,
+  onClick: a,
+  ...i
+}, u) => {
+  const d = E(null);
+  return _(() => {
+    e && d.current && d.current.focus();
+  }, [e]), /* @__PURE__ */ g("li", {
+    ref: (y) => {
+      d.current = y, typeof u == "function" ? u(y) : u && (u.current = y);
+    },
     role: "tab",
-    className: O([e || "tab", {
-      [u || "tab--active"]: n,
-      [d || "tab--disabled"]: r
+    className: D([n || "tab", {
+      [o || "tab--active"]: e,
+      [f || "tab--disabled"]: r
     }]),
-    tabIndex: n ? 0 : -1,
-    "aria-selected": n,
+    tabIndex: e ? 0 : -1,
+    "aria-selected": e,
     "aria-disabled": r,
-    ...a,
-    onClick: r ? void 0 : i,
+    ...i,
+    onClick: r ? void 0 : a,
     children: t
   });
 };
-z.displayName = "Tab";
-const D = ({
-  children: n,
+M.displayName = "Tab";
+const Q = q(M);
+Q.displayName = "Tab";
+const U = ({
+  children: e,
   className: t,
-  onArrowLeftKeyDown: e,
-  onArrowRightKeyDown: u,
-  ...d
+  onArrowLeftKeyDown: n,
+  onArrowRightKeyDown: o,
+  ...f
 }) => {
-  const r = m((i) => {
-    i.key === "ArrowLeft" ? (e == null || e(), i.preventDefault()) : i.key === "ArrowRight" && (u == null || u(), i.preventDefault());
-  }, [e, u]);
-  return /* @__PURE__ */ h("ul", {
+  const r = v((a) => {
+    a.key === "ArrowLeft" ? (n == null || n(), a.preventDefault()) : a.key === "ArrowRight" && (o == null || o(), a.preventDefault());
+  }, [n, o]);
+  return /* @__PURE__ */ g("ul", {
     role: "tablist",
     className: t || "tablist",
-    ...d,
+    ...f,
     onKeyDown: r,
-    children: n
+    children: e
   });
 };
-D.displayName = "TabList";
-const G = ({
-  active: n,
+U.displayName = "TabList";
+const X = ({
+  active: e,
   children: t,
-  className: e,
-  classNameActive: u,
-  classNameDisabled: d,
+  className: n,
+  classNameActive: o,
+  classNameDisabled: f,
   disabled: r,
-  ...i
+  ...a
 }) => {
-  const a = v(n);
-  return F(() => {
-    !a.current && n && (a.current = !0);
-  }, [n]), /* @__PURE__ */ h("div", {
+  const i = E(e);
+  return z(() => {
+    !i.current && e && (i.current = !0);
+  }, [e]), /* @__PURE__ */ g("div", {
     role: "tabpanel",
-    className: O(e || "tabpanel", {
-      [u || "tabpanel--active"]: n,
-      [d || "tabpanel--disabled"]: r
+    className: D(n || "tabpanel", {
+      [o || "tabpanel--active"]: e,
+      [f || "tabpanel--disabled"]: r
     }),
-    style: n ? void 0 : {
+    style: e ? void 0 : {
       display: "none"
     },
-    ...i,
-    children: (n || a.current) && t
+    ...a,
+    children: (e || i.current) && t
   });
 };
-G.displayName = "TabPanel";
-function T(n) {
-  return M(n) && !!n.type.displayName;
+X.displayName = "TabPanel";
+function C(e) {
+  return A(e) && !!e.type.displayName;
 }
-function k(n) {
-  return T(n) && n.type.displayName === "TabList";
+function V(e) {
+  return C(e) && e.type.displayName === "TabList";
 }
-function _(n) {
-  return T(n) && n.type.displayName === "Tab";
+function W(e) {
+  return C(e) && e.type.displayName === "Tab";
 }
-function H(n) {
-  return T(n) && n.type.displayName === "TabPanel";
+function Y(e) {
+  return C(e) && e.type.displayName === "TabPanel";
 }
-function J(n) {
-  const t = c.Children.toArray(n).find(
-    (e) => k(e)
+function Z(e) {
+  const t = m.Children.toArray(e).find(
+    (n) => V(n)
   );
-  return c.Children.toArray(t.props.children).filter(
-    (e) => _(e)
+  return m.Children.toArray(t.props.children).filter(
+    (n) => W(n)
   );
 }
-function Q(n) {
-  return J(n).map((t) => t.props);
+function S(e) {
+  return Z(e).map((t) => t.props);
 }
-const Z = ({
-  children: n,
-  classNames: t,
-  onNameSelect: e,
-  onSelect: u,
-  selected: d
+const en = ({
+  autoActivate: e = !0,
+  children: t,
+  classNames: n,
+  onNameSelect: o,
+  onSelect: f,
+  selected: r
 }) => {
-  const r = V(), i = P(() => Q(n), [n]), a = P(() => i.map((o) => o.name), [i]), p = v(i.map((o, b) => `${r}-${b}`)), [{
-    index: s,
-    name: E
-  }, I] = j($(a, d));
-  A(() => {
-    I($(a, d));
-  }, [d, a]);
-  const x = m((o, b) => {
-    I({
-      index: o,
-      name: b
-    }), u == null || u(o, s), e == null || e(b, E);
-  }, [s, E, e, u]), g = m(() => {
+  var L;
+  const a = G(), i = R(() => S(t), [t]), u = R(() => i.map((p) => p.name), [i]), d = E(i.map((p, s) => `${a}-${s}`)), y = E([]), h = E((L = typeof r == "string" ? u.indexOf(r) : r) != null ? L : 0), [{
+    index: T,
+    name: P
+  }, $] = H(F(u, r));
+  _(() => {
+    $(F(u, r));
+  }, [r, u]);
+  const x = v((p, s) => {
+    $({
+      index: p,
+      name: s
+    }), f == null || f(p, T), o == null || o(s, P), h.current = p;
+  }, [T, P, o, f]), k = v(() => {
     if (i.every((l) => l.disabled))
       return;
-    const o = U(s, i), b = a[o];
-    x(o, b);
-  }, [s, x, a, i]), C = m(() => {
+    const p = w(h.current, i), s = u[p];
+    e ? x(p, s) : (h.current = p, y.current[p].focus());
+  }, [e, x, u, i]), O = v(() => {
     if (i.every((l) => l.disabled))
       return;
-    const o = W(s, i), b = a[o];
-    x(o, b);
-  }, [s, x, a, i]), B = m(() => {
-    let o = 0;
-    const b = a.length - p.current.length;
-    return p.current.push(...Array.from(new Array(b)).map((l, f) => `${r}-${a.length + f - 1}`)), c.Children.map(n, (l) => {
-      if (k(l))
-        return c.cloneElement(l, {
+    const p = K(h.current, i), s = u[p];
+    e ? x(p, s) : (h.current = p, y.current[p].focus());
+  }, [e, x, u, i]), j = v(() => {
+    let p = 0;
+    const s = u.length - d.current.length;
+    return d.current.push(...Array.from(new Array(s)).map((l, b) => `${a}-${u.length + b - 1}`)), m.Children.map(t, (l) => {
+      if (V(l))
+        return m.cloneElement(l, {
           ...l.props,
-          children: c.Children.map(l.props.children, (f, y) => _(f) ? c.cloneElement(f, {
-            className: t == null ? void 0 : t.tab,
-            classNameActive: t == null ? void 0 : t.tabActive,
-            classNameDisabled: t == null ? void 0 : t.tabDisabled,
-            ...f.props,
-            active: y === s,
-            "aria-controls": `${p.current[y]}-panel`,
-            id: `${p.current[y]}-tab`,
-            onClick: () => x(y, f.props.name)
-          }) : f),
-          className: t == null ? void 0 : t.tabList,
-          onArrowLeftKeyDown: C,
-          onArrowRightKeyDown: g
+          children: m.Children.map(l.props.children, (b, c) => W(b) ? m.cloneElement(b, {
+            className: n == null ? void 0 : n.tab,
+            classNameActive: n == null ? void 0 : n.tabActive,
+            classNameDisabled: n == null ? void 0 : n.tabDisabled,
+            ...b.props,
+            active: c === T,
+            "aria-controls": `${d.current[c]}-panel`,
+            id: `${d.current[c]}-tab`,
+            onClick: () => x(c, b.props.name),
+            onKeyDown: e ? void 0 : (I) => {
+              (I.key === "Enter" || I.key === " ") && x(c, b.props.name);
+            },
+            ref: (I) => {
+              y.current[c] = I;
+            }
+          }) : b),
+          className: n == null ? void 0 : n.tabList,
+          onArrowLeftKeyDown: O,
+          onArrowRightKeyDown: k
         });
-      if (H(l)) {
-        const f = Number.isInteger(l.props.index) ? l.props.index : o, y = c.cloneElement(l, {
-          className: t == null ? void 0 : t.tabPanel,
-          classNameActive: t == null ? void 0 : t.tabPanelActive,
-          classNameDisabled: t == null ? void 0 : t.tabPanelDisabled,
+      if (Y(l)) {
+        const b = Number.isInteger(l.props.index) ? l.props.index : p, c = m.cloneElement(l, {
+          className: n == null ? void 0 : n.tabPanel,
+          classNameActive: n == null ? void 0 : n.tabPanelActive,
+          classNameDisabled: n == null ? void 0 : n.tabPanelDisabled,
           ...l.props,
-          active: f === s,
-          disabled: i[f].disabled,
-          id: `${p.current[f]}-panel`,
-          "aria-labelledby": `${p.current[f]}-tab`
+          active: b === T,
+          disabled: i[b].disabled,
+          id: `${d.current[b]}-panel`,
+          "aria-labelledby": `${d.current[b]}-tab`
         });
-        return o += 1, y;
+        return p += 1, c;
       }
       return l;
     });
-  }, [n, t, s, x, r, g, C, a.length, i]);
-  return /* @__PURE__ */ h(q, {
-    children: B()
+  }, [e, t, n, T, x, a, k, O, u.length, i]);
+  return /* @__PURE__ */ g(J, {
+    children: j()
   });
 };
-function $(n, t) {
+function F(e, t) {
   return Number.isInteger(t) ? {
     index: t,
-    name: n[t]
+    name: e[t]
   } : t ? {
-    index: n.indexOf(t),
+    index: e.indexOf(t),
     name: t
   } : {
     index: 0,
-    name: n[0]
+    name: e[0]
   };
 }
-function U(n, t) {
-  let e = n < t.length - 1 ? n + 1 : 0;
-  for (; t[e].disabled; )
-    e = e < t.length - 1 ? e + 1 : 0;
-  return e;
+function w(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 W(n, t) {
-  let e = n > 0 ? n - 1 : t.length - 1;
-  for (; t[e].disabled; )
-    e = e > 0 ? e - 1 : t.length - 1;
-  return e;
+function K(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;
 }
 export {
-  z as Tab,
-  D as TabList,
-  G as TabPanel,
-  Z as Tabs
+  Q as Tab,
+  U as TabList,
+  X as TabPanel,
+  en as Tabs
 };
 //# sourceMappingURL=kevlar-tabs.es.js.map

dist/kevlar-tabs.umd.js

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

dist/Tab.d.ts

@@ -1,2 +0,2 @@
-import type { FunctionComponent, HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import React from 'react';
@@ -12,3 +12,11 @@ export type TabProps = {
 } & HTMLAttributes<HTMLLIElement>;
-declare const Tab: FunctionComponent<TabProps>;
-export default Tab;
+declare const TabWithRef: React.ForwardRefExoticComponent<{
+    active?: boolean | undefined;
+    children: React.ReactNode;
+    classNameActive?: string | undefined;
+    classNameDisabled?: string | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    onClick?: (() => void) | undefined;
+} & HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export default TabWithRef;

dist/Tabs.d.ts

@@ -15,2 +15,3 @@ import React from 'react';
 export interface TabsProps {
+    autoActivate?: boolean;
     children: React.ReactNode;
@@ -22,3 +23,3 @@ classNames?: TabsClassNames;
 }
-declare const Tabs: ({ children, classNames, onNameSelect, onSelect, selected, }: TabsProps) => JSX.Element;
+declare const Tabs: ({ autoActivate, children, classNames, onNameSelect, onSelect, selected, }: TabsProps) => JSX.Element;
 export default Tabs;

package.json

 {
   "name": "kevlar-tabs",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Yet another better tabs library for React",
@@ -5,0 +5,0 @@ "keywords": [

readme.md

@@ -55,2 +55,3 @@ <div align="center">
 | --- | --- | --- |
+| `autoActivate` | `boolean` | (default: `true`) If true, it prevents auto activation of tabs on focus. |
 | `selected` | `number` \| `string` | The index or the name of the selected tab. |
@@ -120,11 +121,14 @@ | `onSelect` | `function` | Callback function that is called when a tab is selected. Gives the index as a parameter. |
 
-## Shopping list
+## Features
+
+ - Disabled tabs
+ - Customizable classes
+ - Styled-Components compliance
+ - Lazy loading
+ - Keyboard navigation
+ - Auto activation
+
+## Roadmap
   
-  - [x] Disabled tabs
-  - [x] Customizable classes
-  - [x] styled-component compliance
-  - [x] Lazy loading
-  - [ ] Prevent auto-activation of tabs when navigating with arrows
-  - [x] Logo
   - [ ] Documentation site
-  - [ ] Contribution easing
+  - [ ] Contribution guide

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

Improved metrics

Total package byte prevSize

153779

increased by4.36%

Lines of code

404

increased by6.04%

Number of lines in readme file

133

increased by3.1%

No dependency changes