@data-slot/select 0.2.120 → 0.2.121
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 +2 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -128,6 +128,7 @@ Placement attributes (`position`, `side`, `align`, `sideOffset`, `alignOffset`,
|
|
|
128
128
|
| `position` | `data-position` | `"item-aligned" \| "popper"` | `"item-aligned"` | Positioning mode (see below) |
|
|
129
129
|
| `avoidCollisions` | `data-avoid-collisions` | `boolean` | `true` | Adjust to stay in viewport |
|
|
130
130
|
| `collisionPadding` | `data-collision-padding` | `number` | `8` | Viewport edge padding (px) |
|
|
131
|
+
| `highlightItemOnHover` | `data-highlight-item-on-hover` | `boolean` | `true` | Highlight and focus items on pointer hover |
|
|
131
132
|
|
|
132
133
|
### Positioning Modes
|
|
133
134
|
|
|
@@ -211,7 +212,7 @@ The component sets these attributes to reflect state:
|
|
|
211
212
|
| `data-align-trigger` | content | `"true" \| "false"` | Whether the current mode aligns the selected item to the trigger |
|
|
212
213
|
| `data-value` | root | `string` | Current selected value |
|
|
213
214
|
| `data-selected` | item | (presence) | Selected item |
|
|
214
|
-
| `data-highlighted` | item | (presence) |
|
|
215
|
+
| `data-highlighted` | item | (presence) | Focused/highlighted item |
|
|
215
216
|
| `data-placeholder` | trigger | (presence) | When showing placeholder |
|
|
216
217
|
| `data-label` | item | `string` | Display text for trigger (optional, falls back to textContent) |
|
|
217
218
|
|
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`),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`,``),s instanceof HTMLButtonElement&&(s.disabled=!0)),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`),fe=()=>G()??c,pe=()=>{c.setAttribute(`data-position`,_),c.setAttribute(`data-align-trigger`,_===`item-aligned`?`true`:`false`);let e=G();e&&e.setAttribute(`data-position`,_)},me=(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},he=(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=me(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=fe();c.style.minWidth=`${a.width}px`;let l=(0,e.measurePopupContentRect)(c),u,d=`bottom`;if(_===`item-aligned`){let e=he(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`,pe(),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=fe();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`))},ge=()=>{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?ge():w=null)}}),_e=()=>{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`));_e(),!n&&r!==t&&((0,e.emit)(i,`select:change`,{value:t}),ae?.(t))},ve=e=>{if(V(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},ye=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&&ve(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(),be(e.key.toLowerCase()))}},be=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,pe(),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`,ye),(0,e.on)(c,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&ve(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;
|
|
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=o.highlightItemOnHover??(0,e.getDataBool)(i,`highlightItemOnHover`)??!0,C=!1,w=ee,T=null,E=-1,D=``,O=null,k=!1,A=0,j=0,M=``,N=!1,P=[],F=[],I=[],L=new Map,R=null,z=!1,B=(0,e.createPortalLifecycle)({content:c,root:i,wrapperSlot:d?void 0:`select-positioner`,container:d??void 0,mountTarget:d?p??d:void 0}),V=!1,H=!0,U=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,W=e=>e.pointerType!==`touch`,de=(0,e.ensureId)(s,`select-trigger`),fe=(0,e.ensureId)(c,`select-content`);s.setAttribute(`role`,`combobox`),s.setAttribute(`aria-haspopup`,`listbox`),s.setAttribute(`aria-controls`,fe),s.hasAttribute(`type`)||s.setAttribute(`type`,`button`),c.setAttribute(`role`,`listbox`),c.setAttribute(`aria-labelledby`,de),c.tabIndex=-1;let G=document.querySelector(`label[for="${CSS.escape(de)}"]`);if(G){let t=(0,e.ensureId)(G,`select-label`),n=s.getAttribute(`aria-labelledby`);s.setAttribute(`aria-labelledby`,n?`${n} ${t}`:t),P.push((0,e.on)(G,`click`,e=>{e.preventDefault(),m||Q(!C)}))}m&&(s.setAttribute(`aria-disabled`,`true`),s.setAttribute(`data-disabled`,``),s instanceof HTMLButtonElement&&(s.disabled=!0)),re&&s.setAttribute(`aria-required`,`true`),ie&&(R=document.createElement(`input`),R.type=`hidden`,R.name=ie,R.value=w??``,i.appendChild(R));let pe=()=>{F=(0,e.getParts)(c,`select-item`);for(let t of F)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===w?((0,e.setAria)(t,`selected`,!0),t.setAttribute(`data-selected`,``)):((0,e.setAria)(t,`selected`,!1),t.removeAttribute(`data-selected`));I=F.filter(e=>!U(e)),L=new Map(I.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)}}},me=()=>(0,e.getPart)(c,`select-viewport`),he=()=>me()??c,ge=()=>{c.setAttribute(`data-position`,_),c.setAttribute(`data-align-trigger`,_===`item-aligned`?`true`:`false`);let e=me();e&&e.setAttribute(`data-position`,_)},_e=(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},ve=(e,t,n)=>{let r=E>=0?I[E]:void 0,i=F.find(e=>e.dataset.value===w)??r??I[0],a=e.left,o,s=0,c=e.height;return i?(s=_e(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=B.container,r=i.ownerDocument.defaultView??window,a=s.getBoundingClientRect(),o=he();c.style.minWidth=`${a.width}px`;let l=(0,e.measurePopupContentRect)(c),u,d=`bottom`;if(_===`item-aligned`){let e=ve(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`,ge(),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:()=>C,ancestorScroll:x,onUpdate:K,ignoreScrollTarget:e=>e instanceof Node&&c.contains(e)}),J=(t,n=!0,r=!0)=>{let i=he();for(let a=0;a<I.length;a++){let o=I[a];a===t?(o.setAttribute(`data-highlighted`,``),r&&(0,e.ensureItemVisibleInContainer)(o,i),n&&o.focus()):o.removeAttribute(`data-highlighted`)}E=t},Y=()=>{for(let e of F)e.removeAttribute(`data-highlighted`);E=-1},ye=()=>{Y(),(0,e.focusElement)(c)},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`))},be=()=>{requestAnimationFrame(()=>{T&&document.contains(T)?(0,e.focusElement)(T):s&&document.contains(s)&&(0,e.focusElement)(s),T=null})},Z=(0,e.createPresenceLifecycle)({element:c,onExitComplete:()=>{V||(B.restore(),c.hidden=!0,H?be():T=null)}}),xe=()=>{if(l)if(w===null)l.textContent=ne,s.setAttribute(`data-placeholder`,``);else{let e=F.find(e=>e.dataset.value===w);l.textContent=e?.dataset.label??e?.textContent?.trim()??w,s.removeAttribute(`data-placeholder`)}},Q=(t,n=!1)=>{if(C!==t&&!(m&&t)){if(t){let t=N;N=!1,H=!0,T=document.activeElement,C=!0,(0,e.setAria)(s,`expanded`,!0),B.mount(),c.hidden=!1,X(`open`),Z.enter(),x&&!z&&((0,e.lockScroll)(),z=!0),pe(),k=!1;let n=I.findIndex(e=>e.dataset.value===w);n>=0?J(n,!1,!1):Y(),q.start(),K(),q.update(),requestAnimationFrame(()=>{if(C&&(K(),q.update(),t&&S&&M!==`touch`&&(A!==0||j!==0))){let e=document.elementFromPoint(A,j)?.closest?.(`[data-slot="select-item"]`);if(e&&!U(e)&&c.contains(e)){let t=L.get(e);t!==void 0&&J(t,!0,!1)}}}),c.focus()}else C=!1,N=!1,A=0,j=0,M=``,(0,e.setAria)(s,`expanded`,!1),X(`closed`),Y(),D=``,k=!1,H=!n,z&&=((0,e.unlockScroll)(),!1),q.stop(),Z.exit();(0,e.emit)(i,`select:open-change`,{open:C}),oe?.(C)}},$=(t,n=!1)=>{if(w===t&&!n)return;let r=w;w=t,R&&(R.value=t??``),t===null?i.removeAttribute(`data-value`):i.setAttribute(`data-value`,t);for(let n of F)n.dataset.value===t?((0,e.setAria)(n,`selected`,!0),n.setAttribute(`data-selected`,``)):((0,e.setAria)(n,`selected`,!1),n.removeAttribute(`data-selected`));xe(),!n&&r!==t&&((0,e.emit)(i,`select:change`,{value:t}),ae?.(t))},Se=e=>{if(U(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},Ce=e=>{let t=I.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),k=!0,J(E===-1?0:Math.min(E+1,t-1));break;case`ArrowUp`:e.preventDefault(),k=!0,J(E===-1?t-1:Math.max(E-1,0));break;case`Home`:e.preventDefault(),k=!0,J(0);break;case`End`:e.preventDefault(),k=!0,J(t-1);break;case`Enter`:case` `:e.preventDefault(),E>=0&&Se(I[E]);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(),we(e.key.toLowerCase()))}},we=e=>{O&&clearTimeout(O),O=setTimeout(()=>{D=``},500),D+=e;let t=I.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(D));if(t===-1&&D.length===1){let n=E+1;for(let r=0;r<I.length;r++){let i=(n+r)%I.length;if((I[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(k=!0,J(t))};return(0,e.setAria)(s,`expanded`,!1),c.hidden=!0,ge(),X(`closed`),pe(),$(w,!0),P.push((0,e.on)(s,`pointerdown`,e=>{A=e.clientX,j=e.clientY,M=e.pointerType,N=!0}),(0,e.on)(s,`click`,()=>{m||Q(!C)}),(0,e.on)(s,`keydown`,e=>{if(!m)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),N=!1,Q(!0);break}})),P.push((0,e.on)(c,`keydown`,Ce),(0,e.on)(c,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Se(t)}),(0,e.on)(c,`pointermove`,e=>{if(!S||!W(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(k&&(k=!1,t&&L.get(t)===E)))if(t&&!U(t)){let e=L.get(t);e!==void 0&&e!==E&&J(e,!0)}else ye()}),(0,e.on)(c,`pointerleave`,e=>{!S||!W(e)||k||ye()})),P.push((0,e.createDismissLayer)({root:i,isOpen:()=>C,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),P.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 w},get isOpen(){return C},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{V=!0,O&&clearTimeout(O),q.stop(),Z.cleanup(),B.cleanup(),z&&=((0,e.unlockScroll)(),!1),P.forEach(e=>e()),P.length=0,R&&R.parentNode&&R.parentNode.removeChild(R),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.d.cts
CHANGED
|
@@ -66,6 +66,11 @@ interface SelectOptions {
|
|
|
66
66
|
* @default true
|
|
67
67
|
*/
|
|
68
68
|
lockScroll?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Whether moving the pointer over items should highlight and focus them.
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
highlightItemOnHover?: boolean;
|
|
69
74
|
}
|
|
70
75
|
interface SelectController {
|
|
71
76
|
/** Current selected value */
|
package/dist/index.d.ts
CHANGED
|
@@ -66,6 +66,11 @@ interface SelectOptions {
|
|
|
66
66
|
* @default true
|
|
67
67
|
*/
|
|
68
68
|
lockScroll?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Whether moving the pointer over items should highlight and focus them.
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
highlightItemOnHover?: boolean;
|
|
69
74
|
}
|
|
70
75
|
interface SelectController {
|
|
71
76
|
/** Current selected value */
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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,D=(e,t)=>d(x,e,t)??(w?d(w,e,t):void 0)??d(h,e,t),O=e=>f(x,e)??(w?f(w,e):void 0)??f(h,e),he=e=>u(x,e)??(w?u(w,e):void 0)??u(h,e),k=v.position??D(`position`,oe)??`item-aligned`,ge=v.side??D(`side`,ie)??`bottom`,_e=v.align??D(`align`,ae)??`start`,ve=v.sideOffset??O(`sideOffset`)??4,ye=v.alignOffset??O(`alignOffset`)??0,be=v.avoidCollisions??he(`avoidCollisions`)??!0,A=v.collisionPadding??O(`collisionPadding`)??8,xe=v.lockScroll??u(h,`lockScroll`)??!0,j=!1,M=ce,N=null,P=-1,F=``,I=null,L=!1,R=0,z=0,B=!1,V=[],H=[],U=[],W=new Map,G=null,K=!1,q=r({content:x,root:h,wrapperSlot:w?void 0:`select-positioner`,container:w??void 0,mountTarget:w?se??w:void 0}),Se=!1,Ce=!0,J=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,we=s(b,`select-trigger`),Te=s(x,`select-content`);b.setAttribute(`role`,`combobox`),b.setAttribute(`aria-haspopup`,`listbox`),b.setAttribute(`aria-controls`,Te),b.hasAttribute(`type`)||b.setAttribute(`type`,`button`),x.setAttribute(`role`,`listbox`),x.setAttribute(`aria-labelledby`,we),x.tabIndex=-1;let Ee=document.querySelector(`label[for="${CSS.escape(we)}"]`);if(Ee){let e=s(Ee,`select-label`),t=b.getAttribute(`aria-labelledby`);b.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),V.push(g(Ee,`click`,e=>{e.preventDefault(),E||Q(!j)}))}E&&(b.setAttribute(`aria-disabled`,`true`),b.setAttribute(`data-disabled`,``),b instanceof HTMLButtonElement&&(b.disabled=!0)),de&&b.setAttribute(`aria-required`,`true`),fe&&(G=document.createElement(`input`),G.type=`hidden`,G.name=fe,G.value=M??``,h.appendChild(G));let De=()=>{H=ee(x,`select-item`);for(let e of H)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===M?(_(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(_(e,`selected`,!1),e.removeAttribute(`data-selected`));U=H.filter(e=>!J(e)),W=new Map(U.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)}}},Oe=()=>m(x,`select-viewport`),ke=()=>Oe()??x,Ae=()=>{x.setAttribute(`data-position`,k),x.setAttribute(`data-align-trigger`,k===`item-aligned`?`true`:`false`);let e=Oe();e&&e.setAttribute(`data-position`,k)},je=(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},Me=(e,t,n)=>{let r=P>=0?U[P]:void 0,i=H.find(e=>e.dataset.value===M)??r??U[0],a=e.left,o,s=0,c=e.height;return i?(s=je(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}},Ne=()=>{let n=q.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(k===`item-aligned`){let e=Me(i,o,a);s={x:e.x,y:e.y};let t=i.top+i.height/2,n=A,l=r.innerHeight-o.height-A,u=e=>be?l<n?n:Math.min(Math.max(e,n),l):e,d=A,f=r.innerWidth-o.width-A;if(s.x=(e=>be?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:ge,align:_e,sideOffset:ve,alignOffset:ye,avoidCollisions:be,collisionPadding:A,allowedSides:ie});s={x:t.x,y:t.y},c=t.side}let l=k===`item-aligned`?`center`:_e,u=t({side:c,align:l,anchorRect:i,popupX:s.x,popupY:s.y});xe?(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`,Ae(),x.setAttribute(`data-side`,c),x.setAttribute(`data-align`,l),n!==x&&(n.setAttribute(`data-side`,c),n.setAttribute(`data-align`,l))},Y=i({observedElements:[b,x],isActive:()=>j,ancestorScroll:xe,onUpdate:Ne,ignoreScrollTarget:e=>e instanceof Node&&x.contains(e)}),X=(e,t=!0,n=!0)=>{let r=ke();for(let i=0;i<U.length;i++){let a=U[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&c(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}P=e},Z=()=>{for(let e of H)e.removeAttribute(`data-highlighted`);P=-1},Pe=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`))},Fe=()=>{requestAnimationFrame(()=>{N&&document.contains(N)?l(N):b&&document.contains(b)&&l(b),N=null})},Ie=a({element:x,onExitComplete:()=>{Se||(q.restore(),x.hidden=!0,Ce?Fe():N=null)}}),Le=()=>{if(S)if(M===null)S.textContent=ue,b.setAttribute(`data-placeholder`,``);else{let e=H.find(e=>e.dataset.value===M);S.textContent=e?.dataset.label??e?.textContent?.trim()??M,b.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(j!==e&&!(E&&e)){if(e){let e=B;B=!1,Ce=!0,N=document.activeElement,j=!0,_(b,`expanded`,!0),q.mount(),x.hidden=!1,Pe(`open`),Ie.enter(),xe&&!K&&(te(),K=!0),De(),L=!1;let t=U.findIndex(e=>e.dataset.value===M);t>=0?X(t,!1,!1):Z(),Y.start(),Ne(),Y.update(),requestAnimationFrame(()=>{if(j&&(Ne(),Y.update(),e&&(R!==0||z!==0))){let e=document.elementFromPoint(R,z)?.closest?.(`[data-slot="select-item"]`);if(e&&!J(e)&&x.contains(e)){let t=W.get(e);t!==void 0&&X(t,!1,!1)}}}),x.focus()}else j=!1,B=!1,R=0,z=0,_(b,`expanded`,!1),Pe(`closed`),Z(),F=``,L=!1,Ce=!t,K&&=(re(),!1),Y.stop(),Ie.exit();o(h,`select:open-change`,{open:j}),me?.(j)}},$=(e,t=!1)=>{if(M===e&&!t)return;let n=M;M=e,G&&(G.value=e??``),e===null?h.removeAttribute(`data-value`):h.setAttribute(`data-value`,e);for(let t of H)t.dataset.value===e?(_(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(_(t,`selected`,!1),t.removeAttribute(`data-selected`));Le(),!t&&n!==e&&(o(h,`select:change`,{value:e}),pe?.(e))},Re=e=>{if(J(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},ze=e=>{let t=U.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),L=!0,X(P===-1?0:Math.min(P+1,t-1));break;case`ArrowUp`:e.preventDefault(),L=!0,X(P===-1?t-1:Math.max(P-1,0));break;case`Home`:e.preventDefault(),L=!0,X(0);break;case`End`:e.preventDefault(),L=!0,X(t-1);break;case`Enter`:case` `:e.preventDefault(),P>=0&&Re(U[P]);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(),Be(e.key.toLowerCase()))}},Be=e=>{I&&clearTimeout(I),I=setTimeout(()=>{F=``},500),F+=e;let t=U.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(F));if(t===-1&&F.length===1){let n=P+1;for(let r=0;r<U.length;r++){let i=(n+r)%U.length;if((U[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(L=!0,X(t))};return _(b,`expanded`,!1),x.hidden=!0,Ae(),Pe(`closed`),De(),$(M,!0),V.push(g(b,`pointerdown`,e=>{R=e.clientX,z=e.clientY,B=!0}),g(b,`click`,()=>{E||Q(!j)}),g(b,`keydown`,e=>{if(!E)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),B=!1,Q(!0);break}})),V.push(g(x,`keydown`,ze),g(x,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&Re(t)}),g(x,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(L&&(L=!1,t&&W.get(t)===P)))if(t&&!J(t)){let e=W.get(t);e!==void 0&&e!==P&&X(e,!1)}else Z()}),g(x,`pointerleave`,()=>{L||Z()})),V.push(n({root:h,isOpen:()=>j,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),V.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 M},get isOpen(){return j},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{Se=!0,I&&clearTimeout(I),Y.stop(),Ie.cleanup(),q.cleanup(),K&&=(re(),!1),V.forEach(e=>e()),V.length=0,G&&G.parentNode&&G.parentNode.removeChild(G),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};
|
|
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),D=v.position??he(`position`,oe)??`item-aligned`,ve=v.side??he(`side`,ie)??`bottom`,ye=v.align??he(`align`,ae)??`start`,be=v.sideOffset??ge(`sideOffset`)??4,xe=v.alignOffset??ge(`alignOffset`)??0,O=v.avoidCollisions??_e(`avoidCollisions`)??!0,k=v.collisionPadding??ge(`collisionPadding`)??8,A=v.lockScroll??u(h,`lockScroll`)??!0,j=v.highlightItemOnHover??u(h,`highlightItemOnHover`)??!0,M=!1,N=ce,P=null,F=-1,I=``,L=null,R=!1,z=0,B=0,Se=``,V=!1,H=[],U=[],W=[],G=new Map,K=null,q=!1,J=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,Y=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,Te=e=>e.pointerType!==`touch`,Ee=s(b,`select-trigger`),De=s(x,`select-content`);b.setAttribute(`role`,`combobox`),b.setAttribute(`aria-haspopup`,`listbox`),b.setAttribute(`aria-controls`,De),b.hasAttribute(`type`)||b.setAttribute(`type`,`button`),x.setAttribute(`role`,`listbox`),x.setAttribute(`aria-labelledby`,Ee),x.tabIndex=-1;let Oe=document.querySelector(`label[for="${CSS.escape(Ee)}"]`);if(Oe){let e=s(Oe,`select-label`),t=b.getAttribute(`aria-labelledby`);b.setAttribute(`aria-labelledby`,t?`${t} ${e}`:e),H.push(g(Oe,`click`,e=>{e.preventDefault(),E||Q(!M)}))}E&&(b.setAttribute(`aria-disabled`,`true`),b.setAttribute(`data-disabled`,``),b instanceof HTMLButtonElement&&(b.disabled=!0)),de&&b.setAttribute(`aria-required`,`true`),fe&&(K=document.createElement(`input`),K.type=`hidden`,K.name=fe,K.value=N??``,h.appendChild(K));let ke=()=>{U=ee(x,`select-item`);for(let e of U)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===N?(_(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(_(e,`selected`,!1),e.removeAttribute(`data-selected`));W=U.filter(e=>!Y(e)),G=new Map(W.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)}}},Ae=()=>m(x,`select-viewport`),je=()=>Ae()??x,Me=()=>{x.setAttribute(`data-position`,D),x.setAttribute(`data-align-trigger`,D===`item-aligned`?`true`:`false`);let e=Ae();e&&e.setAttribute(`data-position`,D)},Ne=(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},Pe=(e,t,n)=>{let r=F>=0?W[F]:void 0,i=U.find(e=>e.dataset.value===N)??r??W[0],a=e.left,o,s=0,c=e.height;return i?(s=Ne(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}},Fe=()=>{let n=J.container,r=h.ownerDocument.defaultView??window,i=b.getBoundingClientRect(),a=je();x.style.minWidth=`${i.width}px`;let o=ne(x),s,c=`bottom`;if(D===`item-aligned`){let e=Pe(i,o,a);s={x:e.x,y:e.y};let t=i.top+i.height/2,n=k,l=r.innerHeight-o.height-k,u=e=>O?l<n?n:Math.min(Math.max(e,n),l):e,d=k,f=r.innerWidth-o.width-k;if(s.x=(e=>O?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:ve,align:ye,sideOffset:be,alignOffset:xe,avoidCollisions:O,collisionPadding:k,allowedSides:ie});s={x:t.x,y:t.y},c=t.side}let l=D===`item-aligned`?`center`:ye,u=t({side:c,align:l,anchorRect:i,popupX:s.x,popupY:s.y});A?(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`,Me(),x.setAttribute(`data-side`,c),x.setAttribute(`data-align`,l),n!==x&&(n.setAttribute(`data-side`,c),n.setAttribute(`data-align`,l))},X=i({observedElements:[b,x],isActive:()=>M,ancestorScroll:A,onUpdate:Fe,ignoreScrollTarget:e=>e instanceof Node&&x.contains(e)}),Z=(e,t=!0,n=!0)=>{let r=je();for(let i=0;i<W.length;i++){let a=W[i];i===e?(a.setAttribute(`data-highlighted`,``),n&&c(a,r),t&&a.focus()):a.removeAttribute(`data-highlighted`)}F=e},Ie=()=>{for(let e of U)e.removeAttribute(`data-highlighted`);F=-1},Le=()=>{Ie(),l(x)},Re=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`))},ze=()=>{requestAnimationFrame(()=>{P&&document.contains(P)?l(P):b&&document.contains(b)&&l(b),P=null})},Be=a({element:x,onExitComplete:()=>{Ce||(J.restore(),x.hidden=!0,we?ze():P=null)}}),Ve=()=>{if(S)if(N===null)S.textContent=ue,b.setAttribute(`data-placeholder`,``);else{let e=U.find(e=>e.dataset.value===N);S.textContent=e?.dataset.label??e?.textContent?.trim()??N,b.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(M!==e&&!(E&&e)){if(e){let e=V;V=!1,we=!0,P=document.activeElement,M=!0,_(b,`expanded`,!0),J.mount(),x.hidden=!1,Re(`open`),Be.enter(),A&&!q&&(te(),q=!0),ke(),R=!1;let t=W.findIndex(e=>e.dataset.value===N);t>=0?Z(t,!1,!1):Ie(),X.start(),Fe(),X.update(),requestAnimationFrame(()=>{if(M&&(Fe(),X.update(),e&&j&&Se!==`touch`&&(z!==0||B!==0))){let e=document.elementFromPoint(z,B)?.closest?.(`[data-slot="select-item"]`);if(e&&!Y(e)&&x.contains(e)){let t=G.get(e);t!==void 0&&Z(t,!0,!1)}}}),x.focus()}else M=!1,V=!1,z=0,B=0,Se=``,_(b,`expanded`,!1),Re(`closed`),Ie(),I=``,R=!1,we=!t,q&&=(re(),!1),X.stop(),Be.exit();o(h,`select:open-change`,{open:M}),me?.(M)}},$=(e,t=!1)=>{if(N===e&&!t)return;let n=N;N=e,K&&(K.value=e??``),e===null?h.removeAttribute(`data-value`):h.setAttribute(`data-value`,e);for(let t of U)t.dataset.value===e?(_(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(_(t,`selected`,!1),t.removeAttribute(`data-selected`));Ve(),!t&&n!==e&&(o(h,`select:change`,{value:e}),pe?.(e))},He=e=>{if(Y(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},Ue=e=>{let t=W.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),R=!0,Z(F===-1?0:Math.min(F+1,t-1));break;case`ArrowUp`:e.preventDefault(),R=!0,Z(F===-1?t-1:Math.max(F-1,0));break;case`Home`:e.preventDefault(),R=!0,Z(0);break;case`End`:e.preventDefault(),R=!0,Z(t-1);break;case`Enter`:case` `:e.preventDefault(),F>=0&&He(W[F]);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(),We(e.key.toLowerCase()))}},We=e=>{L&&clearTimeout(L),L=setTimeout(()=>{I=``},500),I+=e;let t=W.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(I));if(t===-1&&I.length===1){let n=F+1;for(let r=0;r<W.length;r++){let i=(n+r)%W.length;if((W[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(R=!0,Z(t))};return _(b,`expanded`,!1),x.hidden=!0,Me(),Re(`closed`),ke(),$(N,!0),H.push(g(b,`pointerdown`,e=>{z=e.clientX,B=e.clientY,Se=e.pointerType,V=!0}),g(b,`click`,()=>{E||Q(!M)}),g(b,`keydown`,e=>{if(!E)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),V=!1,Q(!0);break}})),H.push(g(x,`keydown`,Ue),g(x,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&He(t)}),g(x,`pointermove`,e=>{if(!j||!Te(e))return;let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(R&&(R=!1,t&&G.get(t)===F)))if(t&&!Y(t)){let e=G.get(t);e!==void 0&&e!==F&&Z(e,!0)}else Le()}),g(x,`pointerleave`,e=>{!j||!Te(e)||R||Le()})),H.push(n({root:h,isOpen:()=>M,onDismiss:()=>Q(!1),closeOnClickOutside:!0,closeOnEscape:!1})),H.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 N},get isOpen(){return M},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{Ce=!0,L&&clearTimeout(L),X.stop(),Be.cleanup(),J.cleanup(),q&&=(re(),!1),H.forEach(e=>e()),H.length=0,K&&K.parentNode&&K.parentNode.removeChild(K),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.
|
|
3
|
+
"version": "0.2.121",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -36,6 +36,6 @@
|
|
|
36
36
|
],
|
|
37
37
|
"license": "MIT",
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@data-slot/core": "0.2.
|
|
39
|
+
"@data-slot/core": "0.2.121"
|
|
40
40
|
}
|
|
41
41
|
}
|