@kvdbil/components 13.8.0 → 13.9.0

package/cjs/components/Tabs/Tabs.js

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

package/cjs/components/Tabs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Tabs.js"),r=require("./Tab.js");require("react"),require("styled-components"),require("../../shared/media-queries.js"),require("react-collapse"),require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js"),exports.Tabs=e.Tabs,exports.Tab=r.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Tabs.js"),r=require("./Tab.js");require("react"),require("styled-components"),require("../../shared/media-queries.js"),require("react-collapse"),require("../../typography/Heading/index.js"),require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js"),exports.Tabs=e.Tabs,exports.Tab=r.default;

package/esm/components/Tabs/Tabs.js

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

package/esm/components/Tabs/index.js

@@ -1 +1 @@
-export{Tabs}from"./Tabs.js";export{default as Tab}from"./Tab.js";import"react";import"styled-components";import"../../shared/media-queries.js";import"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";
+export{Tabs}from"./Tabs.js";export{default as Tab}from"./Tab.js";import"react";import"styled-components";import"../../shared/media-queries.js";import"react-collapse";import"../../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";

package/package.json

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

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

@@ -3,6 +3,7 @@ import { Color } from '../../Types';
 import { ReactElement } from 'react';
 import { TabProps } from './Tab';
 import { CSSProperties } from 'styled-components';
+import theme from '../../theme';
 declare type TabElement = ReactElement<TabProps>;
 export interface TabsProps {
     activeColor?: Color;
@@ -13,6 +14,8 @@ export interface TabsProps {
     kbNavAutoOpen?: boolean;
     onTabClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     fullWidthBorder?: boolean;
+    borderColor?: keyof typeof theme.colors.gray;
+    headline?: string;
 }
-export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, borderColor, headline, }: TabsProps) => JSX.Element;
 export default Tabs;