@kvdbil/components 8.8.1 → 9.1.0

package/cjs/components/Message/index.js

@@ -1,16 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../typography/Heading/index.js"),n=require("../../icons/components/AlertIcon.js"),l=require("../../icons/components/CheckCircleIcon.js"),a=require("../../icons/components/CloseIcon.js"),o=require("../../icons/components/InfoIcon.js"),s=require("../../icons/components/WarningIcon.js");function c(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../shared/media-queries.js");var i=c(e),u=c(t);const d=u.default.div`
-  ${({isDeleted:x})=>x&&`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../typography/Heading/index.js"),n=require("../../icons/components/AlertIcon.js"),l=require("../../icons/components/CheckCircleIcon.js"),a=require("../../icons/components/CloseIcon.js"),o=require("../../icons/components/InfoIcon.js"),s=require("../../icons/components/WarningIcon.js");function c(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}require("../../shared/media-queries.js");var i=c(e),u=c(t);const d=u.default.div`
+  ${({isDeleted:h})=>h&&`
       opacity: 0;
       transition: opacity 0.3s;
     `}
 `,f=u.default.div`
-  display: ${({fullWidth:x})=>x?"flex":"inline-flex"};
-  ${({fullWidth:x})=>x&&"justify-content: space-between;"}
+  display: ${({fullWidth:h})=>h?"flex":"inline-flex"};
+  ${({fullWidth:h})=>h&&"justify-content: space-between;"}
   align-items: center;
   padding: 0 1.5rem;
-  box-shadow: ${({theme:x})=>x.elevations.elevation2};
+  box-shadow: ${({theme:h})=>h.elevations.elevation2};
 
-  ${({theme:x,messageType:E,inverted:j})=>{const{text:q,background:w}=((I,b,k)=>{const y=k.colors.text.dark,v=k.colors.background.light;switch(I){case"info":return{text:b?k.colors.info.dark:y,background:b?v:k.colors.info.lighter};case"success":return{text:b?k.colors.success.dark:y,background:b?v:k.colors.success.lighter};case"warning":return{text:b?k.colors.warning.dark:y,background:b?v:k.colors.warning.lighter};case"error":return{text:b?k.colors.error.dark:y,background:b?v:k.colors.error.lighter};case"text":default:return{text:b?k.colors.text.light:y,background:b?k.colors.background.dark:v}}})(E,j,x);return`
+  ${({textCenter:h})=>h&&`
+      justify-content: center;
+    `}
+
+  ${({theme:h,messageType:j,inverted:E})=>{const{text:q,background:w}=((C,y,k)=>{const b=k.colors.text.dark,v=k.colors.background.light;switch(C){case"info":return{text:y?k.colors.info.dark:b,background:y?v:k.colors.info.lighter};case"success":return{text:y?k.colors.success.dark:b,background:y?v:k.colors.success.lighter};case"warning":return{text:y?k.colors.warning.dark:b,background:y?v:k.colors.warning.lighter};case"error":return{text:y?k.colors.error.dark:b,background:y?v:k.colors.error.lighter};case"text":default:return{text:y?k.colors.text.light:b,background:y?k.colors.background.dark:v}}})(j,E,h);return`
       color: ${q};
       background-color: ${w};
     `}}
@@ -22,13 +26,13 @@
 `,p=u.default.span`
   display: flex;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
   font-size: 1.5rem;
-`,h=u.default.span`
+`,x=u.default.span`
   display: flex;
   align-items: center;
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   }
-`;exports.default=({children:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};
+`;exports.default=({children:h,type:j,withIcon:E=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:C=!1,textCenter:y=!1,...k})=>{const b=e.useRef(null),[v,I]=e.useState(!1);return i.default.createElement(d,{isDeleted:v},i.default.createElement(f,{messageType:j,fullWidth:w,inverted:C,textCenter:y,role:"alert",ref:b,...k},i.default.createElement(m,null,E&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(j)),i.default.createElement(g,null,h)),q&&i.default.createElement(x,{onClick:$=>{$.stopPropagation(),I(!0),setTimeout(()=>{b.current&&b.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};

package/cjs/components/Tabs/Tabs.js

@@ -12,10 +12,10 @@
   flex-wrap: wrap;
   border-bottom: 3px solid ${({theme:y})=>y.colors.gray.light6};
 
-  ${l.mq("mobileL")} {
+  ${l.mq("mobileM")} {
     flex-direction: row;
     justify-content: ${({justify:y})=>y};
   }
 `,u=s.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),L=(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:L,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=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;

package/esm/components/Message/index.js

@@ -1,34 +1,38 @@
-import n,{useRef as f,useState as d}from"react";import s from"styled-components";import{TinyTitleRegular as k}from"../../typography/Heading/index.js";import x from"../../icons/components/AlertIcon.js";import I from"../../icons/components/CheckCircleIcon.js";import C from"../../icons/components/CloseIcon.js";import b from"../../icons/components/InfoIcon.js";import y from"../../icons/components/WarningIcon.js";import"../../shared/media-queries.js";const E=(r,o,e)=>{const t=e.colors.text.dark,c=e.colors.background.light;switch(r){case"info":return{text:o?e.colors.info.dark:t,background:o?c:e.colors.info.lighter};case"success":return{text:o?e.colors.success.dark:t,background:o?c:e.colors.success.lighter};case"warning":return{text:o?e.colors.warning.dark:t,background:o?c:e.colors.warning.lighter};case"error":return{text:o?e.colors.error.dark:t,background:o?c:e.colors.error.lighter};case"text":default:return{text:o?e.colors.text.light:t,background:o?e.colors.background.dark:c}}},j=r=>{switch(r){case"success":return n.createElement(I,null);case"warning":return n.createElement(y,null);case"error":return n.createElement(x,null);case"info":case"text":default:return n.createElement(b,null)}},w=s.div`
-  ${({isDeleted:r})=>r&&`
+import n,{useRef as d,useState as k}from"react";import s from"styled-components";import{TinyTitleRegular as x}from"../../typography/Heading/index.js";import I from"../../icons/components/AlertIcon.js";import C from"../../icons/components/CheckCircleIcon.js";import y from"../../icons/components/CloseIcon.js";import b from"../../icons/components/InfoIcon.js";import E from"../../icons/components/WarningIcon.js";import"../../shared/media-queries.js";const j=(e,o,r)=>{const t=r.colors.text.dark,c=r.colors.background.light;switch(e){case"info":return{text:o?r.colors.info.dark:t,background:o?c:r.colors.info.lighter};case"success":return{text:o?r.colors.success.dark:t,background:o?c:r.colors.success.lighter};case"warning":return{text:o?r.colors.warning.dark:t,background:o?c:r.colors.warning.lighter};case"error":return{text:o?r.colors.error.dark:t,background:o?c:r.colors.error.lighter};case"text":default:return{text:o?r.colors.text.light:t,background:o?r.colors.background.dark:c}}},w=e=>{switch(e){case"success":return n.createElement(C,null);case"warning":return n.createElement(E,null);case"error":return n.createElement(I,null);case"info":case"text":default:return n.createElement(b,null)}},$=s.div`
+  ${({isDeleted:e})=>e&&`
       opacity: 0;
       transition: opacity 0.3s;
     `}
 `,W=s.div`
-  display: ${({fullWidth:r})=>r?"flex":"inline-flex"};
-  ${({fullWidth:r})=>r&&"justify-content: space-between;"}
+  display: ${({fullWidth:e})=>e?"flex":"inline-flex"};
+  ${({fullWidth:e})=>e&&"justify-content: space-between;"}
   align-items: center;
   padding: 0 1.5rem;
-  box-shadow: ${({theme:r})=>r.elevations.elevation2};
+  box-shadow: ${({theme:e})=>e.elevations.elevation2};
 
-  ${({theme:r,messageType:o,inverted:e})=>{const{text:t,background:c}=E(o,e,r);return`
+  ${({textCenter:e})=>e&&`
+      justify-content: center;
+    `}
+
+  ${({theme:e,messageType:o,inverted:r})=>{const{text:t,background:c}=j(o,r,e);return`
       color: ${t};
       background-color: ${c};
     `}}
-`,$=s.div`
+`,h=s.div`
   display: flex;
-`,h=s(k)`
+`,T=s(x)`
   padding: 0.75rem 0;
   margin: 0;
-`,T=s.span`
+`,D=s.span`
   display: flex;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
   font-size: 1.5rem;
-`,D=s.span`
+`,R=s.span`
   display: flex;
   align-items: center;
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   }
-`,R=({children:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};
+`,A=({children:e,type:o,withIcon:r=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,textCenter:i=!1,...u})=>{const a=d(null),[p,g]=k(!1),m=f=>{f.stopPropagation(),g(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement($,{isDeleted:p},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,textCenter:i,role:"alert",ref:a,...u},n.createElement(h,null,r&&n.createElement(D,null,w(o)),n.createElement(T,null,e)),t&&n.createElement(R,{onClick:m,"aria-label":"Close"},n.createElement(y,null))))};export{A as default};

package/esm/components/Tabs/Tabs.js

@@ -12,7 +12,7 @@ import i,{Children as R,useState as k,useRef as I}from"react";import $ from"./Ta
   flex-wrap: wrap;
   border-bottom: 3px solid ${({theme:o})=>o.colors.gray.light6};
 
-  ${B("mobileL")} {
+  ${B("mobileM")} {
     flex-direction: row;
     justify-content: ${({justify:o})=>o};
   }

package/package.json

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

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

@@ -7,6 +7,7 @@ export declare type Props = {
     isDeletable?: boolean;
     fullWidth?: boolean;
     inverted?: boolean;
+    textCenter?: boolean;
 } & ComponentPropsWithoutRef<'div'>;
-declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
+declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, textCenter, ...props }: Props) => JSX.Element;
 export default Message;

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

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import ReactSelect, { IndicatorProps, NamedProps, OptionTypeBase } from 'react-select';
+import ReactSelect, { ActionMeta, IndicatorProps, NamedProps, OptionTypeBase, ValueType } from 'react-select';
 import { Color } from '../../Types';
 export interface DropdownIndicatorProps extends IndicatorProps<OptionTypeBase, false> {
     selectProps: {
@@ -27,7 +27,7 @@ export interface SelectProps extends NamedProps<OptionType> {
     helperText?: string;
     isDisabled?: boolean;
     label?: string;
-    onChange(...args: any): void;
+    onChange(value: ValueType<OptionType, false>, actionMeta: ActionMeta<OptionType>): void;
     placeholder?: string;
     prefix?: ReactNode;
     name: string;