@mattermost/compass-ui 0.1.0-alpha.20 → 0.1.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/combobox/Combobox.cjs +1 -1
- package/dist/components/combobox/Combobox.cjs.map +1 -1
- package/dist/components/combobox/Combobox.d.ts +12 -0
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +226 -214
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.css +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.js +26 -26
- package/dist/components/emoji-popover/EmojiPopover.css +1 -1
- package/dist/components/emoji-popover/EmojiPopover.module.scss.cjs +1 -1
- package/dist/components/emoji-popover/EmojiPopover.module.scss.js +21 -21
- package/dist/components/menu-item/MenuItem.cjs.map +1 -1
- package/dist/components/menu-item/MenuItem.css +1 -1
- package/dist/components/menu-item/MenuItem.d.ts +6 -1
- package/dist/components/menu-item/MenuItem.d.ts.map +1 -1
- package/dist/components/menu-item/MenuItem.js.map +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.js +18 -18
- package/dist/components/popover-menu/PopoverMenu.cjs +1 -1
- package/dist/components/popover-menu/PopoverMenu.cjs.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.css +1 -1
- package/dist/components/popover-menu/PopoverMenu.d.ts +6 -2
- package/dist/components/popover-menu/PopoverMenu.d.ts.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.js +29 -29
- package/dist/components/popover-menu/PopoverMenu.js.map +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.cjs +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.js +13 -12
- package/dist/components/popover-menu/PopoverMenu.module.scss.js.map +1 -1
- package/dist/components/profile-popover/ProfilePopover.css +1 -1
- package/dist/components/profile-popover/ProfilePopover.module.scss.cjs +1 -1
- package/dist/components/profile-popover/ProfilePopover.module.scss.js +33 -33
- package/dist/components/team-avatar/TeamAvatar.cjs +1 -1
- package/dist/components/team-avatar/TeamAvatar.cjs.map +1 -1
- package/dist/components/team-avatar/TeamAvatar.css +1 -1
- package/dist/components/team-avatar/TeamAvatar.d.ts +8 -1
- package/dist/components/team-avatar/TeamAvatar.d.ts.map +1 -1
- package/dist/components/team-avatar/TeamAvatar.js +23 -21
- package/dist/components/team-avatar/TeamAvatar.js.map +1 -1
- package/dist/components/team-avatar/TeamAvatar.module.scss.cjs +1 -1
- package/dist/components/team-avatar/TeamAvatar.module.scss.js +17 -16
- package/dist/components/team-avatar/TeamAvatar.module.scss.js.map +1 -1
- package/dist/components/team-avatar/index.d.ts +1 -1
- package/dist/components/team-avatar/index.d.ts.map +1 -1
- package/dist/components/tile-button/TileButton.cjs +2 -0
- package/dist/components/tile-button/TileButton.cjs.map +1 -0
- package/dist/components/tile-button/TileButton.css +1 -0
- package/dist/components/tile-button/TileButton.d.ts +54 -0
- package/dist/components/tile-button/TileButton.d.ts.map +1 -0
- package/dist/components/tile-button/TileButton.js +74 -0
- package/dist/components/tile-button/TileButton.js.map +1 -0
- package/dist/components/tile-button/TileButton.module.scss.cjs +2 -0
- package/dist/components/tile-button/TileButton.module.scss.cjs.map +1 -0
- package/dist/components/tile-button/TileButton.module.scss.js +12 -0
- package/dist/components/tile-button/TileButton.module.scss.js.map +1 -0
- package/dist/components/{action-button → tile-button}/index.cjs +1 -1
- package/dist/components/tile-button/index.d.ts +3 -0
- package/dist/components/tile-button/index.d.ts.map +1 -0
- package/dist/components/tile-button/index.js +5 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +24 -24
- package/dist/utils/slot.cjs.map +1 -1
- package/dist/utils/slot.d.ts +1 -1
- package/dist/utils/slot.js.map +1 -1
- package/package.json +4 -4
- package/dist/components/action-button/ActionButton.cjs +0 -2
- package/dist/components/action-button/ActionButton.cjs.map +0 -1
- package/dist/components/action-button/ActionButton.css +0 -1
- package/dist/components/action-button/ActionButton.d.ts +0 -54
- package/dist/components/action-button/ActionButton.d.ts.map +0 -1
- package/dist/components/action-button/ActionButton.js +0 -74
- package/dist/components/action-button/ActionButton.js.map +0 -1
- package/dist/components/action-button/ActionButton.module.scss.cjs +0 -2
- package/dist/components/action-button/ActionButton.module.scss.cjs.map +0 -1
- package/dist/components/action-button/ActionButton.module.scss.js +0 -12
- package/dist/components/action-button/ActionButton.module.scss.js.map +0 -1
- package/dist/components/action-button/index.d.ts +0 -3
- package/dist/components/action-button/index.d.ts.map +0 -1
- package/dist/components/action-button/index.js +0 -5
- /package/dist/components/{action-button → tile-button}/index.cjs.map +0 -0
- /package/dist/components/{action-button → tile-button}/index.js.map +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),__ft=require("@mattermost/compass-icons/components/chevron-down.js"),ft=__ft?.default??__ft,__dt=require("@mattermost/compass-icons/components/close-circle.js"),dt=__dt?.default??__dt,__bt=require("@mattermost/compass-icons/components/plus.js"),bt=__bt?.default??__bt,mt=require("../chip/Chip.cjs"),vt=require("../chip/ChipGroup.cjs"),z=require("../icon/Icon.cjs"),Ce=require("../menu-item/MenuItem.cjs"),Me=require("../popover-menu/PopoverMenu.cjs"),xt=require("../spinner/Spinner.cjs"),ht=require("../user-avatar/UserAvatar.cjs"),_t=require("../../hooks/use-anchored-popup-portal.cjs"),kt=require("../../hooks/use-outside-close.cjs"),gt=require("../../hooks/use-popover-transition.cjs"),jt=require("../../utils/menuItemProps.cjs"),yt=require("../../utils/props.cjs"),Ct=require("../../utils/string.cjs"),o=require("./Combobox.module.scss.cjs"),pe=280,Mt={small:"small",medium:"medium",large:"large"},pt={small:"12",medium:"16",large:"16"};function qt(a){return typeof a=="string"?`${a} selections`:"Selected"}function wt(a){return`Create "${a}"`}function re(a){return a.kind==="option"&&a.option.disabled===!0}function At(a,m){return m?a.label.toLowerCase().includes(m.toLowerCase()):!0}function Dt(a){return a==null?null:Array.isArray(a)?a[0]??null:a===""?null:a}function Nt(a){return a==null?[]:Array.isArray(a)?a:a===""?[]:[a]}function St(a){if(a.leadingVisual!=null)return a.leadingVisual;if(a.leadingAvatar!=null)return l.jsx(ht.default,{src:a.leadingAvatar.src,alt:a.leadingAvatar.alt,size:"24"})}const Rt=s.forwardRef(function({options:m,menuItemProps:qe,multiple:r=!1,value:le,defaultValue:ne,onChange:I,inputValue:U,defaultInputValue:we="",onInputChange:f,label:p,placeholder:Ae,leadingIcon:K,size:G="medium",invalid:ae=!1,disabled:k=!1,filter:L=!0,emptyMessage:De="No results",loading:oe=!1,loadingMessage:Ne="Loading…",selectedOptions:y,creatable:w=!1,onCreateOption:Q,formatCreateLabel:Se=wt,clearable:Re=!1,clearLabel:Ve="Clear",clearButtonProps:g,selectionsLabel:Ee,listboxLabel:Ie="Options",className:Le="",id:Fe,"aria-label":ce,portalContainer:Oe=null,zIndex:He},A){const Pe=s.useId(),X=Fe??Pe,D=`${X}-listbox`,Z=s.useRef(null),ue=s.useRef(null),M=s.useRef(null),Te=s.useCallback(e=>{M.current=e,typeof A=="function"?A(e):A&&(A.current=e)},[A]),W=le!==void 0,[$e,ze]=s.useState(()=>ne!==void 0?ne:r?[]:null),Y=W?le:$e,v=r?null:Dt(Y),c=s.useMemo(()=>r?Nt(Y):[],[r,Y]),b=U!==void 0,[B,N]=s.useState(we),[i,ie]=s.useState(!1),[Ue,fe]=s.useState(!1),[x,C]=s.useState(-1),F=s.useRef(!1),de=s.useCallback(e=>{e!==x&&(F.current=!0,C(e))},[x]),[O,S]=s.useState(null),H=s.useCallback(e=>m.find(t=>t.value===e)??(y==null?void 0:y.find(t=>t.value===e))??(w?{value:e,label:e}:void 0),[m,y,w]),P=s.useMemo(()=>v==null?void 0:H(v),[H,v]),J=b?U:r?B:O!==null?O:(P==null?void 0:P.label)??B,ee=b?U:r?B:O!==null?O:"",R=s.useCallback(e=>{b||(N(e),r||S(e)),f==null||f(e)},[b,r,f]),h=s.useCallback(e=>{W||ze(e),I==null||I(e)},[W,I]),be=s.useMemo(()=>{if(L===!1)return m;const e=typeof L=="function"?L:At;return m.filter(t=>e(t,ee))},[m,L,ee]),V=w?ee.trim():"",me=s.useMemo(()=>{if(V==="")return!1;const e=V.toLowerCase(),t=d=>d.toLowerCase()===e;return[...m,...y??[]].some(d=>t(d.label)||t(d.value))?!1:!(r?c:v!=null?[v]:[]).some(t)},[V,m,y,r,c,v]),u=s.useMemo(()=>[...be.map(e=>({kind:"option",option:e})),...me?[{kind:"create",inputValue:V}]:[]],[be,me,V]),q=s.useCallback(e=>e.kind==="option"?`${D}-option-${e.option.value}`:`${D}-create`,[D]),{mounted:ve,visible:Ke}=gt.usePopoverTransition(i),{placement:Ge,maxHeight:Qe,style:Xe,portalRef:xe,renderPortal:Ze}=_t.useAnchoredPopupPortal(ue,ve,{preferredHeight:pe,maxHeightCap:pe,portalContainer:Oe,zIndex:He}),j=s.useCallback(()=>{ie(!1),C(-1),!r&&!b&&(S(null),N(""))},[r,b]),E=s.useCallback(()=>{k||ie(!0)},[k]);kt.useOutsideClose(Z,i,j,xe),s.useEffect(()=>{i&&C(e=>{if(u.length===0)return-1;if(e>=0&&e<u.length)return e;const t=u.findIndex(n=>n.kind==="option"&&(r?c.includes(n.option.value):n.option.value===v));return t>=0?t:0})},[i,u,r,c,v]);const We=s.useCallback(e=>r?c.includes(e):v===e,[r,c,v]),te=s.useCallback(e=>{var t;if(!e.disabled){if(r){const n=c.includes(e.value)?c.filter(_=>_!==e.value):[...c,e.value];h(n),R(""),j(),(t=M.current)==null||t.focus();return}h(e.value),b?f==null||f(e.label):(N(""),S(null)),j()}},[r,c,h,R,b,f,j]),se=s.useCallback(e=>{var t;if(Q?Q(e):h(r?[...c,e]:e),r){R(""),j(),(t=M.current)==null||t.focus();return}b?f==null||f(e):(N(""),S(null)),j()},[Q,r,c,h,R,b,f,j]),Ye=s.useCallback(e=>{e.kind==="create"?se(e.inputValue):te(e.option)},[se,te]),Be=s.useCallback(()=>{var e;h(null),b?f==null||f(""):(N(""),S(null)),(e=M.current)==null||e.focus()},[h,b,f]),he=s.useCallback(e=>{r&&h(c.filter(t=>t!==e))},[r,c,h]),_e=s.useCallback(e=>{F.current=!1;const t=u.map((n,_)=>({row:n,i:_})).filter(({row:n})=>!re(n));if(t.length===0){C(-1);return}C(n=>{const _=t.findIndex(({i:$})=>$===n),d=_<0?e>0?0:t.length-1:(_+e+t.length)%t.length;return t[d].i})},[u]);s.useEffect(()=>{var t,n;if(!i||x<0)return;if(F.current){F.current=!1;return}const e=u[x];e&&((n=(t=document.getElementById(q(e)))==null?void 0:t.scrollIntoView)==null||n.call(t,{block:"nearest"}))},[i,x,u,q]);const Je=e=>{const t=e.target.value;R(t),i||E(),C(0)},et=()=>{fe(!0),E(),!r&&!b&&P&&requestAnimationFrame(()=>{var e;(e=M.current)==null||e.select()})},ke=e=>{var n;const t=e.relatedTarget;t&&((n=Z.current)!=null&&n.contains(t))||fe(!1)},tt=e=>{if(!k)switch(e.key){case"ArrowDown":e.preventDefault(),i?_e(1):E();break;case"ArrowUp":e.preventDefault(),i?_e(-1):E();break;case"Home":i&&u.length>0&&(e.preventDefault(),C(Math.max(0,u.findIndex(t=>!re(t)))));break;case"End":if(i&&u.length>0){e.preventDefault();for(let t=u.length-1;t>=0;t--)if(!re(u[t])){C(t);break}}break;case"Enter":i&&x>=0&&u[x]&&(e.preventDefault(),Ye(u[x]));break;case"Escape":i&&(e.preventDefault(),j());break;case"Backspace":r&&J===""&&c.length>0&&(e.preventDefault(),he(c[c.length-1]));break;case"Tab":j();break}},st=e=>{var t;k||e.target.closest("[data-chip], [data-combobox-clear]")||(e.target!==M.current&&(e.preventDefault(),(t=M.current)==null||t.focus()),i||E())},ge=r?c.length>0:v!=null&&v!=="",rt=J.length>0,lt=Re&&!r&&ge&&!k,nt=Ue||i||ge||rt,je=x>=0?u[x]:void 0,at=je!=null?q(je):void 0,T=s.useMemo(()=>{if(!r)return[];if(y==null){const e=m.filter(n=>c.includes(n.value));if(!w)return e;const t=new Set(e.map(n=>n.value));return[...e,...c.filter(n=>!t.has(n)).map(n=>({value:n,label:n}))]}return c.map(H).filter(e=>e!=null)},[r,y,m,c,w,H]),ot=o.default[`combobox--size-${Ct.toKebab(G)}`],ct=r&&T.length>0,ut=[o.default.combobox,ot,ae?o.default["combobox--invalid"]:"",p!=null&&nt?o.default["combobox--label-floated"]:"",K!=null?o.default["combobox--has-leading-icon"]:"",ct?o.default["combobox--has-chips"]:"",i?o.default["combobox--open"]:"",k?o.default["combobox--disabled"]:"",Le].filter(Boolean).join(" ");return l.jsxs("div",{className:ut,ref:Z,children:[l.jsxs("div",{className:o.default.combobox__wrapper,ref:ue,children:[p!=null&&l.jsx("label",{className:o.default.combobox__label,htmlFor:X,children:p}),l.jsxs("div",{className:o.default.combobox__inner,onMouseDown:st,children:[K!=null&&l.jsx("span",{className:o.default["combobox__leading-icon"],"aria-hidden":!0,children:l.jsx(z.IconSlotContext.Provider,{value:{size:"16"},children:K})}),l.jsxs("div",{className:o.default.combobox__value,children:[r&&T.length>0&&l.jsx(vt.default,{"aria-label":Ee??qt(p),disabled:k,children:T.map(e=>l.jsx(mt.default,{size:Mt[G],leadingAvatar:e.leadingAvatar,leadingIcon:e.leadingAvatar==null?e.leadingVisual:void 0,onRemove:k?void 0:t=>{t.stopPropagation(),he(e.value)},children:e.label},e.value))}),l.jsx("input",{ref:Te,id:X,className:o.default.combobox__control,type:"text",role:"combobox",autoComplete:"off",spellCheck:!1,disabled:k,placeholder:r&&T.length>0?void 0:Ae,value:J,"aria-label":ce,"aria-invalid":ae?!0:void 0,"aria-expanded":i,"aria-controls":D,"aria-autocomplete":"list","aria-activedescendant":at,"aria-busy":oe||void 0,onChange:Je,onFocus:et,onBlur:ke,onKeyDown:tt})]}),lt&&l.jsx("button",{...g,type:"button",className:yt.mergeClassNames(o.default.combobox__clear,g==null?void 0:g.className),"aria-label":Ve,"data-combobox-clear":"",onClick:Be,onBlur:e=>{var t;(t=g==null?void 0:g.onBlur)==null||t.call(g,e),ke(e)},children:l.jsx(z.default,{size:pt[G],glyph:l.jsx(dt,{})})}),l.jsx("span",{className:o.default["combobox__trailing-icon"],"aria-hidden":!0,children:l.jsx(z.default,{size:"12",glyph:l.jsx(ft,{})})})]})]}),ve&&Ze(l.jsx("div",{ref:xe,className:[o.default.combobox__popup,Ge==="above"?o.default["combobox__popup--above"]:"",Ke?o.default["combobox__popup--visible"]:""].filter(Boolean).join(" "),style:Xe,children:l.jsx(Me.default,{className:o.default.combobox__menu,children:l.jsxs(Me.PopoverMenuScroll,{maxHeight:Qe,children:[u.length>0&&l.jsx("ul",{id:D,className:o.default.combobox__list,role:"listbox","aria-multiselectable":r||void 0,"aria-label":typeof p=="string"?p:ce??Ie,children:u.map((e,t)=>{const n=t===x,_=it=>{it.preventDefault()};if(e.kind==="create")return l.jsx("li",{className:o.default.combobox__option,role:"presentation",children:l.jsx(Ce.default,{id:q(e),role:"option",label:Se(e.inputValue),leadingVisual:l.jsx(z.default,{glyph:l.jsx(bt,{})}),active:n,"aria-selected":!1,onMouseDown:_,onMouseEnter:()=>de(t),onClick:()=>se(e.inputValue)})},q(e));const{option:d}=e,$=We(d.value),ye=St(d);return l.jsx("li",{className:o.default.combobox__option,role:"presentation",children:l.jsx(Ce.default,{...jt.mergeMenuItemProps(qe,d.menuItemProps),id:q(e),role:"option",label:d.label,secondaryLabel:d.secondaryLabel,leadingElement:ye!=null,leadingVisual:ye,trailingElement:$,active:n,disabled:d.disabled,"aria-selected":$,onMouseDown:_,onMouseEnter:()=>de(t),onClick:()=>te(d)})},d.value)})}),oe?l.jsxs("div",{className:o.default.combobox__loading,role:"status",children:[l.jsx(xt.default,{size:"16","aria-hidden":!0}),l.jsx("span",{children:Ne})]}):u.length===0&&l.jsx("p",{className:o.default.combobox__empty,children:De})]})})}))]})});exports.default=Rt;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),t=require("react"),__fs=require("@mattermost/compass-icons/components/chevron-down.js"),fs=__fs?.default??__fs,__ds=require("@mattermost/compass-icons/components/close-circle.js"),ds=__ds?.default??__ds,__bs=require("@mattermost/compass-icons/components/plus.js"),bs=__bs?.default??__bs,ms=require("../chip/Chip.cjs"),vs=require("../chip/ChipGroup.cjs"),$=require("../icon/Icon.cjs"),Ae=require("../menu-item/MenuItem.cjs"),Ce=require("../popover-menu/PopoverMenu.cjs"),xs=require("../spinner/Spinner.cjs"),hs=require("../team-avatar/TeamAvatar.cjs"),_s=require("../user-avatar/UserAvatar.cjs"),ks=require("../../hooks/use-anchored-popup-portal.cjs"),gs=require("../../hooks/use-outside-close.cjs"),js=require("../../hooks/use-popover-transition.cjs"),ys=require("../../utils/menuItemProps.cjs"),As=require("../../utils/props.cjs"),Cs=require("../../utils/string.cjs"),o=require("./Combobox.module.scss.cjs"),Me=280,Ms={small:"small",medium:"medium",large:"large"},qs={small:"12",medium:"16",large:"16"};function ws(r){return typeof r=="string"?`${r} selections`:"Selected"}function Ds(r){return`Create "${r}"`}function re(r){return r.kind==="option"&&r.option.disabled===!0}function Ns(r,m){return m?r.label.toLowerCase().includes(m.toLowerCase()):!0}function Ss(r){return r==null?null:Array.isArray(r)?r[0]??null:r===""?null:r}function Rs(r){return r==null?[]:Array.isArray(r)?r:r===""?[]:[r]}function ps(r){if(r.leadingVisual!=null)return r.leadingVisual;if(r.leadingAvatar!=null)return a.jsx(_s.default,{src:r.leadingAvatar.src,alt:r.leadingAvatar.alt,size:"24"});if(r.leadingTeamAvatar!=null)return a.jsx(hs.default,{src:r.leadingTeamAvatar.src,initials:r.leadingTeamAvatar.initials??(r.leadingTeamAvatar.src?void 0:Array.from(r.label).slice(0,2).join("")),alt:r.leadingTeamAvatar.alt,size:"24",variant:"menu"})}const Vs=t.forwardRef(function({options:m,menuItemProps:qe,multiple:l=!1,value:le,defaultValue:ae,onChange:I,inputValue:U,defaultInputValue:we="",onInputChange:f,label:M,placeholder:De,leadingIcon:K,size:G="medium",invalid:ne=!1,disabled:k=!1,filter:T=!0,emptyMessage:Ne="No results",loading:oe=!1,loadingMessage:Se="Loading…",selectedOptions:y,creatable:w=!1,onCreateOption:Q,formatCreateLabel:Re=Ds,clearable:pe=!1,clearLabel:Ve="Clear",clearButtonProps:g,selectionsLabel:Ee,listboxLabel:Ie="Options",className:Te="",id:Le,"aria-label":ce,portalContainer:Fe=null,zIndex:Oe},D){const ze=t.useId(),X=Le??ze,N=`${X}-listbox`,Z=t.useRef(null),ue=t.useRef(null),C=t.useRef(null),He=t.useCallback(e=>{C.current=e,typeof D=="function"?D(e):D&&(D.current=e)},[D]),W=le!==void 0,[Pe,$e]=t.useState(()=>ae!==void 0?ae:l?[]:null),Y=W?le:Pe,v=l?null:Ss(Y),c=t.useMemo(()=>l?Rs(Y):[],[l,Y]),b=U!==void 0,[B,S]=t.useState(we),[i,ie]=t.useState(!1),[Ue,fe]=t.useState(!1),[x,A]=t.useState(-1),L=t.useRef(!1),de=t.useCallback(e=>{e!==x&&(L.current=!0,A(e))},[x]),[F,R]=t.useState(null),O=t.useCallback(e=>m.find(s=>s.value===e)??(y==null?void 0:y.find(s=>s.value===e))??(w?{value:e,label:e}:void 0),[m,y,w]),z=t.useMemo(()=>v==null?void 0:O(v),[O,v]),J=b?U:l?B:F!==null?F:(z==null?void 0:z.label)??B,ee=b?U:l?B:F!==null?F:"",p=t.useCallback(e=>{b||(S(e),l||R(e)),f==null||f(e)},[b,l,f]),h=t.useCallback(e=>{W||$e(e),I==null||I(e)},[W,I]),be=t.useMemo(()=>{if(T===!1)return m;const e=typeof T=="function"?T:Ns;return m.filter(s=>e(s,ee))},[m,T,ee]),V=w?ee.trim():"",me=t.useMemo(()=>{if(V==="")return!1;const e=V.toLowerCase(),s=d=>d.toLowerCase()===e;return[...m,...y??[]].some(d=>s(d.label)||s(d.value))?!1:!(l?c:v!=null?[v]:[]).some(s)},[V,m,y,l,c,v]),u=t.useMemo(()=>[...be.map(e=>({kind:"option",option:e})),...me?[{kind:"create",inputValue:V}]:[]],[be,me,V]),q=t.useCallback(e=>e.kind==="option"?`${N}-option-${e.option.value}`:`${N}-create`,[N]),{mounted:ve,visible:Ke}=js.usePopoverTransition(i),{placement:Ge,maxHeight:Qe,style:Xe,portalRef:xe,renderPortal:Ze}=ks.useAnchoredPopupPortal(ue,ve,{preferredHeight:Me,maxHeightCap:Me,portalContainer:Fe,zIndex:Oe}),j=t.useCallback(()=>{ie(!1),A(-1),!l&&!b&&(R(null),S(""))},[l,b]),E=t.useCallback(()=>{k||ie(!0)},[k]);gs.useOutsideClose(Z,i,j,xe),t.useEffect(()=>{i&&A(e=>{if(u.length===0)return-1;if(e>=0&&e<u.length)return e;const s=u.findIndex(n=>n.kind==="option"&&(l?c.includes(n.option.value):n.option.value===v));return s>=0?s:0})},[i,u,l,c,v]);const We=t.useCallback(e=>l?c.includes(e):v===e,[l,c,v]),se=t.useCallback(e=>{var s;if(!e.disabled){if(l){const n=c.includes(e.value)?c.filter(_=>_!==e.value):[...c,e.value];h(n),p(""),j(),(s=C.current)==null||s.focus();return}h(e.value),b?f==null||f(e.label):(S(""),R(null)),j()}},[l,c,h,p,b,f,j]),te=t.useCallback(e=>{var s;if(Q?Q(e):h(l?[...c,e]:e),l){p(""),j(),(s=C.current)==null||s.focus();return}b?f==null||f(e):(S(""),R(null)),j()},[Q,l,c,h,p,b,f,j]),Ye=t.useCallback(e=>{e.kind==="create"?te(e.inputValue):se(e.option)},[te,se]),Be=t.useCallback(()=>{var e;h(null),b?f==null||f(""):(S(""),R(null)),(e=C.current)==null||e.focus()},[h,b,f]),he=t.useCallback(e=>{l&&h(c.filter(s=>s!==e))},[l,c,h]),_e=t.useCallback(e=>{L.current=!1;const s=u.map((n,_)=>({row:n,i:_})).filter(({row:n})=>!re(n));if(s.length===0){A(-1);return}A(n=>{const _=s.findIndex(({i:P})=>P===n),d=_<0?e>0?0:s.length-1:(_+e+s.length)%s.length;return s[d].i})},[u]);t.useEffect(()=>{var s,n;if(!i||x<0)return;if(L.current){L.current=!1;return}const e=u[x];e&&((n=(s=document.getElementById(q(e)))==null?void 0:s.scrollIntoView)==null||n.call(s,{block:"nearest"}))},[i,x,u,q]);const Je=e=>{const s=e.target.value;p(s),i||E(),A(0)},es=()=>{fe(!0),E(),!l&&!b&&z&&requestAnimationFrame(()=>{var e;(e=C.current)==null||e.select()})},ke=e=>{var n;const s=e.relatedTarget;s&&((n=Z.current)!=null&&n.contains(s))||fe(!1)},ss=e=>{if(!k)switch(e.key){case"ArrowDown":e.preventDefault(),i?_e(1):E();break;case"ArrowUp":e.preventDefault(),i?_e(-1):E();break;case"Home":i&&u.length>0&&(e.preventDefault(),A(Math.max(0,u.findIndex(s=>!re(s)))));break;case"End":if(i&&u.length>0){e.preventDefault();for(let s=u.length-1;s>=0;s--)if(!re(u[s])){A(s);break}}break;case"Enter":i&&x>=0&&u[x]&&(e.preventDefault(),Ye(u[x]));break;case"Escape":i&&(e.preventDefault(),j());break;case"Backspace":l&&J===""&&c.length>0&&(e.preventDefault(),he(c[c.length-1]));break;case"Tab":j();break}},ts=e=>{var s;k||e.target.closest("[data-chip], [data-combobox-clear]")||(e.target!==C.current&&(e.preventDefault(),(s=C.current)==null||s.focus()),i||E())},ge=l?c.length>0:v!=null&&v!=="",rs=J.length>0,ls=pe&&!l&&ge&&!k,as=Ue||i||ge||rs,je=x>=0?u[x]:void 0,ns=je!=null?q(je):void 0,H=t.useMemo(()=>{if(!l)return[];if(y==null){const e=m.filter(n=>c.includes(n.value));if(!w)return e;const s=new Set(e.map(n=>n.value));return[...e,...c.filter(n=>!s.has(n)).map(n=>({value:n,label:n}))]}return c.map(O).filter(e=>e!=null)},[l,y,m,c,w,O]),os=o.default[`combobox--size-${Cs.toKebab(G)}`],cs=l&&H.length>0,us=[o.default.combobox,os,ne?o.default["combobox--invalid"]:"",M!=null&&as?o.default["combobox--label-floated"]:"",K!=null?o.default["combobox--has-leading-icon"]:"",cs?o.default["combobox--has-chips"]:"",i?o.default["combobox--open"]:"",k?o.default["combobox--disabled"]:"",Te].filter(Boolean).join(" ");return a.jsxs("div",{className:us,ref:Z,children:[a.jsxs("div",{className:o.default.combobox__wrapper,ref:ue,children:[M!=null&&a.jsx("label",{className:o.default.combobox__label,htmlFor:X,children:M}),a.jsxs("div",{className:o.default.combobox__inner,onMouseDown:ts,children:[K!=null&&a.jsx("span",{className:o.default["combobox__leading-icon"],"aria-hidden":!0,children:a.jsx($.IconSlotContext.Provider,{value:{size:"16"},children:K})}),a.jsxs("div",{className:o.default.combobox__value,children:[l&&H.length>0&&a.jsx(vs.default,{"aria-label":Ee??ws(M),disabled:k,children:H.map(e=>a.jsx(ms.default,{size:Ms[G],leadingAvatar:e.leadingAvatar,leadingIcon:e.leadingAvatar==null?e.leadingVisual:void 0,onRemove:k?void 0:s=>{s.stopPropagation(),he(e.value)},children:e.label},e.value))}),a.jsx("input",{ref:He,id:X,className:o.default.combobox__control,type:"text",role:"combobox",autoComplete:"off",spellCheck:!1,disabled:k,placeholder:l&&H.length>0?void 0:De,value:J,"aria-label":ce,"aria-invalid":ne?!0:void 0,"aria-expanded":i,"aria-controls":N,"aria-autocomplete":"list","aria-activedescendant":ns,"aria-busy":oe||void 0,onChange:Je,onFocus:es,onBlur:ke,onKeyDown:ss})]}),ls&&a.jsx("button",{...g,type:"button",className:As.mergeClassNames(o.default.combobox__clear,g==null?void 0:g.className),"aria-label":Ve,"data-combobox-clear":"",onClick:Be,onBlur:e=>{var s;(s=g==null?void 0:g.onBlur)==null||s.call(g,e),ke(e)},children:a.jsx($.default,{size:qs[G],glyph:a.jsx(ds,{})})}),a.jsx("span",{className:o.default["combobox__trailing-icon"],"aria-hidden":!0,children:a.jsx($.default,{size:"12",glyph:a.jsx(fs,{})})})]})]}),ve&&Ze(a.jsx("div",{ref:xe,className:[o.default.combobox__popup,Ge==="above"?o.default["combobox__popup--above"]:"",Ke?o.default["combobox__popup--visible"]:""].filter(Boolean).join(" "),style:Xe,children:a.jsx(Ce.default,{className:o.default.combobox__menu,children:a.jsxs(Ce.PopoverMenuScroll,{maxHeight:Qe,children:[u.length>0&&a.jsx("ul",{id:N,className:o.default.combobox__list,role:"listbox","aria-multiselectable":l||void 0,"aria-label":typeof M=="string"?M:ce??Ie,children:u.map((e,s)=>{const n=s===x,_=is=>{is.preventDefault()};if(e.kind==="create")return a.jsx("li",{className:o.default.combobox__option,role:"presentation",children:a.jsx(Ae.default,{id:q(e),role:"option",label:Re(e.inputValue),leadingVisual:a.jsx($.default,{glyph:a.jsx(bs,{})}),active:n,"aria-selected":!1,onMouseDown:_,onMouseEnter:()=>de(s),onClick:()=>te(e.inputValue)})},q(e));const{option:d}=e,P=We(d.value),ye=ps(d);return a.jsx("li",{className:o.default.combobox__option,role:"presentation",children:a.jsx(Ae.default,{...ys.mergeMenuItemProps(qe,d.menuItemProps),id:q(e),role:"option",label:d.label,secondaryLabel:d.secondaryLabel,leadingElement:ye!=null,leadingVisual:ye,trailingElement:P,active:n,disabled:d.disabled,"aria-selected":P,onMouseDown:_,onMouseEnter:()=>de(s),onClick:()=>se(d)})},d.value)})}),oe?a.jsxs("div",{className:o.default.combobox__loading,role:"status",children:[a.jsx(xs.default,{size:"16","aria-hidden":!0}),a.jsx("span",{children:Se})]}):u.length===0&&a.jsx("p",{className:o.default.combobox__empty,children:Ne})]})})}))]})});exports.default=Vs;
|
|
2
2
|
//# sourceMappingURL=Combobox.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport PlusIcon from '@mattermost/compass-icons/components/plus';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport Spinner from '@/components/spinner/Spinner';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' | 'medium' | 'large';\n\n// Combobox rows use `onClick`, so `onPointerUp` is left for callers.\ntype ComboboxMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onPointerUp'>\n>;\n\nexport type ComboboxOption = {\n value: string;\n /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. */\n label: string;\n disabled?: boolean;\n /** Leading content for the list row (icon or avatar node). */\n leadingVisual?: ReactNode;\n /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */\n leadingAvatar?: { src: string; alt: string };\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n /**\n * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Combobox; the props Combobox owns (ARIA, selection, handlers) can't be set.\n */\n menuItemProps?: ComboboxMenuItemProps;\n};\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n /**\n * `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins. Not applied to the create row.\n */\n menuItemProps?: ComboboxMenuItemProps;\n /** When true, selected values render as removable chips. Default: false. */\n multiple?: boolean;\n value?: string | string[] | null;\n defaultValue?: string | string[] | null;\n onChange?: (value: string | string[] | null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n invalid?: boolean;\n disabled?: boolean;\n /**\n * Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n */\n filter?: boolean | ((option: ComboboxOption, query: string) => boolean);\n /** Shown when there are no rows to pick from. Default: \"No results\". */\n emptyMessage?: ReactNode;\n /**\n * When true, the menu shows a loading row (with Spinner) in place of the\n * empty message. Set while async results are in flight.\n */\n loading?: boolean;\n /** Loading row text. Default: \"Loading…\". */\n loadingMessage?: ReactNode;\n /**\n * Option objects for the current value(s), used for chips and the\n * single-select label when a value is missing from `options` (e.g. an async\n * search that no longer returns it, or values preselected on load). Values\n * found in `options` resolve from there first.\n */\n selectedOptions?: ComboboxOption[];\n /**\n * When true, typed text that matches no option offers a create row. Created\n * values not found in `options` or `selectedOptions` display their raw value\n * as the label.\n */\n creatable?: boolean;\n /**\n * Called with the trimmed input when the create row is chosen. When set, the\n * host owns adding the value (`onChange` is not called). When omitted, the\n * input is committed as the value through `onChange`.\n */\n onCreateOption?: (inputValue: string) => void;\n /** Create row label. Default: `Create \"{inputValue}\"`. */\n formatCreateLabel?: (inputValue: string) => ReactNode;\n /**\n * Single mode: when a value is set, shows a clear button inside the control\n * that calls `onChange(null)`. Ignored with `multiple` (chips have their own\n * remove control). Default: false.\n */\n clearable?: boolean;\n /** Accessible name for the clear button. Default: \"Clear\". */\n clearLabel?: string;\n /** Extra attributes for the clear button (e.g. `data-testid`). */\n clearButtonProps?: BuiltInButtonProps;\n /**\n * Accessible name for the chip group in `multiple` mode. Default:\n * `{label} selections` when `label` is a string, otherwise \"Selected\".\n */\n selectionsLabel?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nconst CLEAR_ICON_SIZE: Record<ComboboxSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nfunction defaultSelectionsLabel(label: ReactNode): string {\n return typeof label === 'string' ? `${label} selections` : 'Selected';\n}\n\ntype ComboboxRow =\n | { kind: 'option'; option: ComboboxOption }\n | { kind: 'create'; inputValue: string };\n\nfunction defaultFormatCreateLabel(inputValue: string): ReactNode {\n return `Create \"${inputValue}\"`;\n}\n\nfunction isRowDisabled(row: ComboboxRow): boolean {\n return row.kind === 'option' && row.option.disabled === true;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string | string[] | null | undefined,\n): string | null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(value: string | string[] | null | undefined): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode | undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n return undefined;\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n menuItemProps,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n loading = false,\n loadingMessage = 'Loading…',\n selectedOptions,\n creatable = false,\n onCreateOption,\n formatCreateLabel = defaultFormatCreateLabel,\n clearable = false,\n clearLabel = 'Clear',\n clearButtonProps,\n selectionsLabel,\n listboxLabel = 'Options',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string | string[] | null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = useMemo(\n () => (multiple ? toMultiValue(rawValue) : []),\n [multiple, rawValue],\n );\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n const [queryOverride, setQueryOverride] = useState<string | null>(null);\n\n const resolveOption = useCallback(\n (optionValue: string): ComboboxOption | undefined =>\n options.find((o) => o.value === optionValue) ??\n selectedOptions?.find((o) => o.value === optionValue) ??\n (creatable ? { value: optionValue, label: optionValue } : undefined),\n [options, selectedOptions, creatable],\n );\n\n const selectedOption = useMemo(\n () => (singleValue == null ? undefined : resolveOption(singleValue)),\n [resolveOption, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string | string[] | null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const createInput = creatable ? filterQuery.trim() : '';\n const showCreateRow = useMemo(() => {\n if (createInput === '') return false;\n const needle = createInput.toLowerCase();\n const matches = (text: string) => text.toLowerCase() === needle;\n const knownOptions = [...options, ...(selectedOptions ?? [])];\n if (knownOptions.some((o) => matches(o.label) || matches(o.value))) {\n return false;\n }\n const current = multiple\n ? multiValue\n : singleValue != null\n ? [singleValue]\n : [];\n return !current.some(matches);\n }, [\n createInput,\n options,\n selectedOptions,\n multiple,\n multiValue,\n singleValue,\n ]);\n\n const rows = useMemo<ComboboxRow[]>(\n () => [\n ...filteredOptions.map((option) => ({ kind: 'option' as const, option })),\n ...(showCreateRow\n ? [{ kind: 'create' as const, inputValue: createInput }]\n : []),\n ],\n [filteredOptions, showCreateRow, createInput],\n );\n\n const rowId = useCallback(\n (row: ComboboxRow) =>\n row.kind === 'option'\n ? `${listboxId}-option-${row.option.value}`\n : `${listboxId}-create`,\n [listboxId],\n );\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (rows.length === 0) return -1;\n if (prev >= 0 && prev < rows.length) return prev;\n const selectedIdx = rows.findIndex(\n (row) =>\n row.kind === 'option' &&\n (multiple\n ? multiValue.includes(row.option.value)\n : row.option.value === singleValue),\n );\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, rows, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple ? multiValue.includes(optionValue) : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const createValue = useCallback(\n (inputValue: string) => {\n if (onCreateOption) {\n onCreateOption(inputValue);\n } else if (multiple) {\n commitValue([...multiValue, inputValue]);\n } else {\n commitValue(inputValue);\n }\n\n if (multiple) {\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(inputValue);\n }\n close();\n },\n [\n onCreateOption,\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const selectRow = useCallback(\n (row: ComboboxRow) => {\n if (row.kind === 'create') createValue(row.inputValue);\n else selectOption(row.option);\n },\n [createValue, selectOption],\n );\n\n const clearValue = useCallback(() => {\n commitValue(null);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.('');\n }\n inputRef.current?.focus();\n }, [commitValue, isInputControlled, onInputChange]);\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = rows\n .map((row, i) => ({ row, i }))\n .filter(({ row }) => !isRowDisabled(row));\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [rows],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const row = rows[activeIndex];\n if (!row) return;\n document.getElementById(rowId(row))?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, rows, rowId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n if (!multiple && !isInputControlled && selectedOption) {\n requestAnimationFrame(() => {\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node | null;\n if (related && rootRef.current?.contains(related)) return;\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n setActiveIndex(\n Math.max(\n 0,\n rows.findIndex((row) => !isRowDisabled(row)),\n ),\n );\n }\n break;\n case 'End':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n if (isOpen && activeIndex >= 0 && rows[activeIndex]) {\n e.preventDefault();\n selectRow(rows[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Backspace':\n if (multiple && displayInput === '' && multiValue.length > 0) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chips, their remove buttons, or the clear button\n if ((e.target as HTMLElement).closest('[data-chip], [data-combobox-clear]'))\n return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const showClearButton = clearable && !multiple && hasSelection && !disabled;\n const labelFloated = isFocused || isOpen || hasSelection || hasInputText;\n\n const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;\n const activeDescendant = activeRow != null ? rowId(activeRow) : undefined;\n\n // Without `selectedOptions`, values in `options` keep their list order (the\n // original behavior); with it, chips follow value order so they don't jump\n // around as async results change.\n const chipOptions = useMemo<ComboboxOption[]>(() => {\n if (!multiple) return [];\n if (selectedOptions == null) {\n const fromOptions = options.filter((o) => multiValue.includes(o.value));\n if (!creatable) return fromOptions;\n const listed = new Set(fromOptions.map((o) => o.value));\n return [\n ...fromOptions,\n ...multiValue\n .filter((v) => !listed.has(v))\n .map((v) => ({ value: v, label: v })),\n ];\n }\n return multiValue\n .map(resolveOption)\n .filter((o): o is ComboboxOption => o != null);\n }, [\n multiple,\n selectedOptions,\n options,\n multiValue,\n creatable,\n resolveOption,\n ]);\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && chipOptions.length > 0;\n const rootClass = [\n styles.combobox,\n sizeClass,\n invalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.combobox__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer convenience; the input owns keyboard interaction */}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles['combobox__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple && chipOptions.length > 0 && (\n <ChipGroup\n aria-label={selectionsLabel ?? defaultSelectionsLabel(label)}\n disabled={disabled}\n >\n {chipOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n >\n {option.label}\n </Chip>\n ))}\n </ChipGroup>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && chipOptions.length > 0 ? undefined : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-invalid={invalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n aria-busy={loading || undefined}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n </div>\n {showClearButton && (\n <button\n {...clearButtonProps}\n type=\"button\"\n className={mergeClassNames(\n styles.combobox__clear,\n clearButtonProps?.className,\n )}\n aria-label={clearLabel}\n data-combobox-clear=\"\"\n onClick={clearValue}\n onBlur={(e) => {\n clearButtonProps?.onBlur?.(e);\n handleBlur(e);\n }}\n >\n <Icon size={CLEAR_ICON_SIZE[size]} glyph={<CloseCircleIcon />} />\n </button>\n )}\n <span className={styles['combobox__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {rows.length > 0 && (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple || undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {rows.map((row, index) => {\n const active = index === activeIndex;\n const preventBlur = (ev: MouseEvent) => {\n // Prevent input blur before click handler\n ev.preventDefault();\n };\n if (row.kind === 'create') {\n return (\n <li\n key={rowId(row)}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={formatCreateLabel(row.inputValue)}\n leadingVisual={<Icon glyph={<PlusIcon />} />}\n active={active}\n aria-selected={false}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => createValue(row.inputValue)}\n />\n </li>\n );\n }\n const { option } = row;\n const selected = isSelected(option.value);\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n {...mergeMenuItemProps(\n menuItemProps,\n option.menuItemProps,\n )}\n id={rowId(row)}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n {loading ? (\n <div className={styles.combobox__loading} role=\"status\">\n <Spinner size=\"16\" aria-hidden />\n <span>{loadingMessage}</span>\n </div>\n ) : (\n rows.length === 0 && (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n )\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","CLEAR_ICON_SIZE","defaultSelectionsLabel","label","defaultFormatCreateLabel","inputValue","isRowDisabled","row","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","Combobox","forwardRef","options","menuItemProps","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","loading","loadingMessage","selectedOptions","creatable","onCreateOption","formatCreateLabel","clearable","clearLabel","clearButtonProps","selectionsLabel","listboxLabel","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","useMemo","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","queryOverride","setQueryOverride","resolveOption","optionValue","o","selectedOption","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","createInput","showCreateRow","needle","matches","text","rows","rowId","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","selectOption","v","_a","createValue","selectRow","clearValue","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","_b","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","showClearButton","labelFloated","activeRow","activeDescendant","chipOptions","fromOptions","listed","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","mergeClassNames","Icon","CloseCircleIcon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","active","preventBlur","MenuItem","PlusIcon","selected","leading","mergeMenuItemProps","Spinner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n} from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport PlusIcon from '@mattermost/compass-icons/components/plus';\nimport Chip from '@/components/chip/Chip';\nimport ChipGroup from '@/components/chip/ChipGroup';\nimport type { ChipSize } from '@/components/chip/Chip';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport type { IconSize } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport Spinner from '@/components/spinner/Spinner';\nimport TeamAvatar from '@/components/team-avatar/TeamAvatar';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './Combobox.module.scss';\n\nexport type ComboboxSize = 'small' | 'medium' | 'large';\n\n// Combobox rows use `onClick`, so `onPointerUp` is left for callers.\ntype ComboboxMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onPointerUp'>\n>;\n\nexport type ComboboxOption = {\n value: string;\n /** Kept as `string`: the default filter, create-row matching, and the single-select input text all read it. */\n label: string;\n disabled?: boolean;\n /** Leading content for the list row (icon or avatar node). */\n leadingVisual?: ReactNode;\n /** Avatar for chips / list when a photo is preferred over `leadingVisual`. */\n leadingAvatar?: { src: string; alt: string };\n /**\n * Team avatar for the list row — a non-interactive `TeamAvatar` (`variant=\"menu\"`, 24px) with an\n * image or an initials fallback. The row's `label` names the team and `MenuItem` hides the\n * leading visual from assistive tech, so `alt` is optional. List rows only; chips don't render\n * it. With neither `src` nor `initials`, the fallback shows the first two letters of `label`.\n * `leadingVisual` and `leadingAvatar` take precedence.\n */\n leadingTeamAvatar?: { src?: string; initials?: string; alt?: string };\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n /**\n * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Combobox; the props Combobox owns (ARIA, selection, handlers) can't be set.\n */\n menuItemProps?: ComboboxMenuItemProps;\n};\n\nexport interface ComboboxProps {\n options: ComboboxOption[];\n /**\n * `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins. Not applied to the create row.\n */\n menuItemProps?: ComboboxMenuItemProps;\n /** When true, selected values render as removable chips. Default: false. */\n multiple?: boolean;\n value?: string | string[] | null;\n defaultValue?: string | string[] | null;\n onChange?: (value: string | string[] | null) => void;\n inputValue?: string;\n defaultInputValue?: string;\n onInputChange?: (value: string) => void;\n label?: ReactNode;\n placeholder?: string;\n leadingIcon?: ReactNode;\n size?: ComboboxSize;\n invalid?: boolean;\n disabled?: boolean;\n /**\n * Client-side filter. `true` (default) matches labels case-insensitively.\n * `false` shows all options (caller filters via `inputValue` / `onInputChange`).\n */\n filter?: boolean | ((option: ComboboxOption, query: string) => boolean);\n /** Shown when there are no rows to pick from. Default: \"No results\". */\n emptyMessage?: ReactNode;\n /**\n * When true, the menu shows a loading row (with Spinner) in place of the\n * empty message. Set while async results are in flight.\n */\n loading?: boolean;\n /** Loading row text. Default: \"Loading…\". */\n loadingMessage?: ReactNode;\n /**\n * Option objects for the current value(s), used for chips and the\n * single-select label when a value is missing from `options` (e.g. an async\n * search that no longer returns it, or values preselected on load). Values\n * found in `options` resolve from there first.\n */\n selectedOptions?: ComboboxOption[];\n /**\n * When true, typed text that matches no option offers a create row. Created\n * values not found in `options` or `selectedOptions` display their raw value\n * as the label.\n */\n creatable?: boolean;\n /**\n * Called with the trimmed input when the create row is chosen. When set, the\n * host owns adding the value (`onChange` is not called). When omitted, the\n * input is committed as the value through `onChange`.\n */\n onCreateOption?: (inputValue: string) => void;\n /** Create row label. Default: `Create \"{inputValue}\"`. */\n formatCreateLabel?: (inputValue: string) => ReactNode;\n /**\n * Single mode: when a value is set, shows a clear button inside the control\n * that calls `onChange(null)`. Ignored with `multiple` (chips have their own\n * remove control). Default: false.\n */\n clearable?: boolean;\n /** Accessible name for the clear button. Default: \"Clear\". */\n clearLabel?: string;\n /** Extra attributes for the clear button (e.g. `data-testid`). */\n clearButtonProps?: BuiltInButtonProps;\n /**\n * Accessible name for the chip group in `multiple` mode. Default:\n * `{label} selections` when `label` is a string, otherwise \"Selected\".\n */\n selectionsLabel?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n className?: string;\n id?: string;\n 'aria-label'?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nconst CHIP_SIZE_BY_COMBOBOX: Record<ComboboxSize, ChipSize> = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nconst CLEAR_ICON_SIZE: Record<ComboboxSize, IconSize> = {\n small: '12',\n medium: '16',\n large: '16',\n};\n\nfunction defaultSelectionsLabel(label: ReactNode): string {\n return typeof label === 'string' ? `${label} selections` : 'Selected';\n}\n\ntype ComboboxRow =\n | { kind: 'option'; option: ComboboxOption }\n | { kind: 'create'; inputValue: string };\n\nfunction defaultFormatCreateLabel(inputValue: string): ReactNode {\n return `Create \"${inputValue}\"`;\n}\n\nfunction isRowDisabled(row: ComboboxRow): boolean {\n return row.kind === 'option' && row.option.disabled === true;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n if (!query) return true;\n return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction toSingleValue(\n value: string | string[] | null | undefined,\n): string | null {\n if (value == null) return null;\n if (Array.isArray(value)) return value[0] ?? null;\n return value === '' ? null : value;\n}\n\nfunction toMultiValue(value: string | string[] | null | undefined): string[] {\n if (value == null) return [];\n if (Array.isArray(value)) return value;\n return value === '' ? [] : [value];\n}\n\nfunction optionLeadingVisual(option: ComboboxOption): ReactNode | undefined {\n if (option.leadingVisual != null) return option.leadingVisual;\n if (option.leadingAvatar != null) {\n return (\n <UserAvatar\n src={option.leadingAvatar.src}\n alt={option.leadingAvatar.alt}\n size=\"24\"\n />\n );\n }\n if (option.leadingTeamAvatar != null) {\n return (\n <TeamAvatar\n src={option.leadingTeamAvatar.src}\n initials={\n option.leadingTeamAvatar.initials ??\n (option.leadingTeamAvatar.src\n ? undefined\n : Array.from(option.label).slice(0, 2).join(''))\n }\n alt={option.leadingTeamAvatar.alt}\n size=\"24\"\n variant=\"menu\"\n />\n );\n }\n return undefined;\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }, {\n * value: 'releases', label: 'Releases' }, ];\n */\nconst Combobox = forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(\n {\n options,\n menuItemProps,\n multiple = false,\n value: valueProp,\n defaultValue,\n onChange,\n inputValue: inputValueProp,\n defaultInputValue = '',\n onInputChange,\n label,\n placeholder,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n filter = true,\n emptyMessage = 'No results',\n loading = false,\n loadingMessage = 'Loading…',\n selectedOptions,\n creatable = false,\n onCreateOption,\n formatCreateLabel = defaultFormatCreateLabel,\n clearable = false,\n clearLabel = 'Clear',\n clearButtonProps,\n selectionsLabel,\n listboxLabel = 'Options',\n className = '',\n id: idProp,\n 'aria-label': ariaLabel,\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const setInputRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isValueControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<\n string | string[] | null\n >(() => {\n if (defaultValue !== undefined) return defaultValue;\n return multiple ? [] : null;\n });\n\n const rawValue = isValueControlled ? valueProp! : uncontrolledValue;\n const singleValue = multiple ? null : toSingleValue(rawValue);\n const multiValue = useMemo(\n () => (multiple ? toMultiValue(rawValue) : []),\n [multiple, rawValue],\n );\n\n const isInputControlled = inputValueProp !== undefined;\n const [uncontrolledInput, setUncontrolledInput] = useState(defaultInputValue);\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n const [queryOverride, setQueryOverride] = useState<string | null>(null);\n\n const resolveOption = useCallback(\n (optionValue: string): ComboboxOption | undefined =>\n options.find((o) => o.value === optionValue) ??\n selectedOptions?.find((o) => o.value === optionValue) ??\n (creatable ? { value: optionValue, label: optionValue } : undefined),\n [options, selectedOptions, creatable],\n );\n\n const selectedOption = useMemo(\n () => (singleValue == null ? undefined : resolveOption(singleValue)),\n [resolveOption, singleValue],\n );\n\n // Single-select: show the selected label until the user starts typing a filter.\n // `queryOverride !== null` means the field is in filter-edit mode.\n const displayInput = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return selectedOption?.label ?? uncontrolledInput;\n })();\n\n const filterQuery = (() => {\n if (isInputControlled) return inputValueProp!;\n if (multiple) return uncontrolledInput;\n if (queryOverride !== null) return queryOverride;\n return '';\n })();\n\n const setInputDisplay = useCallback(\n (next: string) => {\n if (!isInputControlled) {\n setUncontrolledInput(next);\n if (!multiple) setQueryOverride(next);\n }\n onInputChange?.(next);\n },\n [isInputControlled, multiple, onInputChange],\n );\n\n const commitValue = useCallback(\n (next: string | string[] | null) => {\n if (!isValueControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isValueControlled, onChange],\n );\n\n const filteredOptions = useMemo(() => {\n if (filter === false) return options;\n const fn = typeof filter === 'function' ? filter : defaultFilter;\n return options.filter((o) => fn(o, filterQuery));\n }, [options, filter, filterQuery]);\n\n const createInput = creatable ? filterQuery.trim() : '';\n const showCreateRow = useMemo(() => {\n if (createInput === '') return false;\n const needle = createInput.toLowerCase();\n const matches = (text: string) => text.toLowerCase() === needle;\n const knownOptions = [...options, ...(selectedOptions ?? [])];\n if (knownOptions.some((o) => matches(o.label) || matches(o.value))) {\n return false;\n }\n const current = multiple\n ? multiValue\n : singleValue != null\n ? [singleValue]\n : [];\n return !current.some(matches);\n }, [\n createInput,\n options,\n selectedOptions,\n multiple,\n multiValue,\n singleValue,\n ]);\n\n const rows = useMemo<ComboboxRow[]>(\n () => [\n ...filteredOptions.map((option) => ({ kind: 'option' as const, option })),\n ...(showCreateRow\n ? [{ kind: 'create' as const, inputValue: createInput }]\n : []),\n ],\n [filteredOptions, showCreateRow, createInput],\n );\n\n const rowId = useCallback(\n (row: ComboboxRow) =>\n row.kind === 'option'\n ? `${listboxId}-option-${row.option.value}`\n : `${listboxId}-create`,\n [listboxId],\n );\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n if (!multiple && !isInputControlled) {\n setQueryOverride(null);\n setUncontrolledInput('');\n }\n }, [multiple, isInputControlled]);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (rows.length === 0) return -1;\n if (prev >= 0 && prev < rows.length) return prev;\n const selectedIdx = rows.findIndex(\n (row) =>\n row.kind === 'option' &&\n (multiple\n ? multiValue.includes(row.option.value)\n : row.option.value === singleValue),\n );\n return selectedIdx >= 0 ? selectedIdx : 0;\n });\n }, [isOpen, rows, multiple, multiValue, singleValue]);\n\n const isSelected = useCallback(\n (optionValue: string) =>\n multiple ? multiValue.includes(optionValue) : singleValue === optionValue,\n [multiple, multiValue, singleValue],\n );\n\n const selectOption = useCallback(\n (option: ComboboxOption) => {\n if (option.disabled) return;\n\n if (multiple) {\n const next = multiValue.includes(option.value)\n ? multiValue.filter((v) => v !== option.value)\n : [...multiValue, option.value];\n commitValue(next);\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n\n commitValue(option.value);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(option.label);\n }\n close();\n },\n [\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const createValue = useCallback(\n (inputValue: string) => {\n if (onCreateOption) {\n onCreateOption(inputValue);\n } else if (multiple) {\n commitValue([...multiValue, inputValue]);\n } else {\n commitValue(inputValue);\n }\n\n if (multiple) {\n setInputDisplay('');\n close();\n inputRef.current?.focus();\n return;\n }\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.(inputValue);\n }\n close();\n },\n [\n onCreateOption,\n multiple,\n multiValue,\n commitValue,\n setInputDisplay,\n isInputControlled,\n onInputChange,\n close,\n ],\n );\n\n const selectRow = useCallback(\n (row: ComboboxRow) => {\n if (row.kind === 'create') createValue(row.inputValue);\n else selectOption(row.option);\n },\n [createValue, selectOption],\n );\n\n const clearValue = useCallback(() => {\n commitValue(null);\n if (!isInputControlled) {\n setUncontrolledInput('');\n setQueryOverride(null);\n } else {\n onInputChange?.('');\n }\n inputRef.current?.focus();\n }, [commitValue, isInputControlled, onInputChange]);\n\n const removeValue = useCallback(\n (optionValue: string) => {\n if (!multiple) return;\n commitValue(multiValue.filter((v) => v !== optionValue));\n },\n [multiple, multiValue, commitValue],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = rows\n .map((row, i) => ({ row, i }))\n .filter(({ row }) => !isRowDisabled(row));\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [rows],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const row = rows[activeIndex];\n if (!row) return;\n document.getElementById(rowId(row))?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, rows, rowId]);\n\n const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const next = e.target.value;\n setInputDisplay(next);\n if (!isOpen) open();\n setActiveIndex(0);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n open();\n // Select-all so the next keystroke replaces the selected label (filter mode).\n if (!multiple && !isInputControlled && selectedOption) {\n requestAnimationFrame(() => {\n inputRef.current?.select();\n });\n }\n };\n\n const handleBlur = (e: FocusEvent<HTMLElement>) => {\n // Delay so option mousedown can run first\n const related = e.relatedTarget as Node | null;\n if (related && rootRef.current?.contains(related)) return;\n setIsFocused(false);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n setActiveIndex(\n Math.max(\n 0,\n rows.findIndex((row) => !isRowDisabled(row)),\n ),\n );\n }\n break;\n case 'End':\n if (isOpen && rows.length > 0) {\n e.preventDefault();\n for (let i = rows.length - 1; i >= 0; i--) {\n if (!isRowDisabled(rows[i])) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n if (isOpen && activeIndex >= 0 && rows[activeIndex]) {\n e.preventDefault();\n selectRow(rows[activeIndex]);\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Backspace':\n if (multiple && displayInput === '' && multiValue.length > 0) {\n e.preventDefault();\n removeValue(multiValue[multiValue.length - 1]);\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const handleWrapperMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n // Don't steal focus from chips, their remove buttons, or the clear button\n if ((e.target as HTMLElement).closest('[data-chip], [data-combobox-clear]'))\n return;\n if (e.target !== inputRef.current) {\n e.preventDefault();\n inputRef.current?.focus();\n }\n if (!isOpen) open();\n };\n\n const hasSelection = multiple\n ? multiValue.length > 0\n : singleValue != null && singleValue !== '';\n const hasInputText = displayInput.length > 0;\n const showClearButton = clearable && !multiple && hasSelection && !disabled;\n const labelFloated = isFocused || isOpen || hasSelection || hasInputText;\n\n const activeRow = activeIndex >= 0 ? rows[activeIndex] : undefined;\n const activeDescendant = activeRow != null ? rowId(activeRow) : undefined;\n\n // Without `selectedOptions`, values in `options` keep their list order (the\n // original behavior); with it, chips follow value order so they don't jump\n // around as async results change.\n const chipOptions = useMemo<ComboboxOption[]>(() => {\n if (!multiple) return [];\n if (selectedOptions == null) {\n const fromOptions = options.filter((o) => multiValue.includes(o.value));\n if (!creatable) return fromOptions;\n const listed = new Set(fromOptions.map((o) => o.value));\n return [\n ...fromOptions,\n ...multiValue\n .filter((v) => !listed.has(v))\n .map((v) => ({ value: v, label: v })),\n ];\n }\n return multiValue\n .map(resolveOption)\n .filter((o): o is ComboboxOption => o != null);\n }, [\n multiple,\n selectedOptions,\n options,\n multiValue,\n creatable,\n resolveOption,\n ]);\n\n const sizeClass = styles[`combobox--size-${toKebab(size)}`];\n const hasChips = multiple && chipOptions.length > 0;\n const rootClass = [\n styles.combobox,\n sizeClass,\n invalid ? styles['combobox--invalid'] : '',\n label != null && labelFloated ? styles['combobox--label-floated'] : '',\n leadingIcon != null ? styles['combobox--has-leading-icon'] : '',\n hasChips ? styles['combobox--has-chips'] : '',\n isOpen ? styles['combobox--open'] : '',\n disabled ? styles['combobox--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.combobox__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.combobox__label} htmlFor={id}>\n {label}\n </label>\n )}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- pointer convenience; the input owns keyboard interaction */}\n <div\n className={styles.combobox__inner}\n onMouseDown={handleWrapperMouseDown}\n >\n {leadingIcon != null && (\n <span className={styles['combobox__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <div className={styles.combobox__value}>\n {multiple && chipOptions.length > 0 && (\n <ChipGroup\n aria-label={selectionsLabel ?? defaultSelectionsLabel(label)}\n disabled={disabled}\n >\n {chipOptions.map((option) => (\n <Chip\n key={option.value}\n size={CHIP_SIZE_BY_COMBOBOX[size]}\n leadingAvatar={option.leadingAvatar}\n leadingIcon={\n option.leadingAvatar == null\n ? option.leadingVisual\n : undefined\n }\n onRemove={\n disabled\n ? undefined\n : (ev) => {\n ev.stopPropagation();\n removeValue(option.value);\n }\n }\n >\n {option.label}\n </Chip>\n ))}\n </ChipGroup>\n )}\n <input\n ref={setInputRef}\n id={id}\n className={styles.combobox__control}\n type=\"text\"\n role=\"combobox\"\n autoComplete=\"off\"\n spellCheck={false}\n disabled={disabled}\n placeholder={\n multiple && chipOptions.length > 0 ? undefined : placeholder\n }\n value={displayInput}\n aria-label={ariaLabel}\n aria-invalid={invalid ? true : undefined}\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-autocomplete=\"list\"\n aria-activedescendant={activeDescendant}\n aria-busy={loading || undefined}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n />\n </div>\n {showClearButton && (\n <button\n {...clearButtonProps}\n type=\"button\"\n className={mergeClassNames(\n styles.combobox__clear,\n clearButtonProps?.className,\n )}\n aria-label={clearLabel}\n data-combobox-clear=\"\"\n onClick={clearValue}\n onBlur={(e) => {\n clearButtonProps?.onBlur?.(e);\n handleBlur(e);\n }}\n >\n <Icon size={CLEAR_ICON_SIZE[size]} glyph={<CloseCircleIcon />} />\n </button>\n )}\n <span className={styles['combobox__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </div>\n </div>\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.combobox__popup,\n placement === 'above' ? styles['combobox__popup--above'] : '',\n popupVisible ? styles['combobox__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.combobox__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n {rows.length > 0 && (\n <ul\n id={listboxId}\n className={styles.combobox__list}\n role=\"listbox\"\n aria-multiselectable={multiple || undefined}\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {rows.map((row, index) => {\n const active = index === activeIndex;\n const preventBlur = (ev: MouseEvent) => {\n // Prevent input blur before click handler\n ev.preventDefault();\n };\n if (row.kind === 'create') {\n return (\n <li\n key={rowId(row)}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n id={rowId(row)}\n role=\"option\"\n label={formatCreateLabel(row.inputValue)}\n leadingVisual={<Icon glyph={<PlusIcon />} />}\n active={active}\n aria-selected={false}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => createValue(row.inputValue)}\n />\n </li>\n );\n }\n const { option } = row;\n const selected = isSelected(option.value);\n const leading = optionLeadingVisual(option);\n return (\n <li\n key={option.value}\n className={styles.combobox__option}\n role=\"presentation\"\n >\n <MenuItem\n {...mergeMenuItemProps(\n menuItemProps,\n option.menuItemProps,\n )}\n id={rowId(row)}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={leading != null}\n leadingVisual={leading}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={preventBlur}\n onMouseEnter={() => hoverRow(index)}\n onClick={() => selectOption(option)}\n />\n </li>\n );\n })}\n </ul>\n )}\n {loading ? (\n <div className={styles.combobox__loading} role=\"status\">\n <Spinner size=\"16\" aria-hidden />\n <span>{loadingMessage}</span>\n </div>\n ) : (\n rows.length === 0 && (\n <p className={styles.combobox__empty}>{emptyMessage}</p>\n )\n )}\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Combobox;\n"],"names":["POPUP_MAX_HEIGHT","CHIP_SIZE_BY_COMBOBOX","CLEAR_ICON_SIZE","defaultSelectionsLabel","label","defaultFormatCreateLabel","inputValue","isRowDisabled","row","defaultFilter","option","query","toSingleValue","value","toMultiValue","optionLeadingVisual","jsx","UserAvatar","TeamAvatar","Combobox","forwardRef","options","menuItemProps","multiple","valueProp","defaultValue","onChange","inputValueProp","defaultInputValue","onInputChange","placeholder","leadingIcon","size","invalid","disabled","filter","emptyMessage","loading","loadingMessage","selectedOptions","creatable","onCreateOption","formatCreateLabel","clearable","clearLabel","clearButtonProps","selectionsLabel","listboxLabel","className","idProp","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","listboxId","rootRef","useRef","anchorRef","inputRef","setInputRef","useCallback","node","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","rawValue","singleValue","multiValue","useMemo","isInputControlled","uncontrolledInput","setUncontrolledInput","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","queryOverride","setQueryOverride","resolveOption","optionValue","o","selectedOption","displayInput","filterQuery","setInputDisplay","next","commitValue","filteredOptions","fn","createInput","showCreateRow","needle","matches","text","rows","rowId","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","isSelected","selectOption","v","_a","createValue","selectRow","clearValue","removeValue","moveActive","delta","enabled","i","currentPos","nextPos","_b","handleInputChange","handleFocus","handleBlur","related","handleKeyDown","handleWrapperMouseDown","hasSelection","hasInputText","showClearButton","labelFloated","activeRow","activeDescendant","chipOptions","fromOptions","listed","sizeClass","styles","toKebab","hasChips","rootClass","jsxs","IconSlotContext","ChipGroup","Chip","ev","mergeClassNames","Icon","CloseCircleIcon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","active","preventBlur","MenuItem","PlusIcon","selected","leading","mergeMenuItemProps","Spinner"],"mappings":"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"}
|
|
@@ -15,6 +15,18 @@ export type ComboboxOption = {
|
|
|
15
15
|
src: string;
|
|
16
16
|
alt: string;
|
|
17
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* Team avatar for the list row — a non-interactive `TeamAvatar` (`variant="menu"`, 24px) with an
|
|
20
|
+
* image or an initials fallback. The row's `label` names the team and `MenuItem` hides the
|
|
21
|
+
* leading visual from assistive tech, so `alt` is optional. List rows only; chips don't render
|
|
22
|
+
* it. With neither `src` nor `initials`, the fallback shows the first two letters of `label`.
|
|
23
|
+
* `leadingVisual` and `leadingAvatar` take precedence.
|
|
24
|
+
*/
|
|
25
|
+
leadingTeamAvatar?: {
|
|
26
|
+
src?: string;
|
|
27
|
+
initials?: string;
|
|
28
|
+
alt?: string;
|
|
29
|
+
};
|
|
18
30
|
/** Accepts translated nodes. */
|
|
19
31
|
secondaryLabel?: ReactNode;
|
|
20
32
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKV,SAAS,EACV,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|