@data-slot/navigation-menu 0.1.1 → 0.1.3

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/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`@data-slot/core`));function l(e,t={}){let{delayOpen:n=200,delayClose:r=150,openOnFocus:i=!0,onValueChange:a}=t,o=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),s=(e,t)=>{`inert`in e&&(e.inert=t)},l=(0,c.getPart)(e,`navigation-menu-list`),u=(0,c.getParts)(e,`navigation-menu-item`),d=(0,c.getPart)(e,`navigation-menu-viewport`),f=(0,c.getPart)(e,`navigation-menu-indicator`);if(!l||u.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let p=null,m=null,h=-1,g=null,_=null,v=null,y=!1,b=!1,x=!1,S=[],C=null,w=e=>{C?.disconnect(),C=null,!(!d||!e)&&(C=new ResizeObserver(()=>P(e)),C.observe(e))};S.push(()=>C?.disconnect());let T=new Map,E=0;u.forEach(e=>{let t=e.dataset.value;if(!t)return;let n=(0,c.getPart)(e,`navigation-menu-trigger`),r=(0,c.getPart)(e,`navigation-menu-content`);if(n&&r){T.set(t,{item:e,trigger:n,content:r,index:E++});let i=o(t),a=(0,c.ensureId)(n,`nav-menu-trigger-${i}`),s=(0,c.ensureId)(r,`nav-menu-content-${i}`);n.setAttribute(`aria-haspopup`,`true`),n.setAttribute(`aria-controls`,s),r.setAttribute(`role`,`region`),r.setAttribute(`aria-labelledby`,a)}});let D=Array.from(T.values()).map(e=>e.trigger),O=new Map;for(let[e,t]of T)O.set(t.trigger,e);let k=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,A=e=>Array.from(e.querySelectorAll(k)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),j=()=>{g&&(clearTimeout(g),g=null),_&&(clearTimeout(_),_=null)},M=null,N=()=>(M||(M=document.createElement(`div`),M.setAttribute(`data-slot`,`navigation-menu-bridge`),M.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,d&&d.insertBefore(M,d.firstChild),S.push((0,c.on)(M,`pointerenter`,()=>{j()}))),M),P=e=>{d&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(d),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;d.style.setProperty(`--viewport-width`,`${t.width}px`),d.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=N();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else M&&(M.style.height=`0`)})},F=e=>h===-1||e>h?`right`:`left`,I=e=>{if(!f)return;if(v=e,!e){f.setAttribute(`data-state`,`hidden`);return}let t=l.getBoundingClientRect(),n=e.getBoundingClientRect();f.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),f.style.setProperty(`--indicator-width`,`${n.width}px`),f.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),f.style.setProperty(`--indicator-height`,`${n.height}px`),f.setAttribute(`data-state`,`visible`)},L=(t,i=!1)=>{if(t===p){j();return}if(t!==null&&t===m){j();return}j(),m=t===null?null:t;let o=()=>{let n=p,r=t?T.get(t):null,i=n!==null&&t!==null&&n!==t,o=i&&r?F(r.index):null,l=document.activeElement;if(t===null&&l&&e.contains(l)){let e=n?T.get(n)?.trigger:null;e&&e.focus()}if(T.forEach(({trigger:e,content:r,item:i},a)=>{let l=a===t,u=a===n;if((0,c.setAria)(e,`expanded`,l),e.setAttribute(`data-state`,l?`open`:`closed`),l||u&&t===null?e.tabIndex=0:e.tabIndex=-1,i.setAttribute(`data-state`,l?`open`:`closed`),!l)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),s(r,!0),r.hidden=!0,u&&o){let e=o===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(o){let e=o===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),s(r.content,!1),r.content.hidden=!1,h=r.index,P(r.content),w(r.content),I(r.trigger)}else w(null);let u=t!==null;e.setAttribute(`data-state`,u?`open`:`closed`),o?e.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):e.removeAttribute(`data-motion`),d&&(d.setAttribute(`data-state`,u?`open`:`closed`),u&&!i?d.setAttribute(`data-instant`,``):i&&d.removeAttribute(`data-instant`),o&&d.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),p=t,m=null,t===null&&I(null),(0,c.emit)(e,`navigation-menu:change`,{value:t}),a?.(t)};i?o():t!==null&&p===null?g=setTimeout(o,n):t!==null&&p!==null?o():_=setTimeout(o,r)};e.setAttribute(`data-state`,`closed`),d&&d.setAttribute(`data-state`,`closed`),f&&f.setAttribute(`data-state`,`hidden`),T.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),(0,c.setAria)(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===D[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,s(t,!0),t.hidden=!0}),T.forEach(({item:e,trigger:t},n)=>{S.push((0,c.on)(t,`pointerenter`,()=>{y||I(t)})),S.push((0,c.on)(e,`pointerenter`,()=>{y||L(n)})),S.push((0,c.on)(e,`pointerleave`,()=>{m===n&&p===null&&(j(),m=null)})),S.push((0,c.on)(t,`focus`,()=>{b||(i&&L(n,!0),I(t))})),S.push((0,c.on)(t,`pointerdown`,()=>{b=!0})),S.push((0,c.on)(t,`click`,()=>{j(),p===n&&y?(y=!1,L(null,!0),I(null)):p===n&&!y?(y=!0,I(t)):(y=!0,L(n,!0),I(t)),b=!1}))}),S.push((0,c.on)(e,`pointerenter`,()=>{x=!0}),(0,c.on)(e,`pointerleave`,()=>{x=!1,y||(L(null),I(null))}),(0,c.on)(e,`pointerdown`,j)),d&&S.push((0,c.on)(d,`pointerenter`,()=>{j()}),(0,c.on)(d,`transitionend`,e=>{if(e.target!==d)return;let t=p?T.get(p):null;t&&P(t.content)})),T.forEach(({content:e})=>{S.push((0,c.on)(e,`pointerenter`,()=>{j()}))}),S.push((0,c.on)(l,`keydown`,e=>{let t=e.target,n=D.indexOf(t);if(n===-1)return;let r=O.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=D.length-1);break;case`ArrowRight`:i=n+1,i>=D.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(y=!0,L(r,!0),requestAnimationFrame(()=>{let e=T.get(r);if(!e)return;let t=A(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=D.length-1;break;case`Escape`:y=!1,L(null,!0),I(null);return;default:return}e.preventDefault();let a=D[i];a&&(D.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),I(a))})),T.forEach(({content:e,trigger:t})=>{S.push((0,c.on)(e,`keydown`,n=>{let r=n.target,i=A(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),y=!1,L(null,!0),I(null),t.focus();break}}))});let R=()=>e.contains(document.activeElement)||x||y;S.push((0,c.on)(document,`pointerup`,()=>{b=!1},{capture:!0}),(0,c.on)(document,`pointercancel`,()=>{b=!1},{capture:!0})),S.push((0,c.on)(document,`focusin`,t=>{p!==null&&(e.contains(t.target)||(y=!1,L(null,!0),I(null)))})),S.push((0,c.on)(document,`pointerdown`,t=>{p!==null&&R()&&(e.contains(t.target)||(y=!1,L(null,!0),I(null)))})),S.push((0,c.on)(document,`keydown`,e=>{e.key!==`Escape`||p===null||R()&&(y=!1,L(null,!0),I(null))})),S.push((0,c.on)(window,`resize`,()=>{v&&requestAnimationFrame(()=>I(v))}),(0,c.on)(l,`scroll`,()=>{v&&requestAnimationFrame(()=>I(v))}));let z={get value(){return p},open:e=>L(e,!0),close:()=>L(null,!0),destroy:()=>{j(),S.forEach(e=>e()),S.length=0}};return z}const u=new WeakSet;function d(e=document){let t=[];for(let n of(0,c.getRoots)(e,`navigation-menu`)){if(u.has(n))continue;u.add(n),t.push(l(n))}return t}exports.create=d,exports.createNavigationMenu=l;
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))},o=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function c(n,r={}){let{delayOpen:c=200,delayClose:l=150,openOnFocus:u=!0,onValueChange:d}=r,f=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),p=(e,t)=>{`inert`in e&&(e.inert=t)},m=e(n,`navigation-menu-list`),h=t(n,`navigation-menu-item`),g=e(n,`navigation-menu-viewport`),_=e(n,`navigation-menu-indicator`);if(!m||h.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let v=null,y=null,b=-1,x=null,S=null,C=null,w=!1,T=!1,E=!1,D=[],O=null,k=e=>{O?.disconnect(),O=null,!(!g||!e)&&(O=new ResizeObserver(()=>z(e)),O.observe(e))};D.push(()=>O?.disconnect());let A=new Map,j=0;h.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`navigation-menu-trigger`),a=e(t,`navigation-menu-content`);if(r&&a){A.set(n,{item:t,trigger:r,content:a,index:j++});let e=f(n),o=i(r,`nav-menu-trigger-${e}`),s=i(a,`nav-menu-content-${e}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,s),a.setAttribute(`aria-labelledby`,o)}});let M=Array.from(A.values()).map(e=>e.trigger),N=new Map;for(let[e,t]of A)N.set(t.trigger,e);let P=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,F=e=>Array.from(e.querySelectorAll(P)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),I=()=>{x&&(clearTimeout(x),x=null),S&&(clearTimeout(S),S=null)},L=null,R=()=>(L||(L=document.createElement(`div`),L.setAttribute(`data-slot`,`navigation-menu-bridge`),L.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,g&&g.insertBefore(L,g.firstChild),D.push(o(L,`pointerenter`,()=>{I()}))),L),z=e=>{g&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(g),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;g.style.setProperty(`--viewport-width`,`${t.width}px`),g.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=R();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else L&&(L.style.height=`0`)})},B=e=>b===-1||e>b?`right`:`left`,V=e=>{if(!_)return;if(C=e,!e){_.setAttribute(`data-state`,`hidden`);return}let t=m.getBoundingClientRect(),n=e.getBoundingClientRect();_.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),_.style.setProperty(`--indicator-width`,`${n.width}px`),_.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),_.style.setProperty(`--indicator-height`,`${n.height}px`),_.setAttribute(`data-state`,`visible`)},H=(e,t=!1)=>{if(e===v){I();return}if(e!==null&&e===y){I();return}I(),y=e===null?null:e;let r=()=>{let t=v,r=e?A.get(e):null,i=t!==null&&e!==null&&t!==e,o=i&&r?B(r.index):null,c=document.activeElement;if(e===null&&c&&n.contains(c)){let e=t?A.get(t)?.trigger:null;e&&e.focus()}if(A.forEach(({trigger:n,content:r,item:i},s)=>{let c=s===e,l=s===t;if(a(n,`expanded`,c),n.setAttribute(`data-state`,c?`open`:`closed`),c||l&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,c?`open`:`closed`),!c)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),p(r,!0),r.hidden=!0,l&&o){let e=o===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(o){let e=o===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),p(r.content,!1),r.content.hidden=!1,b=r.index,z(r.content),k(r.content),V(r.trigger)}else k(null);let l=e!==null;n.setAttribute(`data-state`,l?`open`:`closed`),o?n.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),g&&(g.setAttribute(`data-state`,l?`open`:`closed`),l&&!i?g.setAttribute(`data-instant`,``):i&&g.removeAttribute(`data-instant`),o&&g.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),v=e,y=null,e===null&&V(null),s(n,`navigation-menu:change`,{value:e}),d?.(e)};t?r():e!==null&&v===null?x=setTimeout(r,c):e!==null&&v!==null?r():S=setTimeout(r,l)};n.setAttribute(`data-state`,`closed`),g&&g.setAttribute(`data-state`,`closed`),_&&_.setAttribute(`data-state`,`hidden`),A.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),a(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===M[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,p(t,!0),t.hidden=!0}),A.forEach(({item:e,trigger:t},n)=>{D.push(o(t,`pointerenter`,()=>{w||V(t)})),D.push(o(e,`pointerenter`,()=>{w||H(n)})),D.push(o(e,`pointerleave`,()=>{y===n&&v===null&&(I(),y=null)})),D.push(o(t,`focus`,()=>{T||(u&&H(n,!0),V(t))})),D.push(o(t,`pointerdown`,()=>{T=!0})),D.push(o(t,`click`,()=>{I(),v===n&&w?(w=!1,H(null,!0),V(null)):v===n&&!w?(w=!0,V(t)):(w=!0,H(n,!0),V(t)),T=!1}))}),D.push(o(n,`pointerenter`,()=>{E=!0}),o(n,`pointerleave`,()=>{E=!1,w||(H(null),V(null))}),o(n,`pointerdown`,I)),g&&D.push(o(g,`pointerenter`,()=>{I()}),o(g,`transitionend`,e=>{if(e.target!==g)return;let t=v?A.get(v):null;t&&z(t.content)})),A.forEach(({content:e})=>{D.push(o(e,`pointerenter`,()=>{I()}))}),D.push(o(m,`keydown`,e=>{let t=e.target,n=M.indexOf(t);if(n===-1)return;let r=N.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=M.length-1);break;case`ArrowRight`:i=n+1,i>=M.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(w=!0,H(r,!0),requestAnimationFrame(()=>{let e=A.get(r);if(!e)return;let t=F(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=M.length-1;break;case`Escape`:w=!1,H(null,!0),V(null);return;default:return}e.preventDefault();let a=M[i];a&&(M.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),V(a))})),A.forEach(({content:e,trigger:t})=>{D.push(o(e,`keydown`,n=>{let r=n.target,i=F(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),w=!1,H(null,!0),V(null),t.focus();break}}))});let U=()=>n.contains(document.activeElement)||E||w;D.push(o(document,`pointerup`,()=>{T=!1},{capture:!0}),o(document,`pointercancel`,()=>{T=!1},{capture:!0})),D.push(o(document,`focusin`,e=>{v!==null&&(n.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(o(document,`pointerdown`,e=>{v!==null&&U()&&(n.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(o(document,`keydown`,e=>{e.key!==`Escape`||v===null||U()&&(w=!1,H(null,!0),V(null))})),D.push(o(window,`resize`,()=>{C&&requestAnimationFrame(()=>V(C))}),o(m,`scroll`,()=>{C&&requestAnimationFrame(()=>V(C))}));let W={get value(){return v},open:e=>H(e,!0),close:()=>H(null,!0),destroy:()=>{I(),D.forEach(e=>e()),D.length=0}};return W}const l=new WeakSet;function u(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(l.has(r))continue;l.add(r),t.push(c(r))}return t}exports.create=u,exports.createNavigationMenu=c;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{emit as e,ensureId as t,getPart as n,getParts as r,getRoots as i,on as a,setAria as o}from"@data-slot/core";function s(i,s={}){let{delayOpen:c=200,delayClose:l=150,openOnFocus:u=!0,onValueChange:d}=s,f=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),p=(e,t)=>{`inert`in e&&(e.inert=t)},m=n(i,`navigation-menu-list`),h=r(i,`navigation-menu-item`),g=n(i,`navigation-menu-viewport`),_=n(i,`navigation-menu-indicator`);if(!m||h.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let v=null,y=null,b=-1,x=null,S=null,C=null,w=!1,T=!1,E=!1,D=[],O=null,k=e=>{O?.disconnect(),O=null,!(!g||!e)&&(O=new ResizeObserver(()=>z(e)),O.observe(e))};D.push(()=>O?.disconnect());let A=new Map,j=0;h.forEach(e=>{let r=e.dataset.value;if(!r)return;let i=n(e,`navigation-menu-trigger`),a=n(e,`navigation-menu-content`);if(i&&a){A.set(r,{item:e,trigger:i,content:a,index:j++});let n=f(r),o=t(i,`nav-menu-trigger-${n}`),s=t(a,`nav-menu-content-${n}`);i.setAttribute(`aria-haspopup`,`true`),i.setAttribute(`aria-controls`,s),a.setAttribute(`role`,`region`),a.setAttribute(`aria-labelledby`,o)}});let M=Array.from(A.values()).map(e=>e.trigger),N=new Map;for(let[e,t]of A)N.set(t.trigger,e);let P=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,F=e=>Array.from(e.querySelectorAll(P)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),I=()=>{x&&(clearTimeout(x),x=null),S&&(clearTimeout(S),S=null)},L=null,R=()=>(L||(L=document.createElement(`div`),L.setAttribute(`data-slot`,`navigation-menu-bridge`),L.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,g&&g.insertBefore(L,g.firstChild),D.push(a(L,`pointerenter`,()=>{I()}))),L),z=e=>{g&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(g),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;g.style.setProperty(`--viewport-width`,`${t.width}px`),g.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=R();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else L&&(L.style.height=`0`)})},B=e=>b===-1||e>b?`right`:`left`,V=e=>{if(!_)return;if(C=e,!e){_.setAttribute(`data-state`,`hidden`);return}let t=m.getBoundingClientRect(),n=e.getBoundingClientRect();_.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),_.style.setProperty(`--indicator-width`,`${n.width}px`),_.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),_.style.setProperty(`--indicator-height`,`${n.height}px`),_.setAttribute(`data-state`,`visible`)},H=(t,n=!1)=>{if(t===v){I();return}if(t!==null&&t===y){I();return}I(),y=t===null?null:t;let r=()=>{let n=v,r=t?A.get(t):null,a=n!==null&&t!==null&&n!==t,s=a&&r?B(r.index):null,c=document.activeElement;if(t===null&&c&&i.contains(c)){let e=n?A.get(n)?.trigger:null;e&&e.focus()}if(A.forEach(({trigger:e,content:r,item:i},a)=>{let c=a===t,l=a===n;if(o(e,`expanded`,c),e.setAttribute(`data-state`,c?`open`:`closed`),c||l&&t===null?e.tabIndex=0:e.tabIndex=-1,i.setAttribute(`data-state`,c?`open`:`closed`),!c)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),p(r,!0),r.hidden=!0,l&&s){let e=s===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(s){let e=s===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),p(r.content,!1),r.content.hidden=!1,b=r.index,z(r.content),k(r.content),V(r.trigger)}else k(null);let l=t!==null;i.setAttribute(`data-state`,l?`open`:`closed`),s?i.setAttribute(`data-motion`,s===`right`?`from-right`:`from-left`):i.removeAttribute(`data-motion`),g&&(g.setAttribute(`data-state`,l?`open`:`closed`),l&&!a?g.setAttribute(`data-instant`,``):a&&g.removeAttribute(`data-instant`),s&&g.style.setProperty(`--motion-direction`,s===`right`?`1`:`-1`)),v=t,y=null,t===null&&V(null),e(i,`navigation-menu:change`,{value:t}),d?.(t)};n?r():t!==null&&v===null?x=setTimeout(r,c):t!==null&&v!==null?r():S=setTimeout(r,l)};i.setAttribute(`data-state`,`closed`),g&&g.setAttribute(`data-state`,`closed`),_&&_.setAttribute(`data-state`,`hidden`),A.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),o(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===M[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,p(t,!0),t.hidden=!0}),A.forEach(({item:e,trigger:t},n)=>{D.push(a(t,`pointerenter`,()=>{w||V(t)})),D.push(a(e,`pointerenter`,()=>{w||H(n)})),D.push(a(e,`pointerleave`,()=>{y===n&&v===null&&(I(),y=null)})),D.push(a(t,`focus`,()=>{T||(u&&H(n,!0),V(t))})),D.push(a(t,`pointerdown`,()=>{T=!0})),D.push(a(t,`click`,()=>{I(),v===n&&w?(w=!1,H(null,!0),V(null)):v===n&&!w?(w=!0,V(t)):(w=!0,H(n,!0),V(t)),T=!1}))}),D.push(a(i,`pointerenter`,()=>{E=!0}),a(i,`pointerleave`,()=>{E=!1,w||(H(null),V(null))}),a(i,`pointerdown`,I)),g&&D.push(a(g,`pointerenter`,()=>{I()}),a(g,`transitionend`,e=>{if(e.target!==g)return;let t=v?A.get(v):null;t&&z(t.content)})),A.forEach(({content:e})=>{D.push(a(e,`pointerenter`,()=>{I()}))}),D.push(a(m,`keydown`,e=>{let t=e.target,n=M.indexOf(t);if(n===-1)return;let r=N.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=M.length-1);break;case`ArrowRight`:i=n+1,i>=M.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(w=!0,H(r,!0),requestAnimationFrame(()=>{let e=A.get(r);if(!e)return;let t=F(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=M.length-1;break;case`Escape`:w=!1,H(null,!0),V(null);return;default:return}e.preventDefault();let a=M[i];a&&(M.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),V(a))})),A.forEach(({content:e,trigger:t})=>{D.push(a(e,`keydown`,n=>{let r=n.target,i=F(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),w=!1,H(null,!0),V(null),t.focus();break}}))});let U=()=>i.contains(document.activeElement)||E||w;D.push(a(document,`pointerup`,()=>{T=!1},{capture:!0}),a(document,`pointercancel`,()=>{T=!1},{capture:!0})),D.push(a(document,`focusin`,e=>{v!==null&&(i.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(a(document,`pointerdown`,e=>{v!==null&&U()&&(i.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(a(document,`keydown`,e=>{e.key!==`Escape`||v===null||U()&&(w=!1,H(null,!0),V(null))})),D.push(a(window,`resize`,()=>{C&&requestAnimationFrame(()=>V(C))}),a(m,`scroll`,()=>{C&&requestAnimationFrame(()=>V(C))}));let W={get value(){return v},open:e=>H(e,!0),close:()=>H(null,!0),destroy:()=>{I(),D.forEach(e=>e()),D.length=0}};return W}const c=new WeakSet;function l(e=document){let t=[];for(let n of i(e,`navigation-menu`)){if(c.has(n))continue;c.add(n),t.push(s(n))}return t}export{l as create,s as createNavigationMenu};
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))},o=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),s=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n}));function c(n,r={}){let{delayOpen:c=200,delayClose:l=150,openOnFocus:u=!0,onValueChange:d}=r,f=e=>e.replace(/[^a-z0-9\-_:.]/gi,`-`),p=(e,t)=>{`inert`in e&&(e.inert=t)},m=e(n,`navigation-menu-list`),h=t(n,`navigation-menu-item`),g=e(n,`navigation-menu-viewport`),_=e(n,`navigation-menu-indicator`);if(!m||h.length===0)throw Error(`NavigationMenu requires navigation-menu-list and at least one navigation-menu-item`);let v=null,y=null,b=-1,x=null,S=null,C=null,w=!1,T=!1,E=!1,D=[],O=null,k=e=>{O?.disconnect(),O=null,!(!g||!e)&&(O=new ResizeObserver(()=>z(e)),O.observe(e))};D.push(()=>O?.disconnect());let A=new Map,j=0;h.forEach(t=>{let n=t.dataset.value;if(!n)return;let r=e(t,`navigation-menu-trigger`),a=e(t,`navigation-menu-content`);if(r&&a){A.set(n,{item:t,trigger:r,content:a,index:j++});let e=f(n),o=i(r,`nav-menu-trigger-${e}`),s=i(a,`nav-menu-content-${e}`);r.setAttribute(`aria-haspopup`,`true`),r.setAttribute(`aria-controls`,s),a.setAttribute(`aria-labelledby`,o)}});let M=Array.from(A.values()).map(e=>e.trigger),N=new Map;for(let[e,t]of A)N.set(t.trigger,e);let P=`a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])`,F=e=>Array.from(e.querySelectorAll(P)).filter(e=>!e.hidden&&!e.closest(`[hidden]`)),I=()=>{x&&(clearTimeout(x),x=null),S&&(clearTimeout(S),S=null)},L=null,R=()=>(L||(L=document.createElement(`div`),L.setAttribute(`data-slot`,`navigation-menu-bridge`),L.style.cssText=`position: absolute; left: 0; right: 0; top: 0; pointer-events: auto; z-index: -1;`,g&&g.insertBefore(L,g.firstChild),D.push(o(L,`pointerenter`,()=>{I()}))),L),z=e=>{g&&requestAnimationFrame(()=>{let t=e.getBoundingClientRect(),n=getComputedStyle(e),r=parseFloat(n.marginTop)||0,i=getComputedStyle(g),a=parseFloat(i.marginTop)||0,o=parseFloat(i.marginBottom)||0;g.style.setProperty(`--viewport-width`,`${t.width}px`),g.style.setProperty(`--viewport-height`,`${t.height+a+o}px`);let s=r+a;if(s>0){let e=R();e.style.height=`${s}px`,e.style.transform=`translateY(-${s}px)`}else L&&(L.style.height=`0`)})},B=e=>b===-1||e>b?`right`:`left`,V=e=>{if(!_)return;if(C=e,!e){_.setAttribute(`data-state`,`hidden`);return}let t=m.getBoundingClientRect(),n=e.getBoundingClientRect();_.style.setProperty(`--indicator-left`,`${n.left-t.left}px`),_.style.setProperty(`--indicator-width`,`${n.width}px`),_.style.setProperty(`--indicator-top`,`${n.top-t.top}px`),_.style.setProperty(`--indicator-height`,`${n.height}px`),_.setAttribute(`data-state`,`visible`)},H=(e,t=!1)=>{if(e===v){I();return}if(e!==null&&e===y){I();return}I(),y=e===null?null:e;let r=()=>{let t=v,r=e?A.get(e):null,i=t!==null&&e!==null&&t!==e,o=i&&r?B(r.index):null,c=document.activeElement;if(e===null&&c&&n.contains(c)){let e=t?A.get(t)?.trigger:null;e&&e.focus()}if(A.forEach(({trigger:n,content:r,item:i},s)=>{let c=s===e,l=s===t;if(a(n,`expanded`,c),n.setAttribute(`data-state`,c?`open`:`closed`),c||l&&e===null?n.tabIndex=0:n.tabIndex=-1,i.setAttribute(`data-state`,c?`open`:`closed`),!c)if(r.setAttribute(`data-state`,`inactive`),r.setAttribute(`aria-hidden`,`true`),p(r,!0),r.hidden=!0,l&&o){let e=o===`right`?`to-left`:`to-right`;r.setAttribute(`data-motion`,e)}else r.removeAttribute(`data-motion`)}),r){if(o){let e=o===`right`?`from-right`:`from-left`;r.content.setAttribute(`data-motion`,e)}else r.content.removeAttribute(`data-motion`);r.content.setAttribute(`data-state`,`active`),r.content.removeAttribute(`aria-hidden`),p(r.content,!1),r.content.hidden=!1,b=r.index,z(r.content),k(r.content),V(r.trigger)}else k(null);let l=e!==null;n.setAttribute(`data-state`,l?`open`:`closed`),o?n.setAttribute(`data-motion`,o===`right`?`from-right`:`from-left`):n.removeAttribute(`data-motion`),g&&(g.setAttribute(`data-state`,l?`open`:`closed`),l&&!i?g.setAttribute(`data-instant`,``):i&&g.removeAttribute(`data-instant`),o&&g.style.setProperty(`--motion-direction`,o===`right`?`1`:`-1`)),v=e,y=null,e===null&&V(null),s(n,`navigation-menu:change`,{value:e}),d?.(e)};t?r():e!==null&&v===null?x=setTimeout(r,c):e!==null&&v!==null?r():S=setTimeout(r,l)};n.setAttribute(`data-state`,`closed`),g&&g.setAttribute(`data-state`,`closed`),_&&_.setAttribute(`data-state`,`hidden`),A.forEach(({trigger:e,content:t,item:n})=>{e.tagName===`BUTTON`&&!e.hasAttribute(`type`)&&(e.type=`button`),a(e,`expanded`,!1),e.setAttribute(`data-state`,`closed`),e.tabIndex=e===M[0]?0:-1,n.setAttribute(`data-state`,`closed`),t.setAttribute(`data-state`,`inactive`),t.setAttribute(`aria-hidden`,`true`),t.tabIndex=-1,p(t,!0),t.hidden=!0}),A.forEach(({item:e,trigger:t},n)=>{D.push(o(t,`pointerenter`,()=>{w||V(t)})),D.push(o(e,`pointerenter`,()=>{w||H(n)})),D.push(o(e,`pointerleave`,()=>{y===n&&v===null&&(I(),y=null)})),D.push(o(t,`focus`,()=>{T||(u&&H(n,!0),V(t))})),D.push(o(t,`pointerdown`,()=>{T=!0})),D.push(o(t,`click`,()=>{I(),v===n&&w?(w=!1,H(null,!0),V(null)):v===n&&!w?(w=!0,V(t)):(w=!0,H(n,!0),V(t)),T=!1}))}),D.push(o(n,`pointerenter`,()=>{E=!0}),o(n,`pointerleave`,()=>{E=!1,w||(H(null),V(null))}),o(n,`pointerdown`,I)),g&&D.push(o(g,`pointerenter`,()=>{I()}),o(g,`transitionend`,e=>{if(e.target!==g)return;let t=v?A.get(v):null;t&&z(t.content)})),A.forEach(({content:e})=>{D.push(o(e,`pointerenter`,()=>{I()}))}),D.push(o(m,`keydown`,e=>{let t=e.target,n=M.indexOf(t);if(n===-1)return;let r=N.get(t)??null,i=n;switch(e.key){case`ArrowLeft`:i=n-1,i<0&&(i=M.length-1);break;case`ArrowRight`:i=n+1,i>=M.length&&(i=0);break;case`ArrowDown`:e.preventDefault(),r&&(w=!0,H(r,!0),requestAnimationFrame(()=>{let e=A.get(r);if(!e)return;let t=F(e.content),n=t[0];n?n.focus():e.content.focus()}));return;case`Home`:i=0;break;case`End`:i=M.length-1;break;case`Escape`:w=!1,H(null,!0),V(null);return;default:return}e.preventDefault();let a=M[i];a&&(M.forEach(e=>e.tabIndex=e===a?0:-1),a.focus(),V(a))})),A.forEach(({content:e,trigger:t})=>{D.push(o(e,`keydown`,n=>{let r=n.target,i=F(e),a=i.indexOf(r);if(a!==-1)switch(n.key){case`ArrowDown`:case`ArrowRight`:{n.preventDefault();let e=a+1;e<i.length&&i[e]?.focus();break}case`ArrowUp`:case`ArrowLeft`:n.preventDefault(),a===0?t.focus():i[a-1]?.focus();break;case`Escape`:n.preventDefault(),w=!1,H(null,!0),V(null),t.focus();break}}))});let U=()=>n.contains(document.activeElement)||E||w;D.push(o(document,`pointerup`,()=>{T=!1},{capture:!0}),o(document,`pointercancel`,()=>{T=!1},{capture:!0})),D.push(o(document,`focusin`,e=>{v!==null&&(n.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(o(document,`pointerdown`,e=>{v!==null&&U()&&(n.contains(e.target)||(w=!1,H(null,!0),V(null)))})),D.push(o(document,`keydown`,e=>{e.key!==`Escape`||v===null||U()&&(w=!1,H(null,!0),V(null))})),D.push(o(window,`resize`,()=>{C&&requestAnimationFrame(()=>V(C))}),o(m,`scroll`,()=>{C&&requestAnimationFrame(()=>V(C))}));let W={get value(){return v},open:e=>H(e,!0),close:()=>H(null,!0),destroy:()=>{I(),D.forEach(e=>e()),D.length=0}};return W}const l=new WeakSet;function u(e=document){let t=[];for(let r of n(e,`navigation-menu`)){if(l.has(r))continue;l.add(r),t.push(c(r))}return t}export{u as create,c as createNavigationMenu};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@data-slot/navigation-menu",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.cjs",
@@ -24,7 +24,7 @@
24
24
  "scripts": {
25
25
  "build": "tsdown"
26
26
  },
27
- "dependencies": {
27
+ "devDependencies": {
28
28
  "@data-slot/core": "workspace:*"
29
29
  },
30
30
  "repository": {