@kvdbil/components 12.3.5 → 12.4.0

package/cjs/components/Select/index.js

@@ -10,13 +10,9 @@
   fill: ${a.default.colors.gray.dark5};
   transition: ${t.DEFAULT_TRANSITION_MS};
 
-  ${$=>$.isDisabled&&`
-    fill: ${a.default.colors.gray.light1};
-`}
+  ${$=>$.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
 
-  ${$=>$.isFocused&&`
-    fill: ${$.theme.colors.text.dark};
-`}
+  ${$=>$.isFocused&&` fill: ${$.theme.colors.text.dark}; `}
 `,g=u.default.span`
   ${l.CaptionStyle}
   display: block;
@@ -38,5 +34,6 @@
   transition: transform ${t.DEFAULT_TRANSITION_MS};
 
   transform: ${$=>$.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
+
   transform-origin: 50% 60%;
-`,y=({selectProps:{menuIsOpen:$=!1},isFocused:C=!1,isDisabled:w})=>s.default.createElement(b,{$isDisabled:w,$isFocused:C,$isMenuOpen:$,$theme:a.default}),x=({className:$,color:C="primary",forwardRef:w,hasError:D=!1,height:E,helperText:T,isDisabled:I=!1,onBlur:O=()=>null,onFocus:_=()=>null,onInputChange:R=()=>null,placeholder:A="",name:B,...F})=>{var S;const[L,j]=e.useState(!1),[z,H]=e.useState(""),M=({isSelected:k,isFocused:v,isDisabled:q})=>k?a.default.colors[C].main:q?a.default.colors.background.light:v?a.default.colors.background.gray:a.default.colors.background.light,P=((k,v)=>v?a.default.colors.error.main:k?a.default.colors.text.dark:a.default.colors.gray.light1)(L,D);return s.default.createElement(c,{className:$},F.label&&s.default.createElement(d.Label,{htmlFor:B,height:E,isFocused:L,hasValue:Boolean(F.value||z),disabled:I,theme:a.default,hasError:D},F.label),F.prefix&&s.default.createElement(h,{isDisabled:I,isFocused:L},F.prefix),s.default.createElement(n.default,{...F,inputId:B,name:B,ref:w,isDisabled:I,onInputChange:(k,v)=>{R(k,v),H(k)},placeholder:A,onFocus:k=>{j(!0),_(k)},onBlur:k=>{j(!1),O(k)},styles:{control:k=>({...k,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:P,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(I),...p(D),...f(Boolean(F.prefix))}),placeholder:k=>({...k,display:L?"static":"none"}),singleValue:k=>({...k,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:k=>({...k,padding:"8px 0"}),menu:k=>({...k,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(k,{isSelected:v,isFocused:q,isDisabled:N})=>({...k,padding:"1rem",cursor:N?"not-allowed":"pointer","&:hover":{background:M({isSelected:v,isFocused:!0,isDisabled:N})},background:M({isSelected:v,isFocused:q}),...f(Boolean(F.prefix))}),valueContainer:k=>({...k,position:"static",padding:E?E-1+"rem 0 ":0,height:E?"auto":"21px"}),clearIndicator:k=>({...k,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:y,...(S=F.components)!=null?S:{}}}),T&&s.default.createElement(g,{hasError:D},T))};exports.Select=x,exports.default=x;
+`,y=({selectProps:{menuIsOpen:$=!1},isFocused:B=!1,isDisabled:C})=>s.default.createElement(b,{$isDisabled:C,$isFocused:B,$isMenuOpen:$,$theme:a.default});function x({className:$,color:B="primary",forwardRef:C,hasError:D=!1,height:E,helperText:T,isDisabled:I=!1,onBlur:_=()=>null,onFocus:R=()=>null,onInputChange:A=()=>null,placeholder:z="",name:w,...F}){var j;const[L,S]=e.useState(!1),[W,H]=e.useState(""),M=({isSelected:k,isFocused:v,isDisabled:q})=>k?a.default.colors[B].main:q?a.default.colors.background.light:v?a.default.colors.background.gray:a.default.colors.background.light,P=((k,v)=>v?a.default.colors.error.main:k?a.default.colors.text.dark:a.default.colors.gray.light1)(L,D),N=Boolean(F.label)===!1;return s.default.createElement(c,{className:$},!N&&F.label&&s.default.createElement(d.Label,{htmlFor:w,height:E,isFocused:L,hasValue:Boolean(F.value||W),disabled:I,theme:a.default,hasError:D},F.label),F.prefix&&s.default.createElement(h,{isDisabled:I,isFocused:L},F.prefix),s.default.createElement(n.default,{...F,inputId:w,name:w,ref:C,isDisabled:I,onInputChange:(k,v)=>{A(k,v),H(k)},placeholder:z,onFocus:k=>{S(!0),R(k)},onBlur:k=>{S(!1),_(k)},styles:{control:k=>({...k,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:P,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(I),...p(D),...f(Boolean(F.prefix))}),placeholder:k=>N?{...k,color:a.default.colors.text.dark,fontWeight:600}:{...k,display:L?"static":"none"},singleValue:k=>({...k,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:k=>({...k,padding:"8px 0"}),menu:k=>({...k,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(k,{isSelected:v,isFocused:q,isDisabled:O})=>({...k,padding:"1rem",cursor:O?"not-allowed":"pointer","&:hover":{background:M({isSelected:v,isFocused:!0,isDisabled:O})},background:M({isSelected:v,isFocused:q}),...f(Boolean(F.prefix))}),valueContainer:k=>({...k,position:"static",padding:E?E-1+"rem 0 ":0,height:E?"auto":"21px"}),clearIndicator:k=>({...k,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:y,...(j=F.components)!=null?j:{}}}),T&&s.default.createElement(g,{hasError:D},T))}exports.Select=x,exports.default=x;

package/esm/components/Select/index.js

@@ -1,28 +1,24 @@
-import t,{useState as x}from"react";import T from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as k}from"../../shared/constants.js";import r from"../../theme.js";import{CaptionStyle as _}from"../../typography/BodyText/index.js";import{Label as A}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
+import n,{useState as k}from"react";import _ from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as F}from"../../shared/constants.js";import r from"../../theme.js";import{CaptionStyle as A}from"../../typography/BodyText/index.js";import{Label as M}from"../FieldLabel.js";import"../../shared/media-queries.js";const O=m.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: relative;
-`,F=e=>e&&{paddingLeft:"2.5rem"},O=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},z=e=>e&&{border:`2px solid ${r.colors.error.dark}`},H=m.div`
+`,C=e=>e&&{paddingLeft:"2.5rem"},z=e=>e&&{border:`1px solid ${r.colors.gray.light1}`,color:r.colors.gray.dark1,fill:r.colors.gray.light1},H=e=>e&&{border:`2px solid ${r.colors.error.dark}`},V=m.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
   fill: ${r.colors.gray.dark5};
-  transition: ${k};
+  transition: ${F};
 
-  ${e=>e.isDisabled&&`
-    fill: ${r.colors.gray.light1};
-`}
+  ${e=>e.isDisabled&&` fill: ${r.colors.gray.light1}; `}
 
-  ${e=>e.isFocused&&`
-    fill: ${e.theme.colors.text.dark};
-`}
-`,V=m.span`
-  ${_}
+  ${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
+`,W=m.span`
+  ${A}
   display: block;
   margin-top: 0.25rem;
   color: ${({hasError:e})=>e?r.colors.error.dark:r.colors.text.disabled};
-`,N=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),P=m(N)`
+`,N=e=>n.createElement("svg",{...e},n.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},n.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),n.createElement("use",{xlinkHref:"#icon-arrow"})),P=m(N)`
   width: 0.8rem;
   height: 0.8rem;
   margin: 0 0.5rem;
@@ -35,8 +31,9 @@ import t,{useState as x}from"react";import T from"react-select";import m from"st
     stroke: currentColor;
   }
 
-  transition: transform ${k};
+  transition: transform ${F};
 
   transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
+
   transform-origin: 50% 60%;
-`,W=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,q=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>t.createElement(P,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r}),C=({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:c=!1,onBlur:v=()=>null,onFocus:S=()=>null,onInputChange:w=()=>null,placeholder:B="",name:g,...n})=>{var h;const[d,y]=x(!1),[I,L]=x(""),E=(o,l)=>{w(o,l),L(o)},b=({isSelected:o,isFocused:l,isDisabled:f})=>o?r.colors[a].main:f?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,j=o=>{y(!0),S(o)},D=o=>{y(!1),v(o)},R=W(d,i);return t.createElement(M,{className:e},n.label&&t.createElement(A,{htmlFor:g,height:s,isFocused:d,hasValue:Boolean(n.value||I),disabled:c,theme:r,hasError:i},n.label),n.prefix&&t.createElement(H,{isDisabled:c,isFocused:d},n.prefix),t.createElement(T,{...n,inputId:g,name:g,ref:u,isDisabled:c,onInputChange:E,placeholder:B,onFocus:j,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...O(c),...z(i),...F(Boolean(n.prefix))}),placeholder:o=>({...o,display:d?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:l,isFocused:f,isDisabled:$})=>({...o,padding:"1rem",cursor:$?"not-allowed":"pointer","&:hover":{background:b({isSelected:l,isFocused:!0,isDisabled:$})},background:b({isSelected:l,isFocused:f}),...F(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:q,...(h=n.components)!=null?h:{}}}),p&&t.createElement(V,{hasError:i},p))};export{C as Select,C as default};
+`,q=(e,a)=>a?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,U=({selectProps:{menuIsOpen:e=!1},isFocused:a=!1,isDisabled:u})=>n.createElement(P,{$isDisabled:u,$isFocused:a,$isMenuOpen:e,$theme:r});function v({className:e,color:a="primary",forwardRef:u,hasError:i=!1,height:s,helperText:p,isDisabled:c=!1,onBlur:B=()=>null,onFocus:L=()=>null,onInputChange:S=()=>null,placeholder:w="",name:f,...t}){var h;const[d,b]=k(!1),[I,E]=k(""),D=(o,l)=>{S(o,l),E(o)},y=({isSelected:o,isFocused:l,isDisabled:g})=>o?r.colors[a].main:g?r.colors.background.light:l?r.colors.background.gray:r.colors.background.light,j=o=>{b(!0),L(o)},R=o=>{b(!1),B(o)},T=q(d,i),$=Boolean(t.label)===!1;return n.createElement(O,{className:e},!$&&t.label&&n.createElement(M,{htmlFor:f,height:s,isFocused:d,hasValue:Boolean(t.value||I),disabled:c,theme:r,hasError:i},t.label),t.prefix&&n.createElement(V,{isDisabled:c,isFocused:d},t.prefix),n.createElement(_,{...t,inputId:f,name:f,ref:u,isDisabled:c,onInputChange:D,placeholder:w,onFocus:j,onBlur:R,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...z(c),...H(i),...C(Boolean(t.prefix))}),placeholder:o=>$?{...o,color:r.colors.text.dark,fontWeight:600}:{...o,display:d?"static":"none"},singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:l,isFocused:g,isDisabled:x})=>({...o,padding:"1rem",cursor:x?"not-allowed":"pointer","&:hover":{background:y({isSelected:l,isFocused:!0,isDisabled:x})},background:y({isSelected:l,isFocused:g}),...C(Boolean(t.prefix))}),valueContainer:o=>({...o,position:"static",padding:s?`${s-1}rem 0 `:0,height:s?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...(h=t.components)!=null?h:{}}}),p&&n.createElement(W,{hasError:i},p))}export{v as Select,v as default};

package/package.json

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

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

@@ -9,28 +9,48 @@ export interface DropdownIndicatorProps extends IndicatorProps<OptionTypeBase, f
     isFocused: boolean;
     isDisabled: boolean;
 }
-/**
- * This component is a thin wrapper around react-select, as it handles a lot of functionality smoothly.
- * Simply with our kvdbil styling applied to it.
- **/
 declare type OptionType = {
     label: string | ReactNode;
     value: string;
 };
-export interface SelectProps extends NamedProps<OptionType> {
+export interface SelectProps<Option extends OptionType = OptionType, IsMulti extends boolean = false> extends NamedProps<Option, IsMulti> {
     autoFocus?: boolean;
     className?: string;
     color?: Color;
-    forwardRef?: RefObject<ReactSelect<OptionType>>;
+    forwardRef?: RefObject<ReactSelect<Option, IsMulti>>;
     hasError?: boolean;
     height?: number;
     helperText?: string;
     isDisabled?: boolean;
     label?: string;
-    onChange(value: ValueType<OptionType, false>, actionMeta: ActionMeta<OptionType>): void;
+    onChange(value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>): void;
     placeholder?: string;
     prefix?: ReactNode;
     name: string;
 }
-export declare const Select: ({ className, color, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps) => JSX.Element;
+/**
+ * @description
+ * This component is a thin wrapper around react-select, as it handles a lot of functionality smoothly.
+ * Simply with our kvdbil styling applied to it.
+ *
+ * @example
+ * // Example on how to create a custom option type
+ *
+ * interface OptionType {
+ *   label: string;
+ *   value: number | string;
+ * }
+ *
+ * const Component = () => {
+ *    const [value, setValue] = useState(args.value);
+ *
+ *    return (
+ *      <Select<OptionType>
+ *        onChange={setValue}
+ *        value={value}
+ *       />
+ *  );
+ * };
+ */
+export declare function Select<Option extends OptionType = OptionType, IsMulti extends boolean = false>({ className, color, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps<Option, IsMulti>): JSX.Element;
 export default Select;