@data-slot/select 0.2.91 → 0.2.93

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
@@ -108,6 +108,12 @@ Use a standard HTML `<label for="...">` element to label the select. The `for` a
108
108
  ## Options
109
109
 
110
110
  Options can be passed via JavaScript or data attributes (JS takes precedence).
111
+ Placement attributes (`position`, `side`, `align`, `sideOffset`, `alignOffset`, `avoidCollisions`, `collisionPadding`) resolve in this order:
112
+
113
+ 1. JavaScript option
114
+ 2. `select-content`
115
+ 3. `select-positioner`
116
+ 4. `select` root (fallback)
111
117
 
112
118
  | Option | Data Attribute | Type | Default | Description |
113
119
  |--------|---------------|------|---------|-------------|
@@ -133,6 +139,8 @@ Options can be passed via JavaScript or data attributes (JS takes precedence).
133
139
  | `sideOffset` | `data-side-offset` | `number` | `4` | Distance from trigger (px) |
134
140
  | `alignOffset` | `data-align-offset` | `number` | `0` | Offset from alignment edge (px) |
135
141
 
142
+ Both positioning modes set `--transform-origin` on the positioned element (`select-positioner`, or `select-content` when no positioner is used), so content animations can use `transform-origin: var(--transform-origin, center)`.
143
+
136
144
  ### Callbacks
137
145
 
138
146
  | Callback | Type | Description |
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`],r=[`item-aligned`,`popper`];function i(i,o={}){let s=(0,e.getPart)(i,`select-trigger`),c=(0,e.getPart)(i,`select-content`),l=(0,e.getPart)(i,`select-value`),u=(0,e.getPart)(i,`select-positioner`),d=u&&c&&u.contains(c)?u:null,f=(0,e.getPart)(i,`select-portal`),ee=f&&d&&f.contains(d)?f:null;if(!s||!c)throw Error(`Select requires trigger and content slots`);let p=o.defaultValue??(0,e.getDataString)(i,`defaultValue`)??null,te=o.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,ne=o.placeholder??(0,e.getDataString)(i,`placeholder`)??(l?(0,e.getDataString)(l,`placeholder`):void 0)??``,m=o.disabled??(0,e.getDataBool)(i,`disabled`)??!1,re=o.required??(0,e.getDataBool)(i,`required`)??!1,h=o.name??(0,e.getDataString)(i,`name`)??null,ie=o.onValueChange,ae=o.onOpenChange,g=o.position??(0,e.getDataEnum)(i,`position`,r)??`item-aligned`,oe=o.side??(0,e.getDataEnum)(c,`side`,t)??(0,e.getDataEnum)(i,`side`,t)??`bottom`,_=o.align??(0,e.getDataEnum)(c,`align`,n)??(0,e.getDataEnum)(i,`align`,n)??`start`,se=o.sideOffset??(0,e.getDataNumber)(c,`sideOffset`)??(0,e.getDataNumber)(i,`sideOffset`)??4,ce=o.alignOffset??(0,e.getDataNumber)(c,`alignOffset`)??(0,e.getDataNumber)(i,`alignOffset`)??0,v=o.avoidCollisions??(0,e.getDataBool)(c,`avoidCollisions`)??(0,e.getDataBool)(i,`avoidCollisions`)??!0,y=o.collisionPadding??(0,e.getDataNumber)(c,`collisionPadding`)??(0,e.getDataNumber)(i,`collisionPadding`)??8,b=o.lockScroll??(0,e.getDataBool)(i,`lockScroll`)??!0,x=!1,S=p,C=null,w=-1,T=``,E=null,D=!1,O=0,k=0,A=!1,j=[],M=[],N=[],P=new Map,F=null,I=!1,L=(0,e.createPortalLifecycle)({content:c,root:i,wrapperSlot:d?void 0:`select-positioner`,container:d??void 0,mountTarget:d?ee??d:void 0}),R=!1,z=!0,B=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,V=(0,e.ensureId)(s,`select-trigger`),le=(0,e.ensureId)(c,`select-content`);s.setAttribute(`role`,`combobox`),s.setAttribute(`aria-haspopup`,`listbox`),s.setAttribute(`aria-controls`,le),s.hasAttribute(`type`)||s.setAttribute(`type`,`button`),c.setAttribute(`role`,`listbox`),c.setAttribute(`aria-labelledby`,V),c.tabIndex=-1;let H=document.querySelector(`label[for="${CSS.escape(V)}"]`);if(H){let t=(0,e.ensureId)(H,`select-label`),n=s.getAttribute(`aria-labelledby`);s.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),j.push((0,e.on)(H,`click`,e=>{e.preventDefault(),m||Z(!x)}))}m&&(s.setAttribute(`aria-disabled`,`true`),s.setAttribute(`data-disabled`,``)),re&&s.setAttribute(`aria-required`,`true`),h&&(F=document.createElement(`input`),F.type=`hidden`,F.name=h,F.value=S??``,i.appendChild(F));let U=()=>{M=(0,e.getParts)(c,`select-item`);for(let t of M)t.setAttribute(`role`,`option`),t.hasAttribute(`data-disabled`)||t.hasAttribute(`disabled`)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),t.tabIndex=-1,t.dataset.value===S?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));N=M.filter(e=>!B(e)),P=new Map(N.map((e,t)=>[e,t]));let t=(0,e.getParts)(c,`select-group`);for(let n of t){n.setAttribute(`role`,`group`);let t=(0,e.getPart)(n,`select-label`);if(t){let r=(0,e.ensureId)(t,`select-label`);n.setAttribute(`aria-labelledby`,r)}}},W=()=>(0,e.getPart)(c,`select-viewport`)??c,ue=(e,t,n)=>{let r=0,i=e;for(;i&&i!==c;){r+=i.offsetTop;let e=i.offsetParent;if(!(e instanceof HTMLElement)){r=NaN;break}i=e}return i===c&&Number.isFinite(r)?r:e.getBoundingClientRect().top-t.top+n.scrollTop},de=(e,t,n)=>{let r=w>=0?N[w]:void 0,i=M.find(e=>e.dataset.value===S)??r??N[0],a=e.left,o,s=0,c=e.height;return i?(s=ue(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-c/2-s):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},G=()=>{let n=L.container,r=i.ownerDocument.defaultView??window,a=s.getBoundingClientRect(),o=W();c.style.minWidth=`${a.width}px`;let l=(0,e.measurePopupContentRect)(c),u,d=`bottom`;if(g===`item-aligned`){let e=de(a,l,o);u={x:e.x,y:e.y};let t=a.top+a.height/2,n=y,i=r.innerHeight-l.height-y,s=e=>v?i<n?n:Math.min(Math.max(e,n),i):e,c=y,f=r.innerWidth-l.width-y;if(u.x=(e=>v?f<c?c:Math.min(Math.max(e,c),f):e)(u.x),e.alignItem){let n=Math.max(0,o.scrollHeight-o.clientHeight),r=n=>e.itemTopInContent+e.itemHeight/2-(t-n);if(n>0){u.y=s(t-l.height/2);let i=Math.min(Math.max(r(u.y),0),n);o.scrollTop=i,u.y=s(t-(e.itemTopInContent-i+e.itemHeight/2)),i=Math.min(Math.max(r(u.y),0),n),o.scrollTop=i,u.y=s(t-(e.itemTopInContent-i+e.itemHeight/2))}else o.scrollTop=0,u.y=s(e.y)}else o.scrollTop=0,u.y=s(e.y);d=u.y<a.top?`top`:`bottom`}else{let n=(0,e.computeFloatingPosition)({anchorRect:a,contentRect:l,side:oe,align:_,sideOffset:se,alignOffset:ce,avoidCollisions:v,collisionPadding:y,allowedSides:t});u={x:n.x,y:n.y},d=n.side}b?(n.style.position=`fixed`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x}px, ${u.y}px, 0)`):(n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x+r.scrollX}px, ${u.y+r.scrollY}px, 0)`),n.style.willChange=`transform`,n.style.margin=`0`,c.setAttribute(`data-side`,d),c.setAttribute(`data-align`,g===`item-aligned`?`center`:_),n!==c&&(n.setAttribute(`data-side`,d),n.setAttribute(`data-align`,g===`item-aligned`?`center`:_))},K=(0,e.createPositionSync)({observedElements:[s,c],isActive:()=>x,ancestorScroll:b,onUpdate:G,ignoreScrollTarget:e=>e instanceof Node&&c.contains(e)}),q=(t,n=!0,r=!0)=>{let i=W();for(let a=0;a<N.length;a++){let o=N[a];a===t?(o.setAttribute(`data-highlighted`,``),r&&(0,e.ensureItemVisibleInContainer)(o,i),n&&o.focus()):o.removeAttribute(`data-highlighted`)}w=t},J=()=>{for(let e of M)e.removeAttribute(`data-highlighted`);w=-1},Y=e=>{i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e),e===`open`?(i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),c.setAttribute(`data-open`,``),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),c.removeAttribute(`data-closed`)):(i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),c.setAttribute(`data-closed`,``),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),c.removeAttribute(`data-open`))},fe=()=>{requestAnimationFrame(()=>{C&&document.contains(C)?(0,e.focusElement)(C):s&&document.contains(s)&&(0,e.focusElement)(s),C=null})},X=(0,e.createPresenceLifecycle)({element:c,onExitComplete:()=>{R||(L.restore(),c.hidden=!0,z?fe():C=null)}}),pe=()=>{if(l)if(S===null)l.textContent=ne,s.setAttribute(`data-placeholder`,``);else{let e=M.find(e=>e.dataset.value===S);l.textContent=e?.dataset.label??e?.textContent?.trim()??S,s.removeAttribute(`data-placeholder`)}},Z=(t,n=!1)=>{if(x!==t&&!(m&&t)){if(t){let t=A;A=!1,z=!0,C=document.activeElement,x=!0,(0,e.setAria)(s,`expanded`,!0),L.mount(),c.hidden=!1,Y(`open`),X.enter(),b&&!I&&((0,e.lockScroll)(),I=!0),U(),D=!1;let n=N.findIndex(e=>e.dataset.value===S);n>=0?q(n,!1,!1):J(),K.start(),G(),K.update(),requestAnimationFrame(()=>{if(x&&(G(),K.update(),t&&(O!==0||k!==0))){let e=document.elementFromPoint(O,k)?.closest?.(`[data-slot="select-item"]`);if(e&&!B(e)&&c.contains(e)){let t=P.get(e);t!==void 0&&q(t,!1,!1)}}}),c.focus()}else x=!1,A=!1,O=0,k=0,(0,e.setAria)(s,`expanded`,!1),Y(`closed`),J(),T=``,D=!1,z=!n,I&&=((0,e.unlockScroll)(),!1),K.stop(),X.exit();(0,e.emit)(i,`select:open-change`,{open:x}),ae?.(x)}},Q=(t,n=!1)=>{if(S===t&&!n)return;let r=S;S=t,F&&(F.value=t??``),t===null?i.removeAttribute(`data-value`):i.setAttribute(`data-value`,t);for(let n of M)n.dataset.value===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));pe(),!n&&r!==t&&((0,e.emit)(i,`select:change`,{value:t}),ie?.(t))},$=e=>{if(B(e))return;let t=e.dataset.value;t!==void 0&&(Q(t),Z(!1))},me=e=>{let t=N.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),D=!0,q(w===-1?0:Math.min(w+1,t-1));break;case`ArrowUp`:e.preventDefault(),D=!0,q(w===-1?t-1:Math.max(w-1,0));break;case`Home`:e.preventDefault(),D=!0,q(0);break;case`End`:e.preventDefault(),D=!0,q(t-1);break;case`Enter`:case` `:e.preventDefault(),w>=0&&$(N[w]);break;case`Tab`:Z(!1,!0);break;case`Escape`:e.preventDefault(),Z(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),he(e.key.toLowerCase()))}},he=e=>{E&&clearTimeout(E),E=setTimeout(()=>{T=``},500),T+=e;let t=N.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(T));if(t===-1&&T.length===1){let n=w+1;for(let r=0;r<N.length;r++){let i=(n+r)%N.length;if((N[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(D=!0,q(t))};return(0,e.setAria)(s,`expanded`,!1),c.hidden=!0,Y(`closed`),U(),Q(S,!0),j.push((0,e.on)(s,`pointerdown`,e=>{O=e.clientX,k=e.clientY,A=!0}),(0,e.on)(s,`click`,()=>{m||Z(!x)}),(0,e.on)(s,`keydown`,e=>{if(!m)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),A=!1,Z(!0);break}})),j.push((0,e.on)(c,`keydown`,me),(0,e.on)(c,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&$(t)}),(0,e.on)(c,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(D&&(D=!1,t&&P.get(t)===w)))if(t&&!B(t)){let e=P.get(t);e!==void 0&&e!==w&&q(e,!1)}else J()}),(0,e.on)(c,`pointerleave`,()=>{D||J()})),j.push((0,e.createDismissLayer)({root:i,isOpen:()=>x,onDismiss:()=>Z(!1),closeOnClickOutside:!0,closeOnEscape:!1})),j.push((0,e.on)(i,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&Q(t.value),t?.open!==void 0&&Z(t.open)})),te&&Z(!0),{get value(){return S},get isOpen(){return x},select:e=>Q(e),open:()=>Z(!0),close:()=>Z(!1),destroy:()=>{R=!0,E&&clearTimeout(E),K.stop(),X.cleanup(),L.cleanup(),I&&=((0,e.unlockScroll)(),!1),j.forEach(e=>e()),j.length=0,F&&F.parentNode&&F.parentNode.removeChild(F),a.delete(i)}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`select`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createSelect=i;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@data-slot/core`);const t=[`top`,`bottom`],n=[`start`,`center`,`end`],r=[`item-aligned`,`popper`];function i(i,o={}){let s=(0,e.getPart)(i,`select-trigger`),c=(0,e.getPart)(i,`select-content`),l=(0,e.getPart)(i,`select-value`),u=(0,e.getPart)(i,`select-positioner`),d=u&&c&&u.contains(c)?u:null,f=(0,e.getPart)(i,`select-portal`),p=f&&d&&f.contains(d)?f:null;if(!s||!c)throw Error(`Select requires trigger and content slots`);let ee=o.defaultValue??(0,e.getDataString)(i,`defaultValue`)??null,te=o.defaultOpen??(0,e.getDataBool)(i,`defaultOpen`)??!1,ne=o.placeholder??(0,e.getDataString)(i,`placeholder`)??(l?(0,e.getDataString)(l,`placeholder`):void 0)??``,m=o.disabled??(0,e.getDataBool)(i,`disabled`)??!1,re=o.required??(0,e.getDataBool)(i,`required`)??!1,ie=o.name??(0,e.getDataString)(i,`name`)??null,ae=o.onValueChange,oe=o.onOpenChange,h=(t,n)=>(0,e.getDataEnum)(c,t,n)??(d?(0,e.getDataEnum)(d,t,n):void 0)??(0,e.getDataEnum)(i,t,n),g=t=>(0,e.getDataNumber)(c,t)??(d?(0,e.getDataNumber)(d,t):void 0)??(0,e.getDataNumber)(i,t),se=t=>(0,e.getDataBool)(c,t)??(d?(0,e.getDataBool)(d,t):void 0)??(0,e.getDataBool)(i,t),_=o.position??h(`position`,r)??`item-aligned`,ce=o.side??h(`side`,t)??`bottom`,v=o.align??h(`align`,n)??`start`,le=o.sideOffset??g(`sideOffset`)??4,ue=o.alignOffset??g(`alignOffset`)??0,y=o.avoidCollisions??se(`avoidCollisions`)??!0,b=o.collisionPadding??g(`collisionPadding`)??8,x=o.lockScroll??(0,e.getDataBool)(i,`lockScroll`)??!0,S=!1,C=ee,w=null,T=-1,E=``,D=null,O=!1,k=0,A=0,j=!1,M=[],N=[],P=[],F=new Map,I=null,L=!1,R=(0,e.createPortalLifecycle)({content:c,root:i,wrapperSlot:d?void 0:`select-positioner`,container:d??void 0,mountTarget:d?p??d:void 0}),z=!1,B=!0,V=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,H=(0,e.ensureId)(s,`select-trigger`),de=(0,e.ensureId)(c,`select-content`);s.setAttribute(`role`,`combobox`),s.setAttribute(`aria-haspopup`,`listbox`),s.setAttribute(`aria-controls`,de),s.hasAttribute(`type`)||s.setAttribute(`type`,`button`),c.setAttribute(`role`,`listbox`),c.setAttribute(`aria-labelledby`,H),c.tabIndex=-1;let U=document.querySelector(`label[for="${CSS.escape(H)}"]`);if(U){let t=(0,e.ensureId)(U,`select-label`),n=s.getAttribute(`aria-labelledby`);s.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),M.push((0,e.on)(U,`click`,e=>{e.preventDefault(),m||Q(!S)}))}m&&(s.setAttribute(`aria-disabled`,`true`),s.setAttribute(`data-disabled`,``)),re&&s.setAttribute(`aria-required`,`true`),ie&&(I=document.createElement(`input`),I.type=`hidden`,I.name=ie,I.value=C??``,i.appendChild(I));let W=()=>{N=(0,e.getParts)(c,`select-item`);for(let t of N)t.setAttribute(`role`,`option`),t.hasAttribute(`data-disabled`)||t.hasAttribute(`disabled`)?t.setAttribute(`aria-disabled`,`true`):t.removeAttribute(`aria-disabled`),t.tabIndex=-1,t.dataset.value===C?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));P=N.filter(e=>!V(e)),F=new Map(P.map((e,t)=>[e,t]));let t=(0,e.getParts)(c,`select-group`);for(let n of t){n.setAttribute(`role`,`group`);let t=(0,e.getPart)(n,`select-label`);if(t){let r=(0,e.ensureId)(t,`select-label`);n.setAttribute(`aria-labelledby`,r)}}},G=()=>(0,e.getPart)(c,`select-viewport`)??c,fe=(e,t,n)=>{let r=0,i=e;for(;i&&i!==c;){r+=i.offsetTop;let e=i.offsetParent;if(!(e instanceof HTMLElement)){r=NaN;break}i=e}return i===c&&Number.isFinite(r)?r:e.getBoundingClientRect().top-t.top+n.scrollTop},pe=(e,t,n)=>{let r=T>=0?P[T]:void 0,i=N.find(e=>e.dataset.value===C)??r??P[0],a=e.left,o,s=0,c=e.height;return i?(s=fe(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-c/2-s):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},K=()=>{let n=R.container,r=i.ownerDocument.defaultView??window,a=s.getBoundingClientRect(),o=G();c.style.minWidth=`${a.width}px`;let l=(0,e.measurePopupContentRect)(c),u,d=`bottom`;if(_===`item-aligned`){let e=pe(a,l,o);u={x:e.x,y:e.y};let t=a.top+a.height/2,n=b,i=r.innerHeight-l.height-b,s=e=>y?i<n?n:Math.min(Math.max(e,n),i):e,c=b,f=r.innerWidth-l.width-b;if(u.x=(e=>y?f<c?c:Math.min(Math.max(e,c),f):e)(u.x),e.alignItem){let n=Math.max(0,o.scrollHeight-o.clientHeight),r=n=>e.itemTopInContent+e.itemHeight/2-(t-n);if(n>0){u.y=s(t-l.height/2);let i=Math.min(Math.max(r(u.y),0),n);o.scrollTop=i,u.y=s(t-(e.itemTopInContent-i+e.itemHeight/2)),i=Math.min(Math.max(r(u.y),0),n),o.scrollTop=i,u.y=s(t-(e.itemTopInContent-i+e.itemHeight/2))}else o.scrollTop=0,u.y=s(e.y)}else o.scrollTop=0,u.y=s(e.y);d=u.y<a.top?`top`:`bottom`}else{let n=(0,e.computeFloatingPosition)({anchorRect:a,contentRect:l,side:ce,align:v,sideOffset:le,alignOffset:ue,avoidCollisions:y,collisionPadding:b,allowedSides:t});u={x:n.x,y:n.y},d=n.side}let f=_===`item-aligned`?`center`:v,p=(0,e.computeFloatingTransformOrigin)({side:d,align:f,anchorRect:a,popupX:u.x,popupY:u.y});x?(n.style.position=`fixed`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x}px, ${u.y}px, 0)`):(n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${u.x+r.scrollX}px, ${u.y+r.scrollY}px, 0)`),n.style.setProperty(`--transform-origin`,p),n.style.willChange=`transform`,n.style.margin=`0`,c.setAttribute(`data-side`,d),c.setAttribute(`data-align`,f),n!==c&&(n.setAttribute(`data-side`,d),n.setAttribute(`data-align`,f))},q=(0,e.createPositionSync)({observedElements:[s,c],isActive:()=>S,ancestorScroll:x,onUpdate:K,ignoreScrollTarget:e=>e instanceof Node&&c.contains(e)}),J=(t,n=!0,r=!0)=>{let i=G();for(let a=0;a<P.length;a++){let o=P[a];a===t?(o.setAttribute(`data-highlighted`,``),r&&(0,e.ensureItemVisibleInContainer)(o,i),n&&o.focus()):o.removeAttribute(`data-highlighted`)}T=t},Y=()=>{for(let e of N)e.removeAttribute(`data-highlighted`);T=-1},X=e=>{i.setAttribute(`data-state`,e),s.setAttribute(`data-state`,e),c.setAttribute(`data-state`,e),e===`open`?(i.setAttribute(`data-open`,``),s.setAttribute(`data-open`,``),c.setAttribute(`data-open`,``),i.removeAttribute(`data-closed`),s.removeAttribute(`data-closed`),c.removeAttribute(`data-closed`)):(i.setAttribute(`data-closed`,``),s.setAttribute(`data-closed`,``),c.setAttribute(`data-closed`,``),i.removeAttribute(`data-open`),s.removeAttribute(`data-open`),c.removeAttribute(`data-open`))},me=()=>{requestAnimationFrame(()=>{w&&document.contains(w)?(0,e.focusElement)(w):s&&document.contains(s)&&(0,e.focusElement)(s),w=null})},Z=(0,e.createPresenceLifecycle)({element:c,onExitComplete:()=>{z||(R.restore(),c.hidden=!0,B?me():w=null)}}),he=()=>{if(l)if(C===null)l.textContent=ne,s.setAttribute(`data-placeholder`,``);else{let e=N.find(e=>e.dataset.value===C);l.textContent=e?.dataset.label??e?.textContent?.trim()??C,s.removeAttribute(`data-placeholder`)}},Q=(t,n=!1)=>{if(S!==t&&!(m&&t)){if(t){let t=j;j=!1,B=!0,w=document.activeElement,S=!0,(0,e.setAria)(s,`expanded`,!0),R.mount(),c.hidden=!1,X(`open`),Z.enter(),x&&!L&&((0,e.lockScroll)(),L=!0),W(),O=!1;let n=P.findIndex(e=>e.dataset.value===C);n>=0?J(n,!1,!1):Y(),q.start(),K(),q.update(),requestAnimationFrame(()=>{if(S&&(K(),q.update(),t&&(k!==0||A!==0))){let e=document.elementFromPoint(k,A)?.closest?.(`[data-slot="select-item"]`);if(e&&!V(e)&&c.contains(e)){let t=F.get(e);t!==void 0&&J(t,!1,!1)}}}),c.focus()}else S=!1,j=!1,k=0,A=0,(0,e.setAria)(s,`expanded`,!1),X(`closed`),Y(),E=``,O=!1,B=!n,L&&=((0,e.unlockScroll)(),!1),q.stop(),Z.exit();(0,e.emit)(i,`select:open-change`,{open:S}),oe?.(S)}},$=(t,n=!1)=>{if(C===t&&!n)return;let r=C;C=t,I&&(I.value=t??``),t===null?i.removeAttribute(`data-value`):i.setAttribute(`data-value`,t);for(let n of N)n.dataset.value===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));he(),!n&&r!==t&&((0,e.emit)(i,`select:change`,{value:t}),ae?.(t))},ge=e=>{if(V(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},_e=e=>{let t=P.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),O=!0,J(T===-1?0:Math.min(T+1,t-1));break;case`ArrowUp`:e.preventDefault(),O=!0,J(T===-1?t-1:Math.max(T-1,0));break;case`Home`:e.preventDefault(),O=!0,J(0);break;case`End`:e.preventDefault(),O=!0,J(t-1);break;case`Enter`:case` `:e.preventDefault(),T>=0&&ge(P[T]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ve(e.key.toLowerCase()))}},ve=e=>{D&&clearTimeout(D),D=setTimeout(()=>{E=``},500),E+=e;let t=P.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(E));if(t===-1&&E.length===1){let n=T+1;for(let r=0;r<P.length;r++){let i=(n+r)%P.length;if((P[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(O=!0,J(t))};return(0,e.setAria)(s,`expanded`,!1),c.hidden=!0,X(`closed`),W(),$(C,!0),M.push((0,e.on)(s,`pointerdown`,e=>{k=e.clientX,A=e.clientY,j=!0}),(0,e.on)(s,`click`,()=>{m||Q(!S)}),(0,e.on)(s,`keydown`,e=>{if(!m)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),j=!1,Q(!0);break}})),M.push((0,e.on)(c,`keydown`,_e),(0,e.on)(c,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ge(t)}),(0,e.on)(c,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(O&&(O=!1,t&&F.get(t)===T)))if(t&&!V(t)){let e=F.get(t);e!==void 0&&e!==T&&J(e,!1)}else Y()}),(0,e.on)(c,`pointerleave`,()=>{O||Y()})),M.push((0,e.createDismissLayer)({root:i,isOpen:()=>S,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),M.push((0,e.on)(i,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)})),te&&Q(!0),{get value(){return C},get isOpen(){return S},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{z=!0,D&&clearTimeout(D),q.stop(),Z.cleanup(),R.cleanup(),L&&=((0,e.unlockScroll)(),!1),M.forEach(e=>e()),M.length=0,I&&I.parentNode&&I.parentNode.removeChild(I),a.delete(i)}}}const a=new WeakSet;function o(t=document){let n=[];for(let r of(0,e.getRoots)(t,`select`))a.has(r)||(a.add(r),n.push(i(r)));return n}exports.create=o,exports.createSelect=i;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{computeFloatingPosition as e,createDismissLayer as t,createPortalLifecycle as n,createPositionSync as r,createPresenceLifecycle as i,emit as a,ensureId as o,ensureItemVisibleInContainer as s,focusElement as c,getDataBool as l,getDataEnum as u,getDataNumber as d,getDataString as f,getPart as p,getParts as ee,getRoots as m,lockScroll as te,measurePopupContentRect as ne,on as h,setAria as g,unlockScroll as re}from"@data-slot/core";const _=[`top`,`bottom`],ie=[`start`,`center`,`end`],ae=[`item-aligned`,`popper`];function v(m,v={}){let b=p(m,`select-trigger`),x=p(m,`select-content`),S=p(m,`select-value`),C=p(m,`select-positioner`),w=C&&x&&C.contains(x)?C:null,oe=p(m,`select-portal`),se=oe&&w&&oe.contains(w)?oe:null;if(!b||!x)throw Error(`Select requires trigger and content slots`);let ce=v.defaultValue??f(m,`defaultValue`)??null,le=v.defaultOpen??l(m,`defaultOpen`)??!1,ue=v.placeholder??f(m,`placeholder`)??(S?f(S,`placeholder`):void 0)??``,T=v.disabled??l(m,`disabled`)??!1,de=v.required??l(m,`required`)??!1,fe=v.name??f(m,`name`)??null,pe=v.onValueChange,me=v.onOpenChange,E=v.position??u(m,`position`,ae)??`item-aligned`,he=v.side??u(x,`side`,_)??u(m,`side`,_)??`bottom`,D=v.align??u(x,`align`,ie)??u(m,`align`,ie)??`start`,ge=v.sideOffset??d(x,`sideOffset`)??d(m,`sideOffset`)??4,_e=v.alignOffset??d(x,`alignOffset`)??d(m,`alignOffset`)??0,ve=v.avoidCollisions??l(x,`avoidCollisions`)??l(m,`avoidCollisions`)??!0,O=v.collisionPadding??d(x,`collisionPadding`)??d(m,`collisionPadding`)??8,ye=v.lockScroll??l(m,`lockScroll`)??!0,k=!1,A=ce,j=null,M=-1,N=``,P=null,F=!1,I=0,L=0,R=!1,z=[],B=[],V=[],H=new Map,U=null,W=!1,G=n({content:x,root:m,wrapperSlot:w?void 0:`select-positioner`,container:w??void 0,mountTarget:w?se??w:void 0}),be=!1,K=!0,q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,xe=o(b,`select-trigger`),Se=o(x,`select-content`);b.setAttribute(`role`,`combobox`),b.setAttribute(`aria-haspopup`,`listbox`),b.setAttribute(`aria-controls`,Se),b.hasAttribute(`type`)||b.setAttribute(`type`,`button`),x.setAttribute(`role`,`listbox`),x.setAttribute(`aria-labelledby`,xe),x.tabIndex=-1;let Ce=document.querySelector(`label[for="${CSS.escape(xe)}"]`);if(Ce){let e=o(Ce,`select-label`),t=b.getAttribute(`aria-labelledby`);b.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),z.push(h(Ce,`click`,e=>{e.preventDefault(),T||Q(!k)}))}T&&(b.setAttribute(`aria-disabled`,`true`),b.setAttribute(`data-disabled`,``)),de&&b.setAttribute(`aria-required`,`true`),fe&&(U=document.createElement(`input`),U.type=`hidden`,U.name=fe,U.value=A??``,m.appendChild(U));let we=()=>{B=ee(x,`select-item`);for(let e of B)e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1,e.dataset.value===A?(g(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(g(e,`selected`,!1),e.removeAttribute(`data-selected`));V=B.filter(e=>!q(e)),H=new Map(V.map((e,t)=>[e,t]));let e=ee(x,`select-group`);for(let t of e){t.setAttribute(`role`,`group`);let e=p(t,`select-label`);if(e){let n=o(e,`select-label`);t.setAttribute(`aria-labelledby`,n)}}},Te=()=>p(x,`select-viewport`)??x,Ee=(e,t,n)=>{let r=0,i=e;for(;i&&i!==x;){r+=i.offsetTop;let e=i.offsetParent;if(!(e instanceof HTMLElement)){r=NaN;break}i=e}return i===x&&Number.isFinite(r)?r:e.getBoundingClientRect().top-t.top+n.scrollTop},De=(e,t,n)=>{let r=M>=0?V[M]:void 0,i=B.find(e=>e.dataset.value===A)??r??V[0],a=e.left,o,s=0,c=e.height;return i?(s=Ee(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-c/2-s):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},Oe=()=>{let t=G.container,n=m.ownerDocument.defaultView??window,r=b.getBoundingClientRect(),i=Te();x.style.minWidth=`${r.width}px`;let a=ne(x),o,s=`bottom`;if(E===`item-aligned`){let e=De(r,a,i);o={x:e.x,y:e.y};let t=r.top+r.height/2,c=O,l=n.innerHeight-a.height-O,u=e=>ve?l<c?c:Math.min(Math.max(e,c),l):e,d=O,f=n.innerWidth-a.width-O;if(o.x=(e=>ve?f<d?d:Math.min(Math.max(e,d),f):e)(o.x),e.alignItem){let n=Math.max(0,i.scrollHeight-i.clientHeight),r=n=>e.itemTopInContent+e.itemHeight/2-(t-n);if(n>0){o.y=u(t-a.height/2);let s=Math.min(Math.max(r(o.y),0),n);i.scrollTop=s,o.y=u(t-(e.itemTopInContent-s+e.itemHeight/2)),s=Math.min(Math.max(r(o.y),0),n),i.scrollTop=s,o.y=u(t-(e.itemTopInContent-s+e.itemHeight/2))}else i.scrollTop=0,o.y=u(e.y)}else i.scrollTop=0,o.y=u(e.y);s=o.y<r.top?`top`:`bottom`}else{let t=e({anchorRect:r,contentRect:a,side:he,align:D,sideOffset:ge,alignOffset:_e,avoidCollisions:ve,collisionPadding:O,allowedSides:_});o={x:t.x,y:t.y},s=t.side}ye?(t.style.position=`fixed`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${o.x}px, ${o.y}px, 0)`):(t.style.position=`absolute`,t.style.top=`0px`,t.style.left=`0px`,t.style.transform=`translate3d(${o.x+n.scrollX}px, ${o.y+n.scrollY}px, 0)`),t.style.willChange=`transform`,t.style.margin=`0`,x.setAttribute(`data-side`,s),x.setAttribute(`data-align`,E===`item-aligned`?`center`:D),t!==x&&(t.setAttribute(`data-side`,s),t.setAttribute(`data-align`,E===`item-aligned`?`center`:D))},J=r({observedElements:[b,x],isActive:()=>k,ancestorScroll:ye,onUpdate:Oe,ignoreScrollTarget:e=>e instanceof Node&&x.contains(e)}),Y=(e,t=!0,n=!0)=>{let r=Te();for(let i=0;i<V.length;i++){let a=V[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&s(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}M=e},X=()=>{for(let e of B)e.removeAttribute(`data-highlighted`);M=-1},ke=e=>{m.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),x.setAttribute(`data-state`,e),e===`open`?(m.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),x.setAttribute(`data-open`,``),m.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),x.removeAttribute(`data-closed`)):(m.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),x.setAttribute(`data-closed`,``),m.removeAttribute(`data-open`),b.removeAttribute(`data-open`),x.removeAttribute(`data-open`))},Ae=()=>{requestAnimationFrame(()=>{j&&document.contains(j)?c(j):b&&document.contains(b)&&c(b),j=null})},Z=i({element:x,onExitComplete:()=>{be||(G.restore(),x.hidden=!0,K?Ae():j=null)}}),je=()=>{if(S)if(A===null)S.textContent=ue,b.setAttribute(`data-placeholder`,``);else{let e=B.find(e=>e.dataset.value===A);S.textContent=e?.dataset.label??e?.textContent?.trim()??A,b.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(k!==e&&!(T&&e)){if(e){let e=R;R=!1,K=!0,j=document.activeElement,k=!0,g(b,`expanded`,!0),G.mount(),x.hidden=!1,ke(`open`),Z.enter(),ye&&!W&&(te(),W=!0),we(),F=!1;let t=V.findIndex(e=>e.dataset.value===A);t>=0?Y(t,!1,!1):X(),J.start(),Oe(),J.update(),requestAnimationFrame(()=>{if(k&&(Oe(),J.update(),e&&(I!==0||L!==0))){let e=document.elementFromPoint(I,L)?.closest?.(`[data-slot="select-item"]`);if(e&&!q(e)&&x.contains(e)){let t=H.get(e);t!==void 0&&Y(t,!1,!1)}}}),x.focus()}else k=!1,R=!1,I=0,L=0,g(b,`expanded`,!1),ke(`closed`),X(),N=``,F=!1,K=!t,W&&=(re(),!1),J.stop(),Z.exit();a(m,`select:open-change`,{open:k}),me?.(k)}},$=(e,t=!1)=>{if(A===e&&!t)return;let n=A;A=e,U&&(U.value=e??``),e===null?m.removeAttribute(`data-value`):m.setAttribute(`data-value`,e);for(let t of B)t.dataset.value===e?(g(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(g(t,`selected`,!1),t.removeAttribute(`data-selected`));je(),!t&&n!==e&&(a(m,`select:change`,{value:e}),pe?.(e))},Me=e=>{if(q(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},Ne=e=>{let t=V.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),F=!0,Y(M===-1?0:Math.min(M+1,t-1));break;case`ArrowUp`:e.preventDefault(),F=!0,Y(M===-1?t-1:Math.max(M-1,0));break;case`Home`:e.preventDefault(),F=!0,Y(0);break;case`End`:e.preventDefault(),F=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),M>=0&&Me(V[M]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Pe(e.key.toLowerCase()))}},Pe=e=>{P&&clearTimeout(P),P=setTimeout(()=>{N=``},500),N+=e;let t=V.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(N));if(t===-1&&N.length===1){let n=M+1;for(let r=0;r<V.length;r++){let i=(n+r)%V.length;if((V[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(F=!0,Y(t))};return g(b,`expanded`,!1),x.hidden=!0,ke(`closed`),we(),$(A,!0),z.push(h(b,`pointerdown`,e=>{I=e.clientX,L=e.clientY,R=!0}),h(b,`click`,()=>{T||Q(!k)}),h(b,`keydown`,e=>{if(!T)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),R=!1,Q(!0);break}})),z.push(h(x,`keydown`,Ne),h(x,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Me(t)}),h(x,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(F&&(F=!1,t&&H.get(t)===M)))if(t&&!q(t)){let e=H.get(t);e!==void 0&&e!==M&&Y(e,!1)}else X()}),h(x,`pointerleave`,()=>{F||X()})),z.push(t({root:m,isOpen:()=>k,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),z.push(h(m,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)})),le&&Q(!0),{get value(){return A},get isOpen(){return k},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{be=!0,P&&clearTimeout(P),J.stop(),Z.cleanup(),G.cleanup(),W&&=(re(),!1),z.forEach(e=>e()),z.length=0,U&&U.parentNode&&U.parentNode.removeChild(U),y.delete(m)}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of m(e,`select`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v as createSelect};
1
+ import{computeFloatingPosition as e,computeFloatingTransformOrigin as t,createDismissLayer as n,createPortalLifecycle as r,createPositionSync as i,createPresenceLifecycle as a,emit as o,ensureId as s,ensureItemVisibleInContainer as c,focusElement as l,getDataBool as u,getDataEnum as d,getDataNumber as f,getDataString as p,getPart as m,getParts as ee,getRoots as h,lockScroll as te,measurePopupContentRect as ne,on as g,setAria as _,unlockScroll as re}from"@data-slot/core";const ie=[`top`,`bottom`],ae=[`start`,`center`,`end`],oe=[`item-aligned`,`popper`];function v(h,v={}){let b=m(h,`select-trigger`),x=m(h,`select-content`),S=m(h,`select-value`),C=m(h,`select-positioner`),w=C&&x&&C.contains(x)?C:null,T=m(h,`select-portal`),se=T&&w&&T.contains(w)?T:null;if(!b||!x)throw Error(`Select requires trigger and content slots`);let ce=v.defaultValue??p(h,`defaultValue`)??null,le=v.defaultOpen??u(h,`defaultOpen`)??!1,ue=v.placeholder??p(h,`placeholder`)??(S?p(S,`placeholder`):void 0)??``,E=v.disabled??u(h,`disabled`)??!1,de=v.required??u(h,`required`)??!1,fe=v.name??p(h,`name`)??null,pe=v.onValueChange,me=v.onOpenChange,he=(e,t)=>d(x,e,t)??(w?d(w,e,t):void 0)??d(h,e,t),ge=e=>f(x,e)??(w?f(w,e):void 0)??f(h,e),_e=e=>u(x,e)??(w?u(w,e):void 0)??u(h,e),ve=v.position??he(`position`,oe)??`item-aligned`,ye=v.side??he(`side`,ie)??`bottom`,be=v.align??he(`align`,ae)??`start`,xe=v.sideOffset??ge(`sideOffset`)??4,Se=v.alignOffset??ge(`alignOffset`)??0,D=v.avoidCollisions??_e(`avoidCollisions`)??!0,O=v.collisionPadding??ge(`collisionPadding`)??8,k=v.lockScroll??u(h,`lockScroll`)??!0,A=!1,j=ce,M=null,N=-1,P=``,F=null,I=!1,L=0,R=0,z=!1,B=[],V=[],H=[],U=new Map,W=null,G=!1,K=r({content:x,root:h,wrapperSlot:w?void 0:`select-positioner`,container:w??void 0,mountTarget:w?se??w:void 0}),Ce=!1,we=!0,q=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,Te=s(b,`select-trigger`),Ee=s(x,`select-content`);b.setAttribute(`role`,`combobox`),b.setAttribute(`aria-haspopup`,`listbox`),b.setAttribute(`aria-controls`,Ee),b.hasAttribute(`type`)||b.setAttribute(`type`,`button`),x.setAttribute(`role`,`listbox`),x.setAttribute(`aria-labelledby`,Te),x.tabIndex=-1;let De=document.querySelector(`label[for="${CSS.escape(Te)}"]`);if(De){let e=s(De,`select-label`),t=b.getAttribute(`aria-labelledby`);b.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),B.push(g(De,`click`,e=>{e.preventDefault(),E||Q(!A)}))}E&&(b.setAttribute(`aria-disabled`,`true`),b.setAttribute(`data-disabled`,``)),de&&b.setAttribute(`aria-required`,`true`),fe&&(W=document.createElement(`input`),W.type=`hidden`,W.name=fe,W.value=j??``,h.appendChild(W));let Oe=()=>{V=ee(x,`select-item`);for(let e of V)e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1,e.dataset.value===j?(_(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(_(e,`selected`,!1),e.removeAttribute(`data-selected`));H=V.filter(e=>!q(e)),U=new Map(H.map((e,t)=>[e,t]));let e=ee(x,`select-group`);for(let t of e){t.setAttribute(`role`,`group`);let e=m(t,`select-label`);if(e){let n=s(e,`select-label`);t.setAttribute(`aria-labelledby`,n)}}},ke=()=>m(x,`select-viewport`)??x,Ae=(e,t,n)=>{let r=0,i=e;for(;i&&i!==x;){r+=i.offsetTop;let e=i.offsetParent;if(!(e instanceof HTMLElement)){r=NaN;break}i=e}return i===x&&Number.isFinite(r)?r:e.getBoundingClientRect().top-t.top+n.scrollTop},je=(e,t,n)=>{let r=N>=0?H[N]:void 0,i=V.find(e=>e.dataset.value===j)??r??H[0],a=e.left,o,s=0,c=e.height;return i?(s=Ae(i,t,n),c=i.getBoundingClientRect().height||i.offsetHeight||e.height,o=e.top+e.height/2-c/2-s):o=e.top,{x:a,y:o,alignItem:i,itemTopInContent:s,itemHeight:c}},Me=()=>{let n=K.container,r=h.ownerDocument.defaultView??window,i=b.getBoundingClientRect(),a=ke();x.style.minWidth=`${i.width}px`;let o=ne(x),s,c=`bottom`;if(ve===`item-aligned`){let e=je(i,o,a);s={x:e.x,y:e.y};let t=i.top+i.height/2,n=O,l=r.innerHeight-o.height-O,u=e=>D?l<n?n:Math.min(Math.max(e,n),l):e,d=O,f=r.innerWidth-o.width-O;if(s.x=(e=>D?f<d?d:Math.min(Math.max(e,d),f):e)(s.x),e.alignItem){let n=Math.max(0,a.scrollHeight-a.clientHeight),r=n=>e.itemTopInContent+e.itemHeight/2-(t-n);if(n>0){s.y=u(t-o.height/2);let i=Math.min(Math.max(r(s.y),0),n);a.scrollTop=i,s.y=u(t-(e.itemTopInContent-i+e.itemHeight/2)),i=Math.min(Math.max(r(s.y),0),n),a.scrollTop=i,s.y=u(t-(e.itemTopInContent-i+e.itemHeight/2))}else a.scrollTop=0,s.y=u(e.y)}else a.scrollTop=0,s.y=u(e.y);c=s.y<i.top?`top`:`bottom`}else{let t=e({anchorRect:i,contentRect:o,side:ye,align:be,sideOffset:xe,alignOffset:Se,avoidCollisions:D,collisionPadding:O,allowedSides:ie});s={x:t.x,y:t.y},c=t.side}let l=ve===`item-aligned`?`center`:be,u=t({side:c,align:l,anchorRect:i,popupX:s.x,popupY:s.y});k?(n.style.position=`fixed`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${s.x}px, ${s.y}px, 0)`):(n.style.position=`absolute`,n.style.top=`0px`,n.style.left=`0px`,n.style.transform=`translate3d(${s.x+r.scrollX}px, ${s.y+r.scrollY}px, 0)`),n.style.setProperty(`--transform-origin`,u),n.style.willChange=`transform`,n.style.margin=`0`,x.setAttribute(`data-side`,c),x.setAttribute(`data-align`,l),n!==x&&(n.setAttribute(`data-side`,c),n.setAttribute(`data-align`,l))},J=i({observedElements:[b,x],isActive:()=>A,ancestorScroll:k,onUpdate:Me,ignoreScrollTarget:e=>e instanceof Node&&x.contains(e)}),Y=(e,t=!0,n=!0)=>{let r=ke();for(let i=0;i<H.length;i++){let a=H[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&c(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}N=e},X=()=>{for(let e of V)e.removeAttribute(`data-highlighted`);N=-1},Z=e=>{h.setAttribute(`data-state`,e),b.setAttribute(`data-state`,e),x.setAttribute(`data-state`,e),e===`open`?(h.setAttribute(`data-open`,``),b.setAttribute(`data-open`,``),x.setAttribute(`data-open`,``),h.removeAttribute(`data-closed`),b.removeAttribute(`data-closed`),x.removeAttribute(`data-closed`)):(h.setAttribute(`data-closed`,``),b.setAttribute(`data-closed`,``),x.setAttribute(`data-closed`,``),h.removeAttribute(`data-open`),b.removeAttribute(`data-open`),x.removeAttribute(`data-open`))},Ne=()=>{requestAnimationFrame(()=>{M&&document.contains(M)?l(M):b&&document.contains(b)&&l(b),M=null})},Pe=a({element:x,onExitComplete:()=>{Ce||(K.restore(),x.hidden=!0,we?Ne():M=null)}}),Fe=()=>{if(S)if(j===null)S.textContent=ue,b.setAttribute(`data-placeholder`,``);else{let e=V.find(e=>e.dataset.value===j);S.textContent=e?.dataset.label??e?.textContent?.trim()??j,b.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(A!==e&&!(E&&e)){if(e){let e=z;z=!1,we=!0,M=document.activeElement,A=!0,_(b,`expanded`,!0),K.mount(),x.hidden=!1,Z(`open`),Pe.enter(),k&&!G&&(te(),G=!0),Oe(),I=!1;let t=H.findIndex(e=>e.dataset.value===j);t>=0?Y(t,!1,!1):X(),J.start(),Me(),J.update(),requestAnimationFrame(()=>{if(A&&(Me(),J.update(),e&&(L!==0||R!==0))){let e=document.elementFromPoint(L,R)?.closest?.(`[data-slot="select-item"]`);if(e&&!q(e)&&x.contains(e)){let t=U.get(e);t!==void 0&&Y(t,!1,!1)}}}),x.focus()}else A=!1,z=!1,L=0,R=0,_(b,`expanded`,!1),Z(`closed`),X(),P=``,I=!1,we=!t,G&&=(re(),!1),J.stop(),Pe.exit();o(h,`select:open-change`,{open:A}),me?.(A)}},$=(e,t=!1)=>{if(j===e&&!t)return;let n=j;j=e,W&&(W.value=e??``),e===null?h.removeAttribute(`data-value`):h.setAttribute(`data-value`,e);for(let t of V)t.dataset.value===e?(_(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(_(t,`selected`,!1),t.removeAttribute(`data-selected`));Fe(),!t&&n!==e&&(o(h,`select:change`,{value:e}),pe?.(e))},Ie=e=>{if(q(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},Le=e=>{let t=H.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),I=!0,Y(N===-1?0:Math.min(N+1,t-1));break;case`ArrowUp`:e.preventDefault(),I=!0,Y(N===-1?t-1:Math.max(N-1,0));break;case`Home`:e.preventDefault(),I=!0,Y(0);break;case`End`:e.preventDefault(),I=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),N>=0&&Ie(H[N]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Re(e.key.toLowerCase()))}},Re=e=>{F&&clearTimeout(F),F=setTimeout(()=>{P=``},500),P+=e;let t=H.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(P));if(t===-1&&P.length===1){let n=N+1;for(let r=0;r<H.length;r++){let i=(n+r)%H.length;if((H[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(I=!0,Y(t))};return _(b,`expanded`,!1),x.hidden=!0,Z(`closed`),Oe(),$(j,!0),B.push(g(b,`pointerdown`,e=>{L=e.clientX,R=e.clientY,z=!0}),g(b,`click`,()=>{E||Q(!A)}),g(b,`keydown`,e=>{if(!E)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),z=!1,Q(!0);break}})),B.push(g(x,`keydown`,Le),g(x,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Ie(t)}),g(x,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(I&&(I=!1,t&&U.get(t)===N)))if(t&&!q(t)){let e=U.get(t);e!==void 0&&e!==N&&Y(e,!1)}else X()}),g(x,`pointerleave`,()=>{I||X()})),B.push(n({root:h,isOpen:()=>A,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),B.push(g(h,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)})),le&&Q(!0),{get value(){return j},get isOpen(){return A},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{Ce=!0,F&&clearTimeout(F),J.stop(),Pe.cleanup(),K.cleanup(),G&&=(re(),!1),B.forEach(e=>e()),B.length=0,W&&W.parentNode&&W.parentNode.removeChild(W),y.delete(h)}}}const y=new WeakSet;function b(e=document){let t=[];for(let n of h(e,`select`))y.has(n)||(y.add(n),t.push(v(n)));return t}export{b as create,v as createSelect};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-slot/select",
3
- "version": "0.2.91",
3
+ "version": "0.2.93",
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.91"
43
+ "@data-slot/core": "0.2.93"
44
44
  }
45
45
  }