@kvdbil/components 9.6.0 → 9.7.0

package/cjs/components/Stack/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function o(l){return l&&typeof l=="object"&&"default"in l?l:{default:l}}var i=o(e);const n=l=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[l],s=(l,f)=>t.mqSizesOrder[l]<t.mqSizesOrder[f]?-1:t.mqSizesOrder[l]>t.mqSizesOrder[f]?1:0,c=o(r).default("div")(({ownerState:{direction:l,spacing:f}})=>typeof l=="string"&&typeof f=="number"?{display:"flex",flexDirection:l,"> *:not(:first-child)":{margin:0,[`margin${n(l)}`]:`${f}rem`}}:typeof l=="object"||typeof f=="object"?{...((a,u)=>{var m,y;const j=typeof a=="object"?Object.keys(a).sort(s):Object.keys(u).sort(s);let d={};for(const p of j){const b=typeof a=="object"?(m=a[p])!=null?m:"row":a,g=n(b),q=typeof u=="object"?(y=u[p])!=null?y:1:u,v={[t.mq(p)]:{display:"flex",flexDirection:b,"> *:not(:first-child)":{margin:0,[`margin${g}`]:`${q}rem`}}};d={...d,...v}}return{...d}})(l,f!=null?f:1)}:{display:"flex"});exports.default=({children:l,direction:f,spacing:a=1})=>{const u={direction:f,spacing:a};return i.default.createElement(c,{ownerState:u},l)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function o(l){return l&&typeof l=="object"&&"default"in l?l:{default:l}}var i=o(e);const n=l=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[l],s=(l,f)=>t.mqSizesOrder[l]<t.mqSizesOrder[f]?-1:t.mqSizesOrder[l]>t.mqSizesOrder[f]?1:0,c=o(r).default("div")(({ownerState:{direction:l,spacing:f}})=>typeof l=="string"&&typeof f=="number"?{display:"flex",flexDirection:l,"> *:not(:first-child)":{margin:0,[`margin${n(l)}`]:`${f}rem`}}:typeof l=="object"||typeof f=="object"?{...((u,a)=>{var p,y;const j=typeof u=="object"?Object.keys(u).sort(s):Object.keys(a).sort(s);let d={};for(const m of j){const b=typeof u=="object"?(p=u[m])!=null?p:"row":u,g=n(b),q=typeof a=="object"?(y=a[m])!=null?y:1:a,v={[t.mq(m)]:{display:"flex",flexDirection:b,"> *:not(:first-child)":{margin:0,[`margin${g}`]:`${q}rem`}}};d={...d,...v}}return{...d}})(l,f!=null?f:1)}:{display:"flex"});exports.default=({children:l,direction:f="column",spacing:u=1})=>{const a={direction:f,spacing:u};return i.default.createElement(c,{ownerState:a},l)};

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(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");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`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
@@ -11,14 +11,14 @@
   align-items: center;
   flex-wrap: wrap;
 
-  ${({theme:b,fullWidthBorder:g})=>g?`border-bottom: 3px solid ${b.colors.gray.light6};`:`& > li {
-          border-bottom: 3px solid ${b.colors.gray.light6};
+  ${({theme:m,fullWidthBorder:q})=>q?`border-bottom: 3px solid ${m.colors.gray.light6};`:`& > li {
+          border-bottom: 3px solid ${m.colors.gray.light6};
         }`}
 
   ${l.mq("mobileM")} {
     flex-direction: row;
-    justify-content: ${({justify:b})=>b};
+    justify-content: ${({justify:m})=>m};
   }
 `,u=o.default.div`
   padding: 0.5rem 0;
-`,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;
+`,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;

package/esm/components/Stack/index.js

@@ -1 +1 @@
-import p from"react";import b from"styled-components";import{mq as k,mqSizesOrder as n}from"../../shared/media-queries.js";const f=t=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[t],a=(t,e)=>n[t]<n[e]?-1:n[t]>n[e]?1:0,j=(t,e)=>{var o,r;const m=typeof t=="object"?Object.keys(t).sort(a):Object.keys(e).sort(a);let s={};for(const l of m){const c=typeof t=="object"?(o=t[l])!=null?o:"row":t,u=f(c),y=typeof e=="object"?(r=e[l])!=null?r:1:e,i={[k(l)]:{display:"flex",flexDirection:c,"> *:not(:first-child)":{margin:0,[`margin${u}`]:`${y}rem`}}};s={...s,...i}}return{...s}},d=({ownerState:{direction:t,spacing:e}})=>typeof t=="string"&&typeof e=="number"?{display:"flex",flexDirection:t,"> *:not(:first-child)":{margin:0,[`margin${f(t)}`]:`${e}rem`}}:typeof t=="object"||typeof e=="object"?{...j(t,e!=null?e:1)}:{display:"flex"},S=b("div")(d),w=({children:t,direction:e,spacing:o=1})=>{const r={direction:e,spacing:o};return p.createElement(S,{ownerState:r},t)};export{w as default};
+import p from"react";import b from"styled-components";import{mq as k,mqSizesOrder as n}from"../../shared/media-queries.js";const f=t=>({row:"Left","row-reverse":"Right",column:"Top","column-reverse":"Bottom"})[t],a=(t,e)=>n[t]<n[e]?-1:n[t]>n[e]?1:0,j=(t,e)=>{var o,r;const m=typeof t=="object"?Object.keys(t).sort(a):Object.keys(e).sort(a);let s={};for(const l of m){const c=typeof t=="object"?(o=t[l])!=null?o:"row":t,u=f(c),y=typeof e=="object"?(r=e[l])!=null?r:1:e,i={[k(l)]:{display:"flex",flexDirection:c,"> *:not(:first-child)":{margin:0,[`margin${u}`]:`${y}rem`}}};s={...s,...i}}return{...s}},d=({ownerState:{direction:t,spacing:e}})=>typeof t=="string"&&typeof e=="number"?{display:"flex",flexDirection:t,"> *:not(:first-child)":{margin:0,[`margin${f(t)}`]:`${e}rem`}}:typeof t=="object"||typeof e=="object"?{...j(t,e!=null?e:1)}:{display:"flex"},S=b("div")(d),w=({children:t,direction:e="column",spacing:o=1})=>{const r={direction:e,spacing:o};return p.createElement(S,{ownerState:r},t)};export{w as default};

package/esm/components/Tabs/Tabs.js

@@ -1,8 +1,8 @@
-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`
+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`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,S=c.ul`
+`,q=d.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
@@ -11,14 +11,14 @@ import i,{Children as $,useState as k,useRef as I}from"react";import B from"./Ta
   align-items: center;
   flex-wrap: wrap;
 
-  ${({theme:o,fullWidthBorder:d})=>d?`border-bottom: 3px solid ${o.colors.gray.light6};`:`& > li {
+  ${({theme:o,fullWidthBorder:p})=>p?`border-bottom: 3px solid ${o.colors.gray.light6};`:`& > li {
           border-bottom: 3px solid ${o.colors.gray.light6};
         }`}
 
-  ${_("mobileM")} {
+  ${P("mobileM")} {
     flex-direction: row;
     justify-content: ${({justify:o})=>o};
   }
-`,U=c.div`
+`,F=d.div`
   padding: 0.5rem 0;
-`,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};
+`,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};

package/package.json

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

package/types/components/Stack/index.d.ts

@@ -22,9 +22,9 @@ declare type ResponsiveSpacing = {
 };
 interface OwnerState {
     direction: ResponsiveDirection | FlexDirection;
-    spacing?: ResponsiveSpacing | number;
+    spacing: ResponsiveSpacing | number;
 }
-export interface StackProps extends OwnerState {
+export interface StackProps extends Partial<OwnerState> {
     children: React.ReactNode;
 }
 declare const Stack: ({ children, direction, spacing }: StackProps) => JSX.Element;

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

@@ -7,11 +7,12 @@ declare type TabElement = ReactElement<TabProps>;
 export interface TabsProps {
     activeColor?: Color;
     justify?: CSSProperties['justifyContent'];
+    activeIndex?: number;
     initalActive?: number;
     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, fullWidthBorder, }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, }: TabsProps) => JSX.Element;
 export default Tabs;