@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 +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
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))},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
|
-
|
|
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.
|
|
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
|
-
"
|
|
27
|
+
"devDependencies": {
|
|
28
28
|
"@data-slot/core": "workspace:*"
|
|
29
29
|
},
|
|
30
30
|
"repository": {
|