@kvdbil/components 10.1.0 → 10.1.1

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

package/esm/components/Tabs/Tabs.js

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

package/package.json

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