@webority/ui-react 0.84.0 → 0.85.1

package/dist/components/AppShell.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppAvatar.js";import{navMatchScore as a}from"../lib/navMatch.js";import{readShellCollapsed as o,writeShellCollapsed as s}from"../lib/shellCookie.js";import{initScrollEdges as c}from"@webority/ui-elements/helpers";import{useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _=99,v=4,y=5,b=[`prefix`,`exact`],x=[`comfortable`,`compact`],S=[`default`,`primary`],C=e=>e>_?`${_}+`:String(e);function w(i){let{groups:a=[],brand:u,sidebarStart:m,sidebarStartCompact:_,sidebarFooter:v,topbarStart:y,topbarEnd:b,footer:C,launcher:w,children:O,collapsed:A,onCollapsedChange:N,noSidebar:F=!1,density:I=`comfortable`,topbarTone:L=`default`,navLabel:R=`Main navigation`,linkComponent:z,currentPath:B,rememberCollapsed:V=!1,collapsedCookie:H=`wui-shell-collapsed`,tabBarLabel:U=`Quick navigation`,moreLabel:ee=`More`,userMenu:W,notifications:G,search:K,className:te=``,...q}=i;n(`AppShell`,q),t(`AppShell`,`density`,I,x),t(`AppShell`,`topbarTone`,L,S);let[ne,re]=p(()=>V&&A===void 0&&typeof document<`u`?o(H)??!1:!1),[J,Y]=p(!1),[ie,ae]=p(!1),[oe,se]=p(!1),X=f(null),Z=A??ne,ce=()=>{let e=!Z;A===void 0&&re(e),V&&s(e,H),N?.(e)},Q=d(()=>T(a,B),[a,B]),$=F?null:E(Q);return l(()=>{let e=()=>ae(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),l(()=>{c()},[]),l(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),l(()=>{let e=X.current;if(!e)return;let t=()=>se(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),l(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),g(`div`,{className:[`app-shell`,Z?`collapsed`:``,F?`no-sidebar`:``,J?`mobile-open`:``,te].filter(Boolean).join(` `),"data-density":I===`compact`?`compact`:void 0,...e(`AppShell`,i),...q,children:[h(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),g(`aside`,{className:`app-sidebar`,children:[u&&h(`div`,{className:`app-sidebar-brand`,children:u}),m&&h(`div`,{className:`app-sidebar-start`,children:m}),_&&h(`div`,{className:`app-sidebar-start-compact`,children:_}),h(`nav`,{className:`app-sidebar-scroll`,"aria-label":R,ref:X,tabIndex:oe?0:void 0,children:Q.map((e,t)=>g(`div`,{className:`app-nav-group`,children:[e.label&&h(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>h(k,{item:e,linkComponent:z,onNavigate:()=>Y(!1)},e.key??e.href??e.label)),e.after&&h(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),v&&h(`div`,{className:`app-sidebar-foot`,children:v}),!F&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:ce,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:h(r,{name:`chevrons-left`,size:20})})]}),g(`div`,{className:`app-main`,children:[g(`header`,{className:`app-topbar${ie?` scrolled`:``}`,"data-tone":L===`primary`?`primary`:void 0,children:[g(`div`,{className:`app-topbar-start`,children:[h(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:h(r,{name:`menu`,size:18})}),y,K&&h(P,{config:K})]}),g(`div`,{className:`app-topbar-end`,children:[b,G&&h(M,{config:G}),W&&h(j,{config:W,linkComponent:z})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:O}),C&&h(`footer`,{className:`app-footer`,children:C})]}),w&&h(`div`,{className:`wui-shell-launcher`,children:w}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":U,children:[$.tabs.map(e=>h(D,{tab:e,linkComponent:z},e.key??e.href)),$.hasMore&&g(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[h(`span`,{className:`wui-tabbar-icon`,children:h(r,{name:`more`,size:24})}),h(`span`,{className:`wui-tabbar-label`,children:ee})]})]}),h(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function T(e,n){let r=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:r(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),i=e.map(e=>({...e,items:r(e.items)})).filter(e=>e.items.length>0),o=[],s=e=>{for(let t of e)o.push(t),t.children&&s(t.children)};for(let e of i)s(e.items);for(let e of o)t(`AppShell`,`match`,e.match,b);let c=null;if(n!=null&&!o.some(e=>e.active===!0)){let e=-1;for(let t of o){if(t.active!=null||t.children?.length&&!t.href)continue;let r=a(n,t.href,{exact:t.match===`exact`,also:t.matchAlso});if(r<0)continue;let i=t.match===`exact`&&a(n,t.href,{exact:!0})>=0?1/0:r;i>e&&(e=i,c=t)}}for(let e of o)e.active=e.active??e===c;return i}function E(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?v:y;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function D({tab:e,linkComponent:t}){let n=`wui-tabbar-item${e.active?` active`:``}`,i=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24}):e.icon}),h(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&h(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),a=e.active?`page`:void 0;return t?h(t,{className:n,to:e.href,"aria-current":a,children:i}):h(`a`,{className:n,href:e.href,"aria-current":a,children:i})}function O(e){for(let t of e){if(t.active)return t;let e=t.children?.length?O(t.children):void 0;if(e)return e}}function k({item:e,linkComponent:t,onNavigate:n,depth:i=0}){let a=i>0,o=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,s=Array.isArray(e.children)&&e.children.length>0,c=s?O(e.children):void 0,u=!!c,d=c?c.key??c.href??c.label:null,[f,_]=p(u);l(()=>{d!=null&&_(!0)},[d]);let v=typeof e.label==`string`?e.label:void 0,y=!a&&e.icon&&h(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:22}):e.icon}),b=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),x=g(m,{children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),S=e.active?`page`:void 0;if(s){let s=h(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:h(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>h(k,{item:e,linkComponent:t,onNavigate:n,depth:i+1},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":S,onClick:n,children:x}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":S,onClick:n,children:x});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${a?` app-nav-subitem`:``}${u||e.active?` active`:``}${o}`,"data-label":v,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${v??``} pages`,onClick:()=>_(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),s]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${u?` active`:``}${o}`,"aria-expanded":f,"data-label":v,onClick:()=>_(e=>!e),children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),s]})}let C=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}${o}`;return t?h(t,{className:C,to:e.href,"aria-current":S,"data-label":v,onClick:n,children:x}):h(`a`,{className:C,href:e.href,"aria-current":S,"data-label":v,onClick:n,children:x})}function A(){let[e,t]=p(!1),n=f(null);return l(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function j({config:e,linkComponent:t}){let n=u(),{open:a,setOpen:o,ref:s}=A(),{name:c,role:l,photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?h(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):h(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=g(m,{children:[h(r,{name:`log-out`,size:18}),y]});return g(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[g(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[h(i,{name:c,src:d,tone:`auto`}),g(`span`,{className:`wui-usermenu-text`,children:[h(`span`,{className:`wui-usermenu-name`,children:c}),l&&h(`span`,{className:`wui-usermenu-role`,children:l})]}),h(r,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":n,"data-bs-popper":a?`static`:void 0,children:[g(`div`,{className:`wui-usermenu-head`,children:[h(i,{name:c,src:d,size:`lg`,tone:`auto`}),g(`div`,{className:`wui-usermenu-who`,children:[h(`div`,{className:`wui-usermenu-name`,children:c}),l&&h(`div`,{className:`wui-usermenu-role`,children:l})]})]}),f&&S(f,g(m,{children:[h(r,{name:`user`,size:18}),p]}),void 0,x),b.map(e=>{if(e.divider)return h(`hr`,{className:`dropdown-divider`},e.key);let t=g(m,{children:[e.icon&&h(r,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,n):h(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),v?h(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:h(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&h(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function M({config:e}){let t=u(),{open:n,setOpen:i,ref:a}=A(),{unread:o=0,items:s,loading:c=!1,onOpen:d,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[x,S]=p(``),w=f(o);l(()=>{w.current!==o&&(w.current=o,S(o===0?`No unread notifications`:`${C(o)} unread notifications`))},[o]);let T=null;return s?.length?T=h(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=g(m,{children:[h(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&h(`span`,{className:`wui-bell-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-bell-body`,children:[!e.read&&h(`span`,{className:`visually-hidden`,children:`Unread: `}),h(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&h(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?h(`a`,{className:n,href:e.href,"data-id":e.id,children:i},e.id??t):h(`div`,{className:n,"data-id":e.id,children:i},e.id??t)})}):c?T=h(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(T=h(`div`,{className:`wui-bell-state`,children:b})),g(`div`,{className:`dropdown wui-bell`,ref:a,children:[g(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?y:`${y}, ${C(o)} unread`,onClick:()=>{let e=!n;i(e),e&&d?.()},children:[h(r,{name:`notification`,size:20}),h(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:C(o)})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[g(`div`,{className:`wui-bell-head`,children:[h(`span`,{className:`wui-bell-title`,children:y}),_&&h(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),h(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:T}),v&&h(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var N=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function P({config:e}){let t=u(),{value:n=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:m=`Search`}=e,[_,v]=p(!1),[y,b]=p(!1),[x,S]=p({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=f(null),E=f(null),D=f([]),O=d(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;l(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||N(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},M=-1;return D.current=[],g(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[h(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":m,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:h(r,{name:`search`,size:20})}),g(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[g(`div`,{className:`search-wrap`,children:[h(r,{name:`search`,size:18,className:`search-icon`}),h(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:m,"aria-label":m,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:j})]}),h(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&g(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&g(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>g(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&h(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return g(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&h(`span`,{className:`wui-topsearch-hit-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-topsearch-hit-text`,children:[h(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&h(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{w as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import i from"./AppAvatar.js";import{navMatchScore as a}from"../lib/navMatch.js";import{readShellCollapsed as o,writeShellCollapsed as s}from"../lib/shellCookie.js";import{initScrollEdges as c}from"@webority/ui-elements/helpers";import{useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";var _=99,v=4,y=5,b=[`prefix`,`exact`],x=[`comfortable`,`compact`],S=[`default`,`primary`],C=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],w=new Set([`key`,`label`,`icon`,`iconVariant`,`iconSize`,`href`,`badge`,`badgeTone`,`badgeTitle`,`trailingIcon`,`active`,`match`,`matchAlso`,`tab`,`tabLabel`,`children`]),T=e=>e>_?`${_}+`:String(e);function E(i){let{groups:a=[],brand:u,sidebarStart:m,sidebarStartCompact:_,sidebarFooter:v,topbarStart:y,topbarEnd:b,footer:C,launcher:w,children:T,collapsed:E,onCollapsedChange:O,noSidebar:j=!1,density:N=`comfortable`,topbarTone:P=`default`,navLabel:F=`Main navigation`,linkComponent:I,currentPath:L,rememberCollapsed:R=!1,collapsedCookie:z=`wui-shell-collapsed`,tabBarLabel:B=`Quick navigation`,moreLabel:V=`More`,userMenu:H,notifications:U,search:W,className:G=``,...K}=i;n(`AppShell`,K),t(`AppShell`,`density`,N,x),t(`AppShell`,`topbarTone`,P,S);let[q,re]=p(()=>R&&E===void 0&&typeof document<`u`?o(z)??!1:!1),[J,Y]=p(!1),[ie,ae]=p(!1),[oe,se]=p(!1),X=f(null),Z=E??q,ce=()=>{let e=!Z;E===void 0&&re(e),R&&s(e,z),O?.(e)},Q=d(()=>D(a,L),[a,L]),$=j?null:k(Q);return l(()=>{let e=()=>ae(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),l(()=>{c()},[]),l(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),l(()=>{let e=X.current;if(!e)return;let t=()=>se(e.scrollHeight>e.clientHeight);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[Q]),l(()=>{if(!J)return;let e=e=>{e.key===`Escape`&&Y(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[J]),g(`div`,{className:[`app-shell`,Z?`collapsed`:``,j?`no-sidebar`:``,J?`mobile-open`:``,G].filter(Boolean).join(` `),"data-density":N===`compact`?`compact`:void 0,...e(`AppShell`,i),...K,children:[h(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),g(`aside`,{className:`app-sidebar`,children:[u&&h(`div`,{className:`app-sidebar-brand`,children:u}),m&&h(`div`,{className:`app-sidebar-start`,children:m}),_&&h(`div`,{className:`app-sidebar-start-compact`,children:_}),h(`nav`,{className:`app-sidebar-scroll`,"aria-label":F,ref:X,tabIndex:oe?0:void 0,children:Q.map((e,t)=>g(`div`,{className:`app-nav-group`,children:[e.label&&h(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>h(M,{item:e,linkComponent:I,onNavigate:()=>Y(!1)},e.key??e.href??e.label)),e.after&&h(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),v&&h(`div`,{className:`app-sidebar-foot`,children:v}),!j&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:ce,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:h(r,{name:`chevrons-left`,size:20})})]}),g(`div`,{className:`app-main`,children:[g(`header`,{className:`app-topbar${ie?` scrolled`:``}`,"data-tone":P===`primary`?`primary`:void 0,children:[g(`div`,{className:`app-topbar-start`,children:[h(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>Y(!0),"aria-label":`Open navigation`,"aria-expanded":J,children:h(r,{name:`menu`,size:18})}),y,W&&h(ne,{config:W})]}),g(`div`,{className:`app-topbar-end`,children:[b,U&&h(te,{config:U}),H&&h(ee,{config:H,linkComponent:I})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:T}),C&&h(`footer`,{className:`app-footer`,children:C})]}),w&&h(`div`,{className:`wui-shell-launcher`,children:w}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":B,children:[$.tabs.map(e=>h(A,{tab:e,linkComponent:I},e.key??e.href)),$.hasMore&&g(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>Y(!0),children:[h(`span`,{className:`wui-tabbar-icon`,children:h(r,{name:`more`,size:24})}),h(`span`,{className:`wui-tabbar-label`,children:V})]})]}),h(`button`,{type:`button`,className:`app-scrim`,onClick:()=>Y(!1),"aria-label":`Close navigation`,tabIndex:J?0:-1})]})}function D(e,r){let i=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:i(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),o=e.map(e=>({...e,items:i(e.items)})).filter(e=>e.items.length>0),s=[],c=e=>{for(let t of e)s.push(t),t.children&&c(t.children)};for(let e of o)c(e.items);for(let e of s)n(`AppShell items`,O(e)),t(`AppShell`,`match`,e.match,b),t(`AppShell`,`iconVariant`,e.iconVariant,C);let l=null;if(r!=null&&!s.some(e=>e.active===!0)){let e=-1;for(let t of s){if(t.active!=null||t.children?.length&&!t.href)continue;let n=a(r,t.href,{exact:t.match===`exact`,also:t.matchAlso});if(n<0)continue;let i=t.match===`exact`&&a(r,t.href,{exact:!0})>=0?1/0:n;i>e&&(e=i,l=t)}}for(let e of s)e.active=e.active??e===l;return o}function O(e){return Object.fromEntries(Object.entries(e).filter(([e])=>!w.has(e)))}function k(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?v:y;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function A({tab:e,linkComponent:t}){let n=`wui-tabbar-item${e.active?` active`:``}`,i=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24}):e.icon}),h(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&h(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge})]}),a=e.active?`page`:void 0;return t?h(t,{className:n,to:e.href,"aria-current":a,children:i}):h(`a`,{className:n,href:e.href,"aria-current":a,children:i})}function j(e){for(let t of e){if(t.active)return t;let e=t.children?.length?j(t.children):void 0;if(e)return e}}function M({item:e,linkComponent:t,onNavigate:n,depth:i=0}){let a=i>0,o=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,s=Array.isArray(e.children)&&e.children.length>0,c=s?j(e.children):void 0,u=!!c,d=c?c.key??c.href??c.label:null,[f,_]=p(u);l(()=>{d!=null&&_(!0)},[d]);let v=typeof e.label==`string`?e.label:void 0,y=!a&&e.icon&&h(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:e.iconSize??22,variant:e.iconVariant}):e.icon}),b=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),x=g(m,{children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),S=e.active?`page`:void 0;if(s){let s=h(`div`,{className:`app-nav-sub${f?` expanded`:``}`,inert:!f,"aria-hidden":!f||void 0,children:h(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>h(M,{item:e,linkComponent:t,onNavigate:n,depth:i+1},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":S,onClick:n,children:x}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":S,onClick:n,children:x});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${a?` app-nav-subitem`:``}${u||e.active?` active`:``}${o}`,"data-label":v,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":f,"aria-label":`Show or hide ${v??``} pages`,onClick:()=>_(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),s]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${u?` active`:``}${o}`,"aria-expanded":f,"data-label":v,onClick:()=>_(e=>!e),children:[y,h(`span`,{className:`app-nav-text`,children:e.label}),b,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),s]})}let C=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}${o}`;return t?h(t,{className:C,to:e.href,"aria-current":S,"data-label":v,onClick:n,children:x}):h(`a`,{className:C,href:e.href,"aria-current":S,"data-label":v,onClick:n,children:x})}function N(){let[e,t]=p(!1),n=f(null);return l(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function ee({config:e,linkComponent:t}){let n=u(),{open:a,setOpen:o,ref:s}=N(),{name:c,role:l,photo:d,profileHref:f,profileLabel:p=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?h(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):h(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=g(m,{children:[h(r,{name:`log-out`,size:18}),y]});return g(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[g(`button`,{type:`button`,id:n,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[h(i,{name:c,src:d,tone:`auto`}),g(`span`,{className:`wui-usermenu-text`,children:[h(`span`,{className:`wui-usermenu-name`,children:c}),l&&h(`span`,{className:`wui-usermenu-role`,children:l})]}),h(r,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":n,"data-bs-popper":a?`static`:void 0,children:[g(`div`,{className:`wui-usermenu-head`,children:[h(i,{name:c,src:d,size:`lg`,tone:`auto`}),g(`div`,{className:`wui-usermenu-who`,children:[h(`div`,{className:`wui-usermenu-name`,children:c}),l&&h(`div`,{className:`wui-usermenu-role`,children:l})]})]}),f&&S(f,g(m,{children:[h(r,{name:`user`,size:18}),p]}),void 0,x),b.map(e=>{if(e.divider)return h(`hr`,{className:`dropdown-divider`},e.key);let t=g(m,{children:[e.icon&&h(r,{name:e.icon,size:18}),e.label]}),n=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,n):h(`button`,{type:`button`,className:`dropdown-item`,onClick:n,children:t},e.key)}),v?h(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:h(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&h(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function te({config:e}){let t=u(),{open:n,setOpen:i,ref:a}=N(),{unread:o=0,items:s,loading:c=!1,onOpen:d,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[x,S]=p(``),C=f(o);l(()=>{C.current!==o&&(C.current=o,S(o===0?`No unread notifications`:`${T(o)} unread notifications`))},[o]);let w=null;return s?.length?w=h(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let n=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=g(m,{children:[h(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&h(`span`,{className:`wui-bell-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-bell-body`,children:[!e.read&&h(`span`,{className:`visually-hidden`,children:`Unread: `}),h(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&h(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?h(`a`,{className:n,href:e.href,"data-id":e.id,children:i},e.id??t):h(`div`,{className:n,"data-id":e.id,children:i},e.id??t)})}):c?w=h(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(w=h(`div`,{className:`wui-bell-state`,children:b})),g(`div`,{className:`dropdown wui-bell`,ref:a,children:[g(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":n,"aria-label":o===0?y:`${y}, ${T(o)} unread`,onClick:()=>{let e=!n;i(e),e&&d?.()},children:[h(r,{name:`notification`,size:20}),h(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:T(o)})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:x}),g(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${n?` show`:``}`,"aria-labelledby":t,"data-bs-popper":n?`static`:void 0,children:[g(`div`,{className:`wui-bell-head`,children:[h(`span`,{className:`wui-bell-title`,children:y}),_&&h(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),h(`div`,{className:`wui-bell-list`,"aria-busy":c||void 0,children:w}),v&&h(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var P=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function ne({config:e}){let t=u(),{value:n=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:c,placeholder:m=`Search`}=e,[_,v]=p(!1),[y,b]=p(!1),[x,S]=p({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=f(null),E=f(null),D=f([]),O=d(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;l(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||P(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let j=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):c&&n.trim()!==``&&(e.preventDefault(),c(n.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},M=-1;return D.current=[],g(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[h(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":m,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:h(r,{name:`search`,size:20})}),g(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[g(`div`,{className:`search-wrap`,children:[h(r,{name:`search`,size:18,className:`search-icon`}),h(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:m,"aria-label":m,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:n,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:j})]}),h(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&g(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&g(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,n,`”`]}),a.filter(e=>e.hits?.length).map((e,n)=>g(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&h(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{M+=1;let n=M;return g(`a`,{className:`wui-topsearch-hit${n===C?` is-active`:``}`,role:`option`,"aria-selected":n===C,id:`${t}-opt-${n}`,href:e.href,ref:e=>{D.current[n]=e},onClick:t=>s?.(e,t),children:[e.icon&&h(`span`,{className:`wui-topsearch-hit-icon`,children:h(r,{name:e.icon,size:18})}),g(`span`,{className:`wui-topsearch-hit-text`,children:[h(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&h(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${n}`)})]},e.label??n))]})})]}),h(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{E as default};

package/dist/types/components/AppShell.d.ts

@@ -6,6 +6,15 @@ export type NavItemShape = {
      * product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
      */
     icon?: string | import('react').ReactNode;
+    /**
+     * The iconsax style of a named
+     * `icon`; a node icon draws its own look.
+     */
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    /**
+     * The icon's width and height in px.
+     */
+    iconSize?: number;
     /**
      * With `children`, the label link goes here and the chevron alone opens the sub-list.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.84.0",
+  "version": "0.85.1",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.84.0",
-    "@webority/ui-elements": "0.84.0"
+    "@webority/theme": "0.85.1",
+    "@webority/ui-elements": "0.85.1"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",