@kvdbil/components 8.4.5 → 8.4.6

package/cjs/components/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Tab.js"),r=require("styled-components"),i=require("../../shared/media-queries.js"),l=require("react-collapse");function n(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js");var a=n(e),s=n(r);const o=s.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Tab.js"),r=require("styled-components"),l=require("../../shared/media-queries.js"),i=require("react-collapse");function n(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js");var a=n(e),s=n(r);const o=s.default.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
@@ -12,10 +12,10 @@
   flex-wrap: wrap;
   border-bottom: 3px solid ${({theme:y})=>y.colors.gray.light6};
 
-  ${i.mq("mobileL")} {
+  ${l.mq("mobileL")} {
     flex-direction: row;
     justify-content: ${({justify:y})=>y};
   }
 `,u=s.default.div`
   padding: 0.5rem 0;
-`,c=s.default.div``,p=({activeColor:y="secondary",justify:$="end",initalActive:D,children:R=[],kbNavAutoOpen:v=!0,onTabClick:T=()=>{}})=>{const x=e.Children.map(R,f=>f),[q,g]=e.useState(()=>D!=null?D:x.findIndex(f=>!f.props.isDisabled)),E=e.useRef([]),B=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||v||g(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const b=v?q:m,h=f.key==="ArrowRight",k=h?b+1:0,w=h?x.length:b,A=x.slice(k,w);h||A.reverse();const C=A.findIndex(j=>!j.props.isDisabled);if(C!==-1){const j=h?b+(C+1):b-(C+1);v&&g(j),E.current[j].focus()}}};return a.default.createElement(o,null,a.default.createElement(l.UnmountClosed,{isOpened:!0},a.default.createElement(d,{justify:$,role:"tablist"},x.map((f,m)=>f?a.default.createElement(t.default,{key:m,label:f.props.label,isDisabled:f.props.isDisabled,index:m,id:m,isActive:q===m,activeColor:y,onClick:(b,h)=>{f.props.isDisabled||(T(b,h),((k,w)=>{k.preventDefault(),g(w)})(b,h))},onKeyUp:B,ref:b=>E.current[m]=b}):null)),a.default.createElement(u,null,x.map((f,m)=>{const b=f.props.children&&q===m;return a.default.createElement(c,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":b?"false":"true"},b&&f.props.children)}))))};exports.Tabs=p,exports.default=p;
+`,p=s.default.div``,c=({activeColor:y="secondary",justify:R="end",initalActive:D,children:T=[],kbNavAutoOpen:q=!0,onTabClick:O=()=>{}})=>{var E,A;const v=e.Children.map(T,f=>f),[x,g]=e.useState(()=>D!=null?D:v.findIndex(f=>!f.props.isDisabled)),$=e.useRef([]),I=Boolean((A=(E=v[x])==null?void 0:E.props)==null?void 0:A.children),L=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||q||g(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const b=q?x:m,h=f.key==="ArrowRight",k=h?b+1:0,w=h?v.length:b,B=v.slice(k,w);h||B.reverse();const C=B.findIndex(j=>!j.props.isDisabled);if(C!==-1){const j=h?b+(C+1):b-(C+1);q&&g(j),$.current[j].focus()}}};return a.default.createElement(o,null,a.default.createElement(i.UnmountClosed,{isOpened:!0},a.default.createElement(d,{justify:R,role:"tablist"},v.map((f,m)=>f?a.default.createElement(t.default,{key:m,label:f.props.label,isDisabled:f.props.isDisabled,index:m,id:m,isActive:x===m,activeColor:y,onClick:(b,h)=>{f.props.isDisabled||(O(b,h),((k,w)=>{k.preventDefault(),g(w)})(b,h))},onKeyUp:L,ref:b=>$.current[m]=b}):null)),I&&a.default.createElement(u,null,v.map((f,m)=>{const b=f.props.children&&x===m;return a.default.createElement(p,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":b?"false":"true"},b&&f.props.children)}))))};exports.Tabs=c,exports.default=c;

package/esm/components/Tabs/Tabs.js

@@ -1,8 +1,8 @@
-import s,{Children as w,useState as x,useRef as R}from"react";import k from"./Tab.js";import a from"styled-components";import{mq as v}from"../../shared/media-queries.js";import{UnmountClosed as I}from"react-collapse";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";const $=a.div`
+import i,{Children as R,useState as k,useRef as I}from"react";import $ from"./Tab.js";import c from"styled-components";import{mq as B}from"../../shared/media-queries.js";import{UnmountClosed as _}from"react-collapse";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";const A=c.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,A=a.ul`
+`,P=c.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
@@ -10,12 +10,12 @@ import s,{Children as w,useState as x,useRef as R}from"react";import k from"./Ta
   flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
-  border-bottom: 3px solid ${({theme:i})=>i.colors.gray.light6};
+  border-bottom: 3px solid ${({theme:o})=>o.colors.gray.light6};
 
-  ${v("mobileL")} {
+  ${B("mobileL")} {
     flex-direction: row;
-    justify-content: ${({justify:i})=>i};
+    justify-content: ${({justify:o})=>o};
   }
-`,B=a.div`
+`,S=c.div`
   padding: 0.5rem 0;
-`,P=a.div``,y=({activeColor:i="secondary",justify:h="end",initalActive:u,children:g=[],kbNavAutoOpen:c=!0,onTabClick:T=()=>{}})=>{const o=w.map(g,e=>e),[d,p]=x(()=>u!=null?u:o.findIndex(e=>!e.props.isDisabled)),f=R([]),j=(e,t)=>{e.preventDefault(),p(t)},E=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!c&&p(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const r=c?d:t,n=e.key==="ArrowRight",C=n?r+1:0,D=n?o.length:r,b=o.slice(C,D);n||b.reverse();const m=b.findIndex(l=>!l.props.isDisabled);if(m!==-1){const l=n?r+(m+1):r-(m+1);c&&p(l),f.current[l].focus()}}};return s.createElement($,null,s.createElement(I,{isOpened:!0},s.createElement(A,{justify:h,role:"tablist"},o.map((e,t)=>e?s.createElement(k,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:d===t,activeColor:i,onClick:(r,n)=>{e.props.isDisabled||(T(r,n),j(r,n))},onKeyUp:E,ref:r=>f.current[t]=r}):null)),s.createElement(B,null,o.map((e,t)=>{const r=e.props.children&&d===t;return s.createElement(P,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":r?"false":"true"},r&&e.props.children)}))))};export{y as Tabs,y as default};
+`,U=c.div``,g=({activeColor:o="secondary",justify:T="end",initalActive:u,children:v=[],kbNavAutoOpen:d=!0,onTabClick:j=()=>{}})=>{var f,b;const s=R.map(v,e=>e),[l,p]=k(()=>u!=null?u:s.findIndex(e=>!e.props.isDisabled)),h=I([]),C=Boolean((b=(f=s[l])==null?void 0:f.props)==null?void 0:b.children),E=(e,t)=>{e.preventDefault(),p(t)},D=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!d&&p(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const r=d?l:t,n=e.key==="ArrowRight",w=n?r+1:0,x=n?s.length:r,y=s.slice(w,x);n||y.reverse();const m=y.findIndex(a=>!a.props.isDisabled);if(m!==-1){const a=n?r+(m+1):r-(m+1);d&&p(a),h.current[a].focus()}}};return i.createElement(A,null,i.createElement(_,{isOpened:!0},i.createElement(P,{justify:T,role:"tablist"},s.map((e,t)=>e?i.createElement($,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:l===t,activeColor:o,onClick:(r,n)=>{e.props.isDisabled||(j(r,n),E(r,n))},onKeyUp:D,ref:r=>h.current[t]=r}):null)),C&&i.createElement(S,null,s.map((e,t)=>{const r=e.props.children&&l===t;return i.createElement(U,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":r?"false":"true"},r&&e.props.children)}))))};export{g as Tabs,g as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "8.4.5",
+  "version": "8.4.6",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Tabs/Tab.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Color } from '../../Types';
 import { ReactNode } from 'react';
 export interface TabProps {
-    label: string;
+    label: ReactNode;
     isDisabled?: boolean;
     isActive?: boolean;
     activeColor?: Color;