@telegraph/combobox 0.0.47 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/cjs/default.js +2 -0
- package/dist/cjs/default.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/default.mjs +2 -0
- package/dist/esm/default.mjs.map +1 -0
- package/dist/esm/index.mjs +263 -363
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Combobox/Combobox.d.ts.map +1 -1
- package/package.json +10 -11
- package/dist/css/default.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @telegraph/combobox
|
|
2
2
|
|
|
3
|
+
## 0.0.49
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`141974d`](https://github.com/knocklabs/telegraph/commit/141974dae192c212d1f126b8c7e3683ceffed809)]:
|
|
8
|
+
- @telegraph/menu@0.0.40
|
|
9
|
+
|
|
10
|
+
## 0.0.48
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#368](https://github.com/knocklabs/telegraph/pull/368) [`22ac9d0`](https://github.com/knocklabs/telegraph/commit/22ac9d0ff28ef0966edd31a4016c76d8a7ae91ad) Thanks [@kylemcd](https://github.com/kylemcd)! - motion updates
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [[`a748be4`](https://github.com/knocklabs/telegraph/commit/a748be4d48b4e26908deaa120389598e185007c6), [`22ac9d0`](https://github.com/knocklabs/telegraph/commit/22ac9d0ff28ef0966edd31a4016c76d8a7ae91ad), [`8fdf776`](https://github.com/knocklabs/telegraph/commit/8fdf77633d6991014ffa55b32b1ba45ef124f917), [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8), [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8), [`bc6c1f4`](https://github.com/knocklabs/telegraph/commit/bc6c1f4223380b310487d72dc4153e499f07fefe)]:
|
|
17
|
+
- @telegraph/typography@0.1.3
|
|
18
|
+
- @telegraph/tooltip@0.0.30
|
|
19
|
+
- @telegraph/button@0.0.57
|
|
20
|
+
- @telegraph/layout@0.1.3
|
|
21
|
+
- @telegraph/motion@0.0.2
|
|
22
|
+
- @telegraph/icon@0.0.37
|
|
23
|
+
- @telegraph/menu@0.0.39
|
|
24
|
+
- @telegraph/tag@0.0.61
|
|
25
|
+
- @telegraph/input@0.0.29
|
|
26
|
+
|
|
3
27
|
## 0.0.47
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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"),A=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"),D=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"],P=["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,...g})=>{const p=c.useId(),d=c.useId(),b=c.useRef(null),h=c.useRef(null),S=c.useRef(null),[R,Q]=c.useState(""),[I=!1,E]=M.useControllableState({prop:l,defaultProp:n,onChange:r}),V=c.useCallback(()=>{E(F=>!F)},[E]);return c.useEffect(()=>{I||Q("")},[I]),i.jsx(C.Provider,{value:{contentId:p,triggerId:d,value:o,onValueChange:a,placeholder:f,open:I,setOpen:E,onOpenToggle:V,closeOnSelect:s,clearable:e,disabled:u,searchQuery:R,setSearchQuery:Q,triggerRef:b,searchRef:h,contentRef:S,errored:y,layout:m},children:i.jsx(O.Menu.Root,{open:I,onOpenChange:E,modal:t,...g})})},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(D.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(P.includes(n.key)){n.preventDefault();return}if(n.key==="ArrowDown"){n.stopPropagation(),n.preventDefault(),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=A.useComposedRefs(t,l.contentRef),o=c.useRef(null),[a,y]=c.useState(0),[f,m]=c.useState(!1),g=c.useCallback(p=>{const d=p.getBoundingClientRect();d&&y(d.height),f||m(!0)},[f]);return c.useEffect(()=>{const p=new ResizeObserver(d=>{for(const b of d){const h=b.target;g(h)}});return o.current&&f&&p.observe(o.current),()=>p.disconnect()},[f,g]),c.useEffect(()=>{f===!0&&l.open===!1&&m(!1)},[l.open,f]),i.jsx(H.DismissableLayer,{onEscapeKeyDown:p=>{l.open&&(p.stopPropagation(),p.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 p=o.current;g(p)}},onCloseAutoFocus:p=>{var d,b;r.current||(b=(d=l.triggerRef)==null?void 0:d.current)==null||b.focus(),r.current=!1,p.preventDefault()},onKeyDown:p=>{var b,h,S,R;p.stopPropagation();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(p.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})},q=({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(g=>(g==null?void 0:g.value)===t):(a==null?void 0:a.value)===t,m=g=>{var d,b;g.stopPropagation();const p=g;if(!(p.key&&!P.includes(p.key))){if(g.preventDefault(),r.closeOnSelect===!0&&r.setOpen(!1),u)return u(g);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=A.useComposedRefs(e,o.searchRef),y=u??o.searchQuery,f=l??o.setSearchQuery;return c.useEffect(()=>{var d;const g=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()},p=(d=o.searchRef)==null?void 0:d.current;if(p)return p.addEventListener("keydown",g),()=>{p.removeEventListener("keydown",g)}},[o]),i.jsxs(w.Box,{borderBottom:"px",px:"1",pb:"1",children:[i.jsx(Y.Root,{children:i.jsx(D.Text,{as:"label",htmlFor:n,children:t})}),i.jsx($.Input,{id:n,variant:"ghost",placeholder:s,value:y,onChange:g=>{f(g.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 g;return(g=o.setSearchQuery)==null?void 0:g.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(D.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(q,{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:q,Search:ne,Empty:re,Create:ae});exports.Combobox=B;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),F=require("@radix-ui/react-dismissable-layer"),K=require("@radix-ui/react-use-controllable-state"),M=require("@radix-ui/react-visually-hidden"),w=require("@telegraph/button"),Q=require("@telegraph/compose-refs"),_=require("@telegraph/helpers"),y=require("@telegraph/icon"),H=require("@telegraph/input"),m=require("@telegraph/layout"),E=require("@telegraph/menu"),O=require("@telegraph/tag"),G=require("@telegraph/tooltip"),D=require("@telegraph/typography"),l=require("react");function Y(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(M),z={0:"5",1:"6",2:"8",3:"10"},j=t=>Array.isArray(t),T=t=>typeof t=="object"&&!Array.isArray(t)||!t,N=["ArrowDown","PageUp","Home"],U=["ArrowUp","PageDown","End"],q=["Enter"," "],x=l.createContext({value:void 0,onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{},clearable:!1,disabled:!1}),X=({modal:t=!0,closeOnSelect:s=!0,clearable:e=!1,disabled:u=!1,open:i,onOpenChange:a,defaultOpen:o,value:n,onValueChange:r,errored:g,placeholder:h,layout:b,...p})=>{const f=l.useId(),S=l.useId(),C=l.useRef(null),d=l.useRef(null),R=l.useRef(null),[v,L]=l.useState(""),[k=!1,I]=K.useControllableState({prop:i,defaultProp:o,onChange:a}),B=l.useCallback(()=>{I(V=>!V)},[I]);return l.useEffect(()=>{k||L("")},[k]),c.jsx(x.Provider,{value:{contentId:f,triggerId:S,value:n,onValueChange:r,placeholder:h,open:k,setOpen:I,onOpenToggle:B,closeOnSelect:s,clearable:e,disabled:u,searchQuery:v,setSearchQuery:L,triggerRef:C,searchRef:d,contentRef:R,errored:g,layout:b},children:c.jsx(E.Menu.Root,{open:k,onOpenChange:I,modal:t,...p})})},J=({label:t,value:s,...e})=>{const u=l.useContext(x);return c.jsxs(O.Tag.Root,{size:"1",layout:"position",...e,children:[c.jsx(O.Tag.Text,{children:t||s}),c.jsx(O.Tag.Button,{icon:{icon:y.Lucide.X,alt:`Remove ${s}`},onClick:i=>{if(!u.onValueChange)return;const a=u.onValueChange,n=u.value.filter(r=>(r==null?void 0:r.value)!==s);a==null||a(n),i.stopPropagation(),i.preventDefault()}})]})},W=()=>{var s,e;const t=l.useContext(x);if(t.value&&j(t.value)){const u=t.layout||"truncate",i=t.value.length-2,a=i.toString().split("");return t.value.length===0?c.jsx(w.Button.Text,{color:"gray",children:t.placeholder}):c.jsxs(m.Stack,{gap:"1",w:"full",wrap:u==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[t.value.map((o,n)=>{if(o!=null&&o.value&&(u==="truncate"&&n<=1||u==="wrap"))return c.jsx(_.RefToTgphRef,{children:c.jsx(J,{...o})},o.value)}),u==="truncate"&&t.value.length>2&&c.jsx(m.Stack,{h:"full",pr:"1",pl:"8",align:"center","aria-label":`${i} more selected`,position:"absolute",right:"0",style:{backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:c.jsxs(D.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",a.map(o=>c.jsx(m.Box,{as:"span",w:"2",display:"inline-block",children:o},o))," ","more"]})})]})}return c.jsx(w.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})},Z=({size:t="2",...s})=>{const e=l.useContext(x),u=l.useCallback(()=>{var o,n,r;return e.value?T(e.value)?((o=e.value)==null?void 0:o.label)||((n=e.value)==null?void 0:n.value)||e.placeholder:((r=e.value)==null?void 0:r.map(g=>g==null?void 0:g.label).join(", "))||e.placeholder:e.placeholder},[e.value,e.placeholder]),i=l.useMemo(()=>{var o;if(j(e.value))return e.clearable&&((o=e.value)==null?void 0:o.length)>0;if(T(e.value))return e.clearable&&e.value},[e.clearable,e.value]),a=()=>{var o,n;if(j(e.value)){const r=e.onValueChange;r==null||r([])}if(T(e.value)){const r=e.onValueChange;r==null||r(void 0)}(n=(o=e.triggerRef)==null?void 0:o.current)==null||n.focus()};return c.jsx(E.Menu.Trigger,{...s,asChild:!0,onClick:o=>{var n,r;o.preventDefault(),e.onOpenToggle(),(r=(n=e.triggerRef)==null?void 0:n.current)==null||r.focus()},onKeyDown:o=>{if(o.key==="Tab"){o.stopPropagation();return}if(q.includes(o.key)){o.preventDefault();return}if(o.key==="ArrowDown"){o.stopPropagation(),o.preventDefault(),e.onOpenToggle();return}},tgphRef:e.triggerRef,children:c.jsxs(w.Button.Root,{id:e.triggerId,type:"button",bg:"surface-1",variant:"outline",align:"center",minH:z[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:[c.jsx(W,{}),c.jsxs(m.Stack,{align:"center",gap:"1",children:[i&&c.jsx(G.Tooltip,{label:"Clear field",children:c.jsx(w.Button,{type:"button",icon:{icon:y.Lucide.X,alt:"Clear field"},size:"1",variant:"ghost",onClick:o=>{e.value&&(o.stopPropagation(),a())},onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&(o.stopPropagation(),a())},"data-tgph-combobox-clear":!0,style:{marginTop:"calc(-1 * var(--tgph-spacing-1)",marginBottom:"calc(-1 * var(--tgph-spacing-1)"}})}),c.jsx(w.Button.Icon,{icon:y.Lucide.ChevronDown,"aria-hidden":!0})]})]})})},ee=({tgphRef:t,style:s,children:e,...u})=>{const i=l.useContext(x),a=l.useRef(!1),o=Q.useComposedRefs(t,i.contentRef),n=l.useRef(null);return c.jsx(F.DismissableLayer,{onEscapeKeyDown:r=>{i.open&&(r.stopPropagation(),r.preventDefault(),i.setOpen(!1))},children:c.jsx(m.Box,{tgphRef:o,children:c.jsx(E.Menu.Content,{mt:"1",onCloseAutoFocus:r=>{var g,h;a.current||(h=(g=i.triggerRef)==null?void 0:g.current)==null||h.focus(),a.current=!1,r.preventDefault()},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:o,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":i.open,role:void 0,"aria-orientation":void 0,onKeyDown:r=>{var h,b,p,f;r.stopPropagation();const g=(b=(h=i.contentRef)==null?void 0:h.current)==null?void 0:b.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(g==null?void 0:g[0])&&U.includes(r.key)&&((f=(p=i.searchRef)==null?void 0:p.current)==null||f.focus())},children:c.jsx(m.Stack,{direction:"column",gap:"1",tgphRef:n,children:e})})})})},te=({...t})=>{const s=l.useContext(x);return c.jsx(m.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,...i})=>{const a=l.useContext(x),[o,n]=l.useState(!1),r=a.value,g=(j(r),!a.searchQuery||t.toLowerCase().includes(a.searchQuery.toLowerCase())),h=j(r)?r.some(p=>(p==null?void 0:p.value)===t):(r==null?void 0:r.value)===t,b=p=>{var S,C;p.stopPropagation();const f=p;if(!(f.key&&!q.includes(f.key))){if(p.preventDefault(),a.closeOnSelect===!0&&a.setOpen(!1),u)return u(p);if(T(r)){const d=a.onValueChange;d==null||d({value:t,label:s})}else if(j(r)){const d=a.onValueChange,R=h?r.filter(v=>(v==null?void 0:v.value)!==t):[...r,{value:t,label:s}];d==null||d(R)}(C=(S=a.triggerRef)==null?void 0:S.current)==null||C.focus()}};if(g)return c.jsx(E.Menu.Button,{type:"button",onSelect:b,onKeyDown:b,selected:e===null?null:e??h,onFocus:()=>n(!0),onBlur:()=>n(!1),role:"option","aria-selected":h?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":o,"data-tgph-combobox-option-value":t,"data-tgph-combobox-option-label":s,...i,children:s||t})},oe=({label:t="Search",placeholder:s="Search",tgphRef:e,value:u,onValueChange:i,...a})=>{var b;const o=l.useId(),n=l.useContext(x),r=Q.useComposedRefs(e,n.searchRef),g=u??n.searchQuery,h=i??n.setSearchQuery;return l.useEffect(()=>{var S;const p=C=>{var d,R;N.includes(C.key)&&((R=(d=n.contentRef)==null?void 0:d.current)==null||R.focus({preventScroll:!0})),C.key==="Escape"&&n.setOpen(!1),C.stopPropagation()},f=(S=n.searchRef)==null?void 0:S.current;if(f)return f.addEventListener("keydown",p),()=>{f.removeEventListener("keydown",p)}},[n]),c.jsxs(m.Box,{borderBottom:"px",px:"1",pb:"1",children:[c.jsx($.Root,{children:c.jsx(D.Text,{as:"label",htmlFor:o,children:t})}),c.jsx(H.Input,{id:o,variant:"ghost",placeholder:s,value:g,onChange:p=>{h(p.target.value)},LeadingComponent:c.jsx(y.Icon,{icon:y.Lucide.Search,alt:"Search Icon"}),TrailingComponent:n!=null&&n.searchQuery&&((b=n==null?void 0:n.searchQuery)==null?void 0:b.length)>0?c.jsx(w.Button,{variant:"ghost",color:"gray",icon:{icon:y.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var p;return(p=n.setSearchQuery)==null?void 0:p.call(n,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":n.contentId,...a,tgphRef:r})]})},re=({icon:t={icon:y.Lucide.Search,alt:"Search Icon"},message:s="No results found",children:e,...u})=>{const i=l.useContext(x),[a,o]=l.useState(!1);if(l.useEffect(()=>{var r,g;const n=(g=(r=i.contentRef)==null?void 0:r.current)==null?void 0:g.querySelectorAll("[data-tgph-combobox-option]");(n==null?void 0:n.length)===0?o(!0):o(!1)},[i.searchQuery,i.contentRef,e]),a)return c.jsxs(m.Stack,{gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...u,children:[t===null?c.jsx(c.Fragment,{}):c.jsx(y.Icon,{...t}),s===null?c.jsx(c.Fragment,{}):c.jsx(D.Text,{as:"span",children:s})]})},ne=({leadingText:t="Create",values:s,onCreate:e,selected:u=null,...i})=>{const a=l.useContext(x),o=l.useCallback(n=>!s||(s==null?void 0:s.length)===0?!1:s.some(r=>(r==null?void 0:r.value)===n),[s]);if(a.searchQuery&&!o(a.searchQuery))return c.jsx(P,{leadingIcon:{icon:y.Lucide.Plus,"aria-hidden":!0},mx:"1",value:a.searchQuery,label:`${t} "${a.searchQuery}"`,selected:u,onSelect:()=>{var n;e&&a.value&&a.searchQuery&&(T(a.value)&&e({value:a.searchQuery}),j(a.value)&&e({value:a.searchQuery}),(n=a.setSearchQuery)==null||n.call(a,""))},...i})},A={};Object.assign(A,{Root:X,Trigger:Z,Content:ee,Options:te,Option:P,Search:oe,Empty:re,Create:ne});exports.Combobox=A;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +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 | 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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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 allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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.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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"}
|
|
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 | 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 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 size=\"1\" layout=\"position\" {...props}>\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 {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 {layout === \"truncate\" && context.value.length > 2 && (\n <Stack\n h=\"full\"\n pr=\"1\"\n pl=\"8\"\n align=\"center\"\n aria-label={`${truncatedLength} more selected`}\n position=\"absolute\"\n right=\"0\"\n style={{\n backgroundImage:\n \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n }}\n >\n <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n +\n {truncatedLengthStringArray.map((n) => (\n <Box as=\"span\" w=\"2\" display=\"inline-block\" key={n}>\n {n}\n </Box>\n ))}{\" \"}\n more\n </Text>\n </Stack>\n )}\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\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 icon={Lucide.ChevronDown} aria-hidden />\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\n context.setOpen(false);\n }\n }}\n >\n <Box tgphRef={composedRef}>\n <TelegraphMenu.Content\n // as={motion.div}\n mt=\"1\"\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 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={context.open}\n // Cancel out accessibility attirbutes related to aria menu\n role={undefined}\n aria-orientation={undefined}\n onKeyDown={(event: React.KeyboardEvent) => {\n // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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 >\n <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n {children}\n </Stack>\n </TelegraphMenu.Content>\n </Box>\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 allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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.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 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 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","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","i","RefToTgphRef","Text","n","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","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":"42BAAaA,EAAqB,CAChC,EAAK,IACL,EAAK,IACL,EAAK,IACL,EAAK,IACP,ECHaC,EACXC,GAEO,MAAM,QAAQA,CAAK,EAGfC,EACXD,GAEQ,OAAOA,GAAU,UAAY,CAAC,MAAM,QAAQA,CAAK,GAAM,CAACA,ECgB5DE,EAAa,CAAC,YAAa,SAAU,MAAM,EAC3CC,EAAY,CAAC,UAAW,WAAY,KAAK,EACzCC,EAAc,CAAC,QAAS,GAAG,EAgC3BC,EAAkBC,EAAM,cAa5B,CACA,MAAO,OACP,cAAe,IAAM,CAAC,EACtB,UAAW,GACX,UAAW,GACX,KAAM,GACN,QAAS,IAAM,CAAC,EAChB,aAAc,IAAM,CAAC,EACrB,UAAW,GACX,SAAU,EACZ,CAAC,EAEKC,EAAO,CAAmC,CAC9C,MAAAC,EAAQ,GACR,cAAAC,EAAgB,GAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,KAAMC,EACN,aAAcC,EACd,YAAaC,EACb,MAAAd,EACA,cAAAe,EACA,QAAAC,EACA,YAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAoB,CACZ,MAAAC,EAAYd,EAAM,QAClBe,EAAYf,EAAM,QAClBgB,EAAahB,EAAM,OAAO,IAAI,EAC9BiB,EAAYjB,EAAM,OAAO,IAAI,EAC7BkB,EAAalB,EAAM,OAAuB,IAAI,EAE9C,CAACmB,EAAaC,CAAc,EAAIpB,EAAM,SAAiB,EAAE,EACzD,CAACqB,EAAO,GAAOC,CAAO,EAAIC,EAAAA,qBAAqB,CACnD,KAAMjB,EACN,YAAaE,EACb,SAAUD,CAAA,CACX,EAEKiB,EAAexB,EAAM,YAAY,IAAM,CACnCsB,EAACG,GAAa,CAACA,CAAQ,CAAA,EAC9B,CAACH,CAAO,CAAC,EAEZ,OAAAtB,EAAM,UAAU,IAAM,CAGfqB,GACHD,EAAe,EAAE,CACnB,EACC,CAACC,CAAI,CAAC,EAGPK,EAAA,IAAC3B,EAAgB,SAAhB,CACC,MAAO,CACL,UAAAe,EACA,UAAAC,EACA,MAAArB,EAIA,cAAAe,EACA,YAAAE,EACA,KAAAU,EACA,QAAAC,EACA,aAAAE,EACA,cAAArB,EACA,UAAAC,EACA,SAAAC,EACA,YAAAc,EACA,eAAAC,EACA,WAAAJ,EACA,UAAAC,EACA,WAAAC,EACA,QAAAR,EACA,OAAAE,CACF,EAEA,SAAAc,EAAA,IAACC,EAAAA,KAAc,KAAd,CACC,KAAAN,EACA,aAAcC,EACd,MAAApB,EACC,GAAGW,CAAA,CACN,CAAA,CAAA,CAGN,EAOMe,EAAa,CAAC,CAAE,MAAAC,EAAO,MAAAnC,EAAO,GAAGmB,KAA6B,CAC5D,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAG9C,OAAAgC,OAACC,EAAAA,IAAI,KAAJ,CAAS,KAAK,IAAI,OAAO,WAAY,GAAGnB,EACvC,SAAA,CAAAa,EAAA,IAACM,EAAI,IAAA,KAAJ,CAAU,SAAAH,GAASnC,EAAM,EAC1BgC,EAAA,IAACM,EAAAA,IAAI,OAAJ,CACC,KAAM,CAAE,KAAMC,SAAO,EAAG,IAAK,UAAUvC,CAAK,EAAG,EAC/C,QAAUwC,GAA4B,CAChC,GAAA,CAACJ,EAAQ,cAAe,OAC5B,MAAMrB,EACJqB,EAAQ,cAEJK,EADeL,EAAQ,MACC,OAAQM,IAAMA,GAAA,YAAAA,EAAG,SAAU1C,CAAK,EAC9De,GAAA,MAAAA,EAAgB0B,GAEhBD,EAAM,gBAAgB,EAEtBA,EAAM,eAAe,CACvB,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,EAEMG,EAAe,IAAM,SACnB,MAAAP,EAAU9B,EAAM,WAAWD,CAAe,EAEhD,GAAI+B,EAAQ,OAASrC,EAAcqC,EAAQ,KAAK,EAAG,CAC3C,MAAAlB,EAASkB,EAAQ,QAAU,WAC3BQ,EAAkBR,EAAQ,MAAM,OAAS,EACzCS,EAA6BD,EAAgB,SAAS,EAAE,MAAM,EAAE,EAElE,OAAAR,EAAQ,MAAM,SAAW,QAExBU,SAAgB,KAAhB,CAAqB,MAAM,OACzB,WAAQ,WACX,CAAA,EAIFT,EAAA,KAACU,EAAA,MAAA,CACC,IAAI,IACJ,EAAE,OACF,KAAM7B,IAAW,OAAS,OAAS,SACnC,MAAM,SACN,MAAO,CACL,SAAU,WACV,SAAU,CACZ,EAEC,SAAA,CAAAkB,EAAQ,MAAM,IAAI,CAACM,EAAGM,IAAM,CAC3B,GACEN,GAAA,MAAAA,EAAG,QACDxB,IAAW,YAAc8B,GAAK,GAAM9B,IAAW,QAG/C,OAAAc,MAACiB,EAAAA,cACC,SAACjB,EAAAA,IAAAE,EAAA,CAAY,GAAGQ,CAAG,CAAA,CAAA,EADFA,EAAE,KAErB,CAEJ,CACD,EACAxB,IAAW,YAAckB,EAAQ,MAAM,OAAS,GAC/CJ,EAAA,IAACe,EAAA,MAAA,CACC,EAAE,OACF,GAAG,IACH,GAAG,IACH,MAAM,SACN,aAAY,GAAGH,CAAe,iBAC9B,SAAS,WACT,MAAM,IACN,MAAO,CACL,gBACE,6EACJ,EAEA,SAAAP,EAAAA,KAACa,EAAAA,KAAK,CAAA,GAAG,OAAO,KAAK,IAAI,MAAO,CAAE,WAAY,QAAA,EAAY,SAAA,CAAA,IAEvDL,EAA2B,IAAKM,SAC9BC,EAAAA,IAAI,CAAA,GAAG,OAAO,EAAE,IAAI,QAAQ,eAC1B,SAAAD,CAAA,EAD8CA,CAEjD,CACD,EAAG,IAAI,MAAA,EAEV,CAAA,CACF,CAAA,CAAA,CAAA,CAIR,CAEA,aACGL,EAAgB,OAAA,KAAhB,CAAqB,MAAQV,EAAQ,MAAiB,UAAT,OAC3C,8BAAS,sBAAO,UAASiB,EAAAjB,GAAA,YAAAA,EAAS,QAAT,YAAAiB,EAAgB,QAASjB,EAAQ,WAC7D,CAAA,CAEJ,EAOMkB,EAAU,CAAC,CAAE,KAAAC,EAAO,IAAK,GAAGpC,KAA0B,CACpD,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAE1CmD,EAAqBlD,EAAM,YAAY,IAAM,WACjD,OAAK8B,EAAQ,MACTnC,EAAemC,EAAQ,KAAK,IAE5BqB,EAAArB,EAAQ,QAAR,YAAAqB,EAAe,UAASJ,EAAAjB,EAAQ,QAAR,YAAAiB,EAAe,QAASjB,EAAQ,cAIxDsB,EAAAtB,EAAQ,QAAR,YAAAsB,EAAe,IAAKhB,GAAMA,GAAA,YAAAA,EAAG,OAAO,KAAK,QAASN,EAAQ,YAPnCA,EAAQ,aAUlC,CAACA,EAAQ,MAAOA,EAAQ,WAAW,CAAC,EAEjCuB,EAAsBrD,EAAM,QAAQ,IAAM,OAC1C,GAAAP,EAAcqC,EAAQ,KAAK,EAC7B,OAAOA,EAAQ,aAAaqB,EAAArB,EAAQ,QAAR,YAAAqB,EAAe,QAAS,EAGlD,GAAAxD,EAAemC,EAAQ,KAAK,EACvB,OAAAA,EAAQ,WAAaA,EAAQ,OAErC,CAACA,EAAQ,UAAWA,EAAQ,KAAK,CAAC,EAE/BwB,EAAc,IAAM,SACpB,GAAA7D,EAAcqC,EAAQ,KAAK,EAAG,CAChC,MAAMrB,EACJqB,EAAQ,cACVrB,GAAA,MAAAA,EAAgB,CAAE,EACpB,CAEI,GAAAd,EAAemC,EAAQ,KAAK,EAAG,CACjC,MAAMrB,EACJqB,EAAQ,cACVrB,GAAA,MAAAA,EAAgB,OAClB,EACQsC,GAAAI,EAAArB,EAAA,aAAA,YAAAqB,EAAY,UAAZ,MAAAJ,EAAqB,OAAM,EAInC,OAAArB,EAAA,IAACC,EAAAA,KAAc,QAAd,CACE,GAAGd,EACJ,QAAO,GACP,QAAUqB,GAA4B,SACpCA,EAAM,eAAe,EACrBJ,EAAQ,aAAa,GACbiB,GAAAI,EAAArB,EAAA,aAAA,YAAAqB,EAAY,UAAZ,MAAAJ,EAAqB,OAC/B,EACA,UAAYb,GAA+B,CAErC,GAAAA,EAAM,MAAQ,MAAO,CACvBA,EAAM,gBAAgB,EACtB,MACF,CACA,GAAIpC,EAAY,SAASoC,EAAM,GAAG,EAAG,CACnCA,EAAM,eAAe,EACrB,MACF,CAEI,GAAAA,EAAM,MAAQ,YAAa,CAE7BA,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrBJ,EAAQ,aAAa,EACrB,MACF,CACF,EACA,QAASA,EAAQ,WAEjB,SAAAC,EAAA,KAACS,EAAAA,OAAgB,KAAhB,CACC,GAAIV,EAAQ,UACZ,KAAK,SACL,GAAG,YACH,QAAQ,UACR,MAAM,SACN,KAAMtC,EAAmByD,CAAI,EAC7B,EAAE,OACF,EAAE,OACF,GAAG,IACH,KAAAA,EACA,MAAOnB,EAAQ,QAAU,MAAQ,OACjC,QAAQ,gBAER,KAAK,WACL,aAAYoB,EAAmB,EAC/B,gBAAepB,EAAQ,UACvB,gBAAeA,EAAQ,KACvB,gBAAc,UAEd,6BAA0B,GAC1B,iCAAgCA,EAAQ,KACxC,SAAUA,EAAQ,SAElB,SAAA,CAAAJ,EAAA,IAACW,EAAa,EAAA,EACbN,EAAA,KAAAU,EAAA,MAAA,CAAM,MAAM,SAAS,IAAI,IACvB,SAAA,CACCY,GAAA3B,EAAA,IAAC6B,EAAQ,QAAA,CAAA,MAAM,cACb,SAAA7B,EAAA,IAACc,EAAA,OAAA,CACC,KAAK,SACL,KAAM,CAAE,KAAMP,EAAAA,OAAO,EAAG,IAAK,aAAc,EAC3C,KAAK,IACL,QAAQ,QACR,QAAUC,GAA4B,CAC/BJ,EAAQ,QACbI,EAAM,gBAAgB,EACVoB,IACd,EACA,UAAYpB,GAA+B,EACrCA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,gBAAgB,EACVoB,IAEhB,EACA,2BAAwB,GACxB,MAAO,CAGL,UAAW,kCACX,aAAc,iCAChB,CAAA,CAAA,EAEJ,EAEF5B,MAACc,EAAAA,OAAgB,KAAhB,CAAqB,KAAMP,EAAAA,OAAO,YAAa,cAAW,GAAC,CAAA,EAC9D,CAAA,CAAA,CACF,CAAA,CAAA,CAGN,EAMMuB,GAAU,CAAwB,CACtC,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAG9C,CACL,IAAuB,CACf,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAC1C6D,EAAuB5D,EAAM,OAAO,EAAK,EACzC6D,EAAcC,EAAA,gBAAyBL,EAAS3B,EAAQ,UAAU,EAElEiC,EAAqB/D,EAAM,OAAO,IAAI,EA4C5C,OAGE0B,EAAA,IAACsC,EAAA,iBAAA,CACC,gBAAkB9B,GAAU,CACtBJ,EAAQ,OAEVI,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrBJ,EAAQ,QAAQ,EAAK,EAEzB,EAEA,SAAAJ,EAAA,IAACoB,EAAI,IAAA,CAAA,QAASe,EACZ,SAAAnC,EAAA,IAACC,EAAAA,KAAc,QAAd,CAEC,GAAG,IASH,iBAAmBO,GAAiB,SAC7B0B,EAAqB,UAChBb,GAAAI,EAAArB,EAAA,aAAA,YAAAqB,EAAY,UAAZ,MAAAJ,EAAqB,QAC/Ba,EAAqB,QAAU,GAE/B1B,EAAM,eAAe,CACvB,EACA,GAAG,YACH,MAAO,CACL,MAAO,sCACP,GAAGwB,EAED,4CACE,uCACF,0CACE,sCACF,2CACE,qEACF,iCACE,mCACF,iCACE,mCAEN,EACC,GAAG7C,EACJ,QAASgD,EACT,6BAA0B,GAC1B,kCAAiC/B,EAAQ,KAEzC,KAAM,OACN,mBAAkB,OAClB,UAAYI,GAA+B,aAEzCA,EAAM,gBAAgB,EAIhB,MAAA+B,GAAUlB,GAAAI,EAAArB,EAAQ,aAAR,YAAAqB,EAAoB,UAApB,YAAAJ,EAA6B,iBAC3C,+BAIA,SAAS,iBAAkBkB,GAAA,YAAAA,EAAU,KACrCpE,EAAU,SAASqC,EAAM,GAAG,KAEpBgC,GAAAd,EAAAtB,EAAA,YAAA,YAAAsB,EAAW,UAAX,MAAAc,EAAoB,QAEhC,EAEA,SAAAxC,EAAA,IAACe,SAAM,UAAU,SAAS,IAAI,IAAI,QAASsB,EACxC,SAAAJ,CACH,CAAA,CAAA,CAAA,EAEJ,CAAA,CACF,CAEJ,EAIMQ,GAAU,CAAwB,CAAE,GAAGtD,KAA6B,CAClE,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAE9C,OAAA2B,EAAA,IAACe,EAAA,MAAA,CACC,GAAIX,EAAQ,UACZ,UAAU,SACV,IAAI,IACJ,MAAO,CACL,UAAW,OAEX,UACE,8EACJ,EAEA,KAAK,UACJ,GAAGjB,CAAA,CAAA,CAGV,EAUMuD,EAAS,CAAwB,CACrC,MAAA1E,EACA,MAAAmC,EACA,SAAAwC,EACA,SAAAC,EACA,GAAGzD,CACL,IAAsB,CACd,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAC1C,CAACwE,EAAWC,CAAY,EAAIxE,EAAM,SAAS,EAAK,EAChDyE,EAAe3C,EAAQ,MAEvB4C,GAAYjF,EAAcgF,CAAY,EACxC,CAAC3C,EAAQ,aACTpC,EAAM,cAAc,SAASoC,EAAQ,YAAY,aAAa,GAI5D6C,EAAalF,EAAcgF,CAAY,EACzCA,EAAa,KAAMrC,IAAMA,GAAA,YAAAA,EAAG,SAAU1C,CAAK,GAC3C+E,GAAA,YAAAA,EAAc,SAAU/E,EAEtBkF,EAAmB1C,GAAuC,SAE9DA,EAAM,gBAAgB,EAGtB,MAAM2C,EAAgB3C,EACtB,GAAI,EAAA2C,EAAc,KAAO,CAAC/E,EAAY,SAAS+E,EAAc,GAAG,GAShE,IANA3C,EAAM,eAAe,EAEjBJ,EAAQ,gBAAkB,IAC5BA,EAAQ,QAAQ,EAAK,EAGnBwC,EAKF,OAAOA,EADepC,CACO,EAG3B,GAAAvC,EAAe8E,CAAY,EAAG,CAChC,MAAMhE,EACJqB,EAAQ,cACMrB,GAAA,MAAAA,EAAA,CAAE,MAAAf,EAAO,MAAAmC,CAAA,EAAO,SACvBpC,EAAcgF,CAAY,EAAG,CACtC,MAAMhE,EACJqB,EAAQ,cAEJK,EAAWwC,EACbF,EAAa,OAAQ,IAAM,iBAAG,SAAU/E,CAAK,EAC7C,CAAC,GAAG+E,EAAc,CAAE,MAAA/E,EAAO,MAAAmC,EAAO,EAEtCpB,GAAA,MAAAA,EAAgB0B,EAClB,EAEQY,GAAAI,EAAArB,EAAA,aAAA,YAAAqB,EAAY,UAAZ,MAAAJ,EAAqB,QAAM,EAGrC,GAAI2B,EAEA,OAAAhD,EAAA,IAACC,EAAAA,KAAc,OAAd,CACC,KAAK,SACL,SAAUiD,EACV,UAAWA,EAGX,SAAUP,IAAa,KAAO,KAAOA,GAAYM,EACjD,QAAS,IAAMH,EAAa,EAAI,EAChC,OAAQ,IAAMA,EAAa,EAAK,EAEhC,KAAK,SACL,gBAAeG,EAAa,OAAS,QAErC,4BAAyB,GACzB,oCAAmCJ,EACnC,kCAAiC7E,EACjC,kCAAiCmC,EAChC,GAAGhB,EAEH,SAASgB,GAAAnC,CAAA,CAAA,CAIlB,EAMMoF,GAAS,CAAC,CACd,MAAAjD,EAAQ,SACR,YAAAlB,EAAc,SACd,QAAA8C,EACA,MAAOsB,EACP,cAAeC,EACf,GAAGnE,CACL,IAAmB,OACX,MAAAoE,EAAKjF,EAAM,QACX8B,EAAU9B,EAAM,WAAWD,CAAe,EAC1C8D,EAAcC,EAAA,gBAAgBL,EAAS3B,EAAQ,SAAS,EAExDpC,EAAQqF,GAAuBjD,EAAQ,YACvCrB,EAAgBuE,GAAqBlD,EAAQ,eAEnD,OAAA9B,EAAM,UAAU,IAAM,OACd,MAAAkF,EAAuBhD,GAAyB,SAChDtC,EAAW,SAASsC,EAAM,GAAG,KAC/Ba,GAAAI,EAAArB,EAAQ,aAAR,YAAAqB,EAAoB,UAApB,MAAAJ,EAA6B,MAAM,CAAE,cAAe,MAGlDb,EAAM,MAAQ,UAChBJ,EAAQ,QAAQ,EAAK,EAGvBI,EAAM,gBAAgB,CAAA,EAGlBiD,GAAchC,EAAArB,EAAQ,YAAR,YAAAqB,EAAmB,QAEvC,GAAIgC,EACU,OAAAA,EAAA,iBAAiB,UAAWD,CAAmB,EACpD,IAAM,CACCC,EAAA,oBAAoB,UAAWD,CAAmB,CAAA,CAElE,EACC,CAACpD,CAAO,CAAC,SAGTgB,MAAI,CAAA,aAAa,KAAK,GAAG,IAAI,GAAG,IAC/B,SAAA,CAACpB,EAAA,IAAA0D,EAAe,KAAf,CACC,SAAC1D,EAAAA,IAAAkB,EAAAA,KAAA,CAAK,GAAG,QAAQ,QAASqC,EACvB,SAAApD,CAAA,CACH,CACF,CAAA,EACAH,EAAA,IAAC2D,EAAA,MAAA,CACC,GAAAJ,EACA,QAAQ,QACR,YAAAtE,EACA,MAAAjB,EACA,SAAWwC,GAA+C,CAC1CzB,EAAAyB,EAAM,OAAO,KAAK,CAClC,EACA,iBAAmBR,EAAAA,IAAA4D,EAAAA,KAAA,CAAK,KAAMrD,EAAAA,OAAO,OAAQ,IAAI,cAAc,EAC/D,kBACEH,GAAA,MAAAA,EAAS,eAAeqB,EAAArB,GAAA,YAAAA,EAAS,cAAT,YAAAqB,EAAsB,QAAS,EACrDzB,EAAA,IAACc,EAAA,OAAA,CACC,QAAQ,QACR,MAAM,OACN,KAAM,CAAE,KAAMP,EAAAA,OAAO,EAAG,IAAK,oBAAqB,EAClD,QAAS,IAAM,OAAA,OAAAkB,EAAArB,EAAQ,iBAAR,YAAAqB,EAAA,KAAArB,EAAyB,IAAE,CAAA,EAE1C,KAEN,UAAS,GACT,4BAAyB,GACzB,gBAAeA,EAAQ,UACtB,GAAGjB,EACJ,QAASgD,CAAA,CACX,CACF,CAAA,CAAA,CAEJ,EAOM0B,GAAQ,CAAwB,CAAA,KACpCC,EAAO,CAAE,KAAMvD,EAAAA,OAAO,OAAQ,IAAK,aAAc,EACjD,QAAAwD,EAAU,mBACV,SAAA9B,EACA,GAAG9C,CACL,IAAqB,CACb,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAC1C,CAAC2E,EAAWgB,CAAY,EAAI1F,EAAM,SAAS,EAAK,EActD,GAZAA,EAAM,UAAU,IAAM,SACd,MAAAiE,GAAUlB,GAAAI,EAAArB,EAAQ,aAAR,YAAAqB,EAAoB,UAApB,YAAAJ,EAA6B,iBAC3C,gCAGEkB,GAAA,YAAAA,EAAS,UAAW,EACtByB,EAAa,EAAI,EAEjBA,EAAa,EAAK,CACpB,EACC,CAAC5D,EAAQ,YAAaA,EAAQ,WAAY6B,CAAQ,CAAC,EAElDe,EAEA,OAAA3C,EAAA,KAACU,EAAA,MAAA,CACC,IAAI,IACJ,MAAM,SACN,QAAQ,SACR,EAAE,OACF,GAAG,IACH,2BAAwB,GACvB,GAAG5B,EAEH,SAAA,CAAA2E,IAAS,KAAS9D,EAAA,IAAAiE,WAAA,CAAA,CAAA,EAAOjE,EAAAA,IAAA4D,EAAA,KAAA,CAAM,GAAGE,EAAM,EACxCC,IAAY,KAAS/D,EAAAA,IAAAiE,EAAA,SAAA,CAAA,CAAA,QAAO/C,EAAK,KAAA,CAAA,GAAG,OAAQ,SAAQ6C,CAAA,CAAA,CAAA,CAAA,CAAA,CAI7D,EAUMG,GAAS,CAAwB,CACrC,YAAAC,EAAc,SACd,OAAAC,EACA,SAAAC,EACA,SAAA1B,EAAW,KACX,GAAGxD,CACL,IAAsB,CACd,MAAAiB,EAAU9B,EAAM,WAAWD,CAAe,EAE1CiG,EAAwBhG,EAAM,YACjCmB,GACK,CAAC2E,IAAUA,GAAA,YAAAA,EAAQ,UAAW,EAAU,GACrCA,EAAO,KAAM1D,IAAMA,GAAA,YAAAA,EAAG,SAAUjB,CAAW,EAEpD,CAAC2E,CAAM,CAAA,EAGT,GAAIhE,EAAQ,aAAe,CAACkE,EAAsBlE,EAAQ,WAAW,EAEjE,OAAAJ,EAAA,IAAC0C,EAAA,CACC,YAAa,CAAE,KAAMnC,EAAAA,OAAO,KAAM,cAAe,EAAK,EACtD,GAAG,IACH,MAAOH,EAAQ,YACf,MAAO,GAAG+D,CAAW,KAAK/D,EAAQ,WAAW,IAC7C,SAAAuC,EACA,SAAU,IAAM,OACV0B,GAAYjE,EAAQ,OAASA,EAAQ,cACnCnC,EAAemC,EAAQ,KAAK,GAC9BiE,EAAS,CAAE,MAAOjE,EAAQ,WAAa,CAAA,EAGrCrC,EAAcqC,EAAQ,KAAK,GAC7BiE,EAAS,CAAE,MAAOjE,EAAQ,WAAa,CAAA,GAGzCqB,EAAArB,EAAQ,iBAAR,MAAAqB,EAAA,KAAArB,EAAyB,IAE7B,EACC,GAAGjB,CAAA,CAAA,CAIZ,EAEMoF,EAAW,CAAC,EAWlB,OAAO,OAAOA,EAAU,CACtB,KAAAhG,EACA,QAAA+C,EACA,QAAAQ,GACA,QAAAW,GACA,OAAAC,EACA,OAAAU,GACA,MAAAS,GACA,OAAAK,EACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|