@kvdbil/components 13.9.1 → 13.9.2

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"),l=require("../../shared/media-queries.js"),i=require("react-collapse"),n=require("../../typography/Heading/index.js");function a(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}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 o=a(e),d=a(r);const s=d.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"),n=require("../../typography/Heading/index.js");function a(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}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 o=a(e),d=a(r);const s=d.default.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
@@ -8,16 +8,16 @@
   margin: 0.5rem 0;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: ${({justify:h})=>h};
   align-items: center;
 
-  ${({theme:v,fullWidthBorder:A,borderColor:g})=>A?`border-bottom: 3px solid ${v.colors.gray[g]};`:`& > li {
-          border-bottom: 3px solid ${v.colors.gray[g]};
+  ${({theme:h,fullWidthBorder:A,borderColor:x})=>A?`border-bottom: 3px solid ${h.colors.gray[x]};`:`& > li {
+          border-bottom: 3px solid ${h.colors.gray[x]};
         }`}
 
   ${l.mq(null,"mobileL")} {
     flex-direction: column;
-    justify-content: ${({justify:v})=>v};
+    justify-content: ${({justify:h})=>h};
   }
 `,c=d.default(n.Title)`
   margin: 0;
@@ -25,4 +25,4 @@
   display: flex;
 `,f=d.default.div`
   padding: 0.5rem 0;
-`,b=d.default.div``,m=({activeColor:v="secondary",justify:A="end",activeIndex:g,initalActive:R,children:U=[],kbNavAutoOpen:T=!0,onTabClick:I,fullWidthBorder:_=!0,borderColor:H="light6",headline:O})=>{var W,L;const q=e.Children.map(U,y=>y),[k,$]=e.useState(()=>R!=null?R:q.findIndex(y=>!y.props.isDisabled)),S=e.useRef([]),K=Boolean((L=(W=q[k])==null?void 0:W.props)==null?void 0:L.children);e.useEffect(()=>{g!==void 0&&$(g)},[g]);const M=(y,h)=>{if(y.preventDefault(),y.key!=="Enter"||T||$(h),y.key==="ArrowLeft"||y.key==="ArrowRight"){const x=T?k:h,j=y.key==="ArrowRight",E=j?x+1:0,w=j?q.length:x,B=q.slice(E,w);j||B.reverse();const D=B.findIndex(C=>!C.props.isDisabled);if(D!==-1){const C=j?x+(D+1):x-(D+1);T&&$(C),S.current[C].focus()}}};return o.default.createElement(s,null,o.default.createElement(i.UnmountClosed,{isOpened:!0},o.default.createElement(u,{fullWidthBorder:_,justify:A,role:"tablist",borderColor:H},O&&o.default.createElement(c,null,O),o.default.createElement(p,null,q.map((y,h)=>{if(!y)return null;const x=k===h;return o.default.createElement(t.default,{key:h,label:y.props.label,isDisabled:y.props.isDisabled,index:h,id:h,isActive:k===h,activeColor:v,onClick:(j,E)=>{var w,B;x||y.props.isDisabled||((B=(w=y.props).onClick)==null||B.call(w,j,E),I==null||I(j,E),((D,C)=>{D.preventDefault(),$(C)})(j,E))},onKeyUp:M,ref:j=>S.current[h]=j})}))),K&&o.default.createElement(f,null,q.map((y,h)=>{const x=y.props.children&&k===h;return o.default.createElement(b,{key:h,id:`tabpanel-${h}`,role:"tabpanel","aria-labelledby":`tab-${h}`,"aria-hidden":x?"false":"true"},x&&y.props.children)}))))};exports.Tabs=m,exports.default=m;
+`,b=d.default.div``,m=({activeColor:h="secondary",justify:A="end",activeIndex:x,initalActive:I,children:U=[],kbNavAutoOpen:T=!0,onTabClick:O,fullWidthBorder:_=!0,borderColor:H="light6",headline:R})=>{var W,L;const q=e.Children.map(U,y=>y),[k,D]=e.useState(()=>I!=null?I:q.findIndex(y=>!y.props.isDisabled)),S=e.useRef([]),K=Boolean((L=(W=q[k])==null?void 0:W.props)==null?void 0:L.children);e.useEffect(()=>{x!==void 0&&D(x)},[x]);const M=(y,v)=>{if(y.preventDefault(),y.key!=="Enter"||T||D(v),y.key==="ArrowLeft"||y.key==="ArrowRight"){const g=T?k:v,j=y.key==="ArrowRight",E=j?g+1:0,w=j?q.length:g,$=q.slice(E,w);j||$.reverse();const B=$.findIndex(C=>!C.props.isDisabled);if(B!==-1){const C=j?g+(B+1):g-(B+1);T&&D(C),S.current[C].focus()}}};return o.default.createElement(s,null,o.default.createElement(i.UnmountClosed,{isOpened:!0},o.default.createElement(u,{fullWidthBorder:_,justify:R?"space-between":A,role:"tablist",borderColor:H},R&&o.default.createElement(c,null,R),o.default.createElement(p,null,q.map((y,v)=>{if(!y)return null;const g=k===v;return o.default.createElement(t.default,{key:v,label:y.props.label,isDisabled:y.props.isDisabled,index:v,id:v,isActive:k===v,activeColor:h,onClick:(j,E)=>{var w,$;g||y.props.isDisabled||(($=(w=y.props).onClick)==null||$.call(w,j,E),O==null||O(j,E),((B,C)=>{B.preventDefault(),D(C)})(j,E))},onKeyUp:M,ref:j=>S.current[v]=j})}))),K&&o.default.createElement(f,null,q.map((y,v)=>{const g=y.props.children&&k===v;return o.default.createElement(b,{key:v,id:`tabpanel-${v}`,role:"tabpanel","aria-labelledby":`tab-${v}`,"aria-hidden":g?"false":"true"},g&&y.props.children)}))))};exports.Tabs=m,exports.default=m;

package/esm/components/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import l,{Children as A,useState as B,useRef as S,useEffect as H}from"react";import I from"./Tab.js";import a from"styled-components";import{mq as P}from"../../shared/media-queries.js";import{UnmountClosed as U}from"react-collapse";import{Title as q}from"../../typography/Heading/index.js";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 F=a.div`
+import o,{Children as A,useState as B,useRef as S,useEffect as H}from"react";import I from"./Tab.js";import a from"styled-components";import{mq as P}from"../../shared/media-queries.js";import{UnmountClosed as U}from"react-collapse";import{Title as q}from"../../typography/Heading/index.js";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 F=a.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
@@ -8,16 +8,16 @@ import l,{Children as A,useState as B,useRef as S,useEffect as H}from"react";imp
   margin: 0.5rem 0;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: ${({justify:s})=>s};
   align-items: center;
 
-  ${({theme:o,fullWidthBorder:b,borderColor:s})=>b?`border-bottom: 3px solid ${o.colors.gray[s]};`:`& > li {
-          border-bottom: 3px solid ${o.colors.gray[s]};
+  ${({theme:s,fullWidthBorder:b,borderColor:l})=>b?`border-bottom: 3px solid ${s.colors.gray[l]};`:`& > li {
+          border-bottom: 3px solid ${s.colors.gray[l]};
         }`}
 
   ${P(null,"mobileL")} {
     flex-direction: column;
-    justify-content: ${({justify:o})=>o};
+    justify-content: ${({justify:s})=>s};
   }
 `,L=a(q)`
   margin: 0;
@@ -25,4 +25,4 @@ import l,{Children as A,useState as B,useRef as S,useEffect as H}from"react";imp
   display: flex;
 `,G=a.div`
   padding: 0.5rem 0;
-`,J=a.div``,D=({activeColor:o="secondary",justify:b="end",activeIndex:s,initalActive:g,children:R=[],kbNavAutoOpen:y=!0,onTabClick:T,fullWidthBorder:$=!0,borderColor:k="light6",headline:v})=>{var E,j;const i=A.map(R,e=>e),[c,m]=B(()=>g!=null?g:i.findIndex(e=>!e.props.isDisabled)),C=S([]),w=Boolean((j=(E=i[c])==null?void 0:E.props)==null?void 0:j.children),_=(e,t)=>{e.preventDefault(),m(t)};H(()=>{typeof s!="undefined"&&m(s)},[s]);const x=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!y&&m(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const n=y?c:t,r=e.key==="ArrowRight",d=r?n+1:0,u=r?i.length:n,p=i.slice(d,u);r||p.reverse();const h=p.findIndex(f=>!f.props.isDisabled);if(h!==-1){const f=r?n+(h+1):n-(h+1);y&&m(f),C.current[f].focus()}}};return l.createElement(F,null,l.createElement(U,{isOpened:!0},l.createElement(K,{fullWidthBorder:$,justify:b,role:"tablist",borderColor:k},v&&l.createElement(L,null,v),l.createElement(z,null,i.map((e,t)=>{if(!e)return null;const n=c===t;return l.createElement(I,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:c===t,activeColor:o,onClick:(r,d)=>{var u,p;!n&&!e.props.isDisabled&&((p=(u=e.props).onClick)==null||p.call(u,r,d),T==null||T(r,d),_(r,d))},onKeyUp:x,ref:r=>C.current[t]=r})}))),w&&l.createElement(G,null,i.map((e,t)=>{const n=e.props.children&&c===t;return l.createElement(J,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":n?"false":"true"},n&&e.props.children)}))))};export{D as Tabs,D as default};
+`,J=a.div``,D=({activeColor:s="secondary",justify:b="end",activeIndex:l,initalActive:T,children:$=[],kbNavAutoOpen:y=!0,onTabClick:j,fullWidthBorder:R=!0,borderColor:k="light6",headline:h})=>{var v,E;const i=A.map($,e=>e),[c,m]=B(()=>T!=null?T:i.findIndex(e=>!e.props.isDisabled)),C=S([]),w=Boolean((E=(v=i[c])==null?void 0:v.props)==null?void 0:E.children),_=(e,t)=>{e.preventDefault(),m(t)};H(()=>{typeof l!="undefined"&&m(l)},[l]);const x=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!y&&m(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const n=y?c:t,r=e.key==="ArrowRight",d=r?n+1:0,u=r?i.length:n,p=i.slice(d,u);r||p.reverse();const g=p.findIndex(f=>!f.props.isDisabled);if(g!==-1){const f=r?n+(g+1):n-(g+1);y&&m(f),C.current[f].focus()}}};return o.createElement(F,null,o.createElement(U,{isOpened:!0},o.createElement(K,{fullWidthBorder:R,justify:h?"space-between":b,role:"tablist",borderColor:k},h&&o.createElement(L,null,h),o.createElement(z,null,i.map((e,t)=>{if(!e)return null;const n=c===t;return o.createElement(I,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:c===t,activeColor:s,onClick:(r,d)=>{var u,p;!n&&!e.props.isDisabled&&((p=(u=e.props).onClick)==null||p.call(u,r,d),j==null||j(r,d),_(r,d))},onKeyUp:x,ref:r=>C.current[t]=r})}))),w&&o.createElement(G,null,i.map((e,t)=>{const n=e.props.children&&c===t;return o.createElement(J,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":n?"false":"true"},n&&e.props.children)}))))};export{D as Tabs,D as default};

package/package.json

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