@webority/ui-react 0.70.1 → 0.71.0

package/dist/components/AppChip.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";var o=[`neutral`,`primary`,`success`,`warning`,`danger`,`info`],s=[`soft`,`outline`,`solid`],c=[`sm`,`md`];function l({label:l,children:u,tone:d=`neutral`,variant:f=`soft`,size:p=`md`,leadingIcon:m,avatar:h,onRemove:g,onClick:_,disabled:v=!1,removeLabel:y,className:b=``,...x}){t(`AppChip`,x),e(`AppChip`,`tone`,d,o),e(`AppChip`,`variant`,f,s),e(`AppChip`,`size`,p,c);let S=l??u,C=[`chip`,d&&d!==`neutral`?d:``,f===`outline`?`chip-outline`:f===`solid`?`chip-solid`:``,p===`sm`?`chip-sm`:``,_?`chip-clickable`:``,g?`chip-removable`:``,v?`is-disabled`:``,b].filter(Boolean).join(` `),w=h?i(`span`,{className:`chip-avatar`,children:typeof h==`string`?i(`img`,{src:h,alt:``}):h}):m?i(`span`,{className:`chip-ic`,children:i(n,{name:m,size:p===`sm`?12:14})}):null,T=_?a(`button`,{type:`button`,className:`chip-body`,onClick:_,disabled:v,children:[w,i(`span`,{className:`chip-label`,children:S})]}):a(r,{children:[w,i(`span`,{className:`chip-label`,children:S})]});return a(`span`,{className:C,...x,children:[T,g&&i(`button`,{type:`button`,className:`chip-remove`,onClick:g,disabled:v,"aria-label":y||(typeof S==`string`?`Remove ${S}`:`Remove`),children:i(n,{name:`x`,size:p===`sm`?12:14})})]})}export{l as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";var o=[`neutral`,`primary`,`success`,`warning`,`danger`,`info`],s=[`soft`,`outline`,`solid`],c=[`sm`,`md`];function l({label:l,children:u,tone:d=`neutral`,variant:f=`soft`,size:p=`md`,leadingIcon:m,avatar:h,onRemove:g,onClick:_,disabled:v=!1,removeLabel:y,className:b=``,...x}){t(`AppChip`,x),e(`AppChip`,`tone`,d,o),e(`AppChip`,`variant`,f,s),e(`AppChip`,`size`,p,c);let S=l??u,C={},w={};for(let[e,t]of Object.entries(x))_&&(e.startsWith(`aria-`)||e.startsWith(`data-`))?C[e]=t:w[e]=t;let T=[`chip`,d&&d!==`neutral`?d:``,f===`outline`?`chip-outline`:f===`solid`?`chip-solid`:``,p===`sm`?`chip-sm`:``,_?`chip-clickable`:``,g?`chip-removable`:``,v?`is-disabled`:``,b].filter(Boolean).join(` `),E=h?i(`span`,{className:`chip-avatar`,children:typeof h==`string`?i(`img`,{src:h,alt:``}):h}):m?i(`span`,{className:`chip-ic`,children:i(n,{name:m,size:p===`sm`?12:14})}):null,D=_?a(`button`,{type:`button`,className:`chip-body`,...C,onClick:_,disabled:v,children:[E,i(`span`,{className:`chip-label`,children:S})]}):a(r,{children:[E,i(`span`,{className:`chip-label`,children:S})]});return a(`span`,{className:T,...w,children:[D,g&&i(`button`,{type:`button`,className:`chip-remove`,onClick:g,disabled:v,"aria-label":y||(typeof S==`string`?`Remove ${S}`:`Remove`),children:i(n,{name:`x`,size:p===`sm`?12:14})})]})}export{l as default};

package/dist/components/AppShell.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.70.1",
+  "version": "0.71.0",
   "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.70.1",
-    "@webority/ui-elements": "0.70.1"
+    "@webority/theme": "0.71.0",
+    "@webority/ui-elements": "0.71.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",