diff --git a/decoupled-menu/dist/islands/main-menu.island.umd.js b/decoupled-menu/dist/islands/main-menu.island.umd.js index 6acbc59..f7f81e5 100644 --- a/decoupled-menu/dist/islands/main-menu.island.umd.js +++ b/decoupled-menu/dist/islands/main-menu.island.umd.js @@ -239,4 +239,4 @@ @media (min-width: 1200px) { border-bottom: ${e=>0===e.level?"none":"1px solid #d9d9d9"}; } -`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&o&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&o&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})())); \ No newline at end of file +`,ko=({id:e,title:t,url:n,items:r,expanded:o,level:i=0})=>{const a=pe(null),[s,c]=se(!1),l=pe(null);yo(l,(()=>c(!1)));let u;ho("keydown",(e=>{var t;"Escape"===e.key&&s&&(c(!1),0===i&&(null===(t=a.current)||void 0===t||t.focus()))}));let p,f=!0,d=!1;return n&&(f=!1,u=new URL(n.startsWith("/")?`${window.location.origin}${n}`:n),p=u.pathname===window.location.pathname&&u.host===window.location.host,d=u.host===window.location.host&&"/"!=n&&window.location.pathname.startsWith(u.pathname)&&!p),co(jo,{ref:l,level:i,children:[co(Po,{level:i,children:[!f&&co(Oo,{id:e,href:n,"aria-current":p?"page":void 0,level:i,isCurrent:p,inTrail:d,children:t}),f&&co(Eo,{children:t}),r&&r.length>0&&o&&co(x,{children:co(Co,{ref:a,onClick:()=>c(!s),"aria-expanded":s,"aria-labelledby":e,children:co(lo,{style:{transform:s?"rotate(180deg)":"",transition:"transform 0.2s ease-in-out",width:"16px"}})})})]}),r&&r.length>0&&o&&co(Mo,{open:s,level:i,children:r.map((e=>co(ko,{...e,level:i+1},e.id)))})]})},Io=((e,t)=>{if(null==customElements.get(e)){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}}customElements.define(e,t)}const n=(e=>{const t={_rootsToObservers:new WeakMap,_roots:[],_executedScript:document.currentScript,props:{},render:({selector:n,clean:r=!1,replace:o=!1,inline:i=!1,initialProps:a={},propsSelector:s,elementName:c})=>{let l=!1;const u=()=>{if(!0===l)return;const u=(({selector:e,inline:t,elementName:n})=>{const r=document.currentScript;if(t&&null!=r&&r.parentNode)return[r.parentNode];const o=null==r?void 0:r.dataset.mountIn;return o?Array.from(document.querySelectorAll(o)).map((e=>{if(null!=n){const t=document.createElement(n),r=e.appendChild(t);return null!=r.shadowRoot?r.shadowRoot:r}return e})):e?Array.from(document.querySelectorAll(e)).map((e=>null!=e.shadowRoot?e.shadowRoot:e)):[]})({selector:n,inline:i,elementName:c});if(0===u.length)return;const{rootFragments:p}=(({island:e,widget:t,hostElements:n,clean:r,replace:o,initialProps:i,propsSelector:a})=>{const s=[];return n.forEach((n=>{const c=to(e,n,i,a);let l;if(r&&n.replaceChildren(),o)l=no(n.parentElement||document.body,n);else{const e=document.createElement("div");n.appendChild(e),l=no(n,e)}s.push(l),ro({island:e,widget:t,rootFragment:l,props:c});const u=(({island:e,hostElement:t,initialProps:n,onNewProps:r,propsSelector:o})=>{const i=new MutationObserver((function(i){i.forEach((function(){r(to(e,t,n,o))}))})),a={attributes:!0,childList:!0,characterData:!0};return e._executedScript&&i.observe(e._executedScript,a),Qr(t).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),o&&Xr(o).forEach((e=>{i.observe(e,qr({},a,{subtree:!0}))})),i.observe(Yr(t)?t.host:t,a),i})({island:e,hostElement:n,initialProps:i,onNewProps:n=>{ro({island:e,widget:t,rootFragment:l,props:n})},propsSelector:a});e._rootsToObservers.set(l,u)})),{rootFragments:s}})({island:t,widget:e,clean:r,hostElements:u,replace:o,initialProps:a,propsSelector:s});t._roots=t._roots.concat(p),l=!0};u(),document.addEventListener("DOMContentLoaded",u),document.addEventListener("load",u)},rerender:n=>{t._roots.forEach((r=>{ro({island:t,widget:e,rootFragment:r,props:qr({},t.props,n)})}))},destroy:()=>{t._roots.forEach((e=>{var n;null==(n=t._rootsToObservers.get(e))||n.disconnect(),W(null,e)}))}};return t})(t);return qr({},n,{render:t=>n.render(qr({elementName:e},t)),injectStyles:e=>{n._roots.forEach((t=>{const n=document.createElement("style");n.innerHTML=e,t.parentNode.prepend(n)}))}})})(mo,xo);Io.render({selector:`[data-island="${mo}"]`})})(),r})())); \ No newline at end of file diff --git a/decoupled-menu/src/main-menu.island.tsx b/decoupled-menu/src/main-menu.island.tsx index e8ba563..30f6994 100644 --- a/decoupled-menu/src/main-menu.island.tsx +++ b/decoupled-menu/src/main-menu.island.tsx @@ -349,7 +349,12 @@ const ListItem = styled.li<{ level?: number }>` } ` +/** + * Renders a single menu item (link and optional submenu). + * The caret and submenu are shown only when this item has children (items.length > 0). + */ const MenuItem = ({id, title, url, items, expanded, level = 0}: { + id: string title: string, url: string, items?: MenuContentItem[], @@ -403,7 +408,8 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: { {title} } - {(items && expanded) && + {/* Show caret only when this item has child menu items (not based on expanded). */} + {items && items.length > 0 && expanded && <>