@kvdbil/components 9.5.0 → 9.6.0

package/cjs/components/Tabs/Tabs.js

@@ -1,8 +1,8 @@
-"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`
+"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;
   }
-`,d=s.default.ul`
+`,d=o.default.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
@@ -10,12 +10,15 @@
   flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
-  border-bottom: 3px solid ${({theme:y})=>y.colors.gray.light6};
+
+  ${({theme:b,fullWidthBorder:g})=>g?`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:y})=>y};
+    justify-content: ${({justify:b})=>b};
   }
-`,u=s.default.div`
+`,u=o.default.div`
   padding: 0.5rem 0;
-`,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),M=(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:M,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;
+`,p=o.default.div``,c=({activeColor:b="secondary",justify:g="end",initalActive:D,children:T=[],kbNavAutoOpen:q=!0,onTabClick:O=()=>{},fullWidthBorder:W=!0})=>{var E,$;const v=e.Children.map(T,f=>f),[x,k]=e.useState(()=>D!=null?D:v.findIndex(f=>!f.props.isDisabled)),A=e.useRef([]),I=Boolean(($=(E=v[x])==null?void 0:E.props)==null?void 0:$.children),M=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||q||k(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const y=q?x:m,h=f.key==="ArrowRight",w=h?y+1:0,B=h?v.length:y,R=v.slice(w,B);h||R.reverse();const C=R.findIndex(j=>!j.props.isDisabled);if(C!==-1){const j=h?y+(C+1):y-(C+1);q&&k(j),A.current[j].focus()}}};return a.default.createElement(s,null,a.default.createElement(i.UnmountClosed,{isOpened:!0},a.default.createElement(d,{fullWidthBorder:W,justify:g,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:b,onClick:(y,h)=>{f.props.isDisabled||(O(y,h),((w,B)=>{w.preventDefault(),k(B)})(y,h))},onKeyUp:M,ref:y=>A.current[m]=y}):null)),I&&a.default.createElement(u,null,v.map((f,m)=>{const y=f.props.children&&x===m;return a.default.createElement(p,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":y?"false":"true"},y&&f.props.children)}))))};exports.Tabs=c,exports.default=c;

package/esm/components/Tabs/Tabs.js

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

package/package.json

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

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

@@ -11,6 +11,7 @@ export interface TabsProps {
     children: TabElement | TabElement[];
     kbNavAutoOpen?: boolean;
     onTabClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
+    fullWidthBorder?: boolean;
 }
-export declare const Tabs: ({ activeColor, justify, initalActive, children, kbNavAutoOpen, onTabClick, }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ activeColor, justify, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, }: TabsProps) => JSX.Element;
 export default Tabs;