@livechat/design-system-react-components 1.16.9 → 1.17.1-alpha.0

package/dist/components/Picker/index.cjs.js

@@ -0,0 +1 @@
+var Fe=Object.defineProperty,Re=Object.defineProperties;var Se=Object.getOwnPropertyDescriptors;var K=Object.getOwnPropertySymbols;var ce=Object.prototype.hasOwnProperty,_e=Object.prototype.propertyIsEnumerable;var ie=(r,t,i)=>t in r?Fe(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i,F=(r,t)=>{for(var i in t||(t={}))ce.call(t,i)&&ie(r,i,t[i]);if(K)for(var i of K(t))_e.call(t,i)&&ie(r,i,t[i]);return r},U=(r,t)=>Re(r,Se(t));var le=(r,t)=>{var i={};for(var l in r)ce.call(r,l)&&t.indexOf(l)<0&&(i[l]=r[l]);if(r!=null&&K)for(var l of K(r))t.indexOf(l)<0&&_e.call(r,l)&&(i[l]=r[l]);return i};var Ze=require("../../index15.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const oe=require("react"),f=require("@floating-ui/react"),v=require("clsx"),Be=require("react-virtuoso"),j=require("@livechat/design-system-icons"),He=require("../Checkbox/index.cjs.js"),O=require("../Icon/index.cjs.js"),De=require("../../chunks/Heading-1f13e793.js"),se=require("../../chunks/Text-2356ec2a.js"),Oe=require("../Tag/index.cjs.js"),qe=require("react-dom");function ge(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const l=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,l.get?l:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const e=ge(oe),Me=ge(qe),Ke=2,Y=400;[...[...Array(100)].map((r,t)=>({key:`option${t+8}`,name:`Option #${t+8}`,disabled:t%4===0}))];const q="select-all",Ue=(r,t)=>{const i=[];return r.forEach((l,_)=>{t(l)&&i.push(_)}),i},z=r=>r.filter(({key:t,disabled:i,groupHeader:l})=>!(t===q||i||l)),ne=({key:r})=>r,P={"item-wrapper":"lc-PickerListItem-module__item-wrapper___ETYMU","item-wrapper__first":"lc-PickerListItem-module__item-wrapper__first___uit1z","item-wrapper__last":"lc-PickerListItem-module__item-wrapper__last___cWmGF","picker-list__item":"lc-PickerListItem-module__picker-list__item___cujFw","picker-list__item--select-all":"lc-PickerListItem-module__picker-list__item--select-all___-cXxr","picker-list__item__header":"lc-PickerListItem-module__picker-list__item__header___abypL","picker-list__item__content":"lc-PickerListItem-module__picker-list__item__content___EI4cV","picker-list__item__custom":"lc-PickerListItem-module__picker-list__item__custom___CFubU","picker-list__item__checkbox":"lc-PickerListItem-module__picker-list__item__checkbox___XqHxc","picker-list__item__avatar":"lc-PickerListItem-module__picker-list__item__avatar___dKtMr","picker-list__item__icon":"lc-PickerListItem-module__picker-list__item__icon___5Yvui","picker-list__item__label-container":"lc-PickerListItem-module__picker-list__item__label-container___awy0M","picker-list__item__main-label":"lc-PickerListItem-module__picker-list__item__main-label___YfUhr","picker-list__item__secondary-label":"lc-PickerListItem-module__picker-list__item__secondary-label___6xcMD"},x="picker-list__item",je=({index:r,isActive:t,isSelected:i,listElementsRef:l,onSelect:_,getItemProps:u,item:a,numberOfItems:o})=>{const b=n=>n!=null&&n.customElement?e.createElement("div",{className:P[`${x}__custom`]},n.customElement.listItemBody):e.createElement(e.Fragment,null,n.showCheckbox&&e.createElement(He.Checkbox,{className:P[`${x}__checkbox`],checked:i}),n.icon&&e.createElement(O.Icon,{className:P[`${x}__icon`],kind:"link",source:n.icon}),n.avatarSrc&&e.createElement("img",{className:v(P[`${x}__avatar`]),src:n.avatarSrc,alt:n.name}),e.createElement("div",{className:P[`${x}__label-container`]},e.createElement("span",{className:v({[P[`${x}__main-label`]]:n.secondaryText}),"aria-disabled":n.disabled},n.name),n.secondaryText&&e.createElement("span",{className:P[`${x}__secondary-label`]},n.secondaryText)));if(a.groupHeader)return e.createElement("div",F({id:`item-${r}`,key:a.key,role:"group",className:P[`${x}__header`]},u()),e.createElement(De.Heading,{size:"2xs",uppercase:!0,bold:!0,as:"div"},a.name));const p=n=>{!a.disabled&&_(n)};return e.createElement("div",U(F({id:a.key,key:a.key,tabIndex:t?0:-1,ref:n=>{n&&(l.current[r]=n)},role:"option","aria-setsize":o,"aria-posinset":r+1},u({onClick:()=>p(a.key)})),{className:v(P["item-wrapper"],{[P["item-wrapper__first"]]:r===0&&!a.groupHeader,[P["item-wrapper__last"]]:r===o-1&&!a.groupHeader})}),e.createElement("div",{"aria-selected":i,"aria-disabled":a.disabled,"aria-current":t&&!a.disabled,className:v(P[x],{[P[`${x}__custom`]]:a.customElement,[P[`${x}--select-all`]]:a.key===q})},e.createElement("div",{className:P[`${x}__content`]},e.createElement(se.Text,{as:"span"},b(a))),i&&!a.showCheckbox&&e.createElement(O.Icon,{kind:"link",source:j.Check,customColor:"var(--content-basic-info)"})))},Ge="lc-PickerList-module__listbox___-LqE-",B={listbox:Ge,"no-results":"lc-PickerList-module__no-results___QRce-","listbox-wrapper":"lc-PickerList-module__listbox-wrapper___FbDrf"},ae="picker-list",me=({context:r,setFloating:t,floatingStyles:i,maxHeight:l,options:_,isPositioned:u,pointer:a,activeIndex:o,selectedKeys:b,listElementsRef:p,setPointer:n,onSelect:y,getFloatingProps:d,getItemProps:N,emptyStateText:C="No results found",pickerType:I="single",listClassName:L,virtuosoProps:g})=>{const m=e.useRef(null),[c,k]=e.useState(Y),h=_.length;e.useLayoutEffect(()=>{var s;u&&!a&&o!==null&&((s=m.current)==null||s.focus({preventScroll:!0}))},[u,o,a,m]);const H=e.useCallback(s=>{s!==c&&(s<Y?k(s+(h-1)*Ke):k(Y))},[h]);if(oe.useEffect(()=>{p.current=new Array(_.length)},[_.length]),_.length===0){const s=v(B[ae],{[B[`${ae}__no-results`]]:_.length===0});return e.createElement(f.FloatingFocusManager,{context:r,modal:!1,initialFocus:-1},e.createElement("div",{className:v(B.listbox,B["no-results"]),ref:t,tabIndex:-1,style:i},e.createElement("div",{className:s},C)))}const D=s=>b.includes(s)||s===q&&b.length===z(_).length;return e.createElement(f.FloatingFocusManager,{context:r,modal:!1,initialFocus:-1},e.createElement("div",{ref:t,tabIndex:-1,className:v(B.listbox,L),style:U(F({},i),{maxHeight:l})},e.createElement("div",F({tabIndex:0,"aria-multiselectable":I==="multi",className:B["listbox-wrapper"],ref:m},d({onKeyDown(s){n(!1),s.key==="Enter"&&o!==null&&y(_[o].key),s.key===" "&&s.preventDefault()},onKeyUp(s){s.key===" "&&o!==null&&y(_[o].key)},onPointerMove(){n(!0)}})),e.createElement(Be.Virtuoso,U(F({totalListHeightChanged:H,style:{height:`${c}px`,maxHeight:l},totalCount:_.length,data:_,increaseViewportBy:200},g),{itemContent:(s,S)=>e.createElement(je,{index:s,getItemProps:N,listElementsRef:p,isActive:o===s,isSelected:D(S.key),onSelect:y,item:S,numberOfItems:h})})))))},T={"picker-trigger":"lc-PickerTrigger-module__picker-trigger___-tjS0","picker-trigger--multi-select":"lc-PickerTrigger-module__picker-trigger--multi-select___av4Ws","picker-trigger--multi-select--with-items":"lc-PickerTrigger-module__picker-trigger--multi-select--with-items___7uI-R","picker-trigger__content":"lc-PickerTrigger-module__picker-trigger__content___USgUX","picker-trigger__content--compact":"lc-PickerTrigger-module__picker-trigger__content--compact___tJ0c0","picker-trigger__content--medium":"lc-PickerTrigger-module__picker-trigger__content--medium___FDI7S","picker-trigger__content--large":"lc-PickerTrigger-module__picker-trigger__content--large___3F05E","picker-trigger__content--with-items":"lc-PickerTrigger-module__picker-trigger__content--with-items___gXBgO","picker-trigger__controls":"lc-PickerTrigger-module__picker-trigger__controls___atRqc","picker-trigger__controls--compact":"lc-PickerTrigger-module__picker-trigger__controls--compact___WEdel","picker-trigger__controls--medium":"lc-PickerTrigger-module__picker-trigger__controls--medium___MNwT1","picker-trigger__controls--large":"lc-PickerTrigger-module__picker-trigger__controls--large___mHG04","picker-trigger__clear-icon":"lc-PickerTrigger-module__picker-trigger__clear-icon___4TVYX","picker-trigger__chevron-icon":"lc-PickerTrigger-module__picker-trigger__chevron-icon___hmDvU","picker-trigger--disabled":"lc-PickerTrigger-module__picker-trigger--disabled___4MGb4","picker-trigger--focused":"lc-PickerTrigger-module__picker-trigger--focused___vBA4d","picker-trigger--error":"lc-PickerTrigger-module__picker-trigger--error___yu6Dt"},E="picker-trigger",Ae=({setReference:r,getReferenceProps:t,testId:i,size:l="medium",isMultiSelect:_,isItemSelected:u,hideClearButton:a,isDisabled:o,isRequired:b,isOpen:p,isError:n,onClear:y,children:d})=>{const N=v(T[E],T[`${E}--${l}`],_&&T[`${E}--multi-select`],_&&u&&T[`${E}--multi-select--with-items`],o&&T[`${E}--disabled`],p&&T[`${E}--focused`],n&&T[`${E}--error`]),C=!a&&u&&!o&&!b,I=L=>{L.stopPropagation(),y()};return e.createElement("button",F({tabIndex:o?-1:0,"aria-disabled":o,className:N,"data-testid":i,ref:r,type:"button"},t()),e.createElement("div",{className:v(T[`${E}__content`],T[`${E}__content--${l}`],_&&u&&T[`${E}__content--with-items`])},e.createElement(se.Text,{as:"div"},d)),e.createElement("div",{className:v(T[`${E}__controls`],T[`${E}__controls--${l}`])},C&&e.createElement("div",{"data-testid":`${E}__clear-icon`,className:T[`${E}__clear-icon`],onClick:I},e.createElement(O.Icon,{kind:"primary",size:"small",source:j.Close})),e.createElement(O.Icon,{className:T[`${E}__chevron-icon`],source:p?j.ChevronUp:j.ChevronDown,size:"medium",disabled:o})))},$={"picker-trigger-body":"lc-PickerTriggerBody-module__picker-trigger-body___xL0Rq","picker-trigger-body--single":"lc-PickerTriggerBody-module__picker-trigger-body--single___5LWZK","picker-trigger-body__item-container":"lc-PickerTriggerBody-module__picker-trigger-body__item-container___5Qs5E","picker-trigger-body__item":"lc-PickerTriggerBody-module__picker-trigger-body__item___TADgm","picker-trigger-body__item__content":"lc-PickerTriggerBody-module__picker-trigger-body__item__content___R6cqX","picker-trigger-body__item__avatar":"lc-PickerTriggerBody-module__picker-trigger-body__item__avatar___jqFLr","picker-trigger-body__item__icon":"lc-PickerTriggerBody-module__picker-trigger-body__item__icon___Dz9ln","picker-trigger-body__placeholder":"lc-PickerTriggerBody-module__picker-trigger-body__placeholder___1m8Qa","picker-trigger-body__placeholder--disabled":"lc-PickerTriggerBody-module__picker-trigger-body__placeholder--disabled___1QQf8","picker-trigger-body__input":"lc-PickerTriggerBody-module__picker-trigger-body__input___N2WzY","picker-trigger-body__input--compact":"lc-PickerTriggerBody-module__picker-trigger-body__input--compact___uu3rm","picker-trigger-body__input--medium":"lc-PickerTriggerBody-module__picker-trigger-body__input--medium___4GjnK","picker-trigger-body__input--large":"lc-PickerTriggerBody-module__picker-trigger-body__input--large___hWdHe","picker-trigger-body__tag":"lc-PickerTriggerBody-module__picker-trigger-body__tag___UYkhU","picker-trigger-body__tag--compact":"lc-PickerTriggerBody-module__picker-trigger-body__tag--compact___vajtL","picker-trigger-body__tag--medium":"lc-PickerTriggerBody-module__picker-trigger-body__tag--medium___yhMyC","picker-trigger-body__tag--large":"lc-PickerTriggerBody-module__picker-trigger-body__tag--large___FbETT"},w="picker-trigger-body",We=({isOpen:r,isSearchDisabled:t,isDisabled:i,placeholder:l,selectedItems:_,type:u,clearSearchAfterSelection:a,size:o="medium",onItemRemove:b,onSelect:p,onFilter:n,searchPhrase:y,virtualItemRef:d})=>{const N=r&&!t,C=e.useRef(null);e.useEffect(()=>{a&&(n(""),C.current&&(C.current.value="",C.current.focus()))},[_,a]);const I=c=>u==="single"&&r&&!t?null:c!=null&&c.customElement?e.createElement("div",{className:$[`${w}__item`]},c.customElement.selectedItemBody):e.createElement("div",{className:$[`${w}__item`]},c.icon&&e.createElement(O.Icon,{source:c.icon,className:$[`${w}__item__icon`]}),c.avatarSrc&&e.createElement("img",{src:c.avatarSrc,alt:"",className:$[`${w}__item__avatar`]}),e.createElement("div",{className:$[`${w}__item__content`]},c.name)),L=c=>n(c.target.value),g=c=>{var k,h;(k=d.current)!=null&&k.id&&c.key==="Enter"&&p((h=d.current)==null?void 0:h.id),u==="multi"&&(c.key==="Backspace"||c.key==="Delete")&&!y&&_&&(_==null?void 0:_.length)>0&&b(_[_.length-1].key)},m=()=>e.createElement("input",{ref:C,className:v($[`${w}__input`],$[`${w}__input--${o}`]),placeholder:l,onChange:L,onKeyDown:g,autoFocus:!0,value:y});return!_||_.length===0?N?m():e.createElement("div",{className:v({[$[`${w}__placeholder`]]:!0,[$[`${w}__placeholder--disabled`]]:i})},l):e.createElement("div",{className:v($[w],{[$[`${w}--single`]]:u==="single"})},e.createElement("div",{className:$[`${w}__item-container`]},u==="single"?I(_[0]):_.map(c=>e.createElement(Oe.Tag,{key:c.name,className:v($[`${w}__tag`],$[`${w}__tag--${o}`]),dismissible:!i,onRemove:k=>{k.stopPropagation(),b(c.key)}},I(c)))),N&&m())},Ye=10,ze=({disabled:r,items:t,placement:i,floatingStrategy:l,useDismissHookProps:_,useClickHookProps:u,isOpen:a,onVisibilityChange:o})=>{const b=f.useFloatingNodeId(),[p,n]=e.useState(!1),[y,d]=e.useState(null),[N,C]=e.useState(400),I=e.useRef([]),L=e.useRef(null),{refs:g,floatingStyles:m,context:c,isPositioned:k}=f.useFloating({nodeId:b,open:a,strategy:l,onOpenChange:o,whileElementsMounted:f.autoUpdate,placement:i,middleware:[f.offset(4),f.flip({padding:10}),f.shift(),f.size({apply({availableHeight:R,rects:A,elements:W}){Me.flushSync(()=>{C(R)}),Object.assign(W.floating.style,{width:`${A.reference.width}px`})},padding:Ye})]}),h=f.useClick(c,F({enabled:!r,keyboardHandlers:!1,toggle:!1},u)),H=f.useRole(c,{role:"listbox"}),D=f.useDismiss(c,_),s=f.useListNavigation(c,{enabled:t.length>0&&!r,listRef:I,activeIndex:y,onNavigate:d,virtual:!0,virtualItemRef:L,disabledIndices:Ue(t,R=>!!R.disabled||!!R.groupHeader)}),{getReferenceProps:S,getFloatingProps:G,getItemProps:V}=f.useInteractions([h,D,H,s]);return!a&&p&&n(!1),{getReferenceProps:S,getFloatingProps:G,getItemProps:V,setReference:g.setReference,floatingStyles:m,isPositioned:k,context:c,nodeId:b,setFloating:g.setFloating,activeIndex:y,listElementsRef:I,virtualItemRef:L,maxHeight:N,pointer:p,setPointer:n}},Ve=({selected:r,options:t,type:i,selectAllOptionText:l,onSelect:_,setOpen:u})=>{const[a,o]=e.useState(()=>(r==null?void 0:r.map(ne))||[]),p=r!==void 0?(r==null?void 0:r.map(ne))||[]:a,[n,y]=e.useState(""),d=e.useMemo(()=>{const g=i==="multi"&&l;let m=t;return n&&(m=m.filter(c=>{if(c.groupHeader)return!1;const k=n.toLowerCase();return c.name.toLowerCase().includes(k)})),g&&m.length>1&&(m=[{key:q,name:l},...m]),m},[n,t,i,l]),N=g=>{const m=d.find(c=>c.key===g);!m||m.disabled||(i==="single"?(u(!1),o(()=>(_([m]),[g]))):g===q?p.length===z(d).length?o(()=>(_(null),[])):o(()=>{const c=z(d);return _(c),c.map(({key:k})=>k)}):o(c=>{const k=c.includes(g)?c.filter(h=>h!==g):[...c,g];return _(t.filter(({key:h})=>k.includes(h))),k}))};return{selectedKeys:p,items:d,searchPhrase:n,handleSelect:N,handleOnFilter:g=>y(g),handleItemRemove:g=>N(g),handleClear:()=>{u(!1),o([]),_(null),y("")}}},Xe={"picker-wrapper":"lc-Picker-module__picker-wrapper___2EDne"},Qe=V=>{var R=V,{id:r,className:t,listClassName:i,disabled:l,error:_,options:u,selected:a,size:o="medium",placeholder:b="Select option",isRequired:p,noSearchResultText:n="No results found",selectAllOptionText:y,type:d="single",searchDisabled:N=!1,hideClearButton:C,isVisible:I,onOpen:L,onClose:g,openedOnInit:m=!1,clearSearchAfterSelection:c,onSelect:k,placement:h,floatingStrategy:H,useDismissHookProps:D,useClickHookProps:s,virtuosoProps:S}=R,G=le(R,["id","className","listClassName","disabled","error","options","selected","size","placeholder","isRequired","noSearchResultText","selectAllOptionText","type","searchDisabled","hideClearButton","isVisible","onOpen","onClose","openedOnInit","clearSearchAfterSelection","onSelect","placement","floatingStrategy","useDismissHookProps","useClickHookProps","virtuosoProps"]);const[A,W]=e.useState(m),X=I!==void 0,M=X?I:A,Q=(re,te)=>{re?L==null||L(te):g==null||g(te),!X&&W(re)},{selectedKeys:J,items:Z,searchPhrase:ue,handleSelect:ee,handleOnFilter:de,handleItemRemove:ke,handleClear:pe}=Ve({selected:a,options:u,type:d,selectAllOptionText:y,onSelect:k,setOpen:Q}),{context:ye,nodeId:fe,getReferenceProps:be,setReference:he,getFloatingProps:Pe,getItemProps:Ee,isPositioned:ve,setFloating:Te,floatingStyles:$e,listElementsRef:we,virtualItemRef:Ne,activeIndex:Ce,maxHeight:Ie,pointer:Le,setPointer:xe}=ze({openedOnInit:m,disabled:l,items:Z,placement:h,floatingStrategy:H,useClickHookProps:s,useDismissHookProps:D,isOpen:M,onVisibilityChange:Q});return e.createElement("div",{id:r,className:v(Xe["picker-wrapper"],t)},e.createElement(Ae,{getReferenceProps:be,setReference:he,testId:G["data-testid"],isItemSelected:J.length>0,isOpen:M,onClear:pe,hideClearButton:C,isDisabled:l,isError:_,isRequired:p,isMultiSelect:d==="multi",size:o},e.createElement(We,{isOpen:M,isSearchDisabled:N,isDisabled:l,placeholder:b,selectedItems:a,type:d,size:o,clearSearchAfterSelection:c,onItemRemove:ke,onSelect:ee,onFilter:de,searchPhrase:ue,virtualItemRef:Ne})),e.createElement(f.FloatingNode,{id:fe},M&&e.createElement(f.FloatingPortal,null,e.createElement(me,{pickerType:d,options:Z,listClassName:i,context:ye,setFloating:Te,floatingStyles:$e,maxHeight:Ie,isPositioned:ve,pointer:Le,activeIndex:Ce,selectedKeys:J,listElementsRef:we,setPointer:xe,onSelect:ee,getFloatingProps:Pe,getItemProps:Ee,emptyStateText:n,virtuosoProps:S}))))};exports.Picker=Qe;exports.PickerList=me;