@data-slot/combobox 0.2.95 → 0.2.96

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/README.md CHANGED
@@ -162,7 +162,8 @@ The positioned element (`combobox-positioner`, or `combobox-content` when no pos
162
162
  - On touch/coarse-pointer environments, outside `pointerdown` (for example during scroll gestures) does not dismiss the popup.
163
163
  - Outside tap/click still dismisses the popup.
164
164
  - While open, popup position tracks scroll so the popup stays anchored.
165
- - On open, combobox may nudge the viewport to keep the trigger inside a safer visible band.
165
+ - On touch/coarse-pointer environments, combobox always positions on the `bottom` side.
166
+ - On touch/coarse-pointer environments, collision side-flipping is disabled to avoid jumpy repositioning.
166
167
 
167
168
  ### Callbacks
168
169
 
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`];function r(r,a={}){let o=(0,e.getPart)(r,`combobox-input`),s=(0,e.getPart)(r,`combobox-content`),c=(0,e.getPart)(r,`combobox-list`)??(0,e.getPart)(s??r,`combobox-list`),l=(0,e.getPart)(r,`combobox-trigger`),u=(0,e.getPart)(r,`combobox-value`),d=(0,e.getPart)(c??s??r,`combobox-empty`),f=(0,e.getPart)(r,`combobox-positioner`),p=f&&s&&f.contains(s)?f:null,m=(0,e.getPart)(r,`combobox-portal`),ee=m&&p&&m.contains(p)?m:null;if(!o||!s)throw Error(`Combobox requires combobox-input and combobox-content slots`);let h=s.contains(o),te=u?.textContent?.trim()??``,ne=a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??null,re=a.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,g=a.placeholder??(0,e.getDataString)(r,`placeholder`)??``,_=a.disabled??(0,e.getDataBool)(r,`disabled`)??!1,ie=a.required??(0,e.getDataBool)(r,`required`)??!1,ae=a.name??(0,e.getDataString)(r,`name`)??null,oe=a.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,se=a.autoHighlight??(0,e.getDataBool)(r,`autoHighlight`)??!1,ce=a.filter??null,le=a.onValueChange,ue=a.onOpenChange,de=a.onInputValueChange,v=a.itemToStringValue??null,y=(t,n)=>(0,e.getDataEnum)(s,t,n)??(p?(0,e.getDataEnum)(p,t,n):void 0)??(0,e.getDataEnum)(r,t,n),b=t=>(0,e.getDataNumber)(s,t)??(p?(0,e.getDataNumber)(p,t):void 0)??(0,e.getDataNumber)(r,t),fe=t=>(0,e.getDataBool)(s,t)??(p?(0,e.getDataBool)(p,t):void 0)??(0,e.getDataBool)(r,t),pe=a.side??y(`side`,t)??`bottom`,me=a.align??y(`align`,n)??`start`,he=a.sideOffset??b(`sideOffset`)??4,ge=a.alignOffset??b(`alignOffset`)??0,_e=a.avoidCollisions??fe(`avoidCollisions`)??!0,ve=a.collisionPadding??b(`collisionPadding`)??8,x=!1,S=ne,C=-1,w=!1,T=[],E=r.ownerDocument??document,D=E.defaultView??window,O=r,k=-1/0,A=!1,j=null,M=null,N=[],P=[],F=[],I=new Map,L=null,R=(0,e.createPortalLifecycle)({content:s,root:r,wrapperSlot:p?void 0:`combobox-positioner`,container:p??void 0,mountTarget:p?ee??p:void 0}),ye=!1,z=e=>typeof D.matchMedia==`function`?D.matchMedia(e).matches:!1,be=()=>{let e=typeof D.navigator.maxTouchPoints==`number`?D.navigator.maxTouchPoints:0,t=z(`(pointer: coarse)`),n=z(`(hover: none)`);return t||e>0&&n},xe=()=>z(`(prefers-reduced-motion: reduce)`),B=be(),V=()=>{j!==null&&(D.cancelAnimationFrame(j),j=null),M!==null&&(clearTimeout(M),M=null)},H=()=>{if(!x||!B)return;let e=O.getBoundingClientRect(),t=D.visualViewport?.height??D.innerHeight;if(t<=0||e.height<=0)return;let n=Math.max(24,Math.round(t*.2)),r=n,i=t-n,a=e.top+e.height/2,o=0;a<r?o=a-r:a>i&&(o=a-i),!(Math.abs(o)<1)&&D.scrollBy({top:o,behavior:xe()?`auto`:`smooth`})},Se=()=>{B&&(V(),j=D.requestAnimationFrame(()=>{j=null,H()}),M=setTimeout(()=>{M=null,H()},140))},U=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,W=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},G=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,Ce=t=>t===null?null:(0,e.getParts)(c??s,`combobox-item`).find(e=>G(e)===t)??null,we=e=>{let t=Ce(e);return v?v(t,e):t?W(t):``},Te=(0,e.ensureId)(o,`combobox-input`),K=c??s,Ee=(0,e.ensureId)(K,`combobox-list`);o.setAttribute(`role`,`combobox`),o.setAttribute(`aria-autocomplete`,`list`),o.setAttribute(`autocomplete`,`off`),o.setAttribute(`aria-controls`,Ee),c?c.setAttribute(`role`,`listbox`):s.setAttribute(`role`,`listbox`),l&&(l.hasAttribute(`type`)||l.setAttribute(`type`,`button`),l.tabIndex=-1,l.setAttribute(`aria-label`,`Toggle`));let De=document.querySelector(`label[for="${CSS.escape(Te)}"]`);if(De){let t=(0,e.ensureId)(De,`combobox-label`),n=o.getAttribute(`aria-labelledby`);o.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),K.setAttribute(`aria-labelledby`,t)}_&&(o.setAttribute(`aria-disabled`,`true`),o.disabled=!0,l&&(l.setAttribute(`aria-disabled`,`true`),l.setAttribute(`data-disabled`,``))),ie&&(o.setAttribute(`aria-required`,`true`),o.required=!0);let Oe=()=>{ie&&o.setCustomValidity(S===null?`Please select a value`:``)};g&&(o.placeholder=g),u&&(u.textContent=te||g,u.textContent.trim().length>0&&(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``))),ae&&(o.name&&o.removeAttribute(`name`),L=document.createElement(`input`),L.type=`hidden`,L.name=ae,L.value=S??``,r.appendChild(L));let ke=ce??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),Ae=()=>{let t=c??s;N=(0,e.getParts)(t,`combobox-item`);for(let t of N)t.setAttribute(`role`,`option`),(0,e.ensureId)(t,`combobox-item`),U(t)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),G(t)===S?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));let n=(0,e.getParts)(t,`combobox-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=(0,e.getPart)(t,`combobox-label`);if(n){let r=(0,e.ensureId)(n,`combobox-label`);t.setAttribute(`aria-labelledby`,r)}}je()},je=()=>{P=N.filter(e=>!e.hidden),F=P.filter(e=>!U(e)),I=new Map(F.map((e,t)=>[e,t]))},Me=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},Ne=t=>{let n=c??s,r=t.trim(),i=0;for(let e of N){let t=G(e)??``,n=W(e),a=r===``||ke(r,t,n);e.hidden=!a,a&&i++}let a=(0,e.getParts)(n,`combobox-group`);for(let t of a)t.hidden=!(0,e.getParts)(t,`combobox-item`).some(e=>!e.hidden);let o=(0,e.getParts)(n,`combobox-separator`);for(let e of o)e.hidden=!Me(e,`previous`)||!Me(e,`next`);d&&(d.hidden=i>0),i===0?s.setAttribute(`data-empty`,``):s.removeAttribute(`data-empty`),je()},Pe=()=>{let n=R.container,r=O.getBoundingClientRect();s.style.minWidth=`${r.width}px`;let i=(0,e.computeFloatingPosition)({anchorRect:r,contentRect:(0,e.measurePopupContentRect)(s),side:pe,align:me,sideOffset:he,alignOffset:ge,avoidCollisions:_e,collisionPadding:ve,allowedSides:t}),a=(0,e.computeFloatingTransformOrigin)({side:i.side,align:i.align,anchorRect:r,popupX:i.x,popupY:i.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${i.x+D.scrollX}px, ${i.y+D.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,a),n.style.willChange=`transform`,n.style.margin=`0`,s.setAttribute(`data-side`,i.side),s.setAttribute(`data-align`,i.align),n!==s&&(n.setAttribute(`data-side`,i.side),n.setAttribute(`data-align`,i.align))},q=(0,e.createPositionSync)({observedElements:[r,s],isActive:()=>x,ancestorScroll:!0,onUpdate:Pe,ignoreScrollTarget:e=>e instanceof Node&&s.contains(e)}),Fe=e=>c&&c.contains(e)&&c.scrollHeight>c.clientHeight?c:s,J=t=>{for(let n=0;n<F.length;n++){let r=F[n];n===t?(r.setAttribute(`data-highlighted`,``),o.setAttribute(`aria-activedescendant`,r.id),(0,e.ensureItemVisibleInContainer)(r,Fe(r))):r.removeAttribute(`data-highlighted`)}C=t},Y=()=>{for(let e of N)e.removeAttribute(`data-highlighted`);C=-1,o.removeAttribute(`aria-activedescendant`)},X=e=>{r.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),l&&l.setAttribute(`data-state`,e),e===`open`?(r.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),l&&l.setAttribute(`data-open`,``),r.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),l&&l.removeAttribute(`data-closed`)):(r.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),l&&l.setAttribute(`data-closed`,``),r.removeAttribute(`data-open`),s.removeAttribute(`data-open`),l&&l.removeAttribute(`data-open`))},Z=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{ye||(R.restore(),s.hidden=!0)}}),Q=(t,n=!1)=>{if(x!==t&&!(_&&t)){if(t){x=!0,(0,e.setAria)(o,`expanded`,!0),R.mount(),s.hidden=!1,X(`open`),Z.enter(),Ae(),w=!1,h&&(o.value=``),Ne(o.value);let t=F.findIndex(e=>G(e)===S);t>=0?J(t):Y(),q.start(),Pe(),q.update(),Se(),requestAnimationFrame(()=>{x&&q.update()})}else V(),x=!1,(0,e.setAria)(o,`expanded`,!1),X(`closed`),Y(),w=!1,q.stop(),Z.exit(),h?o.value=``:o.value=we(S);(0,e.emit)(r,`combobox:open-change`,{open:x}),ue?.(x)}},$=(t,n=!1)=>{if(S===t&&!n)return;let i=S;S=t,Oe(),L&&(L.value=t??``),t===null?r.removeAttribute(`data-value`):r.setAttribute(`data-value`,t);let a=c??s,d=N.length>0?N:(0,e.getParts)(a,`combobox-item`);for(let n of d)G(n)===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));let f=we(t);h||(o.value=f),u?t===null?(u.textContent=te||g,(u.textContent??``).trim().length>0?(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``)):(u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`))):(u.textContent=f,u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`)):l&&(t===null?l.setAttribute(`data-placeholder`,``):l.removeAttribute(`data-placeholder`)),!n&&i!==t&&((0,e.emit)(r,`combobox:change`,{value:t}),le?.(t))},Ie=e=>{if(U(e))return;let t=G(e);t!==void 0&&($(t),Q(!1))};return(0,e.setAria)(o,`expanded`,!1),s.hidden=!0,X(`closed`),$(S,!0),T.push((0,e.on)(E,`keydown`,e=>{e.key===`Tab`&&(k=Date.now())},{capture:!0}),(0,e.on)(o,`pointerdown`,()=>{A=!0}),(0,e.on)(o,`input`,()=>{let t=o.value,n=t.trim()!==``;(0,e.emit)(r,`combobox:input-change`,{inputValue:t}),de?.(t),x?(Ne(t),se&&n&&F.length>0?J(0):Y(),q.update()):(Q(!0),se&&n&&F.length>0?J(0):C!==-1&&Y())}),(0,e.on)(o,`keydown`,e=>{if(!_)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!x){Q(!0);return}w=!0;let t=F.length;if(t===0)return;J(C===-1?0:(C+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!x){Q(!0);return}w=!0;let t=F.length;if(t===0)return;J(C===-1?t-1:(C-1+t)%t);break}case`Home`:if(!x)return;e.preventDefault(),w=!0,F.length>0&&J(0);break;case`End`:if(!x)return;e.preventDefault(),w=!0,F.length>0&&J(F.length-1);break;case`Enter`:if(!x)return;e.preventDefault(),C>=0&&C<F.length&&Ie(F[C]);break;case`Escape`:x?(e.preventDefault(),Q(!1)):S!==null&&(e.preventDefault(),$(null));break;case`Tab`:x&&Q(!1,!0);break}}),(0,e.on)(o,`focus`,()=>{if(_)return;o.select();let e=A||Date.now()-k<=750;A=!1,oe&&!x&&e&&Q(!0)})),l&&T.push((0,e.on)(l,`click`,()=>{_||(x?Q(!1):(Q(!0),o.focus()))})),T.push((0,e.on)(s,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&Ie(t)}),(0,e.on)(s,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(w&&(w=!1,t&&I.get(t)===C)))if(t&&!U(t)&&!t.hidden){let e=I.get(t);e!==void 0&&e!==C&&J(e)}else Y()}),(0,e.on)(s,`pointerleave`,()=>{w||Y()}),(0,e.on)(s,`mousedown`,e=>{e.preventDefault()})),T.push((0,e.createDismissLayer)({root:r,isOpen:()=>x,onDismiss:()=>Q(!1),closeOnClickOutside:!B,closeOnEscape:!1})),B&&T.push((0,e.on)(E,`click`,t=>{if(!x)return;let n=t.target;(0,e.containsWithPortals)(r,n)||Q(!1)},{capture:!0})),T.push((0,e.on)(r,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(o.value=t.inputValue),t?.itemToStringValue!==void 0&&(v=t.itemToStringValue,$(S,!0))})),re&&Q(!0),{get value(){return S},get inputValue(){return o.value},get isOpen(){return x},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{v=e,$(S,!0)},destroy:()=>{ye=!0,V(),q.stop(),Z.cleanup(),R.cleanup(),T.forEach(e=>e()),T.length=0,L&&L.parentNode&&L.parentNode.removeChild(L),i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`combobox`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createCombobox=r;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`];function r(r,a={}){let o=(0,e.getPart)(r,`combobox-input`),s=(0,e.getPart)(r,`combobox-content`),c=(0,e.getPart)(r,`combobox-list`)??(0,e.getPart)(s??r,`combobox-list`),l=(0,e.getPart)(r,`combobox-trigger`),u=(0,e.getPart)(r,`combobox-value`),d=(0,e.getPart)(c??s??r,`combobox-empty`),f=(0,e.getPart)(r,`combobox-positioner`),p=f&&s&&f.contains(s)?f:null,m=(0,e.getPart)(r,`combobox-portal`),ee=m&&p&&m.contains(p)?m:null;if(!o||!s)throw Error(`Combobox requires combobox-input and combobox-content slots`);let h=s.contains(o),g=u?.textContent?.trim()??``,te=a.defaultValue??(0,e.getDataString)(r,`defaultValue`)??null,ne=a.defaultOpen??(0,e.getDataBool)(r,`defaultOpen`)??!1,_=a.placeholder??(0,e.getDataString)(r,`placeholder`)??``,v=a.disabled??(0,e.getDataBool)(r,`disabled`)??!1,re=a.required??(0,e.getDataBool)(r,`required`)??!1,ie=a.name??(0,e.getDataString)(r,`name`)??null,ae=a.openOnFocus??(0,e.getDataBool)(r,`openOnFocus`)??!0,y=a.autoHighlight??(0,e.getDataBool)(r,`autoHighlight`)??!1,oe=a.filter??null,se=a.onValueChange,ce=a.onOpenChange,le=a.onInputValueChange,b=a.itemToStringValue??null,ue=(t,n)=>(0,e.getDataEnum)(s,t,n)??(p?(0,e.getDataEnum)(p,t,n):void 0)??(0,e.getDataEnum)(r,t,n),x=t=>(0,e.getDataNumber)(s,t)??(p?(0,e.getDataNumber)(p,t):void 0)??(0,e.getDataNumber)(r,t),de=t=>(0,e.getDataBool)(s,t)??(p?(0,e.getDataBool)(p,t):void 0)??(0,e.getDataBool)(r,t),fe=a.side??ue(`side`,t)??`bottom`,pe=a.align??ue(`align`,n)??`start`,me=a.sideOffset??x(`sideOffset`)??4,he=a.alignOffset??x(`alignOffset`)??0,ge=a.avoidCollisions??de(`avoidCollisions`)??!0,_e=a.collisionPadding??x(`collisionPadding`)??8,S=!1,C=te,w=-1,T=!1,E=[],D=r.ownerDocument??document,O=D.defaultView??window,ve=r,k=-1/0,A=!1,j=[],M=[],N=[],P=new Map,F=null,I=(0,e.createPortalLifecycle)({content:s,root:r,wrapperSlot:p?void 0:`combobox-positioner`,container:p??void 0,mountTarget:p?ee??p:void 0}),L=!1,R=e=>typeof O.matchMedia==`function`?O.matchMedia(e).matches:!1,z=(()=>{let e=typeof O.navigator.maxTouchPoints==`number`?O.navigator.maxTouchPoints:0,t=R(`(pointer: coarse)`),n=R(`(hover: none)`);return t||e>0&&n})(),B=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,V=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},H=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,ye=t=>t===null?null:(0,e.getParts)(c??s,`combobox-item`).find(e=>H(e)===t)??null,U=e=>{let t=ye(e);return b?b(t,e):t?V(t):``},be=(0,e.ensureId)(o,`combobox-input`),W=c??s,xe=(0,e.ensureId)(W,`combobox-list`);o.setAttribute(`role`,`combobox`),o.setAttribute(`aria-autocomplete`,`list`),o.setAttribute(`autocomplete`,`off`),o.setAttribute(`aria-controls`,xe),c?c.setAttribute(`role`,`listbox`):s.setAttribute(`role`,`listbox`),l&&(l.hasAttribute(`type`)||l.setAttribute(`type`,`button`),l.tabIndex=-1,l.setAttribute(`aria-label`,`Toggle`));let Se=document.querySelector(`label[for="${CSS.escape(be)}"]`);if(Se){let t=(0,e.ensureId)(Se,`combobox-label`),n=o.getAttribute(`aria-labelledby`);o.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),W.setAttribute(`aria-labelledby`,t)}v&&(o.setAttribute(`aria-disabled`,`true`),o.disabled=!0,l&&(l.setAttribute(`aria-disabled`,`true`),l.setAttribute(`data-disabled`,``))),re&&(o.setAttribute(`aria-required`,`true`),o.required=!0);let Ce=()=>{re&&o.setCustomValidity(C===null?`Please select a value`:``)};_&&(o.placeholder=_),u&&(u.textContent=g||_,u.textContent.trim().length>0&&(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``))),ie&&(o.name&&o.removeAttribute(`name`),F=document.createElement(`input`),F.type=`hidden`,F.name=ie,F.value=C??``,r.appendChild(F));let we=oe??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),Te=()=>{let t=c??s;j=(0,e.getParts)(t,`combobox-item`);for(let t of j)t.setAttribute(`role`,`option`),(0,e.ensureId)(t,`combobox-item`),B(t)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),H(t)===C?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));let n=(0,e.getParts)(t,`combobox-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=(0,e.getPart)(t,`combobox-label`);if(n){let r=(0,e.ensureId)(n,`combobox-label`);t.setAttribute(`aria-labelledby`,r)}}Ee()},Ee=()=>{M=j.filter(e=>!e.hidden),N=M.filter(e=>!B(e)),P=new Map(N.map((e,t)=>[e,t]))},G=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},De=t=>{let n=c??s,r=t.trim(),i=0;for(let e of j){let t=H(e)??``,n=V(e),a=r===``||we(r,t,n);e.hidden=!a,a&&i++}let a=(0,e.getParts)(n,`combobox-group`);for(let t of a)t.hidden=!(0,e.getParts)(t,`combobox-item`).some(e=>!e.hidden);let o=(0,e.getParts)(n,`combobox-separator`);for(let e of o)e.hidden=!G(e,`previous`)||!G(e,`next`);d&&(d.hidden=i>0),i===0?s.setAttribute(`data-empty`,``):s.removeAttribute(`data-empty`),Ee()},Oe=()=>{let n=I.container,r=z?`bottom`:fe,i=z?!1:ge,a=ve.getBoundingClientRect();s.style.minWidth=`${a.width}px`;let o=(0,e.computeFloatingPosition)({anchorRect:a,contentRect:(0,e.measurePopupContentRect)(s),side:r,align:pe,sideOffset:me,alignOffset:he,avoidCollisions:i,collisionPadding:_e,allowedSides:t}),c=(0,e.computeFloatingTransformOrigin)({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+O.scrollX}px, ${o.y+O.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,c),n.style.willChange=`transform`,n.style.margin=`0`,s.setAttribute(`data-side`,o.side),s.setAttribute(`data-align`,o.align),n!==s&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},K=(0,e.createPositionSync)({observedElements:[r,s],isActive:()=>S,ancestorScroll:!0,onUpdate:Oe,ignoreScrollTarget:e=>e instanceof Node&&s.contains(e)}),ke=e=>c&&c.contains(e)&&c.scrollHeight>c.clientHeight?c:s,q=t=>{for(let n=0;n<N.length;n++){let r=N[n];n===t?(r.setAttribute(`data-highlighted`,``),o.setAttribute(`aria-activedescendant`,r.id),(0,e.ensureItemVisibleInContainer)(r,ke(r))):r.removeAttribute(`data-highlighted`)}w=t},J=()=>{for(let e of j)e.removeAttribute(`data-highlighted`);w=-1,o.removeAttribute(`aria-activedescendant`)},Y=e=>{r.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),l&&l.setAttribute(`data-state`,e),e===`open`?(r.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),l&&l.setAttribute(`data-open`,``),r.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),l&&l.removeAttribute(`data-closed`)):(r.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),l&&l.setAttribute(`data-closed`,``),r.removeAttribute(`data-open`),s.removeAttribute(`data-open`),l&&l.removeAttribute(`data-open`))},X=(0,e.createPresenceLifecycle)({element:s,onExitComplete:()=>{L||(I.restore(),s.hidden=!0)}}),Z=(t,n=!1)=>{if(S!==t&&!(v&&t)){if(t){S=!0,(0,e.setAria)(o,`expanded`,!0),I.mount(),s.hidden=!1,Y(`open`),X.enter(),Te(),T=!1,h&&(o.value=``),De(o.value);let t=N.findIndex(e=>H(e)===C);t>=0?q(t):J(),K.start(),Oe(),K.update(),requestAnimationFrame(()=>{S&&K.update()})}else S=!1,(0,e.setAria)(o,`expanded`,!1),Y(`closed`),J(),T=!1,K.stop(),X.exit(),h?o.value=``:o.value=U(C);(0,e.emit)(r,`combobox:open-change`,{open:S}),ce?.(S)}},Q=(t,n=!1)=>{if(C===t&&!n)return;let i=C;C=t,Ce(),F&&(F.value=t??``),t===null?r.removeAttribute(`data-value`):r.setAttribute(`data-value`,t);let a=c??s,d=j.length>0?j:(0,e.getParts)(a,`combobox-item`);for(let n of d)H(n)===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));let f=U(t);h||(o.value=f),u?t===null?(u.textContent=g||_,(u.textContent??``).trim().length>0?(u.setAttribute(`data-placeholder`,``),l?.setAttribute(`data-placeholder`,``)):(u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`))):(u.textContent=f,u.removeAttribute(`data-placeholder`),l?.removeAttribute(`data-placeholder`)):l&&(t===null?l.setAttribute(`data-placeholder`,``):l.removeAttribute(`data-placeholder`)),!n&&i!==t&&((0,e.emit)(r,`combobox:change`,{value:t}),se?.(t))},$=e=>{if(B(e))return;let t=H(e);t!==void 0&&(Q(t),Z(!1))};return(0,e.setAria)(o,`expanded`,!1),s.hidden=!0,Y(`closed`),Q(C,!0),E.push((0,e.on)(D,`keydown`,e=>{e.key===`Tab`&&(k=Date.now())},{capture:!0}),(0,e.on)(o,`pointerdown`,()=>{A=!0}),(0,e.on)(o,`input`,()=>{let t=o.value,n=t.trim()!==``;(0,e.emit)(r,`combobox:input-change`,{inputValue:t}),le?.(t),S?(De(t),y&&n&&N.length>0?q(0):J(),K.update()):(Z(!0),y&&n&&N.length>0?q(0):w!==-1&&J())}),(0,e.on)(o,`keydown`,e=>{if(!v)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!S){Z(!0);return}T=!0;let t=N.length;if(t===0)return;q(w===-1?0:(w+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!S){Z(!0);return}T=!0;let t=N.length;if(t===0)return;q(w===-1?t-1:(w-1+t)%t);break}case`Home`:if(!S)return;e.preventDefault(),T=!0,N.length>0&&q(0);break;case`End`:if(!S)return;e.preventDefault(),T=!0,N.length>0&&q(N.length-1);break;case`Enter`:if(!S)return;e.preventDefault(),w>=0&&w<N.length&&$(N[w]);break;case`Escape`:S?(e.preventDefault(),Z(!1)):C!==null&&(e.preventDefault(),Q(null));break;case`Tab`:S&&Z(!1,!0);break}}),(0,e.on)(o,`focus`,()=>{if(v)return;o.select();let e=A||Date.now()-k<=750;A=!1,ae&&!S&&e&&Z(!0)})),l&&E.push((0,e.on)(l,`click`,()=>{v||(S?Z(!1):(Z(!0),o.focus()))})),E.push((0,e.on)(s,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&$(t)}),(0,e.on)(s,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(T&&(T=!1,t&&P.get(t)===w)))if(t&&!B(t)&&!t.hidden){let e=P.get(t);e!==void 0&&e!==w&&q(e)}else J()}),(0,e.on)(s,`pointerleave`,()=>{T||J()}),(0,e.on)(s,`mousedown`,e=>{e.preventDefault()})),E.push((0,e.createDismissLayer)({root:r,isOpen:()=>S,onDismiss:()=>Z(!1),closeOnClickOutside:!z,closeOnEscape:!1})),z&&E.push((0,e.on)(D,`click`,t=>{if(!S)return;let n=t.target;(0,e.containsWithPortals)(r,n)||Z(!1)},{capture:!0})),E.push((0,e.on)(r,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open),t?.inputValue!==void 0&&(o.value=t.inputValue),t?.itemToStringValue!==void 0&&(b=t.itemToStringValue,Q(C,!0))})),ne&&Z(!0),{get value(){return C},get inputValue(){return o.value},get isOpen(){return S},select:e=>Q(e),clear:()=>Q(null),open:()=>Z(!0),close:()=>Z(!1),setItemToStringValue:e=>{b=e,Q(C,!0)},destroy:()=>{L=!0,K.stop(),X.cleanup(),I.cleanup(),E.forEach(e=>e()),E.length=0,F&&F.parentNode&&F.parentNode.removeChild(F),i.delete(r)}}}const i=new WeakSet;function a(t=document){let n=[];for(let a of(0,e.getRoots)(t,`combobox`))i.has(a)||(i.add(a),n.push(r(a)));return n}exports.create=a,exports.createCombobox=r;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,containsWithPortals as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as ee,getDataBool as l,getDataEnum as te,getDataNumber as u,getDataString as d,getPart as f,getParts as p,getRoots as m,measurePopupContentRect as ne,on as h,setAria as g}from"@data-slot/core";const re=[`top`,`bottom`],ie=[`start`,`center`,`end`];function _(m,_={}){let v=f(m,`combobox-input`),y=f(m,`combobox-content`),b=f(m,`combobox-list`)??f(y??m,`combobox-list`),x=f(m,`combobox-trigger`),S=f(m,`combobox-value`),oe=f(b??y??m,`combobox-empty`),se=f(m,`combobox-positioner`),C=se&&y&&se.contains(y)?se:null,ce=f(m,`combobox-portal`),le=ce&&C&&ce.contains(C)?ce:null;if(!v||!y)throw Error(`Combobox requires combobox-input and combobox-content slots`);let w=y.contains(v),ue=S?.textContent?.trim()??``,de=_.defaultValue??d(m,`defaultValue`)??null,fe=_.defaultOpen??l(m,`defaultOpen`)??!1,T=_.placeholder??d(m,`placeholder`)??``,E=_.disabled??l(m,`disabled`)??!1,pe=_.required??l(m,`required`)??!1,me=_.name??d(m,`name`)??null,he=_.openOnFocus??l(m,`openOnFocus`)??!0,ge=_.autoHighlight??l(m,`autoHighlight`)??!1,_e=_.filter??null,ve=_.onValueChange,ye=_.onOpenChange,be=_.onInputValueChange,D=_.itemToStringValue??null,xe=(e,t)=>te(y,e,t)??(C?te(C,e,t):void 0)??te(m,e,t),Se=e=>u(y,e)??(C?u(C,e):void 0)??u(m,e),Ce=e=>l(y,e)??(C?l(C,e):void 0)??l(m,e),we=_.side??xe(`side`,re)??`bottom`,Te=_.align??xe(`align`,ie)??`start`,Ee=_.sideOffset??Se(`sideOffset`)??4,De=_.alignOffset??Se(`alignOffset`)??0,Oe=_.avoidCollisions??Ce(`avoidCollisions`)??!0,ke=_.collisionPadding??Se(`collisionPadding`)??8,O=!1,k=de,A=-1,j=!1,M=[],N=m.ownerDocument??document,P=N.defaultView??window,Ae=m,je=-1/0,F=!1,I=null,L=null,R=[],Me=[],z=[],B=new Map,V=null,H=i({content:y,root:m,wrapperSlot:C?void 0:`combobox-positioner`,container:C??void 0,mountTarget:C?le??C:void 0}),Ne=!1,U=e=>typeof P.matchMedia==`function`?P.matchMedia(e).matches:!1,Pe=()=>{let e=typeof P.navigator.maxTouchPoints==`number`?P.navigator.maxTouchPoints:0,t=U(`(pointer: coarse)`),n=U(`(hover: none)`);return t||e>0&&n},Fe=()=>U(`(prefers-reduced-motion: reduce)`),W=Pe(),G=()=>{I!==null&&(P.cancelAnimationFrame(I),I=null),L!==null&&(clearTimeout(L),L=null)},Ie=()=>{if(!O||!W)return;let e=Ae.getBoundingClientRect(),t=P.visualViewport?.height??P.innerHeight;if(t<=0||e.height<=0)return;let n=Math.max(24,Math.round(t*.2)),r=n,i=t-n,a=e.top+e.height/2,o=0;a<r?o=a-r:a>i&&(o=a-i),!(Math.abs(o)<1)&&P.scrollBy({top:o,behavior:Fe()?`auto`:`smooth`})},Le=()=>{W&&(G(),I=P.requestAnimationFrame(()=>{I=null,Ie()}),L=setTimeout(()=>{L=null,Ie()},140))},K=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,Re=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},q=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,ze=e=>e===null?null:p(b??y,`combobox-item`).find(t=>q(t)===e)??null,Be=e=>{let t=ze(e);return D?D(t,e):t?Re(t):``},Ve=c(v,`combobox-input`),He=b??y,Ue=c(He,`combobox-list`);v.setAttribute(`role`,`combobox`),v.setAttribute(`aria-autocomplete`,`list`),v.setAttribute(`autocomplete`,`off`),v.setAttribute(`aria-controls`,Ue),b?b.setAttribute(`role`,`listbox`):y.setAttribute(`role`,`listbox`),x&&(x.hasAttribute(`type`)||x.setAttribute(`type`,`button`),x.tabIndex=-1,x.setAttribute(`aria-label`,`Toggle`));let We=document.querySelector(`label[for="${CSS.escape(Ve)}"]`);if(We){let e=c(We,`combobox-label`),t=v.getAttribute(`aria-labelledby`);v.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),He.setAttribute(`aria-labelledby`,e)}E&&(v.setAttribute(`aria-disabled`,`true`),v.disabled=!0,x&&(x.setAttribute(`aria-disabled`,`true`),x.setAttribute(`data-disabled`,``))),pe&&(v.setAttribute(`aria-required`,`true`),v.required=!0);let Ge=()=>{pe&&v.setCustomValidity(k===null?`Please select a value`:``)};T&&(v.placeholder=T),S&&(S.textContent=ue||T,S.textContent.trim().length>0&&(S.setAttribute(`data-placeholder`,``),x?.setAttribute(`data-placeholder`,``))),me&&(v.name&&v.removeAttribute(`name`),V=document.createElement(`input`),V.type=`hidden`,V.name=me,V.value=k??``,m.appendChild(V));let Ke=_e??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),qe=()=>{let e=b??y;R=p(e,`combobox-item`);for(let e of R)e.setAttribute(`role`,`option`),c(e,`combobox-item`),K(e)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),q(e)===k?(g(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(g(e,`selected`,!1),e.removeAttribute(`data-selected`));let t=p(e,`combobox-group`);for(let e of t){e.setAttribute(`role`,`group`);let t=f(e,`combobox-label`);if(t){let n=c(t,`combobox-label`);e.setAttribute(`aria-labelledby`,n)}}Je()},Je=()=>{Me=R.filter(e=>!e.hidden),z=Me.filter(e=>!K(e)),B=new Map(z.map((e,t)=>[e,t]))},Ye=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},Xe=e=>{let t=b??y,n=e.trim(),r=0;for(let e of R){let t=q(e)??``,i=Re(e),a=n===``||Ke(n,t,i);e.hidden=!a,a&&r++}let i=p(t,`combobox-group`);for(let e of i)e.hidden=!p(e,`combobox-item`).some(e=>!e.hidden);let a=p(t,`combobox-separator`);for(let e of a)e.hidden=!Ye(e,`previous`)||!Ye(e,`next`);oe&&(oe.hidden=r>0),r===0?y.setAttribute(`data-empty`,``):y.removeAttribute(`data-empty`),Je()},Ze=()=>{let n=H.container,r=Ae.getBoundingClientRect();y.style.minWidth=`${r.width}px`;let i=e({anchorRect:r,contentRect:ne(y),side:we,align:Te,sideOffset:Ee,alignOffset:De,avoidCollisions:Oe,collisionPadding:ke,allowedSides:re}),a=t({side:i.side,align:i.align,anchorRect:r,popupX:i.x,popupY:i.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${i.x+P.scrollX}px, ${i.y+P.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,a),n.style.willChange=`transform`,n.style.margin=`0`,y.setAttribute(`data-side`,i.side),y.setAttribute(`data-align`,i.align),n!==y&&(n.setAttribute(`data-side`,i.side),n.setAttribute(`data-align`,i.align))},J=a({observedElements:[m,y],isActive:()=>O,ancestorScroll:!0,onUpdate:Ze,ignoreScrollTarget:e=>e instanceof Node&&y.contains(e)}),Qe=e=>b&&b.contains(e)&&b.scrollHeight>b.clientHeight?b:y,Y=e=>{for(let t=0;t<z.length;t++){let n=z[t];t===e?(n.setAttribute(`data-highlighted`,``),v.setAttribute(`aria-activedescendant`,n.id),ee(n,Qe(n))):n.removeAttribute(`data-highlighted`)}A=e},X=()=>{for(let e of R)e.removeAttribute(`data-highlighted`);A=-1,v.removeAttribute(`aria-activedescendant`)},$e=e=>{m.setAttribute(`data-state`,e),y.setAttribute(`data-state`,e),x&&x.setAttribute(`data-state`,e),e===`open`?(m.setAttribute(`data-open`,``),y.setAttribute(`data-open`,``),x&&x.setAttribute(`data-open`,``),m.removeAttribute(`data-closed`),y.removeAttribute(`data-closed`),x&&x.removeAttribute(`data-closed`)):(m.setAttribute(`data-closed`,``),y.setAttribute(`data-closed`,``),x&&x.setAttribute(`data-closed`,``),m.removeAttribute(`data-open`),y.removeAttribute(`data-open`),x&&x.removeAttribute(`data-open`))},Z=o({element:y,onExitComplete:()=>{Ne||(H.restore(),y.hidden=!0)}}),Q=(e,t=!1)=>{if(O!==e&&!(E&&e)){if(e){O=!0,g(v,`expanded`,!0),H.mount(),y.hidden=!1,$e(`open`),Z.enter(),qe(),j=!1,w&&(v.value=``),Xe(v.value);let e=z.findIndex(e=>q(e)===k);e>=0?Y(e):X(),J.start(),Ze(),J.update(),Le(),requestAnimationFrame(()=>{O&&J.update()})}else G(),O=!1,g(v,`expanded`,!1),$e(`closed`),X(),j=!1,J.stop(),Z.exit(),w?v.value=``:v.value=Be(k);s(m,`combobox:open-change`,{open:O}),ye?.(O)}},$=(e,t=!1)=>{if(k===e&&!t)return;let n=k;k=e,Ge(),V&&(V.value=e??``),e===null?m.removeAttribute(`data-value`):m.setAttribute(`data-value`,e);let r=b??y,i=R.length>0?R:p(r,`combobox-item`);for(let t of i)q(t)===e?(g(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(g(t,`selected`,!1),t.removeAttribute(`data-selected`));let a=Be(e);w||(v.value=a),S?e===null?(S.textContent=ue||T,(S.textContent??``).trim().length>0?(S.setAttribute(`data-placeholder`,``),x?.setAttribute(`data-placeholder`,``)):(S.removeAttribute(`data-placeholder`),x?.removeAttribute(`data-placeholder`))):(S.textContent=a,S.removeAttribute(`data-placeholder`),x?.removeAttribute(`data-placeholder`)):x&&(e===null?x.setAttribute(`data-placeholder`,``):x.removeAttribute(`data-placeholder`)),!t&&n!==e&&(s(m,`combobox:change`,{value:e}),ve?.(e))},et=e=>{if(K(e))return;let t=q(e);t!==void 0&&($(t),Q(!1))};return g(v,`expanded`,!1),y.hidden=!0,$e(`closed`),$(k,!0),M.push(h(N,`keydown`,e=>{e.key===`Tab`&&(je=Date.now())},{capture:!0}),h(v,`pointerdown`,()=>{F=!0}),h(v,`input`,()=>{let e=v.value,t=e.trim()!==``;s(m,`combobox:input-change`,{inputValue:e}),be?.(e),O?(Xe(e),ge&&t&&z.length>0?Y(0):X(),J.update()):(Q(!0),ge&&t&&z.length>0?Y(0):A!==-1&&X())}),h(v,`keydown`,e=>{if(!E)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!O){Q(!0);return}j=!0;let t=z.length;if(t===0)return;Y(A===-1?0:(A+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!O){Q(!0);return}j=!0;let t=z.length;if(t===0)return;Y(A===-1?t-1:(A-1+t)%t);break}case`Home`:if(!O)return;e.preventDefault(),j=!0,z.length>0&&Y(0);break;case`End`:if(!O)return;e.preventDefault(),j=!0,z.length>0&&Y(z.length-1);break;case`Enter`:if(!O)return;e.preventDefault(),A>=0&&A<z.length&&et(z[A]);break;case`Escape`:O?(e.preventDefault(),Q(!1)):k!==null&&(e.preventDefault(),$(null));break;case`Tab`:O&&Q(!1,!0);break}}),h(v,`focus`,()=>{if(E)return;v.select();let e=F||Date.now()-je<=750;F=!1,he&&!O&&e&&Q(!0)})),x&&M.push(h(x,`click`,()=>{E||(O?Q(!1):(Q(!0),v.focus()))})),M.push(h(y,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&et(t)}),h(y,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(j&&(j=!1,t&&B.get(t)===A)))if(t&&!K(t)&&!t.hidden){let e=B.get(t);e!==void 0&&e!==A&&Y(e)}else X()}),h(y,`pointerleave`,()=>{j||X()}),h(y,`mousedown`,e=>{e.preventDefault()})),M.push(r({root:m,isOpen:()=>O,onDismiss:()=>Q(!1),closeOnClickOutside:!W,closeOnEscape:!1})),W&&M.push(h(N,`click`,e=>{if(!O)return;let t=e.target;n(m,t)||Q(!1)},{capture:!0})),M.push(h(m,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(v.value=t.inputValue),t?.itemToStringValue!==void 0&&(D=t.itemToStringValue,$(k,!0))})),fe&&Q(!0),{get value(){return k},get inputValue(){return v.value},get isOpen(){return O},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{D=e,$(k,!0)},destroy:()=>{Ne=!0,G(),J.stop(),Z.cleanup(),H.cleanup(),M.forEach(e=>e()),M.length=0,V&&V.parentNode&&V.parentNode.removeChild(V),ae.delete(m)}}}const ae=new WeakSet;function v(e=document){let t=[];for(let n of m(e,`combobox`))ae.has(n)||(ae.add(n),t.push(_(n)));return t}export{v as create,_ as createCombobox};
1
+ import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,containsWithPortals as n,createDismissLayer as r,createPortalLifecycle as i,createPositionSync as a,createPresenceLifecycle as o,emit as s,ensureId as c,ensureItemVisibleInContainer as ee,getDataBool as l,getDataEnum as u,getDataNumber as te,getDataString as d,getPart as f,getParts as p,getRoots as m,measurePopupContentRect as ne,on as h,setAria as g}from"@data-slot/core";const re=[`top`,`bottom`],ie=[`start`,`center`,`end`];function _(m,_={}){let y=f(m,`combobox-input`),b=f(m,`combobox-content`),x=f(m,`combobox-list`)??f(b??m,`combobox-list`),S=f(m,`combobox-trigger`),C=f(m,`combobox-value`),ae=f(x??b??m,`combobox-empty`),w=f(m,`combobox-positioner`),T=w&&b&&w.contains(b)?w:null,E=f(m,`combobox-portal`),oe=E&&T&&E.contains(T)?E:null;if(!y||!b)throw Error(`Combobox requires combobox-input and combobox-content slots`);let D=b.contains(y),se=C?.textContent?.trim()??``,ce=_.defaultValue??d(m,`defaultValue`)??null,le=_.defaultOpen??l(m,`defaultOpen`)??!1,O=_.placeholder??d(m,`placeholder`)??``,k=_.disabled??l(m,`disabled`)??!1,ue=_.required??l(m,`required`)??!1,de=_.name??d(m,`name`)??null,fe=_.openOnFocus??l(m,`openOnFocus`)??!0,pe=_.autoHighlight??l(m,`autoHighlight`)??!1,me=_.filter??null,he=_.onValueChange,ge=_.onOpenChange,_e=_.onInputValueChange,A=_.itemToStringValue??null,ve=(e,t)=>u(b,e,t)??(T?u(T,e,t):void 0)??u(m,e,t),j=e=>te(b,e)??(T?te(T,e):void 0)??te(m,e),ye=e=>l(b,e)??(T?l(T,e):void 0)??l(m,e),be=_.side??ve(`side`,re)??`bottom`,xe=_.align??ve(`align`,ie)??`start`,Se=_.sideOffset??j(`sideOffset`)??4,Ce=_.alignOffset??j(`alignOffset`)??0,we=_.avoidCollisions??ye(`avoidCollisions`)??!0,Te=_.collisionPadding??j(`collisionPadding`)??8,M=!1,N=ce,P=-1,F=!1,I=[],L=m.ownerDocument??document,R=L.defaultView??window,Ee=m,De=-1/0,z=!1,B=[],Oe=[],V=[],H=new Map,U=null,W=i({content:b,root:m,wrapperSlot:T?void 0:`combobox-positioner`,container:T??void 0,mountTarget:T?oe??T:void 0}),ke=!1,Ae=e=>typeof R.matchMedia==`function`?R.matchMedia(e).matches:!1,G=(()=>{let e=typeof R.navigator.maxTouchPoints==`number`?R.navigator.maxTouchPoints:0,t=Ae(`(pointer: coarse)`),n=Ae(`(hover: none)`);return t||e>0&&n})(),K=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,je=e=>{if(e.dataset.label)return e.dataset.label;let t=``;for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent);return t.trim()||(e.textContent?.trim()??``)},q=e=>e.hasAttribute(`data-value`)?e.getAttribute(`data-value`):void 0,Me=e=>e===null?null:p(x??b,`combobox-item`).find(t=>q(t)===e)??null,Ne=e=>{let t=Me(e);return A?A(t,e):t?je(t):``},Pe=c(y,`combobox-input`),Fe=x??b,Ie=c(Fe,`combobox-list`);y.setAttribute(`role`,`combobox`),y.setAttribute(`aria-autocomplete`,`list`),y.setAttribute(`autocomplete`,`off`),y.setAttribute(`aria-controls`,Ie),x?x.setAttribute(`role`,`listbox`):b.setAttribute(`role`,`listbox`),S&&(S.hasAttribute(`type`)||S.setAttribute(`type`,`button`),S.tabIndex=-1,S.setAttribute(`aria-label`,`Toggle`));let Le=document.querySelector(`label[for="${CSS.escape(Pe)}"]`);if(Le){let e=c(Le,`combobox-label`),t=y.getAttribute(`aria-labelledby`);y.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),Fe.setAttribute(`aria-labelledby`,e)}k&&(y.setAttribute(`aria-disabled`,`true`),y.disabled=!0,S&&(S.setAttribute(`aria-disabled`,`true`),S.setAttribute(`data-disabled`,``))),ue&&(y.setAttribute(`aria-required`,`true`),y.required=!0);let Re=()=>{ue&&y.setCustomValidity(N===null?`Please select a value`:``)};O&&(y.placeholder=O),C&&(C.textContent=se||O,C.textContent.trim().length>0&&(C.setAttribute(`data-placeholder`,``),S?.setAttribute(`data-placeholder`,``))),de&&(y.name&&y.removeAttribute(`name`),U=document.createElement(`input`),U.type=`hidden`,U.name=de,U.value=N??``,m.appendChild(U));let ze=me??((e,t,n)=>n.toLowerCase().includes(e.toLowerCase())),Be=()=>{let e=x??b;B=p(e,`combobox-item`);for(let e of B)e.setAttribute(`role`,`option`),c(e,`combobox-item`),K(e)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),q(e)===N?(g(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(g(e,`selected`,!1),e.removeAttribute(`data-selected`));let t=p(e,`combobox-group`);for(let e of t){e.setAttribute(`role`,`group`);let t=f(e,`combobox-label`);if(t){let n=c(t,`combobox-label`);e.setAttribute(`aria-labelledby`,n)}}Ve()},Ve=()=>{Oe=B.filter(e=>!e.hidden),V=Oe.filter(e=>!K(e)),H=new Map(V.map((e,t)=>[e,t]))},He=(e,t)=>{let n=t===`previous`?e.previousElementSibling:e.nextElementSibling;for(;n;){if(n instanceof HTMLElement&&!n.hidden&&n.dataset.slot!==`combobox-separator`)return!0;n=t===`previous`?n.previousElementSibling:n.nextElementSibling}return!1},Ue=e=>{let t=x??b,n=e.trim(),r=0;for(let e of B){let t=q(e)??``,i=je(e),a=n===``||ze(n,t,i);e.hidden=!a,a&&r++}let i=p(t,`combobox-group`);for(let e of i)e.hidden=!p(e,`combobox-item`).some(e=>!e.hidden);let a=p(t,`combobox-separator`);for(let e of a)e.hidden=!He(e,`previous`)||!He(e,`next`);ae&&(ae.hidden=r>0),r===0?b.setAttribute(`data-empty`,``):b.removeAttribute(`data-empty`),Ve()},We=()=>{let n=W.container,r=G?`bottom`:be,i=G?!1:we,a=Ee.getBoundingClientRect();b.style.minWidth=`${a.width}px`;let o=e({anchorRect:a,contentRect:ne(b),side:r,align:xe,sideOffset:Se,alignOffset:Ce,avoidCollisions:i,collisionPadding:Te,allowedSides:re}),s=t({side:o.side,align:o.align,anchorRect:a,popupX:o.x,popupY:o.y});n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${o.x+R.scrollX}px, ${o.y+R.scrollY}px, 0)`,n.style.setProperty(`--transform-origin`,s),n.style.willChange=`transform`,n.style.margin=`0`,b.setAttribute(`data-side`,o.side),b.setAttribute(`data-align`,o.align),n!==b&&(n.setAttribute(`data-side`,o.side),n.setAttribute(`data-align`,o.align))},J=a({observedElements:[m,b],isActive:()=>M,ancestorScroll:!0,onUpdate:We,ignoreScrollTarget:e=>e instanceof Node&&b.contains(e)}),Ge=e=>x&&x.contains(e)&&x.scrollHeight>x.clientHeight?x:b,Y=e=>{for(let t=0;t<V.length;t++){let n=V[t];t===e?(n.setAttribute(`data-highlighted`,``),y.setAttribute(`aria-activedescendant`,n.id),ee(n,Ge(n))):n.removeAttribute(`data-highlighted`)}P=e},X=()=>{for(let e of B)e.removeAttribute(`data-highlighted`);P=-1,y.removeAttribute(`aria-activedescendant`)},Z=e=>{m.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),S&&S.setAttribute(`data-state`,e),e===`open`?(m.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),S&&S.setAttribute(`data-open`,``),m.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),S&&S.removeAttribute(`data-closed`)):(m.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),S&&S.setAttribute(`data-closed`,``),m.removeAttribute(`data-open`),b.removeAttribute(`data-open`),S&&S.removeAttribute(`data-open`))},Ke=o({element:b,onExitComplete:()=>{ke||(W.restore(),b.hidden=!0)}}),Q=(e,t=!1)=>{if(M!==e&&!(k&&e)){if(e){M=!0,g(y,`expanded`,!0),W.mount(),b.hidden=!1,Z(`open`),Ke.enter(),Be(),F=!1,D&&(y.value=``),Ue(y.value);let e=V.findIndex(e=>q(e)===N);e>=0?Y(e):X(),J.start(),We(),J.update(),requestAnimationFrame(()=>{M&&J.update()})}else M=!1,g(y,`expanded`,!1),Z(`closed`),X(),F=!1,J.stop(),Ke.exit(),D?y.value=``:y.value=Ne(N);s(m,`combobox:open-change`,{open:M}),ge?.(M)}},$=(e,t=!1)=>{if(N===e&&!t)return;let n=N;N=e,Re(),U&&(U.value=e??``),e===null?m.removeAttribute(`data-value`):m.setAttribute(`data-value`,e);let r=x??b,i=B.length>0?B:p(r,`combobox-item`);for(let t of i)q(t)===e?(g(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(g(t,`selected`,!1),t.removeAttribute(`data-selected`));let a=Ne(e);D||(y.value=a),C?e===null?(C.textContent=se||O,(C.textContent??``).trim().length>0?(C.setAttribute(`data-placeholder`,``),S?.setAttribute(`data-placeholder`,``)):(C.removeAttribute(`data-placeholder`),S?.removeAttribute(`data-placeholder`))):(C.textContent=a,C.removeAttribute(`data-placeholder`),S?.removeAttribute(`data-placeholder`)):S&&(e===null?S.setAttribute(`data-placeholder`,``):S.removeAttribute(`data-placeholder`)),!t&&n!==e&&(s(m,`combobox:change`,{value:e}),he?.(e))},qe=e=>{if(K(e))return;let t=q(e);t!==void 0&&($(t),Q(!1))};return g(y,`expanded`,!1),b.hidden=!0,Z(`closed`),$(N,!0),I.push(h(L,`keydown`,e=>{e.key===`Tab`&&(De=Date.now())},{capture:!0}),h(y,`pointerdown`,()=>{z=!0}),h(y,`input`,()=>{let e=y.value,t=e.trim()!==``;s(m,`combobox:input-change`,{inputValue:e}),_e?.(e),M?(Ue(e),pe&&t&&V.length>0?Y(0):X(),J.update()):(Q(!0),pe&&t&&V.length>0?Y(0):P!==-1&&X())}),h(y,`keydown`,e=>{if(!k)switch(e.key){case`ArrowDown`:{if(e.preventDefault(),!M){Q(!0);return}F=!0;let t=V.length;if(t===0)return;Y(P===-1?0:(P+1)%t);break}case`ArrowUp`:{if(e.preventDefault(),!M){Q(!0);return}F=!0;let t=V.length;if(t===0)return;Y(P===-1?t-1:(P-1+t)%t);break}case`Home`:if(!M)return;e.preventDefault(),F=!0,V.length>0&&Y(0);break;case`End`:if(!M)return;e.preventDefault(),F=!0,V.length>0&&Y(V.length-1);break;case`Enter`:if(!M)return;e.preventDefault(),P>=0&&P<V.length&&qe(V[P]);break;case`Escape`:M?(e.preventDefault(),Q(!1)):N!==null&&(e.preventDefault(),$(null));break;case`Tab`:M&&Q(!1,!0);break}}),h(y,`focus`,()=>{if(k)return;y.select();let e=z||Date.now()-De<=750;z=!1,fe&&!M&&e&&Q(!0)})),S&&I.push(h(S,`click`,()=>{k||(M?Q(!1):(Q(!0),y.focus()))})),I.push(h(b,`click`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);t&&!t.hidden&&qe(t)}),h(b,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="combobox-item"]`);if(!(F&&(F=!1,t&&H.get(t)===P)))if(t&&!K(t)&&!t.hidden){let e=H.get(t);e!==void 0&&e!==P&&Y(e)}else X()}),h(b,`pointerleave`,()=>{F||X()}),h(b,`mousedown`,e=>{e.preventDefault()})),I.push(r({root:m,isOpen:()=>M,onDismiss:()=>Q(!1),closeOnClickOutside:!G,closeOnEscape:!1})),G&&I.push(h(L,`click`,e=>{if(!M)return;let t=e.target;n(m,t)||Q(!1)},{capture:!0})),I.push(h(m,`combobox:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open),t?.inputValue!==void 0&&(y.value=t.inputValue),t?.itemToStringValue!==void 0&&(A=t.itemToStringValue,$(N,!0))})),le&&Q(!0),{get value(){return N},get inputValue(){return y.value},get isOpen(){return M},select:e=>$(e),clear:()=>$(null),open:()=>Q(!0),close:()=>Q(!1),setItemToStringValue:e=>{A=e,$(N,!0)},destroy:()=>{ke=!0,J.stop(),Ke.cleanup(),W.cleanup(),I.forEach(e=>e()),I.length=0,U&&U.parentNode&&U.parentNode.removeChild(U),v.delete(m)}}}const v=new WeakSet;function y(e=document){let t=[];for(let n of m(e,`combobox`))v.has(n)||(v.add(n),t.push(_(n)));return t}export{y as create,_ as createCombobox};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-slot/combobox",
3
- "version": "0.2.95",
3
+ "version": "0.2.96",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.cjs",
@@ -40,6 +40,6 @@
40
40
  ],
41
41
  "license": "MIT",
42
42
  "dependencies": {
43
- "@data-slot/core": "0.2.95"
43
+ "@data-slot/core": "0.2.96"
44
44
  }
45
45
  }