kwant-ui 3.51.0-dev.21 → 3.51.0-dev.22

package/dist/index.es.js

@@ -1345,14 +1345,9 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
     }
   }
 `,Ut=n.div`
-  padding: 12px;
+  padding: 10px 12px;
   width: auto;
-  font-family: 'Poppins', sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  height: 40px;
-  line-height: 20px;
+  height: auto;
   color: ${e=>e.theme.primary.primary100};
 
   &:hover {
@@ -1421,7 +1416,7 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
   position: absolute;
   bottom: ${e=>e.bottomOffset};
   right: ${e=>e.rightOffset};
-`,ar={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},cr=r=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:h="cover",avatarButton:v,avatarButtonBottomOffset:u=0,avatarButtonRightOffset:g=0,onClick:m}=r,[d,f]=p(null),[_,w]=p(!1),b=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),y="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),x=c in ar?ar[c]:{avatarSize:c,fontSize:i},Z=()=>w(!0),O=()=>w(!1);return l((()=>{if(n){const e=new Image;e.src=n,e.onload=Z,e.onerror=O,f(e)}else O()}),[n]),t(Jt,{children:[e(er,{background:y,size:Se(x.avatarSize),onClick:()=>{m?.(r)},hasOnlyText:!_,fontColor:s,children:_?e(tr,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(rr,{fontSize:Se(i||x.fontSize),fontColor:s,children:b})}),e(nr,{rightOffset:Se(g,"0px"),bottomOffset:Se(u,"0px"),children:v})]})},ir=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(qt,{selected:c,children:[e(cr,{src:a,alt:n,size:"xs",...i}),e(Gt,{category:"body2",weight:"medium",color:L.grey.grey900,children:r.label}),c&&e(at,{icon:"check",width:20,height:20,fill:L.green.green400})]})},or=r=>{const{maxHeight:n=298,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:y,itemComponent:x,showSeparator:Z=!0,collapseOnSelect:O=!0,inputLeftSection:M,inputRightSection:E,searchPlaceholder:H="Search",searchable:j=!0,showScrollbar:V=!0,targetRef:C,onMouseEnter:A,onMouseLeave:L,onClose:z,searchAutofocus:B=!0,addable:k,selectInputValue:S,avatarProps:R,selectedValue:D,withInput:I,isDynamicOptionPosition:T=!1,dropdownWidth:N}=r,[F,Q]=p(""),[$,Y]=p([]),U=u(null),W=u(null),X=u(null),K=u([]),q=Ct(F,400),G=F?$:d,J=w((()=>F&&0===$.length||!k&&!j&&0===d.length),[F,$,d,k,j]),ee=G.some((e=>"image"in e)),{currentOffsets:te,isOpeningUpward:re,renderDropDown:ne}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[l,h]=p(!1),[v,u]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),g=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),v=l.y,p=c-v,g=Math.min(n+(i?60:0),o*s+(i?60:0)),m=Math.min(200,g);let d;d=v>c/2?{offsetTop:"",offsetBottom:l.height-(i?14:0)+"px",maxHeight:Math.min(n,v)}:p>=m?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,p)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,v)},u(d),h(!0)}),[e,t,r,n,a,i,o,s]);_((()=>{if(!r||!e)return;r&&g();const t=()=>{g()},i=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",i),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",i),h(!1),u({offsetTop:a,offsetBottom:c,maxHeight:n})}}),[r,e,o,n,t,i,s,g]);const m=e?v:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:l}})({isDynamicOptionPosition:T,targetRef:C,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:j,dataLength:G.length,itemHeight:50}),ae=e=>{Q(e.target.value)},ce=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),y?.(e,t),O&&z?.()},ie=(e,t)=>r=>{"Enter"===r.key&&ce(e,t)(r)},oe=(e,t)=>{const r={onKeyDown:ie(e,t)};return j||I?{...r,onMouseDown:ce(e,t)}:{...r,onClick:ce(e,t)}};return l((()=>{const e=F.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));Y(e)}else Y(d)}),[q,F,d]),l((()=>{g?.(v),m?.(),Q(""),v&&j&&W.current&&setTimeout((()=>W.current?.focus()),10)}),[v]),e(Ft,{opened:v,onClose:z,width:N||Se(a),offsetTop:te.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:te.offsetBottom,zIndex:h,targetRef:C,onMouseEnter:A,onMouseLeave:L,children:(v&&ne||!T)&&t(Qt,{expandedHeight:te.maxHeight,children:[j&&!re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})}),J?e(Xt,{children:e(Me,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t(Yt,{className:"select_item_container",separator:Z,showScrollbar:V,ref:U,children:[e(P,{viewportRef:U,items:G,itemMargin:10,itemSize:50,overscan:6,ref:X,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{K.current[r]=e};return x?e(Wt,{isSelected:t?.isSelected,ref:n,...oe(t,r),children:b(x,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):ee?e(Wt,{ref:n,...oe(t,r),children:e(ir,{...t,avatarProps:R,selected:t.value===D})},`${t.label}${t.value}+${r}`):e(Ut,{ref:n,...oe(t,r),role:"button",isSelected:t?.isSelected,children:t.label},`${t.label}${t.value}+${r}`)}}),k&&0===G.length&&e(Ut,{...j||I?{onMouseDown:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)}:{onClick:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)},role:"button",children:t(Kt,{children:[e(Me,{category:"body1",weight:"semiBold",children:"Add:"}),t(Me,{children:[" ",S]})]})})]}),j&&re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})})]})})},sr=n.div`
+`,ar={xxs:{avatarSize:24,fontSize:10},xs:{avatarSize:32,fontSize:14},sm:{avatarSize:48,fontSize:18},md:{avatarSize:64,fontSize:22},lg:{avatarSize:88,fontSize:26},xl:{avatarSize:128,fontSize:30},xxl:{avatarSize:180,fontSize:60}},cr=r=>{const{src:n,alt:a,size:c="md",fontSize:i,backgroundColor:o="random",fontColor:s="white",objectFit:h="cover",avatarButton:v,avatarButtonBottomOffset:u=0,avatarButtonRightOffset:g=0,onClick:m}=r,[d,f]=p(null),[_,w]=p(!1),b=((e="")=>{const t=e?.trim()?.split(" ");if(t.length>1){const[e,...r]=t;return`${e[0]}${r?.pop()?.[0]}`.toUpperCase()}const r=t[0];return r[0]?.toUpperCase()||""})(a),y="random"!==o?o:function(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);let r="#";for(let e=0;e<3;e++)r+=("00"+(t>>8*e&255).toString(16)).substr(-2);return r}(a),x=c in ar?ar[c]:{avatarSize:c,fontSize:i},Z=()=>w(!0),O=()=>w(!1);return l((()=>{if(n){const e=new Image;e.src=n,e.onload=Z,e.onerror=O,f(e)}else O()}),[n]),t(Jt,{children:[e(er,{background:y,size:Se(x.avatarSize),onClick:()=>{m?.(r)},hasOnlyText:!_,fontColor:s,children:_?e(tr,{src:d?.currentSrc,alt:a,objectFit:h,loading:"lazy"}):e(rr,{fontSize:Se(i||x.fontSize),fontColor:s,children:b})}),e(nr,{rightOffset:Se(g,"0px"),bottomOffset:Se(u,"0px"),children:v})]})},ir=r=>{const{label:n="",image:a="",selected:c,avatarProps:i}=r;return t(qt,{selected:c,children:[e(cr,{src:a,alt:n,size:"xs",...i}),e(Gt,{category:"body2",weight:"medium",color:L.grey.grey900,children:r.label}),c&&e(at,{icon:"check",width:20,height:20,fill:L.green.green400})]})},or=r=>{const{maxHeight:n=298,width:a=350,offsetTop:c="60px",offsetLeft:i,offsetRight:o,offsetBottom:s="0px",zIndex:h,opened:v,onChange:g,onDropdownVisibilityChange:m,data:d=[],onSelect:y,itemComponent:x,showSeparator:Z=!0,collapseOnSelect:O=!0,inputLeftSection:M,inputRightSection:E,searchPlaceholder:H="Search",searchable:j=!0,showScrollbar:V=!0,targetRef:C,onMouseEnter:A,onMouseLeave:L,onClose:z,searchAutofocus:B=!0,addable:k,selectInputValue:S,avatarProps:R,selectedValue:D,withInput:I,isDynamicOptionPosition:T=!1,dropdownWidth:N}=r,[F,Q]=p(""),[$,Y]=p([]),U=u(null),W=u(null),X=u(null),K=u([]),q=Ct(F,400),G=F?$:d,J=w((()=>F&&0===$.length||!k&&!j&&0===d.length),[F,$,d,k,j]),ee=G.some((e=>"image"in e)),{currentOffsets:te,isOpeningUpward:re,renderDropDown:ne}=(({isDynamicOptionPosition:e=!1,targetRef:t,opened:r,maxHeight:n=297,offsetTop:a="60px",offsetBottom:c="0px",searchable:i=!0,dataLength:o=0,itemHeight:s=50})=>{const[l,h]=p(!1),[v,u]=p({offsetTop:a,offsetBottom:c,maxHeight:n}),g=f((()=>{if(!e||!t?.current||!r)return;const c=window.innerHeight,l=t.current.getBoundingClientRect(),v=l.y,p=c-v,g=Math.min(n+(i?60:0),o*s+(i?60:0)),m=Math.min(200,g);let d;d=v>c/2?{offsetTop:"",offsetBottom:l.height-(i?14:0)+"px",maxHeight:Math.min(n,v)}:p>=m?{offsetTop:a,offsetBottom:"",maxHeight:Math.min(n,p)}:{offsetTop:"",offsetBottom:`${l.height+10}px`,maxHeight:Math.min(n,v)},u(d),h(!0)}),[e,t,r,n,a,i,o,s]);_((()=>{if(!r||!e)return;r&&g();const t=()=>{g()},i=()=>{g()};return window.addEventListener("resize",t),window.addEventListener("scroll",i),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",i),h(!1),u({offsetTop:a,offsetBottom:c,maxHeight:n})}}),[r,e,o,n,t,i,s,g]);const m=e?v:{offsetTop:a,offsetBottom:c,maxHeight:n};return{currentOffsets:m,isOpeningUpward:e&&m.offsetBottom&&!m.offsetTop,calculateDropdownPosition:g,renderDropDown:l}})({isDynamicOptionPosition:T,targetRef:C,opened:v,maxHeight:n,offsetTop:c,offsetBottom:s,searchable:j,dataLength:G.length,itemHeight:50}),ae=e=>{Q(e.target.value)},ce=(e,t)=>r=>{r?.preventDefault(),r?.stopPropagation(),y?.(e,t),O&&z?.()},ie=(e,t)=>r=>{"Enter"===r.key&&ce(e,t)(r)},oe=(e,t)=>{const r={onKeyDown:ie(e,t)};return j||I?{...r,onMouseDown:ce(e,t)}:{...r,onClick:ce(e,t)}};return l((()=>{const e=F.replace(/[.*+\-?^${}()|[\]\\]/g,"\\$&");const t=new RegExp(e,"ig");if(e.length){const e=d?.filter((({label:e,value:r})=>e?.match(t)||r?.match(t)));Y(e)}else Y(d)}),[q,F,d]),l((()=>{g?.(v),m?.(),Q(""),v&&j&&W.current&&setTimeout((()=>W.current?.focus()),10)}),[v]),e(Ft,{opened:v,onClose:z,width:N||Se(a),offsetTop:te.offsetTop,offsetLeft:i,offsetRight:o,offsetBottom:te.offsetBottom,zIndex:h,targetRef:C,onMouseEnter:A,onMouseLeave:L,children:(v&&ne||!T)&&t(Qt,{expandedHeight:te.maxHeight,children:[j&&!re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})}),J?e(Xt,{children:e(Me,{category:"body1",children:"Sorry, no results were found matching your search criteria."})}):t(Yt,{className:"select_item_container",separator:Z,showScrollbar:V,ref:U,children:[e(P,{viewportRef:U,items:G,itemMargin:10,itemSize:50,overscan:6,ref:X,children:(t,r)=>{if(t?.isSelected)return null;const n=e=>{K.current[r]=e};return x?e(Wt,{isSelected:t?.isSelected,ref:n,...oe(t,r),children:b(x,{...t,label:t.label,value:t.value,index:r,key:`${t.label}${t.value}`})},`${t.label}${t.value}+${r}`):ee?e(Wt,{ref:n,...oe(t,r),children:e(ir,{...t,avatarProps:R,selected:t.value===D})},`${t.label}${t.value}+${r}`):e(Ut,{ref:n,...oe(t,r),role:"button",isSelected:t?.isSelected,children:e(Me,{category:"body2",weight:"medium",children:t.label})},`${t.label}${t.value}+${r}`)}}),k&&0===G.length&&e(Ut,{...j||I?{onMouseDown:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)}:{onClick:ce({label:S,value:null},0),onKeyDown:ie({label:S,value:null},0)},role:"button",children:t(Kt,{children:[e(Me,{category:"body1",weight:"semiBold",children:"Add:"}),t(Me,{children:[" ",S]})]})})]}),j&&re&&e($t,{children:e(ct,{ref:W,placeholder:H,value:F,onChange:ae,leftSection:M,rightSection:E,autoFocus:B})})]})})},sr=n.div`
   position: relative;
   pointer-events: ${e=>e.disabled?"none":"auto"};
 `,lr=n.div`