@telegraph/combobox 0.0.39 → 0.0.40

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @telegraph/combobox
 
+## 0.0.40
+
+### Patch Changes
+
+- [#299](https://github.com/knocklabs/telegraph/pull/299) [`57d486e`](https://github.com/knocklabs/telegraph/commit/57d486e1da7b0c650bc39ac12528a5f0f4f3a374) Thanks [@kylemcd](https://github.com/kylemcd)! - new select component + combobox fixes
+
 ## 0.0.39
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),F=require("@radix-ui/react-dismissable-layer"),H=require("@radix-ui/react-use-controllable-state"),M=require("@radix-ui/react-visually-hidden"),T=require("@telegraph/button"),A=require("@telegraph/compose-refs"),K=require("@telegraph/helpers"),R=require("@telegraph/icon"),_=require("@telegraph/input"),w=require("@telegraph/layout"),O=require("@telegraph/menu"),L=require("@telegraph/tag"),$=require("@telegraph/tooltip"),Q=require("@telegraph/typography"),x=require("framer-motion"),s=require("react");function z(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const u=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(c,e,u.get?u:{enumerable:!0,get:()=>t[e]})}}return c.default=t,Object.freeze(c)}const G=z(M),Y={0:"5",1:"6",2:"8",3:"10"},v=t=>Array.isArray(t),k=t=>typeof t=="object"&&!Array.isArray(t)||!t,N=["ArrowDown","PageUp","Home"],U=["ArrowUp","PageDown","End"],D=["Enter"," "],C=s.createContext({onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{},clearable:!1}),X=({modal:t=!0,closeOnSelect:c=!0,clearable:e=!1,open:u,onOpenChange:l,defaultOpen:r,value:n,onValueChange:o,errored:a,placeholder:y,layout:f,...m})=>{const p=s.useId(),g=s.useId(),d=s.useRef(null),b=s.useRef(null),h=s.useRef(null),[S,j]=s.useState(""),[I=!1,E]=H.useControllableState({prop:u,defaultProp:r,onChange:l}),B=s.useCallback(()=>{E(V=>!V)},[E]);return s.useEffect(()=>{I||j("")},[I]),i.jsx(C.Provider,{value:{contentId:p,triggerId:g,value:n,onValueChange:o,placeholder:y,open:I,setOpen:E,onOpenToggle:B,closeOnSelect:c,clearable:e,searchQuery:S,setSearchQuery:j,triggerRef:d,searchRef:b,contentRef:h,errored:a,layout:f},children:i.jsx(O.Menu.Root,{open:I,onOpenChange:E,modal:t,...m})})},J=({label:t,value:c,...e})=>{const u=s.useContext(C);return i.jsxs(L.Tag.Root,{size:"1",as:x.motion.span,initial:{opacity:0,transform:"scale(0.8)"},animate:{opacity:1,transform:"scale(1)"},exit:{opacity:0,transform:"scale(0.5)"},layout:"position",transition:{duration:.2,type:"spring",bounce:0,layout:{duration:.05,type:"spring",bounce:0}},...e,children:[i.jsx(L.Tag.Text,{children:t||c}),i.jsx(L.Tag.Button,{icon:{icon:R.Lucide.X,alt:`Remove ${c}`},onClick:l=>{if(!u.onValueChange)return;const r=u.onValueChange,o=u.value.filter(a=>(a==null?void 0:a.value)!==c);r==null||r(o),l.stopPropagation(),l.preventDefault()}})]})},W=()=>{var c,e;const t=s.useContext(C);if(t.value&&v(t.value)){const u=t.layout||"truncate",l=t.value.length-2,r=l.toString().split("");return t.value.length===0?i.jsx(T.Button.Text,{color:"gray",children:t.placeholder}):i.jsxs(w.Stack,{gap:"1",w:"full",wrap:u==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[i.jsx(x.AnimatePresence,{initial:!1,mode:"popLayout",children:t.value.map((n,o)=>{if(n!=null&&n.value&&(u==="truncate"&&o<=1||u==="wrap"))return i.jsx(K.RefToTgphRef,{children:i.jsx(J,{...n})},n.value)})}),i.jsx(x.AnimatePresence,{children:u==="truncate"&&t.value.length>2&&i.jsx(w.Stack,{as:x.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2,type:"spring",bounce:0},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${l} more selected`,style:{position:"absolute",right:0,backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:i.jsxs(Q.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",i.jsx(x.AnimatePresence,{mode:"wait",initial:!1,children:r.map(n=>i.jsx(w.Box,{as:x.motion.span,w:"2",display:"inline-block",initial:{opacity:.5},animate:{opacity:1},exit:{opacity:.5},transition:{duration:.1,type:"spring",bounce:0},children:n},n))})," ","more"]})},"truncated text")})]})}return i.jsx(T.Button.Text,{color:t.value?"default":"gray",children:((c=t==null?void 0:t.value)==null?void 0:c.label)||((e=t==null?void 0:t.value)==null?void 0:e.value)||t.placeholder})},Z=({size:t="2",...c})=>{const e=s.useContext(C),u=s.useCallback(()=>{var n,o,a;return e.value?k(e.value)?((n=e.value)==null?void 0:n.label)||((o=e.value)==null?void 0:o.value)||e.placeholder:((a=e.value)==null?void 0:a.map(y=>y==null?void 0:y.label).join(", "))||e.placeholder:e.placeholder},[e.value,e.placeholder]),l=s.useMemo(()=>{var n;if(v(e.value))return e.clearable&&((n=e.value)==null?void 0:n.length)>0;if(k(e.value))return e.clearable&&e.value},[e.clearable,e.value]),r=()=>{var n,o;if(v(e.value)){const a=e.onValueChange;a==null||a([])}if(k(e.value)){const a=e.onValueChange;a==null||a(void 0)}(o=(n=e.triggerRef)==null?void 0:n.current)==null||o.focus()};return i.jsx(O.Menu.Trigger,{...c,asChild:!0,onClick:n=>{var o,a;n.preventDefault(),e.onOpenToggle(),(a=(o=e.triggerRef)==null?void 0:o.current)==null||a.focus()},onKeyDown:n=>{if(n.key==="Tab"){n.stopPropagation();return}if(D.includes(n.key)){n.preventDefault();return}if(n.key==="ArrowDown"){e.onOpenToggle();return}},tgphRef:e.triggerRef,children:i.jsxs(T.Button.Root,{id:e.triggerId,type:"button",bg:"surface-1",variant:"outline",align:"center",minH:Y[t],h:"full",w:"full",py:"1",size:t,color:e.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":u(),"aria-controls":e.contentId,"aria-expanded":e.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-comobox-trigger-open":e.open,children:[i.jsx(W,{}),i.jsxs(w.Stack,{align:"center",gap:"1",children:[l&&i.jsx($.Tooltip,{label:"Clear field",children:i.jsx(T.Button,{type:"button",icon:{icon:R.Lucide.X,alt:"Clear field"},size:"1",variant:"ghost",onClick:n=>{e.value&&(n.stopPropagation(),r())},onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&(n.stopPropagation(),r())},"data-tgph-combobox-clear":!0,style:{marginTop:"calc(-1 * var(--tgph-spacing-1)",marginBottom:"calc(-1 * var(--tgph-spacing-1)"}})}),i.jsx(T.Button.Icon,{as:x.motion.div,icon:R.Lucide.ChevronDown,animate:{rotate:e.open?"180deg":"0deg"},transition:{duration:.2,type:"spring",bounce:0},"aria-hidden":!0})]})]})})},ee=({tgphRef:t,style:c,children:e,...u})=>{const l=s.useContext(C),r=s.useRef(!1),n=A.useComposedRefs(t,l.contentRef),o=s.useRef(null),[a,y]=s.useState(0),[f,m]=s.useState(!1),p=s.useCallback(g=>{const d=g.getBoundingClientRect();d&&y(d.height),f||m(!0)},[f]);return s.useEffect(()=>{const g=new ResizeObserver(d=>{for(const b of d){const h=b.target;p(h)}});return o.current&&f&&g.observe(o.current),()=>g.disconnect()},[f,p]),s.useEffect(()=>{f===!0&&l.open===!1&&m(!1)},[l.open,f]),i.jsx(F.DismissableLayer,{onEscapeKeyDown:g=>{l.open&&(g.preventDefault(),l.setOpen(!1))},children:i.jsx(O.Menu.Content,{as:x.motion.div,mt:"1",initial:{opacity:0,scale:.8,height:"auto"},animate:{opacity:1,scale:1,minHeight:a?`${a}px`:"0"},exit:{opacity:0,scale:0},transition:{duration:.2,type:"spring",bounce:0},onAnimationComplete:()=>{if(!f&&o){const g=o.current;p(g)}},onCloseAutoFocus:g=>{var d,b;r.current||(b=(d=l.triggerRef)==null?void 0:d.current)==null||b.focus(),r.current=!1,g.preventDefault()},onKeyDown:g=>{var b,h,S,j;const d=(h=(b=l.contentRef)==null?void 0:b.current)==null?void 0:h.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(d==null?void 0:d[0])&&U.includes(g.key)&&((j=(S=l.searchRef)==null?void 0:S.current)==null||j.focus())},bg:"surface-1",style:{width:"var(--tgph-comobobox-trigger-width)",...c,"--tgph-comobobox-content-transform-origin":"var(--radix-popper-transform-origin)","--tgph-combobox-content-available-width":"var(--radix-popper-available-width)","--tgph-combobox-content-available-height":"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))","--tgph-comobobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...u,tgphRef:n,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":f,role:void 0,"aria-orientation":void 0,children:i.jsx(w.Stack,{direction:"column",gap:"1",tgphRef:o,children:e})})})},te=({...t})=>{const c=s.useContext(C);return i.jsx(w.Stack,{id:c.contentId,direction:"column",gap:"1",style:{overflowY:"auto",maxHeight:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...t})},q=({value:t,label:c,selected:e,onSelect:u,...l})=>{const r=s.useContext(C),[n,o]=s.useState(!1),a=r.value,y=(v(a),!r.searchQuery||t.toLowerCase().includes(r.searchQuery.toLowerCase())),f=v(a)?a.some(p=>(p==null?void 0:p.value)===t):(a==null?void 0:a.value)===t,m=p=>{var d,b;const g=p;if(!(g.key&&!D.includes(g.key))){if(p.stopPropagation(),p.preventDefault(),r.closeOnSelect===!0&&r.setOpen(!1),u)return u(p);if(k(a)){const h=r.onValueChange;h==null||h({value:t,label:c})}else if(v(a)){const h=r.onValueChange,S=f?a.filter(j=>(j==null?void 0:j.value)!==t):[...a,{value:t,label:c}];h==null||h(S)}(b=(d=r.triggerRef)==null?void 0:d.current)==null||b.focus()}};if(y)return i.jsx(O.Menu.Button,{type:"button",onSelect:m,onKeyDown:m,selected:e===null?null:e??f,onFocus:()=>o(!0),onBlur:()=>o(!1),role:"option","aria-selected":f?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":n,"data-tgph-combobox-option-value":t,"data-tgph-combobox-option-label":c,...l,children:c||t})},oe=({label:t="Search",placeholder:c="Search",tgphRef:e,value:u,onValueChange:l,...r})=>{var m;const n=s.useId(),o=s.useContext(C),a=A.useComposedRefs(e,o.searchRef),y=u??o.searchQuery,f=l??o.setSearchQuery;return s.useEffect(()=>{var d;const p=b=>{var h,S;N.includes(b.key)&&((S=(h=o.contentRef)==null?void 0:h.current)==null||S.focus({preventScroll:!0})),b.key==="Escape"&&o.setOpen(!1),b.stopPropagation()},g=(d=o.searchRef)==null?void 0:d.current;if(g)return g.addEventListener("keydown",p),()=>{g.removeEventListener("keydown",p)}},[o]),i.jsxs(w.Box,{borderBottom:"px",px:"1",pb:"1",children:[i.jsx(G.Root,{children:i.jsx(Q.Text,{as:"label",htmlFor:n,children:t})}),i.jsx(_.Input,{id:n,variant:"ghost",placeholder:c,value:y,onChange:p=>{f(p.target.value)},LeadingComponent:i.jsx(R.Icon,{icon:R.Lucide.Search,alt:"Search Icon"}),TrailingComponent:o!=null&&o.searchQuery&&((m=o==null?void 0:o.searchQuery)==null?void 0:m.length)>0?i.jsx(T.Button,{as:x.motion.button,initial:{opacity:0},animate:{opacity:1},transition:{duration:.2,type:"spring",bounce:0},variant:"ghost",color:"gray",icon:{icon:R.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var p;return(p=o.setSearchQuery)==null?void 0:p.call(o,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":o.contentId,...r,tgphRef:a})]})},ne=({icon:t={icon:R.Lucide.Search,alt:"Search Icon"},message:c="No results found",children:e,...u})=>{const l=s.useContext(C),[r,n]=s.useState(!1);if(s.useEffect(()=>{var a,y;const o=(y=(a=l.contentRef)==null?void 0:a.current)==null?void 0:y.querySelectorAll("[data-tgph-combobox-option]");(o==null?void 0:o.length)===0?n(!0):n(!1)},[l.searchQuery,l.contentRef,e]),r)return i.jsxs(w.Stack,{as:x.motion.div,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:.2,type:"spring",bounce:0},gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...u,children:[t===null?i.jsx(i.Fragment,{}):i.jsx(R.Icon,{...t}),c===null?i.jsx(i.Fragment,{}):i.jsx(Q.Text,{as:"span",children:c})]})},re=({leadingText:t="Create",values:c,onCreate:e,selected:u=null,...l})=>{const r=s.useContext(C),n=s.useCallback(o=>!c||(c==null?void 0:c.length)===0?!1:c.some(a=>(a==null?void 0:a.value)===o),[c]);if(r.searchQuery&&!n(r.searchQuery))return i.jsx(q,{leadingIcon:{icon:R.Lucide.Plus,"aria-hidden":!0},mx:"1",value:r.searchQuery,label:`${t} "${r.searchQuery}"`,selected:u,onSelect:()=>{var o;e&&r.value&&r.searchQuery&&(k(r.value)&&e({value:r.searchQuery}),v(r.value)&&e({value:r.searchQuery}),(o=r.setSearchQuery)==null||o.call(r,""))},...l})},P={};Object.assign(P,{Root:X,Trigger:Z,Content:ee,Options:te,Option:q,Search:oe,Empty:ne,Create:re});exports.Combobox=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),H=require("@radix-ui/react-dismissable-layer"),M=require("@radix-ui/react-use-controllable-state"),K=require("@radix-ui/react-visually-hidden"),T=require("@telegraph/button"),D=require("@telegraph/compose-refs"),_=require("@telegraph/helpers"),j=require("@telegraph/icon"),$=require("@telegraph/input"),w=require("@telegraph/layout"),O=require("@telegraph/menu"),L=require("@telegraph/tag"),z=require("@telegraph/tooltip"),Q=require("@telegraph/typography"),x=require("framer-motion"),c=require("react");function G(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const u=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(s,e,u.get?u:{enumerable:!0,get:()=>t[e]})}}return s.default=t,Object.freeze(s)}const Y=G(K),N={0:"5",1:"6",2:"8",3:"10"},v=t=>Array.isArray(t),k=t=>typeof t=="object"&&!Array.isArray(t)||!t,U=["ArrowDown","PageUp","Home"],X=["ArrowUp","PageDown","End"],q=["Enter"," "],C=c.createContext({value:void 0,onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{},clearable:!1,disabled:!1}),J=({modal:t=!0,closeOnSelect:s=!0,clearable:e=!1,disabled:u=!1,open:l,onOpenChange:r,defaultOpen:n,value:o,onValueChange:a,errored:y,placeholder:f,layout:m,...p})=>{const g=c.useId(),d=c.useId(),b=c.useRef(null),h=c.useRef(null),S=c.useRef(null),[R,A]=c.useState(""),[I=!1,E]=M.useControllableState({prop:l,defaultProp:n,onChange:r}),V=c.useCallback(()=>{E(F=>!F)},[E]);return c.useEffect(()=>{I||A("")},[I]),i.jsx(C.Provider,{value:{contentId:g,triggerId:d,value:o,onValueChange:a,placeholder:f,open:I,setOpen:E,onOpenToggle:V,closeOnSelect:s,clearable:e,disabled:u,searchQuery:R,setSearchQuery:A,triggerRef:b,searchRef:h,contentRef:S,errored:y,layout:m},children:i.jsx(O.Menu.Root,{open:I,onOpenChange:E,modal:t,...p})})},W=({label:t,value:s,...e})=>{const u=c.useContext(C);return i.jsxs(L.Tag.Root,{size:"1",as:x.motion.span,initial:{opacity:0,transform:"scale(0.8)"},animate:{opacity:1,transform:"scale(1)"},exit:{opacity:0,transform:"scale(0.5)"},layout:"position",transition:{duration:.2,type:"spring",bounce:0,layout:{duration:.05,type:"spring",bounce:0}},...e,children:[i.jsx(L.Tag.Text,{children:t||s}),i.jsx(L.Tag.Button,{icon:{icon:j.Lucide.X,alt:`Remove ${s}`},onClick:l=>{if(!u.onValueChange)return;const r=u.onValueChange,o=u.value.filter(a=>(a==null?void 0:a.value)!==s);r==null||r(o),l.stopPropagation(),l.preventDefault()}})]})},Z=()=>{var s,e;const t=c.useContext(C);if(t.value&&v(t.value)){const u=t.layout||"truncate",l=t.value.length-2,r=l.toString().split("");return t.value.length===0?i.jsx(T.Button.Text,{color:"gray",children:t.placeholder}):i.jsxs(w.Stack,{gap:"1",w:"full",wrap:u==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[i.jsx(x.AnimatePresence,{initial:!1,mode:"popLayout",children:t.value.map((n,o)=>{if(n!=null&&n.value&&(u==="truncate"&&o<=1||u==="wrap"))return i.jsx(_.RefToTgphRef,{children:i.jsx(W,{...n})},n.value)})}),i.jsx(x.AnimatePresence,{children:u==="truncate"&&t.value.length>2&&i.jsx(w.Stack,{as:x.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2,type:"spring",bounce:0},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${l} more selected`,style:{position:"absolute",right:0,backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:i.jsxs(Q.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",i.jsx(x.AnimatePresence,{mode:"wait",initial:!1,children:r.map(n=>i.jsx(w.Box,{as:x.motion.span,w:"2",display:"inline-block",initial:{opacity:.5},animate:{opacity:1},exit:{opacity:.5},transition:{duration:.1,type:"spring",bounce:0},children:n},n))})," ","more"]})},"truncated text")})]})}return i.jsx(T.Button.Text,{color:t.value?"default":"gray",children:((s=t==null?void 0:t.value)==null?void 0:s.label)||((e=t==null?void 0:t.value)==null?void 0:e.value)||t.placeholder})},ee=({size:t="2",...s})=>{const e=c.useContext(C),u=c.useCallback(()=>{var n,o,a;return e.value?k(e.value)?((n=e.value)==null?void 0:n.label)||((o=e.value)==null?void 0:o.value)||e.placeholder:((a=e.value)==null?void 0:a.map(y=>y==null?void 0:y.label).join(", "))||e.placeholder:e.placeholder},[e.value,e.placeholder]),l=c.useMemo(()=>{var n;if(v(e.value))return e.clearable&&((n=e.value)==null?void 0:n.length)>0;if(k(e.value))return e.clearable&&e.value},[e.clearable,e.value]),r=()=>{var n,o;if(v(e.value)){const a=e.onValueChange;a==null||a([])}if(k(e.value)){const a=e.onValueChange;a==null||a(void 0)}(o=(n=e.triggerRef)==null?void 0:n.current)==null||o.focus()};return i.jsx(O.Menu.Trigger,{...s,asChild:!0,onClick:n=>{var o,a;n.preventDefault(),e.onOpenToggle(),(a=(o=e.triggerRef)==null?void 0:o.current)==null||a.focus()},onKeyDown:n=>{if(n.key==="Tab"){n.stopPropagation();return}if(q.includes(n.key)){n.preventDefault();return}if(n.key==="ArrowDown"){e.onOpenToggle();return}},tgphRef:e.triggerRef,children:i.jsxs(T.Button.Root,{id:e.triggerId,type:"button",bg:"surface-1",variant:"outline",align:"center",minH:N[t],h:"full",w:"full",py:"1",size:t,color:e.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":u(),"aria-controls":e.contentId,"aria-expanded":e.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-comobox-trigger-open":e.open,disabled:e.disabled,children:[i.jsx(Z,{}),i.jsxs(w.Stack,{align:"center",gap:"1",children:[l&&i.jsx(z.Tooltip,{label:"Clear field",children:i.jsx(T.Button,{type:"button",icon:{icon:j.Lucide.X,alt:"Clear field"},size:"1",variant:"ghost",onClick:n=>{e.value&&(n.stopPropagation(),r())},onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&(n.stopPropagation(),r())},"data-tgph-combobox-clear":!0,style:{marginTop:"calc(-1 * var(--tgph-spacing-1)",marginBottom:"calc(-1 * var(--tgph-spacing-1)"}})}),i.jsx(T.Button.Icon,{as:x.motion.div,icon:j.Lucide.ChevronDown,animate:{rotate:e.open?"180deg":"0deg"},transition:{duration:.2,type:"spring",bounce:0},"aria-hidden":!0})]})]})})},te=({tgphRef:t,style:s,children:e,...u})=>{const l=c.useContext(C),r=c.useRef(!1),n=D.useComposedRefs(t,l.contentRef),o=c.useRef(null),[a,y]=c.useState(0),[f,m]=c.useState(!1),p=c.useCallback(g=>{const d=g.getBoundingClientRect();d&&y(d.height),f||m(!0)},[f]);return c.useEffect(()=>{const g=new ResizeObserver(d=>{for(const b of d){const h=b.target;p(h)}});return o.current&&f&&g.observe(o.current),()=>g.disconnect()},[f,p]),c.useEffect(()=>{f===!0&&l.open===!1&&m(!1)},[l.open,f]),i.jsx(H.DismissableLayer,{onEscapeKeyDown:g=>{l.open&&(g.preventDefault(),l.setOpen(!1))},children:i.jsx(O.Menu.Content,{as:x.motion.div,mt:"1",initial:{opacity:0,scale:.8,height:"auto"},animate:{opacity:1,scale:1,minHeight:a?`${a}px`:"0"},exit:{opacity:0,scale:0},transition:{duration:.2,type:"spring",bounce:0},onAnimationComplete:()=>{if(!f&&o){const g=o.current;p(g)}},onCloseAutoFocus:g=>{var d,b;r.current||(b=(d=l.triggerRef)==null?void 0:d.current)==null||b.focus(),r.current=!1,g.preventDefault()},onKeyDown:g=>{var b,h,S,R;const d=(h=(b=l.contentRef)==null?void 0:b.current)==null?void 0:h.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(d==null?void 0:d[0])&&X.includes(g.key)&&((R=(S=l.searchRef)==null?void 0:S.current)==null||R.focus())},bg:"surface-1",style:{width:"var(--tgph-comobobox-trigger-width)",...s,"--tgph-comobobox-content-transform-origin":"var(--radix-popper-transform-origin)","--tgph-combobox-content-available-width":"var(--radix-popper-available-width)","--tgph-combobox-content-available-height":"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))","--tgph-comobobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...u,tgphRef:n,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":f,role:void 0,"aria-orientation":void 0,children:i.jsx(w.Stack,{direction:"column",gap:"1",tgphRef:o,children:e})})})},oe=({...t})=>{const s=c.useContext(C);return i.jsx(w.Stack,{id:s.contentId,direction:"column",gap:"1",style:{overflowY:"auto",maxHeight:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...t})},P=({value:t,label:s,selected:e,onSelect:u,...l})=>{const r=c.useContext(C),[n,o]=c.useState(!1),a=r.value,y=(v(a),!r.searchQuery||t.toLowerCase().includes(r.searchQuery.toLowerCase())),f=v(a)?a.some(p=>(p==null?void 0:p.value)===t):(a==null?void 0:a.value)===t,m=p=>{var d,b;const g=p;if(!(g.key&&!q.includes(g.key))){if(p.stopPropagation(),p.preventDefault(),r.closeOnSelect===!0&&r.setOpen(!1),u)return u(p);if(k(a)){const h=r.onValueChange;h==null||h({value:t,label:s})}else if(v(a)){const h=r.onValueChange,S=f?a.filter(R=>(R==null?void 0:R.value)!==t):[...a,{value:t,label:s}];h==null||h(S)}(b=(d=r.triggerRef)==null?void 0:d.current)==null||b.focus()}};if(y)return i.jsx(O.Menu.Button,{type:"button",onSelect:m,onKeyDown:m,selected:e===null?null:e??f,onFocus:()=>o(!0),onBlur:()=>o(!1),role:"option","aria-selected":f?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":n,"data-tgph-combobox-option-value":t,"data-tgph-combobox-option-label":s,...l,children:s||t})},ne=({label:t="Search",placeholder:s="Search",tgphRef:e,value:u,onValueChange:l,...r})=>{var m;const n=c.useId(),o=c.useContext(C),a=D.useComposedRefs(e,o.searchRef),y=u??o.searchQuery,f=l??o.setSearchQuery;return c.useEffect(()=>{var d;const p=b=>{var h,S;U.includes(b.key)&&((S=(h=o.contentRef)==null?void 0:h.current)==null||S.focus({preventScroll:!0})),b.key==="Escape"&&o.setOpen(!1),b.stopPropagation()},g=(d=o.searchRef)==null?void 0:d.current;if(g)return g.addEventListener("keydown",p),()=>{g.removeEventListener("keydown",p)}},[o]),i.jsxs(w.Box,{borderBottom:"px",px:"1",pb:"1",children:[i.jsx(Y.Root,{children:i.jsx(Q.Text,{as:"label",htmlFor:n,children:t})}),i.jsx($.Input,{id:n,variant:"ghost",placeholder:s,value:y,onChange:p=>{f(p.target.value)},LeadingComponent:i.jsx(j.Icon,{icon:j.Lucide.Search,alt:"Search Icon"}),TrailingComponent:o!=null&&o.searchQuery&&((m=o==null?void 0:o.searchQuery)==null?void 0:m.length)>0?i.jsx(T.Button,{as:x.motion.button,initial:{opacity:0},animate:{opacity:1},transition:{duration:.2,type:"spring",bounce:0},variant:"ghost",color:"gray",icon:{icon:j.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var p;return(p=o.setSearchQuery)==null?void 0:p.call(o,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":o.contentId,...r,tgphRef:a})]})},re=({icon:t={icon:j.Lucide.Search,alt:"Search Icon"},message:s="No results found",children:e,...u})=>{const l=c.useContext(C),[r,n]=c.useState(!1);if(c.useEffect(()=>{var a,y;const o=(y=(a=l.contentRef)==null?void 0:a.current)==null?void 0:y.querySelectorAll("[data-tgph-combobox-option]");(o==null?void 0:o.length)===0?n(!0):n(!1)},[l.searchQuery,l.contentRef,e]),r)return i.jsxs(w.Stack,{as:x.motion.div,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:.2,type:"spring",bounce:0},gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...u,children:[t===null?i.jsx(i.Fragment,{}):i.jsx(j.Icon,{...t}),s===null?i.jsx(i.Fragment,{}):i.jsx(Q.Text,{as:"span",children:s})]})},ae=({leadingText:t="Create",values:s,onCreate:e,selected:u=null,...l})=>{const r=c.useContext(C),n=c.useCallback(o=>!s||(s==null?void 0:s.length)===0?!1:s.some(a=>(a==null?void 0:a.value)===o),[s]);if(r.searchQuery&&!n(r.searchQuery))return i.jsx(P,{leadingIcon:{icon:j.Lucide.Plus,"aria-hidden":!0},mx:"1",value:r.searchQuery,label:`${t} "${r.searchQuery}"`,selected:u,onSelect:()=>{var o;e&&r.value&&r.searchQuery&&(k(r.value)&&e({value:r.searchQuery}),v(r.value)&&e({value:r.searchQuery}),(o=r.setSearchQuery)==null||o.call(r,""))},...l})},B={};Object.assign(B,{Root:J,Trigger:ee,Content:te,Options:oe,Option:P,Search:ne,Empty:re,Create:ae});exports.Combobox=B;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n  \"0\": \"5\",\n  \"1\": \"6\",\n  \"2\": \"8\",\n  \"3\": \"10\",\n};\n","export type DefinedOption = { value: string; label?: string };\nexport type Option = DefinedOption | undefined;\nexport const isMultiSelect = (\n  value: Option | Array<Option>,\n): value is Array<Option> => {\n  return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n  value: Option | Array<Option>,\n): value is Option => {\n  return (typeof value === \"object\" && !Array.isArray(value)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport {\n  type DefinedOption,\n  type Option,\n  isMultiSelect,\n  isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n  value?: Option;\n  onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n  value?: Array<Option>;\n  onValueChange?: (value: Array<Option>) => void;\n};\n\ntype RootProps = (\n  | {\n      value?: MultiSelect[\"value\"];\n      onValueChange?: MultiSelect[\"onValueChange\"];\n      layout?: \"truncate\" | \"wrap\";\n    }\n  | {\n      value?: SingleSelect[\"value\"];\n      onValueChange?: SingleSelect[\"onValueChange\"];\n      layout?: never;\n    }\n) & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  errored?: boolean;\n  placeholder?: string;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  closeOnSelect?: boolean;\n  clearable?: boolean;\n  children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n  Omit<RootProps, \"children\"> & {\n    contentId: string;\n    triggerId: string;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    onOpenToggle: () => void;\n    searchQuery?: string;\n    setSearchQuery?: (query: string) => void;\n    triggerRef?: React.RefObject<HTMLDivElement>;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    contentRef?: React.RefObject<HTMLDivElement>;\n  }\n>({\n  onValueChange: () => {},\n  contentId: \"\",\n  triggerId: \"\",\n  open: false,\n  setOpen: () => {},\n  onOpenToggle: () => {},\n  clearable: false,\n});\n\nconst Root = ({\n  modal = true,\n  closeOnSelect = true,\n  clearable = false,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  defaultOpen: defaultOpenProp,\n  value,\n  onValueChange,\n  errored,\n  placeholder,\n  layout,\n  ...props\n}: RootProps) => {\n  const contentId = React.useId();\n  const triggerId = React.useId();\n  const triggerRef = React.useRef(null);\n  const searchRef = React.useRef(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpenProp,\n    onChange: onOpenChangeProp,\n  });\n\n  const onOpenToggle = React.useCallback(() => {\n    setOpen((prevOpen) => !prevOpen);\n  }, [setOpen]);\n\n  React.useEffect(() => {\n    // If the combobox is closed clear\n    // the search query\n    if (!open) {\n      setSearchQuery(\"\");\n    }\n  }, [open]);\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        contentId,\n        triggerId,\n        value,\n        onValueChange,\n        placeholder,\n        open,\n        setOpen,\n        onOpenToggle,\n        closeOnSelect,\n        clearable,\n        searchQuery,\n        setSearchQuery,\n        triggerRef,\n        searchRef,\n        contentRef,\n        errored,\n        layout,\n      }}\n    >\n      <TelegraphMenu.Root\n        open={open}\n        onOpenChange={setOpen}\n        modal={modal}\n        {...props}\n      />\n    </ComboboxContext.Provider>\n  );\n};\n\ntype TriggerTagProps = {\n  value: string;\n  label?: string;\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  return (\n    <Tag.Root\n      size=\"1\"\n      as={motion.span}\n      initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n      animate={{ opacity: 1, transform: \"scale(1)\" }}\n      exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n      layout=\"position\"\n      transition={{\n        duration: 0.2,\n        type: \"spring\",\n        bounce: 0,\n        layout: {\n          duration: 0.05,\n          type: \"spring\",\n          bounce: 0,\n        },\n      }}\n      {...props}\n    >\n      <Tag.Text>{label || value}</Tag.Text>\n      <Tag.Button\n        icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n        onClick={(event: React.MouseEvent) => {\n          if (!context.onValueChange) return;\n          const onValueChange =\n            context.onValueChange as MultiSelect[\"onValueChange\"];\n          const contextValue = context.value as Array<Option>;\n          const newValue = contextValue.filter((v) => v?.value !== value);\n          onValueChange?.(newValue);\n          // Stop click event from bubbling up\n          event.stopPropagation();\n          // Stop the button \"submit\" action from triggering\n          event.preventDefault();\n        }}\n      />\n    </Tag.Root>\n  );\n};\n\nconst TriggerValue = () => {\n  const context = React.useContext(ComboboxContext);\n\n  if (context.value && isMultiSelect(context.value)) {\n    const layout = context.layout || \"truncate\";\n    const truncatedLength = context.value.length - 2;\n    const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n    if (context.value.length === 0) {\n      return (\n        <TelegraphButton.Text color=\"gray\">\n          {context.placeholder}\n        </TelegraphButton.Text>\n      );\n    }\n    return (\n      <Stack\n        gap=\"1\"\n        w=\"full\"\n        wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n        align=\"center\"\n        style={{\n          position: \"relative\",\n          flexGrow: 1,\n        }}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {context.value.map((v, i) => {\n            if (\n              v?.value &&\n              ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n            ) {\n              return (\n                <RefToTgphRef key={v.value}>\n                  <TriggerTag {...v} />\n                </RefToTgphRef>\n              );\n            }\n          })}\n        </AnimatePresence>\n        <AnimatePresence>\n          {layout === \"truncate\" && context.value.length > 2 && (\n            <Stack\n              as={motion.div}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              h=\"full\"\n              pr=\"1\"\n              pl=\"8\"\n              align=\"center\"\n              aria-label={`${truncatedLength} more selected`}\n              style={{\n                position: \"absolute\",\n                right: 0,\n                backgroundImage:\n                  \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n              }}\n              key=\"truncated text\"\n            >\n              <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n                +\n                <AnimatePresence mode=\"wait\" initial={false}>\n                  {truncatedLengthStringArray.map((n) => (\n                    <Box\n                      as={motion.span}\n                      w=\"2\"\n                      display=\"inline-block\"\n                      initial={{\n                        opacity: 0.5,\n                      }}\n                      animate={{\n                        opacity: 1,\n                      }}\n                      exit={{\n                        opacity: 0.5,\n                      }}\n                      transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n                      key={n}\n                    >\n                      {n}\n                    </Box>\n                  ))}\n                </AnimatePresence>{\" \"}\n                more\n              </Text>\n            </Stack>\n          )}\n        </AnimatePresence>\n      </Stack>\n    );\n  }\n\n  return (\n    <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n      {context?.value?.label || context?.value?.value || context.placeholder}\n    </TelegraphButton.Text>\n  );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n  placeholder?: string;\n  size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  const getAriaLabelString = React.useCallback(() => {\n    if (!context.value) return context.placeholder;\n    if (isSingleSelect(context.value)) {\n      return (\n        context.value?.label || context.value?.value || context.placeholder\n      );\n    } else {\n      return (\n        context.value?.map((v) => v?.label).join(\", \") || context.placeholder\n      );\n    }\n  }, [context.value, context.placeholder]);\n\n  const shouldShowClearable = React.useMemo(() => {\n    if (isMultiSelect(context.value)) {\n      return context.clearable && context.value?.length > 0;\n    }\n\n    if (isSingleSelect(context.value)) {\n      return context.clearable && context.value;\n    }\n  }, [context.clearable, context.value]);\n\n  const handleClear = () => {\n    if (isMultiSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n      onValueChange?.([]);\n    }\n\n    if (isSingleSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.(undefined);\n    }\n    context.triggerRef?.current?.focus();\n  };\n\n  return (\n    <TelegraphMenu.Trigger\n      {...props}\n      asChild\n      onClick={(event: React.MouseEvent) => {\n        event.preventDefault();\n        context.onOpenToggle();\n        context.triggerRef?.current?.focus();\n      }}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        // Lets the user tab in and out of the combobox as usual\n        if (event.key === \"Tab\") {\n          event.stopPropagation();\n          return;\n        }\n        if (SELECT_KEYS.includes(event.key)) {\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          context.onOpenToggle();\n          return;\n        }\n      }}\n      tgphRef={context.triggerRef}\n    >\n      <TelegraphButton.Root\n        id={context.triggerId}\n        type=\"button\"\n        bg=\"surface-1\"\n        variant=\"outline\"\n        align=\"center\"\n        minH={TRIGGER_MIN_HEIGHT[size]}\n        h=\"full\"\n        w=\"full\"\n        py=\"1\"\n        size={size}\n        color={context.errored ? \"red\" : \"gray\"}\n        justify=\"space-between\"\n        // Accessibility attributes\n        role=\"combobox\"\n        aria-label={getAriaLabelString()}\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        aria-haspopup=\"listbox\"\n        // Custom attributes\n        data-tgph-combobox-trigger\n        data-tgph-comobox-trigger-open={context.open}\n      >\n        <TriggerValue />\n        <Stack align=\"center\" gap=\"1\">\n          {shouldShowClearable && (\n            <Tooltip label=\"Clear field\">\n              <TelegraphButton\n                type=\"button\"\n                icon={{ icon: Lucide.X, alt: \"Clear field\" }}\n                size=\"1\"\n                variant=\"ghost\"\n                onClick={(event: React.MouseEvent) => {\n                  if (!context.value) return;\n                  event.stopPropagation();\n                  handleClear();\n                }}\n                onKeyDown={(event: React.KeyboardEvent) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.stopPropagation();\n                    handleClear();\n                  }\n                }}\n                data-tgph-combobox-clear\n                style={{\n                  // Remove margin to make the clear button flush\n                  // with the trigger button\n                  marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n                  marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n                }}\n              />\n            </Tooltip>\n          )}\n          <TelegraphButton.Icon\n            as={motion.div}\n            icon={Lucide.ChevronDown}\n            animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n            transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n            aria-hidden\n          />\n        </Stack>\n      </TelegraphButton.Root>\n    </TelegraphMenu.Trigger>\n  );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n  tgphRef,\n  style,\n  children,\n  ...props\n}: ContentProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const hasInteractedOutside = React.useRef(false);\n  const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n  const internalContentRef = React.useRef(null);\n\n  const [height, setHeight] = React.useState(0);\n  const [initialAnimationComplete, setInitialAnimationComplete] =\n    React.useState(false);\n\n  const setHeightFromContent = React.useCallback(\n    (element: Element) => {\n      // Set the initial height of the content after the animation completes\n      const rect = element.getBoundingClientRect();\n      if (rect) {\n        setHeight(rect.height);\n      }\n\n      if (!initialAnimationComplete) {\n        setInitialAnimationComplete(true);\n      }\n    },\n    [initialAnimationComplete],\n  );\n\n  React.useEffect(() => {\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const element = entry.target;\n        setHeightFromContent(element);\n      }\n    });\n    // Attatch the observer once the initial animation completes\n    // and the content ref is available\n    if (internalContentRef.current && initialAnimationComplete) {\n      observer.observe(internalContentRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, [initialAnimationComplete, setHeightFromContent]);\n\n  // Reset the animation complete state when the combobox is closed\n  React.useEffect(() => {\n    if (initialAnimationComplete === true && context.open === false) {\n      setInitialAnimationComplete(false);\n    }\n  }, [context.open, initialAnimationComplete]);\n\n  return (\n    // We add radix's dismissable layer here so that we can swallow any escape key\n    // presses to prevent cases like a modal closing when we close the combobox\n    <DismissableLayer\n      onEscapeKeyDown={(event) => {\n        if (context.open) {\n          event.preventDefault();\n          context.setOpen(false);\n        }\n      }}\n    >\n      <TelegraphMenu.Content\n        as={motion.div}\n        mt=\"1\"\n        initial={{\n          opacity: 0,\n          scale: 0.8,\n          height: \"auto\",\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1,\n          // Set height based on the internalContentRef so that\n          // we get smooth animations when the content changes\n          minHeight: height ? `${height}px` : \"0\",\n        }}\n        exit={{ opacity: 0, scale: 0 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        onAnimationComplete={() => {\n          // Set height when the initial animation for\n          // displaying the content completes\n          if (!initialAnimationComplete && internalContentRef) {\n            const element = internalContentRef.current as unknown as Element;\n            setHeightFromContent(element);\n          }\n        }}\n        onCloseAutoFocus={(event: Event) => {\n          if (!hasInteractedOutside.current)\n            context.triggerRef?.current?.focus();\n          hasInteractedOutside.current = false;\n\n          event.preventDefault();\n        }}\n        onKeyDown={(event: React.KeyboardEvent) => {\n          // If the first option is focused and the user presses the up\n          // arrow key, focus the search input\n          const options = context.contentRef?.current?.querySelectorAll(\n            \"[data-tgph-combobox-option]\",\n          );\n\n          if (\n            document.activeElement === options?.[0] &&\n            LAST_KEYS.includes(event.key)\n          ) {\n            context.searchRef?.current?.focus();\n          }\n        }}\n        bg=\"surface-1\"\n        style={{\n          width: \"var(--tgph-comobobox-trigger-width)\",\n          ...style,\n          ...{\n            \"--tgph-comobobox-content-transform-origin\":\n              \"var(--radix-popper-transform-origin)\",\n            \"--tgph-combobox-content-available-width\":\n              \"var(--radix-popper-available-width)\",\n            \"--tgph-combobox-content-available-height\":\n              \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n            \"--tgph-comobobox-trigger-width\":\n              \"var(--radix-popper-anchor-width)\",\n            \"--tgph-combobox-trigger-height\":\n              \"var(--radix-popper-anchor-height)\",\n          },\n        }}\n        {...props}\n        tgphRef={composedRef}\n        data-tgph-combobox-content\n        data-tgph-combobox-content-open={initialAnimationComplete}\n        // Cancel out accessibility attirbutes related to aria menu\n        role={undefined}\n        aria-orientation={undefined}\n      >\n        <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n          {children}\n        </Stack>\n      </TelegraphMenu.Content>\n    </DismissableLayer>\n  );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  return (\n    <Stack\n      id={context.contentId}\n      direction=\"column\"\n      gap=\"1\"\n      style={{\n        overflowY: \"auto\",\n        // Available Height - Padding from edge of screen\n        maxHeight:\n          \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n      }}\n      // Accessibility attributes\n      role=\"listbox\"\n      {...props}\n    />\n  );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  value: string;\n  label?: string;\n  selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n  value,\n  label,\n  selected,\n  onSelect,\n  ...props\n}: OptionProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isFocused, setIsFocused] = React.useState(false);\n  const contextValue = context.value;\n\n  const isVisible = isMultiSelect(contextValue)\n    ? !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase())\n    : !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n  const isSelected = isMultiSelect(contextValue)\n    ? contextValue.some((v) => v?.value === value)\n    : contextValue?.value === value;\n\n  const handleSelection = (event: Event | React.KeyboardEvent) => {\n    // Don't do anything if the key isn't a selection key\n    const keyboardEvent = event as React.KeyboardEvent;\n    if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n    // Don't bubble up the event\n    event.stopPropagation();\n    event.preventDefault();\n\n    if (context.closeOnSelect === true) {\n      context.setOpen(false);\n    }\n\n    if (onSelect) {\n      // Need to convert to non keyboard type event\n      // since onSelect is expecting a mouse event\n      // and we've handled the keyboard event already\n      const onSelectEvent = event as unknown as Event;\n      return onSelect(onSelectEvent);\n    }\n\n    if (isSingleSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.({ value, label });\n    } else if (isMultiSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n\n      const newValue = isSelected\n        ? contextValue.filter((v) => v?.value !== value)\n        : [...contextValue, { value, label }];\n\n      onValueChange?.(newValue);\n    }\n\n    context.triggerRef?.current?.focus();\n  };\n\n  if (isVisible) {\n    return (\n      <TelegraphMenu.Button\n        type=\"button\"\n        onSelect={handleSelection}\n        onKeyDown={handleSelection}\n        // Force null if selected equals null so we\n        // can override the icon of the button\n        selected={selected === null ? null : selected ?? isSelected}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        // Accessibility attributes\n        role=\"option\"\n        aria-selected={isSelected ? \"true\" : \"false\"}\n        // Custom attributes\n        data-tgph-combobox-option\n        data-tgph-combobox-option-focused={isFocused}\n        data-tgph-combobox-option-value={value}\n        data-tgph-combobox-option-label={label}\n        {...props}\n      >\n        {label || value}\n      </TelegraphMenu.Button>\n    );\n  }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n  label?: string;\n};\n\nconst Search = ({\n  label = \"Search\",\n  placeholder = \"Search\",\n  tgphRef,\n  value: controlledValueProp,\n  onValueChange: onValueChangeProp,\n  ...props\n}: SearchProps) => {\n  const id = React.useId();\n  const context = React.useContext(ComboboxContext);\n  const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n  const value = controlledValueProp ?? context.searchQuery;\n  const onValueChange = onValueChangeProp ?? context.setSearchQuery;\n\n  React.useEffect(() => {\n    const handleSearchKeyDown = (event: KeyboardEvent) => {\n      if (FIRST_KEYS.includes(event.key)) {\n        context.contentRef?.current?.focus({ preventScroll: true });\n      }\n\n      if (event.key === \"Escape\") {\n        context.setOpen(false);\n      }\n\n      event.stopPropagation();\n    };\n\n    const searchInput = context.searchRef?.current;\n\n    if (searchInput) {\n      searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n      return () => {\n        searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n      };\n    }\n  }, [context]);\n\n  return (\n    <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n      <VisuallyHidden.Root>\n        <Text as=\"label\" htmlFor={id}>\n          {label}\n        </Text>\n      </VisuallyHidden.Root>\n      <TelegraphInput\n        id={id}\n        variant=\"ghost\"\n        placeholder={placeholder}\n        value={value}\n        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          onValueChange(event.target.value);\n        }}\n        LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n        TrailingComponent={\n          context?.searchQuery && context?.searchQuery?.length > 0 ? (\n            <TelegraphButton\n              as={motion.button}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              variant=\"ghost\"\n              color=\"gray\"\n              icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n              onClick={() => context.setSearchQuery?.(\"\")}\n            />\n          ) : null\n        }\n        autoFocus\n        data-tgph-combobox-search\n        aria-controls={context.contentId}\n        {...props}\n        tgphRef={composedRef}\n      />\n    </Box>\n  );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n  icon?: TgphComponentProps<typeof Icon> | null;\n  message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n  icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n  message = \"No results found\",\n  children,\n  ...props\n}: EmptyProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const options = context.contentRef?.current?.querySelectorAll(\n      \"[data-tgph-combobox-option]\",\n    );\n\n    if (options?.length === 0) {\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [context.searchQuery, context.contentRef, children]);\n\n  if (isVisible) {\n    return (\n      <Stack\n        as={motion.div}\n        initial={{ opacity: 0, scale: 0.8 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        gap=\"1\"\n        align=\"center\"\n        justify=\"center\"\n        w=\"full\"\n        my=\"8\"\n        data-tgph-combobox-empty\n        {...props}\n      >\n        {icon === null ? <></> : <Icon {...icon} />}\n        {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n      </Stack>\n    );\n  }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  leadingText?: string;\n  values?: Array<Option>;\n  onCreate?: (value: DefinedOption) => void;\n};\n\nconst Create = <T extends TgphElement>({\n  leadingText = \"Create\",\n  values,\n  onCreate,\n  selected = null,\n  ...props\n}: CreateProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n\n  const variableAlreadyExists = React.useCallback(\n    (searchQuery: string | undefined) => {\n      if (!values || values?.length === 0) return false;\n      return values.some((v) => v?.value === searchQuery);\n    },\n    [values],\n  );\n\n  if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n    return (\n      <Option\n        leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n        mx=\"1\"\n        value={context.searchQuery}\n        label={`${leadingText} \"${context.searchQuery}\"`}\n        selected={selected}\n        onSelect={() => {\n          if (onCreate && context.value && context.searchQuery) {\n            if (isSingleSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            if (isMultiSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            context.setSearchQuery?.(\"\");\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n};\n\nconst Combobox = {} as {\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n  Options: typeof Options;\n  Option: typeof Option;\n  Search: typeof Search;\n  Empty: typeof Empty;\n  Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n  Root,\n  Trigger,\n  Content,\n  Options,\n  Option,\n  Search,\n  Empty,\n  Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","clearable","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","isVisible","isSelected","handleSelection","keyboardEvent","Search","controlledValueProp","onValueChangeProp","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n  \"0\": \"5\",\n  \"1\": \"6\",\n  \"2\": \"8\",\n  \"3\": \"10\",\n};\n","export type DefinedOption = { value: string; label?: string | React.ReactNode };\nexport type Option = DefinedOption | undefined;\nexport const isMultiSelect = (\n  value: Option | Array<Option>,\n): value is Array<Option> => {\n  return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n  value: Option | Array<Option>,\n): value is Option => {\n  return (typeof value === \"object\" && !Array.isArray(value)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport {\n  type DefinedOption,\n  type Option,\n  isMultiSelect,\n  isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n  value?: Option;\n  onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n  value?: Array<Option>;\n  onValueChange?: (value: Array<Option>) => void;\n};\n\ntype LayoutValue<O extends Option | Array<Option>> = O extends Option\n  ? never\n  : \"truncate\" | \"wrap\";\n\ntype RootProps<O extends Option | Array<Option>> = {\n  value?: O;\n  onValueChange?: (value: O) => void;\n  layout?: LayoutValue<O>;\n  open?: boolean;\n  defaultOpen?: boolean;\n  errored?: boolean;\n  placeholder?: string;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  closeOnSelect?: boolean;\n  clearable?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n  Omit<RootProps<Option | Array<Option>>, \"children\"> & {\n    contentId: string;\n    triggerId: string;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    onOpenToggle: () => void;\n    searchQuery?: string;\n    setSearchQuery?: (query: string) => void;\n    triggerRef?: React.RefObject<HTMLDivElement>;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    contentRef?: React.RefObject<HTMLDivElement>;\n  }\n>({\n  value: undefined,\n  onValueChange: () => {},\n  contentId: \"\",\n  triggerId: \"\",\n  open: false,\n  setOpen: () => {},\n  onOpenToggle: () => {},\n  clearable: false,\n  disabled: false,\n});\n\nconst Root = <O extends Option | Array<Option>>({\n  modal = true,\n  closeOnSelect = true,\n  clearable = false,\n  disabled = false,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  defaultOpen: defaultOpenProp,\n  value,\n  onValueChange,\n  errored,\n  placeholder,\n  layout,\n  ...props\n}: RootProps<O>) => {\n  const contentId = React.useId();\n  const triggerId = React.useId();\n  const triggerRef = React.useRef(null);\n  const searchRef = React.useRef(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpenProp,\n    onChange: onOpenChangeProp,\n  });\n\n  const onOpenToggle = React.useCallback(() => {\n    setOpen((prevOpen) => !prevOpen);\n  }, [setOpen]);\n\n  React.useEffect(() => {\n    // If the combobox is closed clear\n    // the search query\n    if (!open) {\n      setSearchQuery(\"\");\n    }\n  }, [open]);\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        contentId,\n        triggerId,\n        value,\n        // Need to cast this to avoid type errors\n        // because the type of onValueChange is not\n        // consistent with the value type\n        onValueChange: onValueChange as (value: Option | Array<Option>) => void,\n        placeholder,\n        open,\n        setOpen,\n        onOpenToggle,\n        closeOnSelect,\n        clearable,\n        disabled,\n        searchQuery,\n        setSearchQuery,\n        triggerRef,\n        searchRef,\n        contentRef,\n        errored,\n        layout,\n      }}\n    >\n      <TelegraphMenu.Root\n        open={open}\n        onOpenChange={setOpen}\n        modal={modal}\n        {...props}\n      />\n    </ComboboxContext.Provider>\n  );\n};\n\ntype TriggerTagProps = {\n  value: DefinedOption[\"value\"];\n  label?: DefinedOption[\"label\"];\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  return (\n    <Tag.Root\n      size=\"1\"\n      as={motion.span}\n      initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n      animate={{ opacity: 1, transform: \"scale(1)\" }}\n      exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n      layout=\"position\"\n      transition={{\n        duration: 0.2,\n        type: \"spring\",\n        bounce: 0,\n        layout: {\n          duration: 0.05,\n          type: \"spring\",\n          bounce: 0,\n        },\n      }}\n      {...props}\n    >\n      <Tag.Text>{label || value}</Tag.Text>\n      <Tag.Button\n        icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n        onClick={(event: React.MouseEvent) => {\n          if (!context.onValueChange) return;\n          const onValueChange =\n            context.onValueChange as MultiSelect[\"onValueChange\"];\n          const contextValue = context.value as Array<Option>;\n          const newValue = contextValue.filter((v) => v?.value !== value);\n          onValueChange?.(newValue);\n          // Stop click event from bubbling up\n          event.stopPropagation();\n          // Stop the button \"submit\" action from triggering\n          event.preventDefault();\n        }}\n      />\n    </Tag.Root>\n  );\n};\n\nconst TriggerValue = () => {\n  const context = React.useContext(ComboboxContext);\n\n  if (context.value && isMultiSelect(context.value)) {\n    const layout = context.layout || \"truncate\";\n    const truncatedLength = context.value.length - 2;\n    const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n    if (context.value.length === 0) {\n      return (\n        <TelegraphButton.Text color=\"gray\">\n          {context.placeholder}\n        </TelegraphButton.Text>\n      );\n    }\n    return (\n      <Stack\n        gap=\"1\"\n        w=\"full\"\n        wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n        align=\"center\"\n        style={{\n          position: \"relative\",\n          flexGrow: 1,\n        }}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {context.value.map((v, i) => {\n            if (\n              v?.value &&\n              ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n            ) {\n              return (\n                <RefToTgphRef key={v.value}>\n                  <TriggerTag {...v} />\n                </RefToTgphRef>\n              );\n            }\n          })}\n        </AnimatePresence>\n        <AnimatePresence>\n          {layout === \"truncate\" && context.value.length > 2 && (\n            <Stack\n              as={motion.div}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              h=\"full\"\n              pr=\"1\"\n              pl=\"8\"\n              align=\"center\"\n              aria-label={`${truncatedLength} more selected`}\n              style={{\n                position: \"absolute\",\n                right: 0,\n                backgroundImage:\n                  \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n              }}\n              key=\"truncated text\"\n            >\n              <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n                +\n                <AnimatePresence mode=\"wait\" initial={false}>\n                  {truncatedLengthStringArray.map((n) => (\n                    <Box\n                      as={motion.span}\n                      w=\"2\"\n                      display=\"inline-block\"\n                      initial={{\n                        opacity: 0.5,\n                      }}\n                      animate={{\n                        opacity: 1,\n                      }}\n                      exit={{\n                        opacity: 0.5,\n                      }}\n                      transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n                      key={n}\n                    >\n                      {n}\n                    </Box>\n                  ))}\n                </AnimatePresence>{\" \"}\n                more\n              </Text>\n            </Stack>\n          )}\n        </AnimatePresence>\n      </Stack>\n    );\n  }\n\n  return (\n    <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n      {context?.value?.label || context?.value?.value || context.placeholder}\n    </TelegraphButton.Text>\n  );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n  placeholder?: string;\n  size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  const getAriaLabelString = React.useCallback(() => {\n    if (!context.value) return context.placeholder;\n    if (isSingleSelect(context.value)) {\n      return (\n        context.value?.label || context.value?.value || context.placeholder\n      );\n    } else {\n      return (\n        context.value?.map((v) => v?.label).join(\", \") || context.placeholder\n      );\n    }\n  }, [context.value, context.placeholder]);\n\n  const shouldShowClearable = React.useMemo(() => {\n    if (isMultiSelect(context.value)) {\n      return context.clearable && context.value?.length > 0;\n    }\n\n    if (isSingleSelect(context.value)) {\n      return context.clearable && context.value;\n    }\n  }, [context.clearable, context.value]);\n\n  const handleClear = () => {\n    if (isMultiSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n      onValueChange?.([]);\n    }\n\n    if (isSingleSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.(undefined);\n    }\n    context.triggerRef?.current?.focus();\n  };\n\n  return (\n    <TelegraphMenu.Trigger\n      {...props}\n      asChild\n      onClick={(event: React.MouseEvent) => {\n        event.preventDefault();\n        context.onOpenToggle();\n        context.triggerRef?.current?.focus();\n      }}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        // Lets the user tab in and out of the combobox as usual\n        if (event.key === \"Tab\") {\n          event.stopPropagation();\n          return;\n        }\n        if (SELECT_KEYS.includes(event.key)) {\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          context.onOpenToggle();\n          return;\n        }\n      }}\n      tgphRef={context.triggerRef}\n    >\n      <TelegraphButton.Root\n        id={context.triggerId}\n        type=\"button\"\n        bg=\"surface-1\"\n        variant=\"outline\"\n        align=\"center\"\n        minH={TRIGGER_MIN_HEIGHT[size]}\n        h=\"full\"\n        w=\"full\"\n        py=\"1\"\n        size={size}\n        color={context.errored ? \"red\" : \"gray\"}\n        justify=\"space-between\"\n        // Accessibility attributes\n        role=\"combobox\"\n        aria-label={getAriaLabelString()}\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        aria-haspopup=\"listbox\"\n        // Custom attributes\n        data-tgph-combobox-trigger\n        data-tgph-comobox-trigger-open={context.open}\n        disabled={context.disabled}\n      >\n        <TriggerValue />\n        <Stack align=\"center\" gap=\"1\">\n          {shouldShowClearable && (\n            <Tooltip label=\"Clear field\">\n              <TelegraphButton\n                type=\"button\"\n                icon={{ icon: Lucide.X, alt: \"Clear field\" }}\n                size=\"1\"\n                variant=\"ghost\"\n                onClick={(event: React.MouseEvent) => {\n                  if (!context.value) return;\n                  event.stopPropagation();\n                  handleClear();\n                }}\n                onKeyDown={(event: React.KeyboardEvent) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.stopPropagation();\n                    handleClear();\n                  }\n                }}\n                data-tgph-combobox-clear\n                style={{\n                  // Remove margin to make the clear button flush\n                  // with the trigger button\n                  marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n                  marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n                }}\n              />\n            </Tooltip>\n          )}\n          <TelegraphButton.Icon\n            as={motion.div}\n            icon={Lucide.ChevronDown}\n            animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n            transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n            aria-hidden\n          />\n        </Stack>\n      </TelegraphButton.Root>\n    </TelegraphMenu.Trigger>\n  );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n  tgphRef,\n  style,\n  children,\n  ...props\n}: ContentProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const hasInteractedOutside = React.useRef(false);\n  const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n  const internalContentRef = React.useRef(null);\n\n  const [height, setHeight] = React.useState(0);\n  const [initialAnimationComplete, setInitialAnimationComplete] =\n    React.useState(false);\n\n  const setHeightFromContent = React.useCallback(\n    (element: Element) => {\n      // Set the initial height of the content after the animation completes\n      const rect = element.getBoundingClientRect();\n      if (rect) {\n        setHeight(rect.height);\n      }\n\n      if (!initialAnimationComplete) {\n        setInitialAnimationComplete(true);\n      }\n    },\n    [initialAnimationComplete],\n  );\n\n  React.useEffect(() => {\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const element = entry.target;\n        setHeightFromContent(element);\n      }\n    });\n    // Attatch the observer once the initial animation completes\n    // and the content ref is available\n    if (internalContentRef.current && initialAnimationComplete) {\n      observer.observe(internalContentRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, [initialAnimationComplete, setHeightFromContent]);\n\n  // Reset the animation complete state when the combobox is closed\n  React.useEffect(() => {\n    if (initialAnimationComplete === true && context.open === false) {\n      setInitialAnimationComplete(false);\n    }\n  }, [context.open, initialAnimationComplete]);\n\n  return (\n    // We add radix's dismissable layer here so that we can swallow any escape key\n    // presses to prevent cases like a modal closing when we close the combobox\n    <DismissableLayer\n      onEscapeKeyDown={(event) => {\n        if (context.open) {\n          event.preventDefault();\n          context.setOpen(false);\n        }\n      }}\n    >\n      <TelegraphMenu.Content\n        as={motion.div}\n        mt=\"1\"\n        initial={{\n          opacity: 0,\n          scale: 0.8,\n          height: \"auto\",\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1,\n          // Set height based on the internalContentRef so that\n          // we get smooth animations when the content changes\n          minHeight: height ? `${height}px` : \"0\",\n        }}\n        exit={{ opacity: 0, scale: 0 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        onAnimationComplete={() => {\n          // Set height when the initial animation for\n          // displaying the content completes\n          if (!initialAnimationComplete && internalContentRef) {\n            const element = internalContentRef.current as unknown as Element;\n            setHeightFromContent(element);\n          }\n        }}\n        onCloseAutoFocus={(event: Event) => {\n          if (!hasInteractedOutside.current)\n            context.triggerRef?.current?.focus();\n          hasInteractedOutside.current = false;\n\n          event.preventDefault();\n        }}\n        onKeyDown={(event: React.KeyboardEvent) => {\n          // If the first option is focused and the user presses the up\n          // arrow key, focus the search input\n          const options = context.contentRef?.current?.querySelectorAll(\n            \"[data-tgph-combobox-option]\",\n          );\n\n          if (\n            document.activeElement === options?.[0] &&\n            LAST_KEYS.includes(event.key)\n          ) {\n            context.searchRef?.current?.focus();\n          }\n        }}\n        bg=\"surface-1\"\n        style={{\n          width: \"var(--tgph-comobobox-trigger-width)\",\n          ...style,\n          ...{\n            \"--tgph-comobobox-content-transform-origin\":\n              \"var(--radix-popper-transform-origin)\",\n            \"--tgph-combobox-content-available-width\":\n              \"var(--radix-popper-available-width)\",\n            \"--tgph-combobox-content-available-height\":\n              \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n            \"--tgph-comobobox-trigger-width\":\n              \"var(--radix-popper-anchor-width)\",\n            \"--tgph-combobox-trigger-height\":\n              \"var(--radix-popper-anchor-height)\",\n          },\n        }}\n        {...props}\n        tgphRef={composedRef}\n        data-tgph-combobox-content\n        data-tgph-combobox-content-open={initialAnimationComplete}\n        // Cancel out accessibility attirbutes related to aria menu\n        role={undefined}\n        aria-orientation={undefined}\n      >\n        <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n          {children}\n        </Stack>\n      </TelegraphMenu.Content>\n    </DismissableLayer>\n  );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  return (\n    <Stack\n      id={context.contentId}\n      direction=\"column\"\n      gap=\"1\"\n      style={{\n        overflowY: \"auto\",\n        // Available Height - Padding from edge of screen\n        maxHeight:\n          \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n      }}\n      // Accessibility attributes\n      role=\"listbox\"\n      {...props}\n    />\n  );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  value: DefinedOption[\"value\"];\n  label?: DefinedOption[\"label\"];\n  selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n  value,\n  label,\n  selected,\n  onSelect,\n  ...props\n}: OptionProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isFocused, setIsFocused] = React.useState(false);\n  const contextValue = context.value;\n\n  const isVisible = isMultiSelect(contextValue)\n    ? !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase())\n    : !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n  const isSelected = isMultiSelect(contextValue)\n    ? contextValue.some((v) => v?.value === value)\n    : contextValue?.value === value;\n\n  const handleSelection = (event: Event | React.KeyboardEvent) => {\n    // Don't do anything if the key isn't a selection key\n    const keyboardEvent = event as React.KeyboardEvent;\n    if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n    // Don't bubble up the event\n    event.stopPropagation();\n    event.preventDefault();\n\n    if (context.closeOnSelect === true) {\n      context.setOpen(false);\n    }\n\n    if (onSelect) {\n      // Need to convert to non keyboard type event\n      // since onSelect is expecting a mouse event\n      // and we've handled the keyboard event already\n      const onSelectEvent = event as unknown as Event;\n      return onSelect(onSelectEvent);\n    }\n\n    if (isSingleSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.({ value, label });\n    } else if (isMultiSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n\n      const newValue = isSelected\n        ? contextValue.filter((v) => v?.value !== value)\n        : [...contextValue, { value, label }];\n\n      onValueChange?.(newValue);\n    }\n\n    context.triggerRef?.current?.focus();\n  };\n\n  if (isVisible) {\n    return (\n      <TelegraphMenu.Button\n        type=\"button\"\n        onSelect={handleSelection}\n        onKeyDown={handleSelection}\n        // Force null if selected equals null so we\n        // can override the icon of the button\n        selected={selected === null ? null : selected ?? isSelected}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        // Accessibility attributes\n        role=\"option\"\n        aria-selected={isSelected ? \"true\" : \"false\"}\n        // Custom attributes\n        data-tgph-combobox-option\n        data-tgph-combobox-option-focused={isFocused}\n        data-tgph-combobox-option-value={value}\n        data-tgph-combobox-option-label={label}\n        {...props}\n      >\n        {label || value}\n      </TelegraphMenu.Button>\n    );\n  }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n  label?: string;\n};\n\nconst Search = ({\n  label = \"Search\",\n  placeholder = \"Search\",\n  tgphRef,\n  value: controlledValueProp,\n  onValueChange: onValueChangeProp,\n  ...props\n}: SearchProps) => {\n  const id = React.useId();\n  const context = React.useContext(ComboboxContext);\n  const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n  const value = controlledValueProp ?? context.searchQuery;\n  const onValueChange = onValueChangeProp ?? context.setSearchQuery;\n\n  React.useEffect(() => {\n    const handleSearchKeyDown = (event: KeyboardEvent) => {\n      if (FIRST_KEYS.includes(event.key)) {\n        context.contentRef?.current?.focus({ preventScroll: true });\n      }\n\n      if (event.key === \"Escape\") {\n        context.setOpen(false);\n      }\n\n      event.stopPropagation();\n    };\n\n    const searchInput = context.searchRef?.current;\n\n    if (searchInput) {\n      searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n      return () => {\n        searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n      };\n    }\n  }, [context]);\n\n  return (\n    <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n      <VisuallyHidden.Root>\n        <Text as=\"label\" htmlFor={id}>\n          {label}\n        </Text>\n      </VisuallyHidden.Root>\n      <TelegraphInput\n        id={id}\n        variant=\"ghost\"\n        placeholder={placeholder}\n        value={value}\n        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          onValueChange(event.target.value);\n        }}\n        LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n        TrailingComponent={\n          context?.searchQuery && context?.searchQuery?.length > 0 ? (\n            <TelegraphButton\n              as={motion.button}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              variant=\"ghost\"\n              color=\"gray\"\n              icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n              onClick={() => context.setSearchQuery?.(\"\")}\n            />\n          ) : null\n        }\n        autoFocus\n        data-tgph-combobox-search\n        aria-controls={context.contentId}\n        {...props}\n        tgphRef={composedRef}\n      />\n    </Box>\n  );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n  icon?: TgphComponentProps<typeof Icon> | null;\n  message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n  icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n  message = \"No results found\",\n  children,\n  ...props\n}: EmptyProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const options = context.contentRef?.current?.querySelectorAll(\n      \"[data-tgph-combobox-option]\",\n    );\n\n    if (options?.length === 0) {\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [context.searchQuery, context.contentRef, children]);\n\n  if (isVisible) {\n    return (\n      <Stack\n        as={motion.div}\n        initial={{ opacity: 0, scale: 0.8 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        gap=\"1\"\n        align=\"center\"\n        justify=\"center\"\n        w=\"full\"\n        my=\"8\"\n        data-tgph-combobox-empty\n        {...props}\n      >\n        {icon === null ? <></> : <Icon {...icon} />}\n        {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n      </Stack>\n    );\n  }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  leadingText?: string;\n  values?: Array<Option>;\n  onCreate?: (value: DefinedOption) => void;\n};\n\nconst Create = <T extends TgphElement>({\n  leadingText = \"Create\",\n  values,\n  onCreate,\n  selected = null,\n  ...props\n}: CreateProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n\n  const variableAlreadyExists = React.useCallback(\n    (searchQuery: string | undefined) => {\n      if (!values || values?.length === 0) return false;\n      return values.some((v) => v?.value === searchQuery);\n    },\n    [values],\n  );\n\n  if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n    return (\n      <Option\n        leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n        mx=\"1\"\n        value={context.searchQuery}\n        label={`${leadingText} \"${context.searchQuery}\"`}\n        selected={selected}\n        onSelect={() => {\n          if (onCreate && context.value && context.searchQuery) {\n            if (isSingleSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            if (isMultiSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            context.setSearchQuery?.(\"\");\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n};\n\nconst Combobox = {} as {\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n  Options: typeof Options;\n  Option: typeof Option;\n  Search: typeof Search;\n  Empty: typeof Empty;\n  Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n  Root,\n  Trigger,\n  Content,\n  Options,\n  Option,\n  Search,\n  Empty,\n  Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","clearable","disabled","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","isVisible","isSelected","handleSelection","keyboardEvent","Search","controlledValueProp","onValueChangeProp","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,25 +1,26 @@
-import { jsx as i, jsxs as S, Fragment as V } from "react/jsx-runtime";
-import { DismissableLayer as G } from "@radix-ui/react-dismissable-layer";
-import { useControllableState as M } from "@radix-ui/react-use-controllable-state";
-import * as Y from "@radix-ui/react-visually-hidden";
+import { jsx as i, jsxs as S, Fragment as F } from "react/jsx-runtime";
+import { DismissableLayer as M } from "@radix-ui/react-dismissable-layer";
+import { useControllableState as Y } from "@radix-ui/react-use-controllable-state";
+import * as z from "@radix-ui/react-visually-hidden";
 import { Button as E } from "@telegraph/button";
-import { useComposedRefs as F } from "@telegraph/compose-refs";
-import { RefToTgphRef as z } from "@telegraph/helpers";
-import { Lucide as v, Icon as H } from "@telegraph/icon";
-import { Input as X } from "@telegraph/input";
-import { Stack as T, Box as K } from "@telegraph/layout";
+import { useComposedRefs as H } from "@telegraph/compose-refs";
+import { RefToTgphRef as X } from "@telegraph/helpers";
+import { Lucide as v, Icon as K } from "@telegraph/icon";
+import { Input as q } from "@telegraph/input";
+import { Stack as T, Box as B } from "@telegraph/layout";
 import { Menu as O } from "@telegraph/menu";
 import { Tag as D } from "@telegraph/tag";
-import { Tooltip as q } from "@telegraph/tooltip";
+import { Tooltip as N } from "@telegraph/tooltip";
 import { Text as P } from "@telegraph/typography";
 import { motion as I, AnimatePresence as L } from "framer-motion";
 import c from "react";
-const N = {
+const U = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, R = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, U = ["ArrowDown", "PageUp", "Home"], J = ["ArrowUp", "PageDown", "End"], B = ["Enter", " "], x = c.createContext({
+}, R = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, J = ["ArrowDown", "PageUp", "Home"], W = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], x = c.createContext({
+  value: void 0,
   onValueChange: () => {
   },
   contentId: "",
@@ -29,51 +30,57 @@ const N = {
   },
   onOpenToggle: () => {
   },
-  clearable: !1
-}), W = ({
+  clearable: !1,
+  disabled: !1
+}), Z = ({
   modal: t = !0,
   closeOnSelect: l = !0,
   clearable: e = !1,
-  open: u,
-  onOpenChange: s,
-  defaultOpen: r,
-  value: n,
-  onValueChange: o,
-  errored: a,
-  placeholder: b,
-  layout: d,
-  ...y
+  disabled: u = !1,
+  open: s,
+  onOpenChange: r,
+  defaultOpen: n,
+  value: o,
+  onValueChange: a,
+  errored: b,
+  placeholder: d,
+  layout: y,
+  ...p
 }) => {
-  const p = c.useId(), g = c.useId(), h = c.useRef(null), m = c.useRef(null), f = c.useRef(null), [C, w] = c.useState(""), [Q = !1, A] = M({
-    prop: u,
-    defaultProp: r,
-    onChange: s
-  }), _ = c.useCallback(() => {
-    A(($) => !$);
+  const g = c.useId(), f = c.useId(), m = c.useRef(null), h = c.useRef(null), C = c.useRef(null), [w, V] = c.useState(""), [Q = !1, A] = Y({
+    prop: s,
+    defaultProp: n,
+    onChange: r
+  }), $ = c.useCallback(() => {
+    A((G) => !G);
   }, [A]);
   return c.useEffect(() => {
-    Q || w("");
+    Q || V("");
   }, [Q]), /* @__PURE__ */ i(
     x.Provider,
     {
       value: {
-        contentId: p,
-        triggerId: g,
-        value: n,
-        onValueChange: o,
-        placeholder: b,
+        contentId: g,
+        triggerId: f,
+        value: o,
+        // Need to cast this to avoid type errors
+        // because the type of onValueChange is not
+        // consistent with the value type
+        onValueChange: a,
+        placeholder: d,
         open: Q,
         setOpen: A,
-        onOpenToggle: _,
+        onOpenToggle: $,
         closeOnSelect: l,
         clearable: e,
-        searchQuery: C,
-        setSearchQuery: w,
-        triggerRef: h,
-        searchRef: m,
-        contentRef: f,
-        errored: a,
-        layout: d
+        disabled: u,
+        searchQuery: w,
+        setSearchQuery: V,
+        triggerRef: m,
+        searchRef: h,
+        contentRef: C,
+        errored: b,
+        layout: y
       },
       children: /* @__PURE__ */ i(
         O.Root,
@@ -81,12 +88,12 @@ const N = {
           open: Q,
           onOpenChange: A,
           modal: t,
-          ...y
+          ...p
         }
       )
     }
   );
-}, Z = ({ label: t, value: l, ...e }) => {
+}, ee = ({ label: t, value: l, ...e }) => {
   const u = c.useContext(x);
   return /* @__PURE__ */ S(
     D.Root,
@@ -124,7 +131,7 @@ const N = {
       ]
     }
   );
-}, ee = () => {
+}, te = () => {
   var l, e;
   const t = c.useContext(x);
   if (t.value && R(t.value)) {
@@ -143,7 +150,7 @@ const N = {
         children: [
           /* @__PURE__ */ i(L, { initial: !1, mode: "popLayout", children: t.value.map((n, o) => {
             if (n != null && n.value && (u === "truncate" && o <= 1 || u === "wrap"))
-              return /* @__PURE__ */ i(z, { children: /* @__PURE__ */ i(Z, { ...n }) }, n.value);
+              return /* @__PURE__ */ i(X, { children: /* @__PURE__ */ i(ee, { ...n }) }, n.value);
           }) }),
           /* @__PURE__ */ i(L, { children: u === "truncate" && t.value.length > 2 && /* @__PURE__ */ i(
             T,
@@ -166,7 +173,7 @@ const N = {
               children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ i(L, { mode: "wait", initial: !1, children: r.map((n) => /* @__PURE__ */ i(
-                  K,
+                  B,
                   {
                     as: I.span,
                     w: "2",
@@ -196,7 +203,7 @@ const N = {
     );
   }
   return /* @__PURE__ */ i(E.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
-}, te = ({ size: t = "2", ...l }) => {
+}, oe = ({ size: t = "2", ...l }) => {
   const e = c.useContext(x), u = c.useCallback(() => {
     var n, o, a;
     return e.value ? k(e.value) ? ((n = e.value) == null ? void 0 : n.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((a = e.value) == null ? void 0 : a.map((b) => b == null ? void 0 : b.label).join(", ")) || e.placeholder : e.placeholder;
@@ -232,7 +239,7 @@ const N = {
           n.stopPropagation();
           return;
         }
-        if (B.includes(n.key)) {
+        if (j.includes(n.key)) {
           n.preventDefault();
           return;
         }
@@ -250,7 +257,7 @@ const N = {
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: N[t],
+          minH: U[t],
           h: "full",
           w: "full",
           py: "1",
@@ -264,10 +271,11 @@ const N = {
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
+          disabled: e.disabled,
           children: [
-            /* @__PURE__ */ i(ee, {}),
+            /* @__PURE__ */ i(te, {}),
             /* @__PURE__ */ S(T, { align: "center", gap: "1", children: [
-              s && /* @__PURE__ */ i(q, { label: "Clear field", children: /* @__PURE__ */ i(
+              s && /* @__PURE__ */ i(N, { label: "Clear field", children: /* @__PURE__ */ i(
                 E,
                 {
                   type: "button",
@@ -305,24 +313,24 @@ const N = {
       )
     }
   );
-}, oe = ({
+}, ne = ({
   tgphRef: t,
   style: l,
   children: e,
   ...u
 }) => {
-  const s = c.useContext(x), r = c.useRef(!1), n = F(t, s.contentRef), o = c.useRef(null), [a, b] = c.useState(0), [d, y] = c.useState(!1), p = c.useCallback(
+  const s = c.useContext(x), r = c.useRef(!1), n = H(t, s.contentRef), o = c.useRef(null), [a, b] = c.useState(0), [d, y] = c.useState(!1), p = c.useCallback(
     (g) => {
-      const h = g.getBoundingClientRect();
-      h && b(h.height), d || y(!0);
+      const f = g.getBoundingClientRect();
+      f && b(f.height), d || y(!0);
     },
     [d]
   );
   return c.useEffect(() => {
-    const g = new ResizeObserver((h) => {
-      for (const m of h) {
-        const f = m.target;
-        p(f);
+    const g = new ResizeObserver((f) => {
+      for (const m of f) {
+        const h = m.target;
+        p(h);
       }
     });
     return o.current && d && g.observe(o.current), () => g.disconnect();
@@ -331,7 +339,7 @@ const N = {
   }, [s.open, d]), // We add radix's dismissable layer here so that we can swallow any escape key
   // presses to prevent cases like a modal closing when we close the combobox
   /* @__PURE__ */ i(
-    G,
+    M,
     {
       onEscapeKeyDown: (g) => {
         s.open && (g.preventDefault(), s.setOpen(!1));
@@ -362,15 +370,15 @@ const N = {
             }
           },
           onCloseAutoFocus: (g) => {
-            var h, m;
-            r.current || (m = (h = s.triggerRef) == null ? void 0 : h.current) == null || m.focus(), r.current = !1, g.preventDefault();
+            var f, m;
+            r.current || (m = (f = s.triggerRef) == null ? void 0 : f.current) == null || m.focus(), r.current = !1, g.preventDefault();
           },
           onKeyDown: (g) => {
-            var m, f, C, w;
-            const h = (f = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : f.querySelectorAll(
+            var m, h, C, w;
+            const f = (h = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : h.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (h == null ? void 0 : h[0]) && J.includes(g.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus());
+            document.activeElement === (f == null ? void 0 : f[0]) && W.includes(g.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus());
           },
           bg: "surface-1",
           style: {
@@ -393,7 +401,7 @@ const N = {
       )
     }
   );
-}, ne = ({ ...t }) => {
+}, re = ({ ...t }) => {
   const l = c.useContext(x);
   return /* @__PURE__ */ i(
     T,
@@ -410,7 +418,7 @@ const N = {
       ...t
     }
   );
-}, j = ({
+}, _ = ({
   value: t,
   label: l,
   selected: e,
@@ -418,19 +426,19 @@ const N = {
   ...s
 }) => {
   const r = c.useContext(x), [n, o] = c.useState(!1), a = r.value, b = (R(a), !r.searchQuery || t.toLowerCase().includes(r.searchQuery.toLowerCase())), d = R(a) ? a.some((p) => (p == null ? void 0 : p.value) === t) : (a == null ? void 0 : a.value) === t, y = (p) => {
-    var h, m;
+    var f, m;
     const g = p;
-    if (!(g.key && !B.includes(g.key))) {
+    if (!(g.key && !j.includes(g.key))) {
       if (p.stopPropagation(), p.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), u)
         return u(p);
       if (k(a)) {
-        const f = r.onValueChange;
-        f == null || f({ value: t, label: l });
+        const h = r.onValueChange;
+        h == null || h({ value: t, label: l });
       } else if (R(a)) {
-        const f = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
-        f == null || f(C);
+        const h = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
+        h == null || h(C);
       }
-      (m = (h = r.triggerRef) == null ? void 0 : h.current) == null || m.focus();
+      (m = (f = r.triggerRef) == null ? void 0 : f.current) == null || m.focus();
     }
   };
   if (b)
@@ -453,7 +461,7 @@ const N = {
         children: l || t
       }
     );
-}, re = ({
+}, ae = ({
   label: t = "Search",
   placeholder: l = "Search",
   tgphRef: e,
@@ -462,21 +470,21 @@ const N = {
   ...r
 }) => {
   var y;
-  const n = c.useId(), o = c.useContext(x), a = F(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
+  const n = c.useId(), o = c.useContext(x), a = H(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
   return c.useEffect(() => {
-    var h;
+    var f;
     const p = (m) => {
-      var f, C;
-      U.includes(m.key) && ((C = (f = o.contentRef) == null ? void 0 : f.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
-    }, g = (h = o.searchRef) == null ? void 0 : h.current;
+      var h, C;
+      J.includes(m.key) && ((C = (h = o.contentRef) == null ? void 0 : h.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
+    }, g = (f = o.searchRef) == null ? void 0 : f.current;
     if (g)
       return g.addEventListener("keydown", p), () => {
         g.removeEventListener("keydown", p);
       };
-  }, [o]), /* @__PURE__ */ S(K, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ i(Y.Root, { children: /* @__PURE__ */ i(P, { as: "label", htmlFor: n, children: t }) }),
+  }, [o]), /* @__PURE__ */ S(B, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ i(z.Root, { children: /* @__PURE__ */ i(P, { as: "label", htmlFor: n, children: t }) }),
     /* @__PURE__ */ i(
-      X,
+      q,
       {
         id: n,
         variant: "ghost",
@@ -485,7 +493,7 @@ const N = {
         onChange: (p) => {
           d(p.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ i(H, { icon: v.Search, alt: "Search Icon" }),
+        LeadingComponent: /* @__PURE__ */ i(K, { icon: v.Search, alt: "Search Icon" }),
         TrailingComponent: o != null && o.searchQuery && ((y = o == null ? void 0 : o.searchQuery) == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ i(
           E,
           {
@@ -510,7 +518,7 @@ const N = {
       }
     )
   ] });
-}, ae = ({
+}, ie = ({
   icon: t = { icon: v.Search, alt: "Search Icon" },
   message: l = "No results found",
   children: e,
@@ -539,12 +547,12 @@ const N = {
         "data-tgph-combobox-empty": !0,
         ...u,
         children: [
-          t === null ? /* @__PURE__ */ i(V, {}) : /* @__PURE__ */ i(H, { ...t }),
-          l === null ? /* @__PURE__ */ i(V, {}) : /* @__PURE__ */ i(P, { as: "span", children: l })
+          t === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(K, { ...t }),
+          l === null ? /* @__PURE__ */ i(F, {}) : /* @__PURE__ */ i(P, { as: "span", children: l })
         ]
       }
     );
-}, ie = ({
+}, ce = ({
   leadingText: t = "Create",
   values: l,
   onCreate: e,
@@ -557,7 +565,7 @@ const N = {
   );
   if (r.searchQuery && !n(r.searchQuery))
     return /* @__PURE__ */ i(
-      j,
+      _,
       {
         leadingIcon: { icon: v.Plus, "aria-hidden": !0 },
         mx: "1",
@@ -571,18 +579,18 @@ const N = {
         ...s
       }
     );
-}, ce = {};
-Object.assign(ce, {
-  Root: W,
-  Trigger: te,
-  Content: oe,
-  Options: ne,
-  Option: j,
-  Search: re,
-  Empty: ae,
-  Create: ie
+}, le = {};
+Object.assign(le, {
+  Root: Z,
+  Trigger: oe,
+  Content: ne,
+  Options: re,
+  Option: _,
+  Search: ae,
+  Empty: ie,
+  Create: ce
 });
 export {
-  ce as Combobox
+  le as Combobox
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n  \"0\": \"5\",\n  \"1\": \"6\",\n  \"2\": \"8\",\n  \"3\": \"10\",\n};\n","export type DefinedOption = { value: string; label?: string };\nexport type Option = DefinedOption | undefined;\nexport const isMultiSelect = (\n  value: Option | Array<Option>,\n): value is Array<Option> => {\n  return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n  value: Option | Array<Option>,\n): value is Option => {\n  return (typeof value === \"object\" && !Array.isArray(value)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport {\n  type DefinedOption,\n  type Option,\n  isMultiSelect,\n  isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n  value?: Option;\n  onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n  value?: Array<Option>;\n  onValueChange?: (value: Array<Option>) => void;\n};\n\ntype RootProps = (\n  | {\n      value?: MultiSelect[\"value\"];\n      onValueChange?: MultiSelect[\"onValueChange\"];\n      layout?: \"truncate\" | \"wrap\";\n    }\n  | {\n      value?: SingleSelect[\"value\"];\n      onValueChange?: SingleSelect[\"onValueChange\"];\n      layout?: never;\n    }\n) & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  errored?: boolean;\n  placeholder?: string;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  closeOnSelect?: boolean;\n  clearable?: boolean;\n  children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n  Omit<RootProps, \"children\"> & {\n    contentId: string;\n    triggerId: string;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    onOpenToggle: () => void;\n    searchQuery?: string;\n    setSearchQuery?: (query: string) => void;\n    triggerRef?: React.RefObject<HTMLDivElement>;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    contentRef?: React.RefObject<HTMLDivElement>;\n  }\n>({\n  onValueChange: () => {},\n  contentId: \"\",\n  triggerId: \"\",\n  open: false,\n  setOpen: () => {},\n  onOpenToggle: () => {},\n  clearable: false,\n});\n\nconst Root = ({\n  modal = true,\n  closeOnSelect = true,\n  clearable = false,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  defaultOpen: defaultOpenProp,\n  value,\n  onValueChange,\n  errored,\n  placeholder,\n  layout,\n  ...props\n}: RootProps) => {\n  const contentId = React.useId();\n  const triggerId = React.useId();\n  const triggerRef = React.useRef(null);\n  const searchRef = React.useRef(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpenProp,\n    onChange: onOpenChangeProp,\n  });\n\n  const onOpenToggle = React.useCallback(() => {\n    setOpen((prevOpen) => !prevOpen);\n  }, [setOpen]);\n\n  React.useEffect(() => {\n    // If the combobox is closed clear\n    // the search query\n    if (!open) {\n      setSearchQuery(\"\");\n    }\n  }, [open]);\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        contentId,\n        triggerId,\n        value,\n        onValueChange,\n        placeholder,\n        open,\n        setOpen,\n        onOpenToggle,\n        closeOnSelect,\n        clearable,\n        searchQuery,\n        setSearchQuery,\n        triggerRef,\n        searchRef,\n        contentRef,\n        errored,\n        layout,\n      }}\n    >\n      <TelegraphMenu.Root\n        open={open}\n        onOpenChange={setOpen}\n        modal={modal}\n        {...props}\n      />\n    </ComboboxContext.Provider>\n  );\n};\n\ntype TriggerTagProps = {\n  value: string;\n  label?: string;\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  return (\n    <Tag.Root\n      size=\"1\"\n      as={motion.span}\n      initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n      animate={{ opacity: 1, transform: \"scale(1)\" }}\n      exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n      layout=\"position\"\n      transition={{\n        duration: 0.2,\n        type: \"spring\",\n        bounce: 0,\n        layout: {\n          duration: 0.05,\n          type: \"spring\",\n          bounce: 0,\n        },\n      }}\n      {...props}\n    >\n      <Tag.Text>{label || value}</Tag.Text>\n      <Tag.Button\n        icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n        onClick={(event: React.MouseEvent) => {\n          if (!context.onValueChange) return;\n          const onValueChange =\n            context.onValueChange as MultiSelect[\"onValueChange\"];\n          const contextValue = context.value as Array<Option>;\n          const newValue = contextValue.filter((v) => v?.value !== value);\n          onValueChange?.(newValue);\n          // Stop click event from bubbling up\n          event.stopPropagation();\n          // Stop the button \"submit\" action from triggering\n          event.preventDefault();\n        }}\n      />\n    </Tag.Root>\n  );\n};\n\nconst TriggerValue = () => {\n  const context = React.useContext(ComboboxContext);\n\n  if (context.value && isMultiSelect(context.value)) {\n    const layout = context.layout || \"truncate\";\n    const truncatedLength = context.value.length - 2;\n    const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n    if (context.value.length === 0) {\n      return (\n        <TelegraphButton.Text color=\"gray\">\n          {context.placeholder}\n        </TelegraphButton.Text>\n      );\n    }\n    return (\n      <Stack\n        gap=\"1\"\n        w=\"full\"\n        wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n        align=\"center\"\n        style={{\n          position: \"relative\",\n          flexGrow: 1,\n        }}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {context.value.map((v, i) => {\n            if (\n              v?.value &&\n              ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n            ) {\n              return (\n                <RefToTgphRef key={v.value}>\n                  <TriggerTag {...v} />\n                </RefToTgphRef>\n              );\n            }\n          })}\n        </AnimatePresence>\n        <AnimatePresence>\n          {layout === \"truncate\" && context.value.length > 2 && (\n            <Stack\n              as={motion.div}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              h=\"full\"\n              pr=\"1\"\n              pl=\"8\"\n              align=\"center\"\n              aria-label={`${truncatedLength} more selected`}\n              style={{\n                position: \"absolute\",\n                right: 0,\n                backgroundImage:\n                  \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n              }}\n              key=\"truncated text\"\n            >\n              <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n                +\n                <AnimatePresence mode=\"wait\" initial={false}>\n                  {truncatedLengthStringArray.map((n) => (\n                    <Box\n                      as={motion.span}\n                      w=\"2\"\n                      display=\"inline-block\"\n                      initial={{\n                        opacity: 0.5,\n                      }}\n                      animate={{\n                        opacity: 1,\n                      }}\n                      exit={{\n                        opacity: 0.5,\n                      }}\n                      transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n                      key={n}\n                    >\n                      {n}\n                    </Box>\n                  ))}\n                </AnimatePresence>{\" \"}\n                more\n              </Text>\n            </Stack>\n          )}\n        </AnimatePresence>\n      </Stack>\n    );\n  }\n\n  return (\n    <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n      {context?.value?.label || context?.value?.value || context.placeholder}\n    </TelegraphButton.Text>\n  );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n  placeholder?: string;\n  size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  const getAriaLabelString = React.useCallback(() => {\n    if (!context.value) return context.placeholder;\n    if (isSingleSelect(context.value)) {\n      return (\n        context.value?.label || context.value?.value || context.placeholder\n      );\n    } else {\n      return (\n        context.value?.map((v) => v?.label).join(\", \") || context.placeholder\n      );\n    }\n  }, [context.value, context.placeholder]);\n\n  const shouldShowClearable = React.useMemo(() => {\n    if (isMultiSelect(context.value)) {\n      return context.clearable && context.value?.length > 0;\n    }\n\n    if (isSingleSelect(context.value)) {\n      return context.clearable && context.value;\n    }\n  }, [context.clearable, context.value]);\n\n  const handleClear = () => {\n    if (isMultiSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n      onValueChange?.([]);\n    }\n\n    if (isSingleSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.(undefined);\n    }\n    context.triggerRef?.current?.focus();\n  };\n\n  return (\n    <TelegraphMenu.Trigger\n      {...props}\n      asChild\n      onClick={(event: React.MouseEvent) => {\n        event.preventDefault();\n        context.onOpenToggle();\n        context.triggerRef?.current?.focus();\n      }}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        // Lets the user tab in and out of the combobox as usual\n        if (event.key === \"Tab\") {\n          event.stopPropagation();\n          return;\n        }\n        if (SELECT_KEYS.includes(event.key)) {\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          context.onOpenToggle();\n          return;\n        }\n      }}\n      tgphRef={context.triggerRef}\n    >\n      <TelegraphButton.Root\n        id={context.triggerId}\n        type=\"button\"\n        bg=\"surface-1\"\n        variant=\"outline\"\n        align=\"center\"\n        minH={TRIGGER_MIN_HEIGHT[size]}\n        h=\"full\"\n        w=\"full\"\n        py=\"1\"\n        size={size}\n        color={context.errored ? \"red\" : \"gray\"}\n        justify=\"space-between\"\n        // Accessibility attributes\n        role=\"combobox\"\n        aria-label={getAriaLabelString()}\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        aria-haspopup=\"listbox\"\n        // Custom attributes\n        data-tgph-combobox-trigger\n        data-tgph-comobox-trigger-open={context.open}\n      >\n        <TriggerValue />\n        <Stack align=\"center\" gap=\"1\">\n          {shouldShowClearable && (\n            <Tooltip label=\"Clear field\">\n              <TelegraphButton\n                type=\"button\"\n                icon={{ icon: Lucide.X, alt: \"Clear field\" }}\n                size=\"1\"\n                variant=\"ghost\"\n                onClick={(event: React.MouseEvent) => {\n                  if (!context.value) return;\n                  event.stopPropagation();\n                  handleClear();\n                }}\n                onKeyDown={(event: React.KeyboardEvent) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.stopPropagation();\n                    handleClear();\n                  }\n                }}\n                data-tgph-combobox-clear\n                style={{\n                  // Remove margin to make the clear button flush\n                  // with the trigger button\n                  marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n                  marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n                }}\n              />\n            </Tooltip>\n          )}\n          <TelegraphButton.Icon\n            as={motion.div}\n            icon={Lucide.ChevronDown}\n            animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n            transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n            aria-hidden\n          />\n        </Stack>\n      </TelegraphButton.Root>\n    </TelegraphMenu.Trigger>\n  );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n  tgphRef,\n  style,\n  children,\n  ...props\n}: ContentProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const hasInteractedOutside = React.useRef(false);\n  const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n  const internalContentRef = React.useRef(null);\n\n  const [height, setHeight] = React.useState(0);\n  const [initialAnimationComplete, setInitialAnimationComplete] =\n    React.useState(false);\n\n  const setHeightFromContent = React.useCallback(\n    (element: Element) => {\n      // Set the initial height of the content after the animation completes\n      const rect = element.getBoundingClientRect();\n      if (rect) {\n        setHeight(rect.height);\n      }\n\n      if (!initialAnimationComplete) {\n        setInitialAnimationComplete(true);\n      }\n    },\n    [initialAnimationComplete],\n  );\n\n  React.useEffect(() => {\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const element = entry.target;\n        setHeightFromContent(element);\n      }\n    });\n    // Attatch the observer once the initial animation completes\n    // and the content ref is available\n    if (internalContentRef.current && initialAnimationComplete) {\n      observer.observe(internalContentRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, [initialAnimationComplete, setHeightFromContent]);\n\n  // Reset the animation complete state when the combobox is closed\n  React.useEffect(() => {\n    if (initialAnimationComplete === true && context.open === false) {\n      setInitialAnimationComplete(false);\n    }\n  }, [context.open, initialAnimationComplete]);\n\n  return (\n    // We add radix's dismissable layer here so that we can swallow any escape key\n    // presses to prevent cases like a modal closing when we close the combobox\n    <DismissableLayer\n      onEscapeKeyDown={(event) => {\n        if (context.open) {\n          event.preventDefault();\n          context.setOpen(false);\n        }\n      }}\n    >\n      <TelegraphMenu.Content\n        as={motion.div}\n        mt=\"1\"\n        initial={{\n          opacity: 0,\n          scale: 0.8,\n          height: \"auto\",\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1,\n          // Set height based on the internalContentRef so that\n          // we get smooth animations when the content changes\n          minHeight: height ? `${height}px` : \"0\",\n        }}\n        exit={{ opacity: 0, scale: 0 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        onAnimationComplete={() => {\n          // Set height when the initial animation for\n          // displaying the content completes\n          if (!initialAnimationComplete && internalContentRef) {\n            const element = internalContentRef.current as unknown as Element;\n            setHeightFromContent(element);\n          }\n        }}\n        onCloseAutoFocus={(event: Event) => {\n          if (!hasInteractedOutside.current)\n            context.triggerRef?.current?.focus();\n          hasInteractedOutside.current = false;\n\n          event.preventDefault();\n        }}\n        onKeyDown={(event: React.KeyboardEvent) => {\n          // If the first option is focused and the user presses the up\n          // arrow key, focus the search input\n          const options = context.contentRef?.current?.querySelectorAll(\n            \"[data-tgph-combobox-option]\",\n          );\n\n          if (\n            document.activeElement === options?.[0] &&\n            LAST_KEYS.includes(event.key)\n          ) {\n            context.searchRef?.current?.focus();\n          }\n        }}\n        bg=\"surface-1\"\n        style={{\n          width: \"var(--tgph-comobobox-trigger-width)\",\n          ...style,\n          ...{\n            \"--tgph-comobobox-content-transform-origin\":\n              \"var(--radix-popper-transform-origin)\",\n            \"--tgph-combobox-content-available-width\":\n              \"var(--radix-popper-available-width)\",\n            \"--tgph-combobox-content-available-height\":\n              \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n            \"--tgph-comobobox-trigger-width\":\n              \"var(--radix-popper-anchor-width)\",\n            \"--tgph-combobox-trigger-height\":\n              \"var(--radix-popper-anchor-height)\",\n          },\n        }}\n        {...props}\n        tgphRef={composedRef}\n        data-tgph-combobox-content\n        data-tgph-combobox-content-open={initialAnimationComplete}\n        // Cancel out accessibility attirbutes related to aria menu\n        role={undefined}\n        aria-orientation={undefined}\n      >\n        <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n          {children}\n        </Stack>\n      </TelegraphMenu.Content>\n    </DismissableLayer>\n  );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  return (\n    <Stack\n      id={context.contentId}\n      direction=\"column\"\n      gap=\"1\"\n      style={{\n        overflowY: \"auto\",\n        // Available Height - Padding from edge of screen\n        maxHeight:\n          \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n      }}\n      // Accessibility attributes\n      role=\"listbox\"\n      {...props}\n    />\n  );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  value: string;\n  label?: string;\n  selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n  value,\n  label,\n  selected,\n  onSelect,\n  ...props\n}: OptionProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isFocused, setIsFocused] = React.useState(false);\n  const contextValue = context.value;\n\n  const isVisible = isMultiSelect(contextValue)\n    ? !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase())\n    : !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n  const isSelected = isMultiSelect(contextValue)\n    ? contextValue.some((v) => v?.value === value)\n    : contextValue?.value === value;\n\n  const handleSelection = (event: Event | React.KeyboardEvent) => {\n    // Don't do anything if the key isn't a selection key\n    const keyboardEvent = event as React.KeyboardEvent;\n    if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n    // Don't bubble up the event\n    event.stopPropagation();\n    event.preventDefault();\n\n    if (context.closeOnSelect === true) {\n      context.setOpen(false);\n    }\n\n    if (onSelect) {\n      // Need to convert to non keyboard type event\n      // since onSelect is expecting a mouse event\n      // and we've handled the keyboard event already\n      const onSelectEvent = event as unknown as Event;\n      return onSelect(onSelectEvent);\n    }\n\n    if (isSingleSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.({ value, label });\n    } else if (isMultiSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n\n      const newValue = isSelected\n        ? contextValue.filter((v) => v?.value !== value)\n        : [...contextValue, { value, label }];\n\n      onValueChange?.(newValue);\n    }\n\n    context.triggerRef?.current?.focus();\n  };\n\n  if (isVisible) {\n    return (\n      <TelegraphMenu.Button\n        type=\"button\"\n        onSelect={handleSelection}\n        onKeyDown={handleSelection}\n        // Force null if selected equals null so we\n        // can override the icon of the button\n        selected={selected === null ? null : selected ?? isSelected}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        // Accessibility attributes\n        role=\"option\"\n        aria-selected={isSelected ? \"true\" : \"false\"}\n        // Custom attributes\n        data-tgph-combobox-option\n        data-tgph-combobox-option-focused={isFocused}\n        data-tgph-combobox-option-value={value}\n        data-tgph-combobox-option-label={label}\n        {...props}\n      >\n        {label || value}\n      </TelegraphMenu.Button>\n    );\n  }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n  label?: string;\n};\n\nconst Search = ({\n  label = \"Search\",\n  placeholder = \"Search\",\n  tgphRef,\n  value: controlledValueProp,\n  onValueChange: onValueChangeProp,\n  ...props\n}: SearchProps) => {\n  const id = React.useId();\n  const context = React.useContext(ComboboxContext);\n  const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n  const value = controlledValueProp ?? context.searchQuery;\n  const onValueChange = onValueChangeProp ?? context.setSearchQuery;\n\n  React.useEffect(() => {\n    const handleSearchKeyDown = (event: KeyboardEvent) => {\n      if (FIRST_KEYS.includes(event.key)) {\n        context.contentRef?.current?.focus({ preventScroll: true });\n      }\n\n      if (event.key === \"Escape\") {\n        context.setOpen(false);\n      }\n\n      event.stopPropagation();\n    };\n\n    const searchInput = context.searchRef?.current;\n\n    if (searchInput) {\n      searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n      return () => {\n        searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n      };\n    }\n  }, [context]);\n\n  return (\n    <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n      <VisuallyHidden.Root>\n        <Text as=\"label\" htmlFor={id}>\n          {label}\n        </Text>\n      </VisuallyHidden.Root>\n      <TelegraphInput\n        id={id}\n        variant=\"ghost\"\n        placeholder={placeholder}\n        value={value}\n        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          onValueChange(event.target.value);\n        }}\n        LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n        TrailingComponent={\n          context?.searchQuery && context?.searchQuery?.length > 0 ? (\n            <TelegraphButton\n              as={motion.button}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              variant=\"ghost\"\n              color=\"gray\"\n              icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n              onClick={() => context.setSearchQuery?.(\"\")}\n            />\n          ) : null\n        }\n        autoFocus\n        data-tgph-combobox-search\n        aria-controls={context.contentId}\n        {...props}\n        tgphRef={composedRef}\n      />\n    </Box>\n  );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n  icon?: TgphComponentProps<typeof Icon> | null;\n  message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n  icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n  message = \"No results found\",\n  children,\n  ...props\n}: EmptyProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const options = context.contentRef?.current?.querySelectorAll(\n      \"[data-tgph-combobox-option]\",\n    );\n\n    if (options?.length === 0) {\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [context.searchQuery, context.contentRef, children]);\n\n  if (isVisible) {\n    return (\n      <Stack\n        as={motion.div}\n        initial={{ opacity: 0, scale: 0.8 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        gap=\"1\"\n        align=\"center\"\n        justify=\"center\"\n        w=\"full\"\n        my=\"8\"\n        data-tgph-combobox-empty\n        {...props}\n      >\n        {icon === null ? <></> : <Icon {...icon} />}\n        {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n      </Stack>\n    );\n  }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  leadingText?: string;\n  values?: Array<Option>;\n  onCreate?: (value: DefinedOption) => void;\n};\n\nconst Create = <T extends TgphElement>({\n  leadingText = \"Create\",\n  values,\n  onCreate,\n  selected = null,\n  ...props\n}: CreateProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n\n  const variableAlreadyExists = React.useCallback(\n    (searchQuery: string | undefined) => {\n      if (!values || values?.length === 0) return false;\n      return values.some((v) => v?.value === searchQuery);\n    },\n    [values],\n  );\n\n  if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n    return (\n      <Option\n        leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n        mx=\"1\"\n        value={context.searchQuery}\n        label={`${leadingText} \"${context.searchQuery}\"`}\n        selected={selected}\n        onSelect={() => {\n          if (onCreate && context.value && context.searchQuery) {\n            if (isSingleSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            if (isMultiSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            context.setSearchQuery?.(\"\");\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n};\n\nconst Combobox = {} as {\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n  Options: typeof Options;\n  Option: typeof Option;\n  Search: typeof Search;\n  Empty: typeof Empty;\n  Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n  Root,\n  Trigger,\n  Content,\n  Options,\n  Option,\n  Search,\n  Empty,\n  Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","clearable","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","isVisible","isSelected","handleSelection","keyboardEvent","Search","controlledValueProp","onValueChangeProp","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n  \"0\": \"5\",\n  \"1\": \"6\",\n  \"2\": \"8\",\n  \"3\": \"10\",\n};\n","export type DefinedOption = { value: string; label?: string | React.ReactNode };\nexport type Option = DefinedOption | undefined;\nexport const isMultiSelect = (\n  value: Option | Array<Option>,\n): value is Array<Option> => {\n  return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n  value: Option | Array<Option>,\n): value is Option => {\n  return (typeof value === \"object\" && !Array.isArray(value)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n  RefToTgphRef,\n  type TgphComponentProps,\n  type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport {\n  type DefinedOption,\n  type Option,\n  isMultiSelect,\n  isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n  value?: Option;\n  onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n  value?: Array<Option>;\n  onValueChange?: (value: Array<Option>) => void;\n};\n\ntype LayoutValue<O extends Option | Array<Option>> = O extends Option\n  ? never\n  : \"truncate\" | \"wrap\";\n\ntype RootProps<O extends Option | Array<Option>> = {\n  value?: O;\n  onValueChange?: (value: O) => void;\n  layout?: LayoutValue<O>;\n  open?: boolean;\n  defaultOpen?: boolean;\n  errored?: boolean;\n  placeholder?: string;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  closeOnSelect?: boolean;\n  clearable?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n  Omit<RootProps<Option | Array<Option>>, \"children\"> & {\n    contentId: string;\n    triggerId: string;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    onOpenToggle: () => void;\n    searchQuery?: string;\n    setSearchQuery?: (query: string) => void;\n    triggerRef?: React.RefObject<HTMLDivElement>;\n    searchRef?: React.RefObject<HTMLInputElement>;\n    contentRef?: React.RefObject<HTMLDivElement>;\n  }\n>({\n  value: undefined,\n  onValueChange: () => {},\n  contentId: \"\",\n  triggerId: \"\",\n  open: false,\n  setOpen: () => {},\n  onOpenToggle: () => {},\n  clearable: false,\n  disabled: false,\n});\n\nconst Root = <O extends Option | Array<Option>>({\n  modal = true,\n  closeOnSelect = true,\n  clearable = false,\n  disabled = false,\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  defaultOpen: defaultOpenProp,\n  value,\n  onValueChange,\n  errored,\n  placeholder,\n  layout,\n  ...props\n}: RootProps<O>) => {\n  const contentId = React.useId();\n  const triggerId = React.useId();\n  const triggerRef = React.useRef(null);\n  const searchRef = React.useRef(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpenProp,\n    onChange: onOpenChangeProp,\n  });\n\n  const onOpenToggle = React.useCallback(() => {\n    setOpen((prevOpen) => !prevOpen);\n  }, [setOpen]);\n\n  React.useEffect(() => {\n    // If the combobox is closed clear\n    // the search query\n    if (!open) {\n      setSearchQuery(\"\");\n    }\n  }, [open]);\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        contentId,\n        triggerId,\n        value,\n        // Need to cast this to avoid type errors\n        // because the type of onValueChange is not\n        // consistent with the value type\n        onValueChange: onValueChange as (value: Option | Array<Option>) => void,\n        placeholder,\n        open,\n        setOpen,\n        onOpenToggle,\n        closeOnSelect,\n        clearable,\n        disabled,\n        searchQuery,\n        setSearchQuery,\n        triggerRef,\n        searchRef,\n        contentRef,\n        errored,\n        layout,\n      }}\n    >\n      <TelegraphMenu.Root\n        open={open}\n        onOpenChange={setOpen}\n        modal={modal}\n        {...props}\n      />\n    </ComboboxContext.Provider>\n  );\n};\n\ntype TriggerTagProps = {\n  value: DefinedOption[\"value\"];\n  label?: DefinedOption[\"label\"];\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  return (\n    <Tag.Root\n      size=\"1\"\n      as={motion.span}\n      initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n      animate={{ opacity: 1, transform: \"scale(1)\" }}\n      exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n      layout=\"position\"\n      transition={{\n        duration: 0.2,\n        type: \"spring\",\n        bounce: 0,\n        layout: {\n          duration: 0.05,\n          type: \"spring\",\n          bounce: 0,\n        },\n      }}\n      {...props}\n    >\n      <Tag.Text>{label || value}</Tag.Text>\n      <Tag.Button\n        icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n        onClick={(event: React.MouseEvent) => {\n          if (!context.onValueChange) return;\n          const onValueChange =\n            context.onValueChange as MultiSelect[\"onValueChange\"];\n          const contextValue = context.value as Array<Option>;\n          const newValue = contextValue.filter((v) => v?.value !== value);\n          onValueChange?.(newValue);\n          // Stop click event from bubbling up\n          event.stopPropagation();\n          // Stop the button \"submit\" action from triggering\n          event.preventDefault();\n        }}\n      />\n    </Tag.Root>\n  );\n};\n\nconst TriggerValue = () => {\n  const context = React.useContext(ComboboxContext);\n\n  if (context.value && isMultiSelect(context.value)) {\n    const layout = context.layout || \"truncate\";\n    const truncatedLength = context.value.length - 2;\n    const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n    if (context.value.length === 0) {\n      return (\n        <TelegraphButton.Text color=\"gray\">\n          {context.placeholder}\n        </TelegraphButton.Text>\n      );\n    }\n    return (\n      <Stack\n        gap=\"1\"\n        w=\"full\"\n        wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n        align=\"center\"\n        style={{\n          position: \"relative\",\n          flexGrow: 1,\n        }}\n      >\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          {context.value.map((v, i) => {\n            if (\n              v?.value &&\n              ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n            ) {\n              return (\n                <RefToTgphRef key={v.value}>\n                  <TriggerTag {...v} />\n                </RefToTgphRef>\n              );\n            }\n          })}\n        </AnimatePresence>\n        <AnimatePresence>\n          {layout === \"truncate\" && context.value.length > 2 && (\n            <Stack\n              as={motion.div}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              h=\"full\"\n              pr=\"1\"\n              pl=\"8\"\n              align=\"center\"\n              aria-label={`${truncatedLength} more selected`}\n              style={{\n                position: \"absolute\",\n                right: 0,\n                backgroundImage:\n                  \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n              }}\n              key=\"truncated text\"\n            >\n              <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n                +\n                <AnimatePresence mode=\"wait\" initial={false}>\n                  {truncatedLengthStringArray.map((n) => (\n                    <Box\n                      as={motion.span}\n                      w=\"2\"\n                      display=\"inline-block\"\n                      initial={{\n                        opacity: 0.5,\n                      }}\n                      animate={{\n                        opacity: 1,\n                      }}\n                      exit={{\n                        opacity: 0.5,\n                      }}\n                      transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n                      key={n}\n                    >\n                      {n}\n                    </Box>\n                  ))}\n                </AnimatePresence>{\" \"}\n                more\n              </Text>\n            </Stack>\n          )}\n        </AnimatePresence>\n      </Stack>\n    );\n  }\n\n  return (\n    <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n      {context?.value?.label || context?.value?.value || context.placeholder}\n    </TelegraphButton.Text>\n  );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n  placeholder?: string;\n  size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n  const context = React.useContext(ComboboxContext);\n\n  const getAriaLabelString = React.useCallback(() => {\n    if (!context.value) return context.placeholder;\n    if (isSingleSelect(context.value)) {\n      return (\n        context.value?.label || context.value?.value || context.placeholder\n      );\n    } else {\n      return (\n        context.value?.map((v) => v?.label).join(\", \") || context.placeholder\n      );\n    }\n  }, [context.value, context.placeholder]);\n\n  const shouldShowClearable = React.useMemo(() => {\n    if (isMultiSelect(context.value)) {\n      return context.clearable && context.value?.length > 0;\n    }\n\n    if (isSingleSelect(context.value)) {\n      return context.clearable && context.value;\n    }\n  }, [context.clearable, context.value]);\n\n  const handleClear = () => {\n    if (isMultiSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n      onValueChange?.([]);\n    }\n\n    if (isSingleSelect(context.value)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.(undefined);\n    }\n    context.triggerRef?.current?.focus();\n  };\n\n  return (\n    <TelegraphMenu.Trigger\n      {...props}\n      asChild\n      onClick={(event: React.MouseEvent) => {\n        event.preventDefault();\n        context.onOpenToggle();\n        context.triggerRef?.current?.focus();\n      }}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        // Lets the user tab in and out of the combobox as usual\n        if (event.key === \"Tab\") {\n          event.stopPropagation();\n          return;\n        }\n        if (SELECT_KEYS.includes(event.key)) {\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === \"ArrowDown\") {\n          context.onOpenToggle();\n          return;\n        }\n      }}\n      tgphRef={context.triggerRef}\n    >\n      <TelegraphButton.Root\n        id={context.triggerId}\n        type=\"button\"\n        bg=\"surface-1\"\n        variant=\"outline\"\n        align=\"center\"\n        minH={TRIGGER_MIN_HEIGHT[size]}\n        h=\"full\"\n        w=\"full\"\n        py=\"1\"\n        size={size}\n        color={context.errored ? \"red\" : \"gray\"}\n        justify=\"space-between\"\n        // Accessibility attributes\n        role=\"combobox\"\n        aria-label={getAriaLabelString()}\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        aria-haspopup=\"listbox\"\n        // Custom attributes\n        data-tgph-combobox-trigger\n        data-tgph-comobox-trigger-open={context.open}\n        disabled={context.disabled}\n      >\n        <TriggerValue />\n        <Stack align=\"center\" gap=\"1\">\n          {shouldShowClearable && (\n            <Tooltip label=\"Clear field\">\n              <TelegraphButton\n                type=\"button\"\n                icon={{ icon: Lucide.X, alt: \"Clear field\" }}\n                size=\"1\"\n                variant=\"ghost\"\n                onClick={(event: React.MouseEvent) => {\n                  if (!context.value) return;\n                  event.stopPropagation();\n                  handleClear();\n                }}\n                onKeyDown={(event: React.KeyboardEvent) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.stopPropagation();\n                    handleClear();\n                  }\n                }}\n                data-tgph-combobox-clear\n                style={{\n                  // Remove margin to make the clear button flush\n                  // with the trigger button\n                  marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n                  marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n                }}\n              />\n            </Tooltip>\n          )}\n          <TelegraphButton.Icon\n            as={motion.div}\n            icon={Lucide.ChevronDown}\n            animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n            transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n            aria-hidden\n          />\n        </Stack>\n      </TelegraphButton.Root>\n    </TelegraphMenu.Trigger>\n  );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n  tgphRef,\n  style,\n  children,\n  ...props\n}: ContentProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const hasInteractedOutside = React.useRef(false);\n  const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n  const internalContentRef = React.useRef(null);\n\n  const [height, setHeight] = React.useState(0);\n  const [initialAnimationComplete, setInitialAnimationComplete] =\n    React.useState(false);\n\n  const setHeightFromContent = React.useCallback(\n    (element: Element) => {\n      // Set the initial height of the content after the animation completes\n      const rect = element.getBoundingClientRect();\n      if (rect) {\n        setHeight(rect.height);\n      }\n\n      if (!initialAnimationComplete) {\n        setInitialAnimationComplete(true);\n      }\n    },\n    [initialAnimationComplete],\n  );\n\n  React.useEffect(() => {\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const element = entry.target;\n        setHeightFromContent(element);\n      }\n    });\n    // Attatch the observer once the initial animation completes\n    // and the content ref is available\n    if (internalContentRef.current && initialAnimationComplete) {\n      observer.observe(internalContentRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, [initialAnimationComplete, setHeightFromContent]);\n\n  // Reset the animation complete state when the combobox is closed\n  React.useEffect(() => {\n    if (initialAnimationComplete === true && context.open === false) {\n      setInitialAnimationComplete(false);\n    }\n  }, [context.open, initialAnimationComplete]);\n\n  return (\n    // We add radix's dismissable layer here so that we can swallow any escape key\n    // presses to prevent cases like a modal closing when we close the combobox\n    <DismissableLayer\n      onEscapeKeyDown={(event) => {\n        if (context.open) {\n          event.preventDefault();\n          context.setOpen(false);\n        }\n      }}\n    >\n      <TelegraphMenu.Content\n        as={motion.div}\n        mt=\"1\"\n        initial={{\n          opacity: 0,\n          scale: 0.8,\n          height: \"auto\",\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1,\n          // Set height based on the internalContentRef so that\n          // we get smooth animations when the content changes\n          minHeight: height ? `${height}px` : \"0\",\n        }}\n        exit={{ opacity: 0, scale: 0 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        onAnimationComplete={() => {\n          // Set height when the initial animation for\n          // displaying the content completes\n          if (!initialAnimationComplete && internalContentRef) {\n            const element = internalContentRef.current as unknown as Element;\n            setHeightFromContent(element);\n          }\n        }}\n        onCloseAutoFocus={(event: Event) => {\n          if (!hasInteractedOutside.current)\n            context.triggerRef?.current?.focus();\n          hasInteractedOutside.current = false;\n\n          event.preventDefault();\n        }}\n        onKeyDown={(event: React.KeyboardEvent) => {\n          // If the first option is focused and the user presses the up\n          // arrow key, focus the search input\n          const options = context.contentRef?.current?.querySelectorAll(\n            \"[data-tgph-combobox-option]\",\n          );\n\n          if (\n            document.activeElement === options?.[0] &&\n            LAST_KEYS.includes(event.key)\n          ) {\n            context.searchRef?.current?.focus();\n          }\n        }}\n        bg=\"surface-1\"\n        style={{\n          width: \"var(--tgph-comobobox-trigger-width)\",\n          ...style,\n          ...{\n            \"--tgph-comobobox-content-transform-origin\":\n              \"var(--radix-popper-transform-origin)\",\n            \"--tgph-combobox-content-available-width\":\n              \"var(--radix-popper-available-width)\",\n            \"--tgph-combobox-content-available-height\":\n              \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n            \"--tgph-comobobox-trigger-width\":\n              \"var(--radix-popper-anchor-width)\",\n            \"--tgph-combobox-trigger-height\":\n              \"var(--radix-popper-anchor-height)\",\n          },\n        }}\n        {...props}\n        tgphRef={composedRef}\n        data-tgph-combobox-content\n        data-tgph-combobox-content-open={initialAnimationComplete}\n        // Cancel out accessibility attirbutes related to aria menu\n        role={undefined}\n        aria-orientation={undefined}\n      >\n        <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n          {children}\n        </Stack>\n      </TelegraphMenu.Content>\n    </DismissableLayer>\n  );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  return (\n    <Stack\n      id={context.contentId}\n      direction=\"column\"\n      gap=\"1\"\n      style={{\n        overflowY: \"auto\",\n        // Available Height - Padding from edge of screen\n        maxHeight:\n          \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n      }}\n      // Accessibility attributes\n      role=\"listbox\"\n      {...props}\n    />\n  );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  value: DefinedOption[\"value\"];\n  label?: DefinedOption[\"label\"];\n  selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n  value,\n  label,\n  selected,\n  onSelect,\n  ...props\n}: OptionProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isFocused, setIsFocused] = React.useState(false);\n  const contextValue = context.value;\n\n  const isVisible = isMultiSelect(contextValue)\n    ? !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase())\n    : !context.searchQuery ||\n      value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n  const isSelected = isMultiSelect(contextValue)\n    ? contextValue.some((v) => v?.value === value)\n    : contextValue?.value === value;\n\n  const handleSelection = (event: Event | React.KeyboardEvent) => {\n    // Don't do anything if the key isn't a selection key\n    const keyboardEvent = event as React.KeyboardEvent;\n    if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n    // Don't bubble up the event\n    event.stopPropagation();\n    event.preventDefault();\n\n    if (context.closeOnSelect === true) {\n      context.setOpen(false);\n    }\n\n    if (onSelect) {\n      // Need to convert to non keyboard type event\n      // since onSelect is expecting a mouse event\n      // and we've handled the keyboard event already\n      const onSelectEvent = event as unknown as Event;\n      return onSelect(onSelectEvent);\n    }\n\n    if (isSingleSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as SingleSelect[\"onValueChange\"];\n      onValueChange?.({ value, label });\n    } else if (isMultiSelect(contextValue)) {\n      const onValueChange =\n        context.onValueChange as MultiSelect[\"onValueChange\"];\n\n      const newValue = isSelected\n        ? contextValue.filter((v) => v?.value !== value)\n        : [...contextValue, { value, label }];\n\n      onValueChange?.(newValue);\n    }\n\n    context.triggerRef?.current?.focus();\n  };\n\n  if (isVisible) {\n    return (\n      <TelegraphMenu.Button\n        type=\"button\"\n        onSelect={handleSelection}\n        onKeyDown={handleSelection}\n        // Force null if selected equals null so we\n        // can override the icon of the button\n        selected={selected === null ? null : selected ?? isSelected}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        // Accessibility attributes\n        role=\"option\"\n        aria-selected={isSelected ? \"true\" : \"false\"}\n        // Custom attributes\n        data-tgph-combobox-option\n        data-tgph-combobox-option-focused={isFocused}\n        data-tgph-combobox-option-value={value}\n        data-tgph-combobox-option-label={label}\n        {...props}\n      >\n        {label || value}\n      </TelegraphMenu.Button>\n    );\n  }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n  label?: string;\n};\n\nconst Search = ({\n  label = \"Search\",\n  placeholder = \"Search\",\n  tgphRef,\n  value: controlledValueProp,\n  onValueChange: onValueChangeProp,\n  ...props\n}: SearchProps) => {\n  const id = React.useId();\n  const context = React.useContext(ComboboxContext);\n  const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n  const value = controlledValueProp ?? context.searchQuery;\n  const onValueChange = onValueChangeProp ?? context.setSearchQuery;\n\n  React.useEffect(() => {\n    const handleSearchKeyDown = (event: KeyboardEvent) => {\n      if (FIRST_KEYS.includes(event.key)) {\n        context.contentRef?.current?.focus({ preventScroll: true });\n      }\n\n      if (event.key === \"Escape\") {\n        context.setOpen(false);\n      }\n\n      event.stopPropagation();\n    };\n\n    const searchInput = context.searchRef?.current;\n\n    if (searchInput) {\n      searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n      return () => {\n        searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n      };\n    }\n  }, [context]);\n\n  return (\n    <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n      <VisuallyHidden.Root>\n        <Text as=\"label\" htmlFor={id}>\n          {label}\n        </Text>\n      </VisuallyHidden.Root>\n      <TelegraphInput\n        id={id}\n        variant=\"ghost\"\n        placeholder={placeholder}\n        value={value}\n        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          onValueChange(event.target.value);\n        }}\n        LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n        TrailingComponent={\n          context?.searchQuery && context?.searchQuery?.length > 0 ? (\n            <TelegraphButton\n              as={motion.button}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              variant=\"ghost\"\n              color=\"gray\"\n              icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n              onClick={() => context.setSearchQuery?.(\"\")}\n            />\n          ) : null\n        }\n        autoFocus\n        data-tgph-combobox-search\n        aria-controls={context.contentId}\n        {...props}\n        tgphRef={composedRef}\n      />\n    </Box>\n  );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n  icon?: TgphComponentProps<typeof Icon> | null;\n  message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n  icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n  message = \"No results found\",\n  children,\n  ...props\n}: EmptyProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const options = context.contentRef?.current?.querySelectorAll(\n      \"[data-tgph-combobox-option]\",\n    );\n\n    if (options?.length === 0) {\n      setIsVisible(true);\n    } else {\n      setIsVisible(false);\n    }\n  }, [context.searchQuery, context.contentRef, children]);\n\n  if (isVisible) {\n    return (\n      <Stack\n        as={motion.div}\n        initial={{ opacity: 0, scale: 0.8 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n        gap=\"1\"\n        align=\"center\"\n        justify=\"center\"\n        w=\"full\"\n        my=\"8\"\n        data-tgph-combobox-empty\n        {...props}\n      >\n        {icon === null ? <></> : <Icon {...icon} />}\n        {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n      </Stack>\n    );\n  }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphMenu.Button<T>\n> & {\n  leadingText?: string;\n  values?: Array<Option>;\n  onCreate?: (value: DefinedOption) => void;\n};\n\nconst Create = <T extends TgphElement>({\n  leadingText = \"Create\",\n  values,\n  onCreate,\n  selected = null,\n  ...props\n}: CreateProps<T>) => {\n  const context = React.useContext(ComboboxContext);\n\n  const variableAlreadyExists = React.useCallback(\n    (searchQuery: string | undefined) => {\n      if (!values || values?.length === 0) return false;\n      return values.some((v) => v?.value === searchQuery);\n    },\n    [values],\n  );\n\n  if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n    return (\n      <Option\n        leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n        mx=\"1\"\n        value={context.searchQuery}\n        label={`${leadingText} \"${context.searchQuery}\"`}\n        selected={selected}\n        onSelect={() => {\n          if (onCreate && context.value && context.searchQuery) {\n            if (isSingleSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            if (isMultiSelect(context.value)) {\n              onCreate({ value: context.searchQuery });\n            }\n\n            context.setSearchQuery?.(\"\");\n          }\n        }}\n        {...props}\n      />\n    );\n  }\n};\n\nconst Combobox = {} as {\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n  Content: typeof Content;\n  Options: typeof Options;\n  Option: typeof Option;\n  Search: typeof Search;\n  Empty: typeof Empty;\n  Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n  Root,\n  Trigger,\n  Content,\n  Options,\n  Option,\n  Search,\n  Empty,\n  Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","clearable","disabled","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","isVisible","isSelected","handleSelection","keyboardEvent","Search","controlledValueProp","onValueChangeProp","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":"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"}

package/dist/types/Combobox/Combobox.d.ts

@@ -7,23 +7,11 @@ import { Menu as TelegraphMenu } from '@telegraph/menu';
 import { default as React } from 'react';
 import { DefinedOption, Option } from './Combobox.helpers';
 
-type SingleSelect = {
-    value?: Option;
-    onValueChange?: (value: Option) => void;
-};
-type MultiSelect = {
-    value?: Array<Option>;
-    onValueChange?: (value: Array<Option>) => void;
-};
-type RootProps = ({
-    value?: MultiSelect["value"];
-    onValueChange?: MultiSelect["onValueChange"];
-    layout?: "truncate" | "wrap";
-} | {
-    value?: SingleSelect["value"];
-    onValueChange?: SingleSelect["onValueChange"];
-    layout?: never;
-}) & {
+type LayoutValue<O extends Option | Array<Option>> = O extends Option ? never : "truncate" | "wrap";
+type RootProps<O extends Option | Array<Option>> = {
+    value?: O;
+    onValueChange?: (value: O) => void;
+    layout?: LayoutValue<O>;
     open?: boolean;
     defaultOpen?: boolean;
     errored?: boolean;
@@ -32,9 +20,10 @@ type RootProps = ({
     modal?: boolean;
     closeOnSelect?: boolean;
     clearable?: boolean;
+    disabled?: boolean;
     children?: React.ReactNode;
 };
-declare const Root: ({ modal, closeOnSelect, clearable, open: openProp, onOpenChange: onOpenChangeProp, defaultOpen: defaultOpenProp, value, onValueChange, errored, placeholder, layout, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: <O extends Option | Array<Option>>({ modal, closeOnSelect, clearable, disabled, open: openProp, onOpenChange: onOpenChangeProp, defaultOpen: defaultOpenProp, value, onValueChange, errored, placeholder, layout, ...props }: RootProps<O>) => import("react/jsx-runtime").JSX.Element;
 type TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {
     placeholder?: string;
     size?: TgphComponentProps<typeof TelegraphButton.Root>["size"];
@@ -45,8 +34,8 @@ declare const Content: <T extends TgphElement>({ tgphRef, style, children, ...pr
 type OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;
 declare const Options: <T extends TgphElement>({ ...props }: OptionsProps<T>) => import("react/jsx-runtime").JSX.Element;
 type OptionProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphMenu.Button<T>> & {
-    value: string;
-    label?: string;
+    value: DefinedOption["value"];
+    label?: DefinedOption["label"];
     selected?: boolean | null;
 };
 declare const Option: <T extends TgphElement>({ value, label, selected, onSelect, ...props }: OptionProps<T>) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/types/Combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}

package/dist/types/Combobox/Combobox.helpers.d.ts

@@ -1,6 +1,6 @@
 export type DefinedOption = {
     value: string;
-    label?: string;
+    label?: string | React.ReactNode;
 };
 export type Option = DefinedOption | undefined;
 export declare const isMultiSelect: (value: Option | Array<Option>) => value is Array<Option>;

package/dist/types/Combobox/Combobox.helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.helpers.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.helpers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9D,MAAM,MAAM,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;AAC/C,eAAO,MAAM,aAAa,UACjB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,KAAK,CAAC,MAAM,CAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,UAClB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,MAEX,CAAC"}
+{"version":3,"file":"Combobox.helpers.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.helpers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAChF,MAAM,MAAM,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;AAC/C,eAAO,MAAM,aAAa,UACjB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,KAAK,CAAC,MAAM,CAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,UAClB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,MAEX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/combobox",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "A styled menu, triggered by a Select, that combines an Input and Single- or Multi-select.",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/combobox",
   "author": "@knocklabs",