kwant-ui 3.39.3-dev.3 → 3.39.3-dev.5

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MSTypes } from './types';
-declare const MultiSelect: ({ width, options, activeOptions, setActiveOptions, placeholder, label, variant, dropdownSelectProps, avatarProps, tooltipContent, tooltipPosition, }: MSTypes) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ width, options, activeOptions, setActiveOptions, placeholder, label, variant, dropdownSelectProps, avatarProps, tooltipContent, tooltipPosition, labelTrimCount, }: MSTypes) => import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };

package/dist/components/MultiSelect/types.d.ts

@@ -14,6 +14,7 @@ export type MSTypes = {
     avatarProps?: AvatarDeclarations.Props;
     tooltipContent?: string;
     tooltipPosition?: TooltipComponent.Position;
+    labelTrimCount?: number;
 };
 export type MSStyleTypes = {
     width?: any;

package/dist/index.es.js

@@ -2148,7 +2148,7 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
 `;var ic;n.div`
   display: flex;
   cursor: pointer;
-`,function(e){var t;(t=e.DatpickerNavigationDirectionEnum||(e.DatpickerNavigationDirectionEnum={})).right="right",t.left="left"}(ic||(ic={}));const oc={chevronLeft:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M11.6736 2.5799L10.4869 1.3999L3.89355 7.9999L10.4936 14.5999L11.6736 13.4199L6.25355 7.9999L11.6736 2.5799Z",fill:A.grey.grey900})}),chevronRight:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4.32715 13.4199L5.50715 14.5999L12.1071 7.9999L5.50715 1.3999L4.32715 2.5799L9.74715 7.9999L4.32715 13.4199Z",fill:A.grey.grey900})}),calendar:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M15.8333 3.33334H15V1.66667L13.3333 1.66667V3.33334L6.66667 3.33334V1.66667L5 1.66667V3.33334H4.16667C3.24167 3.33334 2.5 4.08334 2.5 5.00001L2.5 16.6667C2.5 17.5833 3.24167 18.3333 4.16667 18.3333H15.8333C16.75 18.3333 17.5 17.5833 17.5 16.6667V5.00001C17.5 4.08334 16.75 3.33334 15.8333 3.33334ZM15.8333 16.6667H4.16667L4.16667 8.33334L15.8333 8.33334L15.8333 16.6667ZM15.8333 6.66667L4.16667 6.66667L4.16667 5.00001L15.8333 5.00001V6.66667ZM5.83333 10L10 10L10 14.1667L5.83333 14.1667L5.83333 10Z",fill:A.grey.grey900})})},sc=({title:t,selected:r,onClick:n})=>e(qa,{selected:r,onClick:n,children:e(Oe,{category:"body2",weight:"medium",color:r?A.blue.blue1000:A.grey.grey900,children:t})},t),lc=({options:t,selectedOption:r,onOptionClick:n})=>e(Ka,{children:t?.map((t=>e(sc,{...t,onClick:()=>n(t.value,t),selected:r===t.title},t.title)))}),hc=({label:r="",timeHour:n="",timeMinute:a="",clockType:c="am",disabled:i=!0,onClockTypeChange:o,onHourChange:s,onMinuteChange:l})=>t(ac,{children:[e(nc,{children:r}),t(ec,{children:[e(Ga,{type:"number",value:n,disabled:i,onChange:e=>{const t=e.target.value,n="0"===t?"01":Da(t);Number(t)<=12?s(r.toLowerCase(),n):s(r.toLowerCase(),"12")},min:1}),e(Ja,{children:":"}),e(Ga,{type:"number",value:a,disabled:i,onChange:e=>{const t=e.target.value,n=Da(t);Number(t)<=59?l(r.toLowerCase(),n):l(r.toLowerCase(),"59")},min:0}),e(tc,{content:[{key:"am",label:"AM"},{key:"pm",label:"PM"}],activeKey:c,onClick:e=>{o(r.toLowerCase(),e)},disabled:i})]})]}),vc=(t,r)=>e(cc,{onClick:r,children:t===ic.DatpickerNavigationDirectionEnum.right?oc.chevronRight:oc.chevronLeft}),pc="MM/DD/YYYY",uc=h(((t,r)=>{const{range:n,numberOfMonths:a=1,format:c=pc,onChange:i,label:o,placeholder:s=pc,required:h,readOnly:v,errorMessage:u,calendarRef:g,inputProps:m,showTime:d,dateTimeRange:f,onChangeDateTime:_,...w}=t,{time:b,setTime:y}=St(),[x,Z]=p(""),[O,M]=p(""),E=(e,t,r)=>{if(!b)return;const n={...b,[e]:{...b[e],[r]:t}};y?.(n)},H=e=>{const[t,r]=(n=e,n?Array.isArray(n)&&2===n.length?`${n[0].format("YYYY-MM-DD")} * ${n[1].format("YYYY-MM-DD")}`:Array.isArray(n)&&1===n.length?n[0].format("YYYY-MM-DD"):"":"").split(" * ");var n;t&&r&&(Z(t),M(r))};return l((()=>{if(f?.startDate?.includes("T")&&f?.endDate?.includes("T")){const{startDateOnly:e,endDateOnly:t,time:r}=Ya(f);Z(e),M(t),y(r)}}),[]),l((()=>{w.value||(Z(""),M(""))}),[w.value]),l((()=>{if(d&&x&&O&&b){const e=Fa({dateRange:{startDate:x,endDate:O},timeRange:b});_(e)}}),[x,O,b]),e(Pa,{showTime:d,className:"date-picker",children:e(Ha,{renderButton:Ia,className:"date-picker-"+(La(n,a)?"range":"single"),ref:g,range:n,months:Ta,numberOfMonths:a,showOtherDays:!0,weekDays:Na,render:(t,n,a)=>e(at,{rightSection:e(Va,{onClick:()=>{!v&&n()},children:Ca.calendar}),placeholder:s,value:d&&t?x&&O?`${Ua(x,c,b.from)} ~ ${Ua(O,c,b.to)}`:"":t,onClick:()=>{!v&&n()},onChange:e=>{((e,t)=>{const r=e.target.value.match(/[^0-9/]/g);Array.isArray(r)||t(e)})(e,a)},label:o,required:h,readOnly:v,error:!!u,errorMessage:u,onFocusCapture:()=>{!v&&n()},ref:r,...m}),onChange:e=>{d?H(e):i&&i(e)},format:c,portal:!0,onClose:()=>{if(d){const e=Fa({dateRange:{startDate:x,endDate:O},timeRange:b});_(e)}},...w,children:d&&e(rc,{children:Ra.map((t=>{const r=b?.[t.key];return e(hc,{disabled:!1,label:t.label,timeHour:r?.hour,timeMinute:r?.minute,clockType:r?.clockType,onClockTypeChange:(e,t)=>{E(e,t,"clockType")},onHourChange:(e,t)=>{E(e,t,"hour")},onMinuteChange:(e,t)=>{E(e,t,"minute")}},t.key)}))})})})})),gc=n.div`
+`,function(e){var t;(t=e.DatpickerNavigationDirectionEnum||(e.DatpickerNavigationDirectionEnum={})).right="right",t.left="left"}(ic||(ic={}));const oc={chevronLeft:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M11.6736 2.5799L10.4869 1.3999L3.89355 7.9999L10.4936 14.5999L11.6736 13.4199L6.25355 7.9999L11.6736 2.5799Z",fill:A.grey.grey900})}),chevronRight:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4.32715 13.4199L5.50715 14.5999L12.1071 7.9999L5.50715 1.3999L4.32715 2.5799L9.74715 7.9999L4.32715 13.4199Z",fill:A.grey.grey900})}),calendar:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M15.8333 3.33334H15V1.66667L13.3333 1.66667V3.33334L6.66667 3.33334V1.66667L5 1.66667V3.33334H4.16667C3.24167 3.33334 2.5 4.08334 2.5 5.00001L2.5 16.6667C2.5 17.5833 3.24167 18.3333 4.16667 18.3333H15.8333C16.75 18.3333 17.5 17.5833 17.5 16.6667V5.00001C17.5 4.08334 16.75 3.33334 15.8333 3.33334ZM15.8333 16.6667H4.16667L4.16667 8.33334L15.8333 8.33334L15.8333 16.6667ZM15.8333 6.66667L4.16667 6.66667L4.16667 5.00001L15.8333 5.00001V6.66667ZM5.83333 10L10 10L10 14.1667L5.83333 14.1667L5.83333 10Z",fill:A.grey.grey900})})},sc=({title:t,selected:r,onClick:n})=>e(qa,{selected:r,onClick:n,children:e(Oe,{category:"body2",weight:"medium",color:r?A.blue.blue1000:A.grey.grey900,children:t})},t),lc=({options:t,selectedOption:r,onOptionClick:n})=>e(Ka,{children:t?.map((t=>e(sc,{...t,onClick:()=>n(t.value,t),selected:r===t.title},t.title)))}),hc=({label:r="",timeHour:n="",timeMinute:a="",clockType:c="am",disabled:i=!0,onClockTypeChange:o,onHourChange:s,onMinuteChange:l})=>t(ac,{children:[e(nc,{children:r}),t(ec,{children:[e(Ga,{type:"number",value:n,disabled:i,onChange:e=>{const t=e.target.value,n="0"===t?"01":Da(t);Number(t)<=12?s(r.toLowerCase(),n):s(r.toLowerCase(),"12")},min:1}),e(Ja,{children:":"}),e(Ga,{type:"number",value:a,disabled:i,onChange:e=>{const t=e.target.value,n=Da(t);Number(t)<=59?l(r.toLowerCase(),n):l(r.toLowerCase(),"59")},min:0}),e(tc,{content:[{key:"am",label:"AM"},{key:"pm",label:"PM"}],activeKey:c,onClick:e=>{o(r.toLowerCase(),e)},disabled:i})]})]}),vc=(t,r)=>e(cc,{onClick:r,children:t===ic.DatpickerNavigationDirectionEnum.right?oc.chevronRight:oc.chevronLeft}),pc="MM/DD/YYYY",uc=h(((t,r)=>{const{range:n,numberOfMonths:a=1,format:c=pc,onChange:i,label:o,placeholder:s=pc,required:h,readOnly:v,errorMessage:u,calendarRef:g,inputProps:m,showTime:d,dateTimeRange:f,onChangeDateTime:_,...w}=t,{time:b,setTime:y}=St(),[x,Z]=p(""),[O,M]=p(""),E=(e,t,r)=>{if(!b)return;const n={...b,[e]:{...b[e],[r]:t}};y?.(n)},H=e=>{const[t,r]=(n=e,n?Array.isArray(n)&&2===n.length?`${n[0].format("YYYY-MM-DD")} * ${n[1].format("YYYY-MM-DD")}`:Array.isArray(n)&&1===n.length?n[0].format("YYYY-MM-DD"):"":"").split(" * ");var n;t&&r&&(Z(t),M(r))};return l((()=>{if(f?.startDate?.includes("T")&&f?.endDate?.includes("T")){const{startDateOnly:e,endDateOnly:t,time:r}=Ya(f);Z(e),M(t),y(r)}}),[]),l((()=>{w.value||(Z(""),M(""))}),[w.value]),l((()=>{if(d&&x&&O&&b){const e=Fa({dateRange:{startDate:x,endDate:O},timeRange:b});_(e)}}),[x,O,b]),e(Pa,{showTime:d,className:"date-picker",children:e(Ha,{renderButton:Ia,className:"date-picker-"+(La(n,a)?"range":"single"),ref:g,range:n,months:Ta,numberOfMonths:a,showOtherDays:!0,weekDays:Na,render:(t,n,a)=>e(at,{rightSection:e(Va,{onClick:()=>{!v&&n()},children:Ca.calendar}),placeholder:s,value:d&&t?x&&O?`${Ua(x,c,b.from)} ~ ${Ua(O,c,b.to)}`:"":t,onClick:()=>{!v&&n()},onChange:e=>{((e,t)=>{const r=e.target.value.match(/[^0-9/]/g);Array.isArray(r)||t(e)})(e,a)},label:o,required:h,readOnly:v,error:!!u,errorMessage:u,onFocusCapture:()=>{!v&&n()},ref:r,...m}),onChange:e=>{d?H(e):i&&i(e)},format:c,portal:!0,...w,children:d&&e(rc,{children:Ra.map((t=>{const r=b?.[t.key];return e(hc,{disabled:!1,label:t.label,timeHour:r?.hour,timeMinute:r?.minute,clockType:r?.clockType,onClockTypeChange:(e,t)=>{E(e,t,"clockType")},onHourChange:(e,t)=>{E(e,t,"hour")},onMinuteChange:(e,t)=>{E(e,t,"minute")}},t.key)}))})})})})),gc=n.div`
   .xsmall {
     width: 20px;
     height: 20px;
@@ -3238,7 +3238,7 @@ import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{css as
       }
     }
   }
-`,kc={collapseOnSelect:!1,width:"100%",offsetTop:"80px",searchable:!0,toggleOnTargetClick:!1},Sc=e(nt,{icon:"keyboard_arrow_down",width:20,height:20,fill:A.grey.grey400}),Rc=e(nt,{icon:"keyboard_arrow_up",width:20,height:20,fill:A.grey.grey400});e(nt,{icon:"close_circle",width:20,height:20,fill:A.grey.grey400});const Dc=e(nt,{icon:"check",width:16,height:12,fill:A.green.green400}),Ic=({option:r,isSelected:n,variant:a,hasImage:c,avatarProps:i})=>{const{label:o="",image:s}=r;return t("div",{className:`multi-select-option ${n&&"active"}`,children:[c&&e(ar,{src:s,alt:o,size:"xs",...i}),t("div",{className:"multi-select-option__head",children:["checkbox"===a&&e(Be,{checked:n}),o]}),"normal"===a&&n&&e("div",{className:"multi-select-option__tail",children:Dc})]})},Tc=({filterLabel:t,onChipClose:r})=>e("div",{className:"selected",children:e(Ec,{size:"small",type:"secondary",label:`${t}`,showActionButton:!0,onClick:e=>{e.preventDefault(),e.stopPropagation()},onClose:e=>{e.preventDefault(),r(),e.stopPropagation()}})}),Nc=({width:r,options:n=[],activeOptions:a=[],setActiveOptions:c,placeholder:i,label:o,variant:s="normal",dropdownSelectProps:l,avatarProps:h,tooltipContent:v,tooltipPosition:u="right-center"})=>{const g=n.some((e=>"image"in e)),[m,d]=p(!1),f=_((()=>{const t=a?.length;return(t>3?a.slice(0,3):a).map((t=>{let r=(e=>e&&e.length>12?e.slice(0,11)+"..":e)(t?.label);return e(Tc,{filterLabel:r,onChipClose:()=>(e=>{let t=[...a].filter((t=>t.value!==e.value));c(t)})(t)})}))}),[a]),w=e=>a.some((t=>t.value===e));return e(Bc,{width:r,children:e(lr,{...kc,onSelect:e=>{if(a.find((t=>t.value===e.value))){let t=[...a].filter((t=>t.value!==e.value));c([...t])}else c([...a,e])},data:n,opened:m,onClose:()=>d(!1),itemComponent:({label:t,value:r,image:n})=>e(Ic,{option:{label:t,value:r,image:n},isSelected:w(r),variant:s,hasImage:g,avatarProps:h}),...l,children:t("div",{className:"select-container",children:[t("div",{className:"select-container__label",children:[o,v&&e(Je,{children:e(be,{tooltipContent:()=>v,position:u,offset:"10px",top:"8px",children:e(nt,{icon:"info",width:16,height:16,fill:A.grey.grey400})})})]}),e("div",{className:"select-container__body",children:t("div",{className:`select-input-container ${m&&"focus"}`,onClick:()=>{d(!0)},id:"select-input-container",children:[t("div",{className:"select-input-container__body",children:[f,a?.length>3&&e(Ec,{onClick:e=>{e.preventDefault(),e.stopPropogation()},size:"small",type:"secondary",label:"+"+(a.length-3)}),0===a?.length&&e("div",{className:"placeholder",children:i||"Select"})]}),e("div",{className:"select-input-container__icon",children:m?Rc:Sc})]})})]})})})},Fc=n.div`
+`,kc={collapseOnSelect:!1,width:"100%",offsetTop:"80px",searchable:!0,toggleOnTargetClick:!1},Sc=e(nt,{icon:"keyboard_arrow_down",width:20,height:20,fill:A.grey.grey400}),Rc=e(nt,{icon:"keyboard_arrow_up",width:20,height:20,fill:A.grey.grey400});e(nt,{icon:"close_circle",width:20,height:20,fill:A.grey.grey400});const Dc=e(nt,{icon:"check",width:16,height:12,fill:A.green.green400}),Ic=({option:r,isSelected:n,variant:a,hasImage:c,avatarProps:i})=>{const{label:o="",image:s}=r;return t("div",{className:`multi-select-option ${n&&"active"}`,children:[c&&e(ar,{src:s,alt:o,size:"xs",...i}),t("div",{className:"multi-select-option__head",children:["checkbox"===a&&e(Be,{checked:n}),o]}),"normal"===a&&n&&e("div",{className:"multi-select-option__tail",children:Dc})]})},Tc=({filterLabel:t,onChipClose:r})=>e("div",{className:"selected",children:e(Ec,{size:"small",type:"secondary",label:`${t}`,showActionButton:!0,onClick:e=>{e.preventDefault(),e.stopPropagation()},onClose:e=>{e.preventDefault(),r(),e.stopPropagation()}})}),Nc=({width:r,options:n=[],activeOptions:a=[],setActiveOptions:c,placeholder:i,label:o,variant:s="normal",dropdownSelectProps:l,avatarProps:h,tooltipContent:v,tooltipPosition:u="right-center",labelTrimCount:g=11})=>{const m=n.some((e=>"image"in e)),[d,f]=p(!1),w=_((()=>{const t=a?.length;return(t>3?a.slice(0,3):a).map((t=>{let r=(e=>e&&e.length>12?e.slice(0,11)+"..":e)(t?.label);return e(Tc,{filterLabel:r,onChipClose:()=>(e=>{let t=[...a].filter((t=>t.value!==e.value));c(t)})(t)})}))}),[a,g]),b=e=>a.some((t=>t.value===e));return e(Bc,{width:r,children:e(lr,{...kc,onSelect:e=>{if(a.find((t=>t.value===e.value))){let t=[...a].filter((t=>t.value!==e.value));c([...t])}else c([...a,e])},data:n,opened:d,onClose:()=>f(!1),itemComponent:({label:t,value:r,image:n})=>e(Ic,{option:{label:t,value:r,image:n},isSelected:b(r),variant:s,hasImage:m,avatarProps:h}),...l,children:t("div",{className:"select-container",children:[t("div",{className:"select-container__label",children:[o,v&&e(Je,{children:e(be,{tooltipContent:()=>v,position:u,offset:"10px",top:"8px",children:e(nt,{icon:"info",width:16,height:16,fill:A.grey.grey400})})})]}),e("div",{className:"select-container__body",children:t("div",{className:`select-input-container ${d&&"focus"}`,onClick:()=>{f(!0)},id:"select-input-container",children:[t("div",{className:"select-input-container__body",children:[w,a?.length>3&&e(Ec,{onClick:e=>{e.preventDefault(),e.stopPropogation()},size:"small",type:"secondary",label:"+"+(a.length-3)}),0===a?.length&&e("div",{className:"placeholder",children:i||"Select"})]}),e("div",{className:"select-input-container__icon",children:d?Rc:Sc})]})})]})})})},Fc=n.div`
   position: relative;
 
   .upload-avatar {