@data-slot/dropdown-menu 0.2.2 → 0.2.5

package/README.md

@@ -130,6 +130,37 @@ interface DropdownMenuOptions {
 }
 ```
 
+### Data Attribute Options
+
+Options can also be set via data attributes on the root element. JS options take precedence.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-default-open` | boolean | `false` | Initial open state |
+| `data-close-on-click-outside` | boolean | `true` | Close when clicking outside |
+| `data-close-on-escape` | boolean | `true` | Close when pressing Escape |
+| `data-close-on-select` | boolean | `true` | Close when an item is selected |
+| `data-side` | string | `"bottom"` | Preferred side: top, right, bottom, left |
+| `data-align` | string | `"start"` | Alignment: start, center, end |
+| `data-side-offset` | number | `4` | Distance from trigger in px |
+| `data-align-offset` | number | `0` | Offset from alignment edge in px |
+| `data-avoid-collisions` | boolean | `true` | Flip/shift to stay in viewport |
+| `data-collision-padding` | number | `8` | Viewport edge padding in px |
+
+Boolean attributes: present or `"true"` = true, `"false"` = false, absent = default.
+
+```html
+<!-- Menu positioned at top with larger offset -->
+<div data-slot="dropdown-menu" data-side="top" data-side-offset="8">
+  ...
+</div>
+
+<!-- Menu that stays open after selection -->
+<div data-slot="dropdown-menu" data-close-on-select="false">
+  ...
+</div>
+```
+
 ## Positioning
 
 The dropdown menu uses `position: fixed` and automatically positions itself relative to the trigger. It supports all standard placement options:

package/dist/index.cjs

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function o(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c={top:`bottom`,bottom:`top`,left:`right`,right:`left`};function l(n,r={}){let{defaultOpen:l=!1,onOpenChange:d,onSelect:f,closeOnClickOutside:p=!0,closeOnEscape:m=!0,closeOnSelect:h=!0,side:g=`bottom`,align:_=`start`,sideOffset:v=4,alignOffset:y=0,avoidCollisions:b=!0,collisionPadding:x=8}=r,S=e(n,`dropdown-menu-trigger`),C=e(n,`dropdown-menu-content`);if(!S||!C)throw Error(`DropdownMenu requires trigger and content slots`);let w=!1,T=null,E=-1,D=``,O=null,k=!1,A=[],j=[],M=[],N=new Map,P=null,F=[],I=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,L=i(S,`dropdown-menu-trigger`),R=i(C,`dropdown-menu-content`);S.setAttribute(`aria-haspopup`,`menu`),S.setAttribute(`aria-controls`,R),C.setAttribute(`role`,`menu`),C.setAttribute(`aria-labelledby`,L),C.tabIndex=-1;let z=()=>{j=t(C,`dropdown-menu-item`);for(let e of j)e.setAttribute(`role`,`menuitem`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;M=j.filter(e=>!I(e)),N=new Map(M.map((e,t)=>[e,t]))},B=(e,t,n,r)=>{let i=0,a=0;return e===`top`?a=n.top-r.height-v:e===`bottom`?a=n.bottom+v:i=e===`left`?n.left-r.width-v:n.right+v,e===`top`||e===`bottom`?i=t===`start`?n.left+y:t===`center`?n.left+n.width/2-r.width/2+y:n.right-r.width-y:a=t===`start`?n.top+y:t===`center`?n.top+n.height/2-r.height/2+y:n.bottom-r.height-y,{x:i,y:a}},V=()=>{let e=S.getBoundingClientRect(),t=C.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,i=g,a=B(i,_,e,t);if(b){let o=(e,i)=>e===`top`?i.y<x:e===`bottom`?i.y+t.height>r-x:e===`left`?i.x<x:i.x+t.width>n-x;if(o(i,a)){let n=c[i],r=B(n,_,e,t);o(n,r)||(i=n,a=r)}a.x<x?a.x=x:a.x+t.width>n-x&&(a.x=n-t.width-x),a.y<x?a.y=x:a.y+t.height>r-x&&(a.y=r-t.height-x)}C.style.position=`fixed`,C.style.top=`${a.y}px`,C.style.left=`${a.x}px`,C.style.margin=`0`,C.setAttribute(`data-side`,i),C.setAttribute(`data-align`,_)},H=()=>{P===null&&(P=requestAnimationFrame(()=>{P=null,w&&V()}))},U=()=>{P!==null&&(cancelAnimationFrame(P),P=null),F.forEach(e=>e()),F.length=0},W=()=>{if(F.length>0)return;let e=()=>H();window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),F.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,e,!0));let t=new ResizeObserver(e);t.observe(S),t.observe(C),F.push(()=>t.disconnect())},G=(e,t=!0)=>{for(let n=0;n<M.length;n++){let r=M[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}E=e},K=()=>{for(let e of j)e.removeAttribute(`data-highlighted`);E=-1},q=e=>{n.setAttribute(`data-state`,e),C.setAttribute(`data-state`,e)},J=e=>{w!==e&&(e?(T=document.activeElement,w=!0,a(S,`expanded`,!0),C.hidden=!1,q(`open`),z(),k=!1,K(),W(),V(),C.focus()):(w=!1,a(S,`expanded`,!1),C.hidden=!0,q(`closed`),K(),D=``,k=!1,U(),requestAnimationFrame(()=>{T&&document.contains(T)?T.focus():S&&document.contains(S)&&S.focus(),T=null})),s(n,`dropdown-menu:change`,{open:w}),d?.(w))},Y=e=>{if(I(e))return;let t=e.dataset.value||e.textContent?.trim()||``;s(n,`dropdown-menu:select`,{value:t}),f?.(t),h&&J(!1)},X=e=>{let t=M.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),k=!0,G(E===-1?0:(E+1)%t);break;case`ArrowUp`:e.preventDefault(),k=!0,G(E===-1?t-1:(E-1+t)%t);break;case`Home`:e.preventDefault(),k=!0,G(0);break;case`End`:e.preventDefault(),k=!0,G(t-1);break;case`Enter`:case` `:e.preventDefault(),E>=0&&Y(M[E]);break;case`Tab`:J(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Z(e.key.toLowerCase()))}},Z=e=>{O&&clearTimeout(O),O=setTimeout(()=>{D=``},500),D+=e;let t=M.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(D));if(t===-1&&D.length===1){let n=E+1;for(let r=0;r<M.length;r++){let i=(n+r)%M.length;if((M[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(k=!0,G(t))};a(S,`expanded`,!1),C.hidden=!0,q(`closed`),A.push(o(S,`click`,()=>J(!w)),o(S,`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&!w&&(e.preventDefault(),J(!0))})),A.push(o(C,`keydown`,X),o(C,`click`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);t&&Y(t)}),o(C,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);if(!(k&&(k=!1,t&&N.get(t)===E))&&t&&!I(t)){let e=N.get(t);e!==void 0&&e!==E&&G(e,!1)}})),p&&A.push(o(document,`pointerdown`,e=>{let t=e.target;w&&!n.contains(t)&&!C.contains(t)&&J(!1)})),m&&A.push(o(document,`keydown`,e=>{w&&e.key===`Escape`&&(e.preventDefault(),J(!1))}));let Q={open:()=>J(!0),close:()=>J(!1),toggle:()=>J(!w),get isOpen(){return w},destroy:()=>{O&&clearTimeout(O),U(),A.forEach(e=>e()),A.length=0,u.delete(n)}};return l&&J(!0),Q}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`dropdown-menu`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}exports.create=d,exports.createDropdownMenu=l;
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const _=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),v=[`top`,`right`,`bottom`,`left`],y=[`start`,`center`,`end`],b={top:`bottom`,bottom:`top`,left:`right`,right:`left`};function x(n,r={}){let i=e(n,`dropdown-menu-trigger`),a=e(n,`dropdown-menu-content`);if(!i||!a)throw Error(`DropdownMenu requires trigger and content slots`);let o=r.defaultOpen??u(n,`defaultOpen`)??!1,s=r.onOpenChange,c=r.onSelect,l=r.closeOnClickOutside??u(n,`closeOnClickOutside`)??!0,p=r.closeOnEscape??u(n,`closeOnEscape`)??!0,x=r.closeOnSelect??u(n,`closeOnSelect`)??!0,C=r.side??f(a,`side`,v)??f(n,`side`,v)??`bottom`,w=r.align??f(a,`align`,y)??f(n,`align`,y)??`start`,T=r.sideOffset??d(a,`sideOffset`)??d(n,`sideOffset`)??4,E=r.alignOffset??d(a,`alignOffset`)??d(n,`alignOffset`)??0,D=r.avoidCollisions??u(a,`avoidCollisions`)??u(n,`avoidCollisions`)??!0,O=r.collisionPadding??d(a,`collisionPadding`)??d(n,`collisionPadding`)??8,k=!1,A=null,j=-1,M=``,N=null,P=!1,F=[],I=[],L=[],R=new Map,z=null,B=[],V=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,H=m(i,`dropdown-menu-trigger`),U=m(a,`dropdown-menu-content`);i.setAttribute(`aria-haspopup`,`menu`),i.setAttribute(`aria-controls`,U),a.setAttribute(`role`,`menu`),a.setAttribute(`aria-labelledby`,H),a.tabIndex=-1;let W=()=>{I=t(a,`dropdown-menu-item`);for(let e of I)e.setAttribute(`role`,`menuitem`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;L=I.filter(e=>!V(e)),R=new Map(L.map((e,t)=>[e,t]))},G=(e,t,n,r)=>{let i=0,a=0;return e===`top`?a=n.top-r.height-T:e===`bottom`?a=n.bottom+T:i=e===`left`?n.left-r.width-T:n.right+T,e===`top`||e===`bottom`?i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E:a=t===`start`?n.top+E:t===`center`?n.top+n.height/2-r.height/2+E:n.bottom-r.height-E,{x:i,y:a}},K=()=>{let e=i.getBoundingClientRect(),t=a.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=C,s=G(o,w,e,t);if(D){let i=(e,i)=>e===`top`?i.y<O:e===`bottom`?i.y+t.height>r-O:e===`left`?i.x<O:i.x+t.width>n-O;if(i(o,s)){let n=b[o],r=G(n,w,e,t);i(n,r)||(o=n,s=r)}s.x<O?s.x=O:s.x+t.width>n-O&&(s.x=n-t.width-O),s.y<O?s.y=O:s.y+t.height>r-O&&(s.y=r-t.height-O)}a.style.position=`fixed`,a.style.top=`${s.y}px`,a.style.left=`${s.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,o),a.setAttribute(`data-align`,w)},q=()=>{z===null&&(z=requestAnimationFrame(()=>{z=null,k&&K()}))},J=()=>{z!==null&&(cancelAnimationFrame(z),z=null),B.forEach(e=>e()),B.length=0},ee=()=>{if(B.length>0)return;let e=()=>q();window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),B.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,e,!0));let t=new ResizeObserver(e);t.observe(i),t.observe(a),B.push(()=>t.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<L.length;n++){let r=L[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}j=e},X=()=>{for(let e of I)e.removeAttribute(`data-highlighted`);j=-1},Z=e=>{n.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},Q=e=>{k!==e&&(e?(A=document.activeElement,k=!0,h(i,`expanded`,!0),a.hidden=!1,Z(`open`),W(),P=!1,X(),ee(),K(),a.focus()):(k=!1,h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),M=``,P=!1,J(),requestAnimationFrame(()=>{A&&document.contains(A)?A.focus():i&&document.contains(i)&&i.focus(),A=null})),_(n,`dropdown-menu:change`,{open:k}),s?.(k))},$=e=>{if(V(e))return;let t=e.dataset.value||e.textContent?.trim()||``;_(n,`dropdown-menu:select`,{value:t}),c?.(t),x&&Q(!1)},te=e=>{let t=L.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),P=!0,Y(j===-1?0:(j+1)%t);break;case`ArrowUp`:e.preventDefault(),P=!0,Y(j===-1?t-1:(j-1+t)%t);break;case`Home`:e.preventDefault(),P=!0,Y(0);break;case`End`:e.preventDefault(),P=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),j>=0&&$(L[j]);break;case`Tab`:Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ne(e.key.toLowerCase()))}},ne=e=>{N&&clearTimeout(N),N=setTimeout(()=>{M=``},500),M+=e;let t=L.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(M));if(t===-1&&M.length===1){let n=j+1;for(let r=0;r<L.length;r++){let i=(n+r)%L.length;if((L[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(P=!0,Y(t))};h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),F.push(g(i,`click`,()=>Q(!k)),g(i,`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&!k&&(e.preventDefault(),Q(!0))})),F.push(g(a,`keydown`,te),g(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);t&&$(t)}),g(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);if(!(P&&(P=!1,t&&R.get(t)===j))&&t&&!V(t)){let e=R.get(t);e!==void 0&&e!==j&&Y(e,!1)}}),g(a,`pointerleave`,()=>{P||X()})),l&&F.push(g(document,`pointerdown`,e=>{let t=e.target;k&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),p&&F.push(g(document,`keydown`,e=>{k&&e.key===`Escape`&&(e.preventDefault(),Q(!1))}));let re={open:()=>Q(!0),close:()=>Q(!1),toggle:()=>Q(!k),get isOpen(){return k},destroy:()=>{N&&clearTimeout(N),J(),F.forEach(e=>e()),F.length=0,S.delete(n)}};return o&&Q(!0),re}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`dropdown-menu`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}exports.create=C,exports.createDropdownMenu=x;

package/dist/index.js

@@ -1 +1 @@
-const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)];let r=0;const i=(e,t)=>e.id||=`${t}-${++r}`,a=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function o(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),c={top:`bottom`,bottom:`top`,left:`right`,right:`left`};function l(n,r={}){let{defaultOpen:l=!1,onOpenChange:d,onSelect:f,closeOnClickOutside:p=!0,closeOnEscape:m=!0,closeOnSelect:h=!0,side:g=`bottom`,align:_=`start`,sideOffset:v=4,alignOffset:y=0,avoidCollisions:b=!0,collisionPadding:x=8}=r,S=e(n,`dropdown-menu-trigger`),C=e(n,`dropdown-menu-content`);if(!S||!C)throw Error(`DropdownMenu requires trigger and content slots`);let w=!1,T=null,E=-1,D=``,O=null,k=!1,A=[],j=[],M=[],N=new Map,P=null,F=[],I=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,L=i(S,`dropdown-menu-trigger`),R=i(C,`dropdown-menu-content`);S.setAttribute(`aria-haspopup`,`menu`),S.setAttribute(`aria-controls`,R),C.setAttribute(`role`,`menu`),C.setAttribute(`aria-labelledby`,L),C.tabIndex=-1;let z=()=>{j=t(C,`dropdown-menu-item`);for(let e of j)e.setAttribute(`role`,`menuitem`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;M=j.filter(e=>!I(e)),N=new Map(M.map((e,t)=>[e,t]))},B=(e,t,n,r)=>{let i=0,a=0;return e===`top`?a=n.top-r.height-v:e===`bottom`?a=n.bottom+v:i=e===`left`?n.left-r.width-v:n.right+v,e===`top`||e===`bottom`?i=t===`start`?n.left+y:t===`center`?n.left+n.width/2-r.width/2+y:n.right-r.width-y:a=t===`start`?n.top+y:t===`center`?n.top+n.height/2-r.height/2+y:n.bottom-r.height-y,{x:i,y:a}},V=()=>{let e=S.getBoundingClientRect(),t=C.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,i=g,a=B(i,_,e,t);if(b){let o=(e,i)=>e===`top`?i.y<x:e===`bottom`?i.y+t.height>r-x:e===`left`?i.x<x:i.x+t.width>n-x;if(o(i,a)){let n=c[i],r=B(n,_,e,t);o(n,r)||(i=n,a=r)}a.x<x?a.x=x:a.x+t.width>n-x&&(a.x=n-t.width-x),a.y<x?a.y=x:a.y+t.height>r-x&&(a.y=r-t.height-x)}C.style.position=`fixed`,C.style.top=`${a.y}px`,C.style.left=`${a.x}px`,C.style.margin=`0`,C.setAttribute(`data-side`,i),C.setAttribute(`data-align`,_)},H=()=>{P===null&&(P=requestAnimationFrame(()=>{P=null,w&&V()}))},U=()=>{P!==null&&(cancelAnimationFrame(P),P=null),F.forEach(e=>e()),F.length=0},W=()=>{if(F.length>0)return;let e=()=>H();window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),F.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,e,!0));let t=new ResizeObserver(e);t.observe(S),t.observe(C),F.push(()=>t.disconnect())},G=(e,t=!0)=>{for(let n=0;n<M.length;n++){let r=M[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}E=e},K=()=>{for(let e of j)e.removeAttribute(`data-highlighted`);E=-1},q=e=>{n.setAttribute(`data-state`,e),C.setAttribute(`data-state`,e)},J=e=>{w!==e&&(e?(T=document.activeElement,w=!0,a(S,`expanded`,!0),C.hidden=!1,q(`open`),z(),k=!1,K(),W(),V(),C.focus()):(w=!1,a(S,`expanded`,!1),C.hidden=!0,q(`closed`),K(),D=``,k=!1,U(),requestAnimationFrame(()=>{T&&document.contains(T)?T.focus():S&&document.contains(S)&&S.focus(),T=null})),s(n,`dropdown-menu:change`,{open:w}),d?.(w))},Y=e=>{if(I(e))return;let t=e.dataset.value||e.textContent?.trim()||``;s(n,`dropdown-menu:select`,{value:t}),f?.(t),h&&J(!1)},X=e=>{let t=M.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),k=!0,G(E===-1?0:(E+1)%t);break;case`ArrowUp`:e.preventDefault(),k=!0,G(E===-1?t-1:(E-1+t)%t);break;case`Home`:e.preventDefault(),k=!0,G(0);break;case`End`:e.preventDefault(),k=!0,G(t-1);break;case`Enter`:case` `:e.preventDefault(),E>=0&&Y(M[E]);break;case`Tab`:J(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),Z(e.key.toLowerCase()))}},Z=e=>{O&&clearTimeout(O),O=setTimeout(()=>{D=``},500),D+=e;let t=M.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(D));if(t===-1&&D.length===1){let n=E+1;for(let r=0;r<M.length;r++){let i=(n+r)%M.length;if((M[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(k=!0,G(t))};a(S,`expanded`,!1),C.hidden=!0,q(`closed`),A.push(o(S,`click`,()=>J(!w)),o(S,`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&!w&&(e.preventDefault(),J(!0))})),A.push(o(C,`keydown`,X),o(C,`click`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);t&&Y(t)}),o(C,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);if(!(k&&(k=!1,t&&N.get(t)===E))&&t&&!I(t)){let e=N.get(t);e!==void 0&&e!==E&&G(e,!1)}})),p&&A.push(o(document,`pointerdown`,e=>{let t=e.target;w&&!n.contains(t)&&!C.contains(t)&&J(!1)})),m&&A.push(o(document,`keydown`,e=>{w&&e.key===`Escape`&&(e.preventDefault(),J(!1))}));let Q={open:()=>J(!0),close:()=>J(!1),toggle:()=>J(!w),get isOpen(){return w},destroy:()=>{O&&clearTimeout(O),U(),A.forEach(e=>e()),A.length=0,u.delete(n)}};return l&&J(!0),Q}const u=new WeakSet;function d(e=document){let t=[];for(let r of n(e,`dropdown-menu`)){if(u.has(r))continue;u.add(r),t.push(l(r))}return t}export{d as create,l as createDropdownMenu};
+const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let p=0;const m=(e,t)=>e.id||=`${t}-${++p}`,h=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function g(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const _=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),v=[`top`,`right`,`bottom`,`left`],y=[`start`,`center`,`end`],b={top:`bottom`,bottom:`top`,left:`right`,right:`left`};function x(n,r={}){let i=e(n,`dropdown-menu-trigger`),a=e(n,`dropdown-menu-content`);if(!i||!a)throw Error(`DropdownMenu requires trigger and content slots`);let o=r.defaultOpen??u(n,`defaultOpen`)??!1,s=r.onOpenChange,c=r.onSelect,l=r.closeOnClickOutside??u(n,`closeOnClickOutside`)??!0,p=r.closeOnEscape??u(n,`closeOnEscape`)??!0,x=r.closeOnSelect??u(n,`closeOnSelect`)??!0,C=r.side??f(a,`side`,v)??f(n,`side`,v)??`bottom`,w=r.align??f(a,`align`,y)??f(n,`align`,y)??`start`,T=r.sideOffset??d(a,`sideOffset`)??d(n,`sideOffset`)??4,E=r.alignOffset??d(a,`alignOffset`)??d(n,`alignOffset`)??0,D=r.avoidCollisions??u(a,`avoidCollisions`)??u(n,`avoidCollisions`)??!0,O=r.collisionPadding??d(a,`collisionPadding`)??d(n,`collisionPadding`)??8,k=!1,A=null,j=-1,M=``,N=null,P=!1,F=[],I=[],L=[],R=new Map,z=null,B=[],V=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,H=m(i,`dropdown-menu-trigger`),U=m(a,`dropdown-menu-content`);i.setAttribute(`aria-haspopup`,`menu`),i.setAttribute(`aria-controls`,U),a.setAttribute(`role`,`menu`),a.setAttribute(`aria-labelledby`,H),a.tabIndex=-1;let W=()=>{I=t(a,`dropdown-menu-item`);for(let e of I)e.setAttribute(`role`,`menuitem`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;L=I.filter(e=>!V(e)),R=new Map(L.map((e,t)=>[e,t]))},G=(e,t,n,r)=>{let i=0,a=0;return e===`top`?a=n.top-r.height-T:e===`bottom`?a=n.bottom+T:i=e===`left`?n.left-r.width-T:n.right+T,e===`top`||e===`bottom`?i=t===`start`?n.left+E:t===`center`?n.left+n.width/2-r.width/2+E:n.right-r.width-E:a=t===`start`?n.top+E:t===`center`?n.top+n.height/2-r.height/2+E:n.bottom-r.height-E,{x:i,y:a}},K=()=>{let e=i.getBoundingClientRect(),t=a.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=C,s=G(o,w,e,t);if(D){let i=(e,i)=>e===`top`?i.y<O:e===`bottom`?i.y+t.height>r-O:e===`left`?i.x<O:i.x+t.width>n-O;if(i(o,s)){let n=b[o],r=G(n,w,e,t);i(n,r)||(o=n,s=r)}s.x<O?s.x=O:s.x+t.width>n-O&&(s.x=n-t.width-O),s.y<O?s.y=O:s.y+t.height>r-O&&(s.y=r-t.height-O)}a.style.position=`fixed`,a.style.top=`${s.y}px`,a.style.left=`${s.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,o),a.setAttribute(`data-align`,w)},q=()=>{z===null&&(z=requestAnimationFrame(()=>{z=null,k&&K()}))},J=()=>{z!==null&&(cancelAnimationFrame(z),z=null),B.forEach(e=>e()),B.length=0},ee=()=>{if(B.length>0)return;let e=()=>q();window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),B.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,e,!0));let t=new ResizeObserver(e);t.observe(i),t.observe(a),B.push(()=>t.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<L.length;n++){let r=L[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}j=e},X=()=>{for(let e of I)e.removeAttribute(`data-highlighted`);j=-1},Z=e=>{n.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},Q=e=>{k!==e&&(e?(A=document.activeElement,k=!0,h(i,`expanded`,!0),a.hidden=!1,Z(`open`),W(),P=!1,X(),ee(),K(),a.focus()):(k=!1,h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),M=``,P=!1,J(),requestAnimationFrame(()=>{A&&document.contains(A)?A.focus():i&&document.contains(i)&&i.focus(),A=null})),_(n,`dropdown-menu:change`,{open:k}),s?.(k))},$=e=>{if(V(e))return;let t=e.dataset.value||e.textContent?.trim()||``;_(n,`dropdown-menu:select`,{value:t}),c?.(t),x&&Q(!1)},te=e=>{let t=L.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),P=!0,Y(j===-1?0:(j+1)%t);break;case`ArrowUp`:e.preventDefault(),P=!0,Y(j===-1?t-1:(j-1+t)%t);break;case`Home`:e.preventDefault(),P=!0,Y(0);break;case`End`:e.preventDefault(),P=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),j>=0&&$(L[j]);break;case`Tab`:Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ne(e.key.toLowerCase()))}},ne=e=>{N&&clearTimeout(N),N=setTimeout(()=>{M=``},500),M+=e;let t=L.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(M));if(t===-1&&M.length===1){let n=j+1;for(let r=0;r<L.length;r++){let i=(n+r)%L.length;if((L[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(P=!0,Y(t))};h(i,`expanded`,!1),a.hidden=!0,Z(`closed`),F.push(g(i,`click`,()=>Q(!k)),g(i,`keydown`,e=>{(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)&&!k&&(e.preventDefault(),Q(!0))})),F.push(g(a,`keydown`,te),g(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);t&&$(t)}),g(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="dropdown-menu-item"]`);if(!(P&&(P=!1,t&&R.get(t)===j))&&t&&!V(t)){let e=R.get(t);e!==void 0&&e!==j&&Y(e,!1)}}),g(a,`pointerleave`,()=>{P||X()})),l&&F.push(g(document,`pointerdown`,e=>{let t=e.target;k&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),p&&F.push(g(document,`keydown`,e=>{k&&e.key===`Escape`&&(e.preventDefault(),Q(!1))}));let re={open:()=>Q(!0),close:()=>Q(!1),toggle:()=>Q(!k),get isOpen(){return k},destroy:()=>{N&&clearTimeout(N),J(),F.forEach(e=>e()),F.length=0,S.delete(n)}};return o&&Q(!0),re}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`dropdown-menu`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}export{C as create,x as createDropdownMenu};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-slot/dropdown-menu",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",