https://partyrock.aws/website/ff89e99e8c8a65fc1c60/Combobox.js

1import{s as e}from"./rolldown-runtime.js";import{t}from"./react.js";import{t as n}from"./use-id.js";import{r}from"./use-merged-ref.js";import{t as i}from"./use-uncontrolled.js";import{t as a}from"./Popover.js";import{S as o,d as s,f as c,n as l,t as u}from"./Box.js";import{h as d,i as f,u as p}from"./MantineThemeProvider.js";import{a as m,o as h,s as g}from"./OptionalPortal.js";import{t as _}from"./create-safe-context.js";import{n as v,o as y}from"./polymorphic-factory.js";import{t as b}from"./Input.js";var x=e(t(),1);function S(e,t=document){let n=t.querySelector(e);if(n)return n;let r=t.querySelectorAll(`*`);for(let t=0;t<r.length;t+=1){let n=r[t];if(n.shadowRoot){let t=S(e,n.shadowRoot);if(t)return t}}return null}function C(e,t=document){let n=[],r=t.querySelectorAll(e);n.push(...Array.from(r));let i=t.querySelectorAll(`*`);for(let t=0;t<i.length;t+=1){let r=i[t];if(r.shadowRoot){let t=C(e,r.shadowRoot);n.push(...t)}}return n}function w(e){if(!e)return document;let t=e.getRootNode();return t instanceof ShadowRoot||t instanceof Document?t:document}var T={dropdown:`m_88b62a41`,search:`m_985517d8`,options:`m_b2821a6e`,option:`m_92253aa5`,empty:`m_2530cd1d`,header:`m_858f94bd`,footer:`m_82b967cb`,group:`m_254f3e4f`,groupLabel:`m_2bb2e9e5`,chevron:`m_2943220b`,optionsDropdownOption:`m_390b5f4`,optionsDropdownCheckIcon:`m_8ee53fc2`,optionsDropdownCheckPlaceholder:`m_a530ee0a`},E=f(),D={error:null},O=o((e,{size:t,color:n})=>({chevron:{"--combobox-chevron-size":y(t,`combobox-chevron-size`),"--combobox-chevron-color":n?p(n,e):void 0}})),k=l(e=>{let t=c(`ComboboxChevron`,D,e),{size:n,error:r,style:i,className:a,classNames:o,styles:l,unstyled:d,vars:f,attributes:p,mod:m,...h}=t,g=s({name:`ComboboxChevron`,classes:T,props:t,style:i,className:a,classNames:o,styles:l,unstyled:d,vars:f,varsResolver:O,attributes:p,rootSelector:`chevron`});return(0,E.jsx)(u,{component:`svg`,...h,...g(`chevron`),size:n,viewBox:`0 0 15 15`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,mod:[`combobox-chevron`,{error:r},m],children:(0,E.jsx)(`path`,{d:`M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z`,fill:`currentColor`,fillRule:`evenodd`,clipRule:`evenodd`})})});k.classes=T,k.varsResolver=O,k.displayName=`@mantine/core/ComboboxChevron`;var[A,j]=_(`Combobox component was not found in tree`);function M({onMouseDown:e,onClick:t,onClear:n,...r}){return(0,E.jsx)(b.ClearButton,{tabIndex:-1,"aria-hidden":!0,...r,onMouseDown:t=>{t.preventDefault(),e?.(t)},onClick:e=>{n(),t?.(e)}})}M.displayName=`@mantine/core/ComboboxClearButton`;var N=l(e=>{let{classNames:t,styles:n,className:r,style:i,hidden:o,...s}=c(`ComboboxDropdown`,null,e),l=j();return(0,E.jsx)(a.Dropdown,{...s,role:`presentation`,"data-hidden":o||void 0,"data-floating-height":l.floatingHeight||void 0,...l.getStyles(`dropdown`,{className:r,style:i,classNames:t,styles:n})})});N.classes=T,N.displayName=`@mantine/core/ComboboxDropdown`;var P={refProp:`ref`},F=l(e=>{let{children:t,refProp:n,ref:r}=c(`ComboboxDropdownTarget`,P,e);if(j(),!g(t))throw Error(`Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported`);return(0,E.jsx)(a.Target,{ref:r,refProp:n,children:t})});F.displayName=`@mantine/core/ComboboxDropdownTarget`;var I=l(e=>{let{classNames:t,className:n,style:r,styles:i,vars:a,...o}=c(`ComboboxEmpty`,null,e),s=j();return(0,E.jsx)(u,{...s.getStyles(`empty`,{className:n,classNames:t,styles:i,style:r}),...o})});I.classes=T,I.displayName=`@mantine/core/ComboboxEmpty`;function L({onKeyDown:e,onClick:t,withKeyboardNavigation:n,withAriaAttributes:r,withExpandedAttribute:i,targetType:a,autoComplete:o}){let s=j(),[c,l]=(0,x.useState)(null),u=t=>{if(e?.(t),!s.readOnly&&n){if(t.nativeEvent.isComposing)return;if(t.nativeEvent.code===`ArrowDown`&&(t.preventDefault(),s.store.dropdownOpened?l(s.store.selectNextOption()):(s.store.openDropdown(`keyboard`),l(s.store.selectActiveOption()),s.store.updateSelectedOptionIndex(`selected`,{scrollIntoView:!0}))),t.nativeEvent.code===`ArrowUp`&&(t.preventDefault(),s.store.dropdownOpened?l(s.store.selectPreviousOption()):(s.store.openDropdown(`keyboard`),l(s.store.selectActiveOption()),s.store.updateSelectedOptionIndex(`selected`,{scrollIntoView:!0}))),t.nativeEvent.code===`Enter`||t.nativeEvent.code===`NumpadEnter`){if(t.nativeEvent.keyCode===229)return;let e=s.store.getSelectedOptionIndex();s.store.dropdownOpened&&e!==-1?(t.preventDefault(),s.store.clickSelectedOption()):a===`button`&&(t.preventDefault(),s.store.openDropdown(`keyboard`))}t.key===`Escape`&&s.store.closeDropdown(`keyboard`),t.nativeEvent.code===`Space`&&a===`button`&&(t.preventDefault(),s.store.toggleDropdown(`keyboard`))}},d=r?{...i?{role:`combobox`}:{},"aria-haspopup":`listbox`,"aria-expanded":i?!!(s.store.listId&&s.store.dropdownOpened):void 0,"aria-controls":s.store.dropdownOpened&&s.store.listId?s.store.listId:void 0,"aria-activedescendant":s.store.dropdownOpened&&c||void 0,autoComplete:o,"data-expanded":s.store.dropdownOpened||void 0,"data-mantine-stop-propagation":s.store.dropdownOpened||void 0}:{},f=e=>

1{a===`button`&&e.currentTarget.focus(),t?.(e)};return{...d,onKeyDown:u,onClick:f}}var R={refProp:`ref`,targetType:`input`,withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:`off`},z=l(e=>{let{children:t,refProp:n,withKeyboardNavigation:i,withAriaAttributes:a,withExpandedAttribute:o,targetType:s,autoComplete:l,ref:u,...d}=c(`ComboboxEventsTarget`,R,e),f=m(t);if(!f)throw Error(`Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported`);let p=j(),g=L({targetType:s,withAriaAttributes:a,withKeyboardNavigation:i,withExpandedAttribute:o,onKeyDown:f.props.onKeyDown,onClick:f.props.onClick,autoComplete:l});return(0,x.cloneElement)(f,{...g,...d,[n]:r(u,p.store.targetRef,h(f))})});z.displayName=`@mantine/core/ComboboxEventsTarget`;var B=l(e=>{let{classNames:t,className:n,style:r,styles:i,vars:a,...o}=c(`ComboboxFooter`,null,e),s=j();return(0,E.jsx)(u,{...s.getStyles(`footer`,{className:n,classNames:t,style:r,styles:i}),...o,onMouseDown:e=>{e.preventDefault()}})});B.classes=T,B.displayName=`@mantine/core/ComboboxFooter`;var V=l(e=>{let{classNames:t,className:r,style:i,styles:a,vars:o,children:s,label:l,id:d,...f}=c(`ComboboxGroup`,null,e),p=j(),m=n(d),h=l!=null&&l!==!1&&l!==``;return(0,E.jsxs)(u,{role:`group`,"aria-labelledby":h?m:void 0,...p.getStyles(`group`,{className:r,classNames:t,style:i,styles:a}),...f,children:[h&&(0,E.jsx)(`div`,{id:m,...p.getStyles(`groupLabel`,{classNames:t,styles:a}),children:l}),s]})});V.classes=T,V.displayName=`@mantine/core/ComboboxGroup`;var H=l(e=>{let{classNames:t,className:n,style:r,styles:i,vars:a,...o}=c(`ComboboxHeader`,null,e),s=j();return(0,E.jsx)(u,{...s.getStyles(`header`,{className:n,classNames:t,style:r,styles:i}),...o,onMouseDown:e=>{e.preventDefault()}})});H.classes=T,H.displayName=`@mantine/core/ComboboxHeader`;function U({value:e,valuesDivider:t=`,`,...n}){return(0,E.jsx)(`input`,{type:`hidden`,value:Array.isArray(e)?e.join(t):e?`${e}`:``,...n})}U.displayName=`@mantine/core/ComboboxHiddenInput`;var W=l(e=>{let t=c(`ComboboxOption`,null,e),{classNames:n,className:r,style:i,styles:a,vars:o,onClick:s,id:l,active:d,onMouseDown:f,onMouseOver:p,disabled:m,selected:h,mod:g,..._}=t,v=j(),y=(0,x.useId)(),b=l||y;return(0,E.jsx)(u,{...v.getStyles(`option`,{className:r,classNames:n,styles:a,style:i}),..._,id:b,mod:[`combobox-option`,{"combobox-active":d,"combobox-disabled":m,"combobox-selected":h},g],role:`option`,onClick:e=>{m?e.preventDefault():(v.onOptionSubmit?.(t.value,t),s?.(e))},onMouseDown:e=>{e.preventDefault(),f?.(e)},onMouseOver:e=>{v.resetSelectionOnOptionHover&&v.store.resetSelectedOption(),p?.(e)}})});W.classes=T,W.displayName=`@mantine/core/ComboboxOption`;var G=l(e=>{let{classNames:t,className:r,style:i,styles:a,id:o,onMouseDown:s,labelledBy:l,...d}=c(`ComboboxOptions`,null,e),f=j(),p=n(o);return(0,x.useEffect)(()=>{f.store.setListId(p)},[p]),(0,E.jsx)(u,{...f.getStyles(`options`,{className:r,style:i,classNames:t,styles:a}),...d,id:p,role:`listbox`,"aria-labelledby":l,onMouseDown:e=>{e.preventDefault(),s?.(e)}})});G.classes=T,G.displayName=`@mantine/core/ComboboxOptions`;var K={withAriaAttributes:!0,withKeyboardNavigation:!0},q=l(e=>{let{classNames:t,styles:n,unstyled:i,vars:a,withAriaAttributes:o,onKeyDown:s,onClick:l,withKeyboardNavigation:u,size:d,ref:f,...p}=c(`ComboboxSearch`,K,e),m=j(),h=m.getStyles(`search`),g=L({targetType:`input`,withAriaAttributes:o,withKeyboardNavigation:u,withExpandedAttribute:!1,onKeyDown:s,onClick:l,autoComplete:`off`});return(0,E.jsx)(b,{ref:r(f,m.store.searchRef),classNames:[{input:h.className},t],styles:[{input:h.style},n],size:d||m.size,...g,...p,__staticSelector:`Combobox`})});q.classes=T,q.displayName=`@mantine/core/ComboboxSearch`;var J={refProp:`ref`,targetType:`input`,withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:`off`},Y=l(e=>{let{children:t,refProp:n,withKeyboardNavigation:i,withAriaAttributes:o,withExpandedAttribute:s,targetType:l,autoComplete:u,ref:d,...f}=c(`ComboboxTarget`,J,e),p=m(t);if(!p)throw Error(`Combobox.Target component children should be an element or a component that accepts ref. Fragments, str

1ings, numbers and other primitive values are not supported`);let h=j(),g=L({targetType:l,withAriaAttributes:o,withKeyboardNavigation:i,withExpandedAttribute:s,onKeyDown:p.props.onKeyDown,onClick:p.props.onClick,autoComplete:u}),_=(0,x.cloneElement)(p,{...g,...f});return(0,E.jsx)(a.Target,{refProp:n,ref:r(d,h.store.targetRef),children:_})});Y.displayName=`@mantine/core/ComboboxTarget`;function X(e,t,n){for(let n=e-1;n>=0;--n)if(!t[n].hasAttribute(`data-combobox-disabled`))return n;if(n){for(let e=t.length-1;e>-1;--e)if(!t[e].hasAttribute(`data-combobox-disabled`))return e}return e}function ee(e,t,n){for(let n=e+1;n<t.length;n+=1)if(!t[n].hasAttribute(`data-combobox-disabled`))return n;if(n){for(let e=0;e<t.length;e+=1)if(!t[e].hasAttribute(`data-combobox-disabled`))return e}return e}function te(e){for(let t=0;t<e.length;t+=1)if(!e[t].hasAttribute(`data-combobox-disabled`))return t;return-1}function Z({defaultOpened:e,opened:t,onOpenedChange:n,onDropdownClose:r,onDropdownOpen:a,loop:o=!0,scrollBehavior:s=`instant`}={}){let[c,l]=i({value:t,defaultValue:e,finalValue:!1,onChange:n}),u=(0,x.useRef)(null),d=(0,x.useRef)(-1),f=(0,x.useRef)(null),p=(0,x.useRef)(null),m=(0,x.useRef)(-1),h=(0,x.useRef)(-1),g=(0,x.useRef)(-1),_=(0,x.useCallback)((e=`unknown`)=>{c||(l(!0),a?.(e))},[l,a,c]),v=(0,x.useCallback)((e=`unknown`)=>{c&&(l(!1),r?.(e))},[l,r,c]),y=(0,x.useCallback)((e=`unknown`)=>{c?v(e):_(e)},[v,_,c]),b=(0,x.useCallback)(()=>{let e=w(p.current),t=S(`#${u.current} [data-combobox-selected]`,e);t?.removeAttribute(`data-combobox-selected`),t?.removeAttribute(`aria-selected`)},[]),T=(0,x.useCallback)(e=>{let t=w(p.current),n=S(`#${u.current}`,t),r=n?C(`[data-combobox-option]`,n):null;if(!r)return null;let i=e>=r.length?0:e<0?r.length-1:e;return d.current=i,r?.[i]&&!r[i].hasAttribute(`data-combobox-disabled`)?(b(),r[i].setAttribute(`data-combobox-selected`,`true`),r[i].setAttribute(`aria-selected`,`true`),r[i].scrollIntoView({block:`nearest`,behavior:s}),r[i].id):null},[s,b]),E=(0,x.useCallback)(()=>{let e=w(p.current),t=S(`#${u.current} [data-combobox-active]`,e);if(t){let n=C(`#${u.current} [data-combobox-option]`,e).findIndex(e=>e===t);return T(n)}return T(0)},[T]),D=(0,x.useCallback)(()=>{let e=w(p.current),t=C(`#${u.current} [data-combobox-option]`,e);return T(ee(d.current,t,o))},[T,o]),O=(0,x.useCallback)(()=>{let e=w(p.current),t=C(`#${u.current} [data-combobox-option]`,e);return T(X(d.current,t,o))},[T,o]),k=(0,x.useCallback)(()=>{let e=w(p.current),t=C(`#${u.current} [data-combobox-option]`,e);return T(te(t))},[T]),A=(0,x.useCallback)((e=`selected`,t)=>{if(typeof e==`number`){d.current=e;let n=w(p.current),r=C(`#${u.current} [data-combobox-option]`,n);t?.scrollIntoView&&r[e]?.scrollIntoView({block:`nearest`,behavior:s});return}g.current=window.setTimeout(()=>{let n=w(p.current),r=C(`#${u.current} [data-combobox-option]`,n),i=r.findIndex(t=>t.hasAttribute(`data-combobox-${e}`));d.current=i,t?.scrollIntoView&&r[i]?.scrollIntoView({block:`nearest`,behavior:s})},0)},[]),j=(0,x.useCallback)(()=>{d.current=-1,b()},[b]),M=(0,x.useCallback)(()=>{let e=w(p.current);(C(`#${u.current} [data-combobox-option]`,e)?.[d.current])?.click()},[]),N=(0,x.useCallback)(e=>{u.current=e},[]),P=(0,x.useCallback)(()=>{m.current=window.setTimeout(()=>f.current?.focus(),0)},[]),F=(0,x.useCallback)(()=>{h.current=window.setTimeout(()=>p.current?.focus(),0)},[]),I=(0,x.useCallback)(()=>d.current,[]);return(0,x.useEffect)(()=>()=>{window.clearTimeout(m.current),window.clearTimeout(h.current),window.clearTimeout(g.current)},[]),{dropdownOpened:c,openDropdown:_,closeDropdown:v,toggleDropdown:y,selectedOptionIndex:d.current,getSelectedOptionIndex:I,selectOption:T,selectFirstOption:k,selectActiveOption:E,selectNextOption:D,selectPreviousOption:O,resetSelectedOption:j,updateSelectedOptionIndex:A,listId:u.current,setListId:N,clickSelectedOption:M,searchRef:f,focusSearchInput:P,targetRef:p,focusTarget:F}}var ne={keepMounted:!0,keepMountedMode:`display-none`,withinPortal:!0,resetSelectionOnOptionHover:!1,width:`target`,transitionProps:{transition:`fade`,duration:0},size:`sm`},Q=o((e,{size:t,dropdownPadding:n})=>({options:{"--combobox-option-fz":v(t),"--combobox-option-padding":y(t,`combobox-option-padding`)},dropdown:{"--combobox-padding":n===void 0?void 0:d(n),"--combobox-option-fz":v(t),"--combobox-option-padding":y(t,`combobox-option-padding`)}})),$=e=>{let t=c(`Combobox`,ne,e),{classNames:n,styles:r,unstyled:i,children:o,store:l,vars:u,onOptionSubmit:d,onClose:f,size:p,dropdownPadding:m,resetSelectionOnOptionHover:h,__staticSelector:g,readOnly:_,attributes:v,floatingHeight:y,middlewares:b,...x}=t,S=y===`viewport`?{...b,flip:!1,size:{...typeof b?.size==`object`?b.size:{},padding:typeof b?.size==`object`&&b.size.padding!==void 0?b.size.padding:10,apply:({availableHeight:e,availableWidth:t,elements:n,...r})=>{n.floating.style.setProperty(`--combobox-floating-max-height`,`${e}px`);let i=b?.size;typeof i==`object`&&i.apply?i.apply({availableHeight:e,availableWidth:t,elements:n,...r}):i&&Object.assign(n.floating.style,{maxWidth:`${t}px`,maxHeight:`${e}px`})}}}:b,C=Z(),w=l||C,D=s({name:g||`Combobox`,classes:T,props:t,classNames:n,styles:r,unstyled:i,attributes:v,vars:u,varsResolver:Q}),O=()=>{f?.(),w.closeDropdown()};return(0,E.jsx)(A,{value:{getStyles:D,store:w,onOptionSubmit:d,size:p,resetSelectionOnOptionHover:h,readOnly:_,floatingHeight:y},children:(0,E.jsx)(a,{opened:w.dropdownOpened,...x,middlewares:S,onChange:e=>!e&&O(),withRoles:!1,unstyled:i,children:o})})};$.extend=e=>e,$.classes=T,$.varsResolver=Q,$.displayName=`@mantine/core/Combobox`,$.Target=Y,$.Dropdown=N,$.Options=G,$.Option=W,$.Search=q,$.Empty=I,$.Chevron=k,$.Footer=B,$.Header=H,$.EventsTarget=z,$.DropdownTarget=F,$.Group=V,$.ClearButton=M,$.HiddenInput=U;export{w as a,T as i,Z as n,j as r,$ as t};
2//# sourceMappingURL=Combobox.js.map