@webority/ui-react 0.86.1 → 0.86.3

package/dist/components/AppAlert.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{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{variant:m=`info`,children:h,title:g,icon:_,iconVariant:v,iconSize:y,image:b,imageAlt:x=``,imageSize:S,className:C=``,onClose:w,dismissible:T,bordered:E=!0,accent:D=!1,size:O=`md`,action:k,role:A=`alert`,...j}=r;n(`AppAlert`,j),t(`AppAlert`,`variant`,m,l),t(`AppAlert`,`size`,O,u),t(`AppAlert`,`role`,A,d),t(`AppAlert`,`iconVariant`,v,f);let M=_===void 0?c[m]:_===`none`?null:_,N=!!b||!!M,P=k!=null&&k!==!1,F=g?o(`div`,{className:`alert-heading`,children:g}):null,I=N&&!!F&&!!h,L=y>0?y:O===`lg`?I?17:15:I?13:11;return o(i,{variant:m,className:[N?`alert-has-icon`:``,P?`alert-has-action`:``,I?`alert-stack`:``,E?``:`alert-borderless`,D?`alert-accent`:``,O===`sm`?`alert-sm`:``,O===`lg`?`alert-lg`:``,C].filter(Boolean).join(` `)||void 0,onClose:w,dismissible:T??typeof w==`function`,transition:!1,role:A===`none`?void 0:A,...e(`AppAlert`,r),...j,children:N||P?s(a,{children:[N&&p(M,L,v,b,x,S),s(`div`,{className:`alert-content`,children:[F,h]}),P&&o(`div`,{className:`alert-action`,children:k})]}):s(a,{children:[F,h]})})}export{m 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{Alert as i}from"react-bootstrap";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={info:`info`,success:`check`,warning:`alert-triangle`,danger:`x`},l=[`info`,`success`,`warning`,`danger`,`neutral`],u=[`sm`,`md`,`lg`],d=[`alert`,`status`,`none`],f=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`];function p(e,t,n,i,a,s){return i?o(`span`,{className:`alert-icon alert-icon-image`,style:s>0?{width:s,height:s}:void 0,children:o(`img`,{src:i,alt:a})}):e?typeof e==`string`?o(`span`,{className:`alert-icon`,children:o(r,{name:e,size:t,variant:n})}):o(`span`,{className:`alert-icon`,children:e}):null}function m(r){let{variant:m=`info`,children:h,title:g,icon:_,iconVariant:v,iconSize:y,image:b,imageAlt:x=``,imageSize:S,className:C=``,onClose:w,dismissible:T,bordered:E=!0,accent:D=!1,size:O=`md`,action:k,role:A=`alert`,...j}=r;n(`AppAlert`,j),t(`AppAlert`,`variant`,m,l),t(`AppAlert`,`size`,O,u),t(`AppAlert`,`role`,A,d),t(`AppAlert`,`iconVariant`,v,f);let M=_===void 0?c[m]:_===`none`?null:_,N=!!b||!!M,P=k!=null&&k!==!1,F=g?o(`div`,{className:`alert-heading`,children:g}):null,I=N&&!!F&&!!h,L=y>0?y:O===`lg`?I?17:15:I?13:11;return o(i,{variant:m,className:[N?`alert-has-icon`:``,P?`alert-has-action`:``,I?`alert-stack`:``,E?``:`alert-borderless`,D?`alert-accent`:``,O===`sm`?`alert-sm`:``,O===`lg`?`alert-lg`:``,C].filter(Boolean).join(` `)||void 0,onClose:w,dismissible:T??typeof w==`function`,transition:!1,role:A===`none`?void 0:A,...e(`AppAlert`,r),...j,children:N||P?s(a,{children:[N&&p(M,L,v,b,x,S),s(`div`,{className:`alert-content`,children:[F,h]}),P&&o(`div`,{className:`alert-action`,children:k})]}):s(a,{children:[F,h]})})}export{m as default};

package/dist/components/AppCard.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{useState as i}from"react";import{Card as a}from"react-bootstrap";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`elevated`,`outlined`,`muted`,`accent`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`none`,`sm`,`md`,`lg`],f={xs:320,sm:420,md:560,lg:720};function p(p){let{title:m,subtitle:h,headerIcon:g,titleClassName:_=``,header:v,headerExtra:y,headerActions:b,footer:x,media:S,children:C,variant:w=`default`,tone:T=`primary`,padding:E=`md`,maxWidth:D,className:O=``,bodyClassName:k=``,headerClassName:A=``,body:j=!0,lifted:M=!1,href:N,onClick:P,linkComponent:F,onClose:I,dismissible:L,closeLabel:R=`Close`,...z}=p,[B,V]=i(!1);n(`AppCard`,z),t(`AppCard`,`variant`,w,l),t(`AppCard`,`tone`,T,u),t(`AppCard`,`padding`,E,d);let{style:H,...U}=z,W=N!=null||P!=null,G=[w&&w!=="default"?`card-${w}`:``,w===`accent`&&T&&T!==`primary`?`tone-${T}`:``,E&&E!==`md`?`card-pad-${E}`:``,M?`card-lifted`:``,D==null?``:`card-constrained`,W?`card-clickable`:``,O].filter(Boolean).join(` `)||void 0,K=D==null?void 0:f[D]==null?typeof D==`number`?`${D}px`:D:`${f[D]}px`,q=K?{"--card-max-width":K,...H}:H,J={};N==null?P!=null&&(J={role:`button`,tabIndex:0,onClick:P,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),P(e))}}):(J=F?{as:F,to:N}:{as:`a`,href:N},P&&(J.onClick=P));let Y=L??typeof I==`function`,X=Y?s(`button`,{type:`button`,className:`card-close`,"aria-label":R,onClick:e=>{e.preventDefault(),e.stopPropagation(),V(!0),I?.()},onKeyDown:e=>e.stopPropagation(),children:s(r,{name:`x`,size:16})}):null,Z=m!=null||h!=null||g!=null,Q=v!=null||Z||y!=null||b!=null||Y,$=g==null?null:typeof g==`string`?s(r,{name:g,size:18}):g;return B?null:c(a,{className:G,style:q,...e(`AppCard`,p),...U,...J,children:[S!=null&&s(`div`,{className:`card-media`,children:S}),Q&&c(a.Header,{className:A||void 0,children:[v??c(o,{children:[Z&&c(`div`,{className:`card-header-main`,children:[$!=null&&s(`span`,{className:`card-header-icon`,children:$}),c(`div`,{className:`card-header-titles`,children:[m!=null&&s(`div`,{className:[`card-title`,_].filter(Boolean).join(` `),children:m}),h!=null&&s(`div`,{className:`card-subtitle`,children:h})]})]}),y,b!=null&&s(`div`,{className:`card-header-actions`,children:b})]}),X]}),j?s(a.Body,{className:k||void 0,children:C}):C,x!=null&&s(`div`,{className:`card-footer`,children:x})]})}export{p 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{useState as i}from"react";import{Card as a}from"react-bootstrap";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`elevated`,`outlined`,`muted`,`accent`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`none`,`sm`,`md`,`lg`],f=[`sans`,`serif`],p={xs:320,sm:420,md:560,lg:720};function m(m){let{title:h,subtitle:g,headerIcon:_,titleClassName:v=``,titleFont:y=`sans`,header:b,headerExtra:x,headerActions:S,footer:C,media:w,children:T,variant:E=`default`,tone:D=`primary`,padding:O=`md`,maxWidth:k,className:A=``,bodyClassName:j=``,headerClassName:M=``,body:ee=!0,lifted:N=!1,href:P,onClick:F,linkComponent:I,onClose:L,dismissible:R,closeLabel:z=`Close`,...B}=m,[V,H]=i(!1);n(`AppCard`,B),t(`AppCard`,`variant`,E,l),t(`AppCard`,`tone`,D,u),t(`AppCard`,`padding`,O,d),t(`AppCard`,`titleFont`,y,f);let{style:U,...W}=B,G=P!=null||F!=null,K=[E&&E!=="default"?`card-${E}`:``,E===`accent`&&D&&D!==`primary`?`tone-${D}`:``,O&&O!==`md`?`card-pad-${O}`:``,N?`card-lifted`:``,k==null?``:`card-constrained`,G?`card-clickable`:``,A].filter(Boolean).join(` `)||void 0,q=k==null?void 0:p[k]==null?typeof k==`number`?`${k}px`:k:`${p[k]}px`,J=q?{"--card-max-width":q,...U}:U,Y={};P==null?F!=null&&(Y={role:`button`,tabIndex:0,onClick:F,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),F(e))}}):(Y=I?{as:I,to:P}:{as:`a`,href:P},F&&(Y.onClick=F));let X=R??typeof L==`function`,Z=X?s(`button`,{type:`button`,className:`card-close`,"aria-label":z,onClick:e=>{e.preventDefault(),e.stopPropagation(),H(!0),L?.()},onKeyDown:e=>e.stopPropagation(),children:s(r,{name:`x`,size:16})}):null,Q=h!=null||g!=null||_!=null,te=b!=null||Q||x!=null||S!=null||X,$=_==null?null:typeof _==`string`?s(r,{name:_,size:18}):_;return V?null:c(a,{className:K,style:J,...e(`AppCard`,m),...W,...Y,children:[w!=null&&s(`div`,{className:`card-media`,children:w}),te&&c(a.Header,{className:M||void 0,children:[b??c(o,{children:[Q&&c(`div`,{className:`card-header-main`,children:[$!=null&&s(`span`,{className:`card-header-icon`,children:$}),c(`div`,{className:`card-header-titles`,children:[h!=null&&s(`div`,{className:[`card-title`,v].filter(Boolean).join(` `),style:y===`serif`?{fontFamily:`var(--wui-font-display)`}:void 0,children:h}),g!=null&&s(`div`,{className:`card-subtitle`,children:g})]})]}),x,S!=null&&s(`div`,{className:`card-header-actions`,children:S})]}),Z]}),ee?s(a.Body,{className:j||void 0,children:T}):T,C!=null&&s(`div`,{className:`card-footer`,children:C})]})}export{m as default};

package/dist/components/AppInput.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 ee from"../lib/FieldMessage.js";import te from"./AppPopover.js";import ne from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{MASK_INPUT_TYPES as re,MASK_NAMES as ie,attachInputMask as ae,evaluatePassword as oe,formatMasked as a,isMaskPattern as se,postedMasked as ce}from"@webority/ui-elements/helpers";import{forwardRef as o,useEffect as s,useId as le,useRef as c,useState as l}from"react";import{Form as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var ue=[`sm`,`md`,`lg`],de=[`bare`],fe=[!0,!1,`above`],p=o(function(o,p){let{label:m,required:h=!1,error:pe,hint:me,help:g,helpLabel:he=`More information`,type:_=`text`,size:v=`md`,leftIcon:y,rightIcon:b,onRightIconClick:x,rightIconLabel:ge,unit:S,id:_e,name:ve,className:ye=``,fieldClassName:C=``,disabled:w=!1,clearable:T=!1,showCount:E=!1,maxLength:D,prefix:O,suffix:k,action:A,floatingLabel:j=!1,variant:M,passwordRequirements:N=!1,requirementsPlacement:P=`auto`,mask:F,postFormatted:I=!1,onMaskChange:L,...R}=o;n(`AppInput`,R),t(`AppInput`,`size`,v,ue),t(`AppInput`,`variant`,M,de),t(`AppInput`,`floatingLabel`,j,fe),F!=null&&!se(F)&&t(`AppInput`,`mask`,F,ie),F!=null&&t(`AppInput`,`type`,_,re);let[z,be]=l(!1),[xe,Se]=l(``),B=pe||xe,Ce=le(),V=_e||Ce,H=_===`password`,we=H&&z?`text`:_,U=c(null),Te=e=>{U.current=e,typeof p==`function`?p(e):p&&(p.current=e)},W=String(R.value??R.defaultValue??``),[Ee,G]=l(()=>!!W),[K,q]=l(()=>W.length),De=T&&!w,J=T||E,Y=H&&!!N,[Oe,ke]=l(W);s(()=>{!Y||R.value===void 0||ke(String(R.value??``))},[R.value,Y]),s(()=>{if(!J||R.value===void 0)return;let e=String(R.value??``);G(!!e),q(e.length)},[R.value,J]);let Ae=e=>{G(!!e.target.value),q(e.target.value.length),R.onInput?.(e)},je=e=>{Y&&ke(e.target.value),J?Ae(e):R.onInput?.(e)},Me=F?{...R.value!==void 0&&{value:a(F,R.value)},...R.defaultValue!==void 0&&{defaultValue:a(F,R.defaultValue)}}:null,Ne=c(L);Ne.current=L,s(()=>{let e=U.current;if(!(!F||!e))return ae(e,{mask:F,postFormatted:I,onChange:(e,t)=>Ne.current?.(e,t),onInvalidChange:Se})},[F,I]);let Pe=e=>F&&!I&&e?t=>{let n=t.target,r=new Proxy(n,{get:(e,t)=>{if(t===`value`)return ce(F,e.value);let n=Reflect.get(e,t,e);return typeof n==`function`?n.bind(e):n}});e(Object.create(t,{target:{value:r}}))}:e,Fe=De?d(`button`,{type:`button`,className:`input-clear`,onClick:()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),G(!1),e.focus()},"aria-label":`Clear`,tabIndex:-1,hidden:!Ee,children:d(r,{name:`x`,size:16})}):null,Ie=B&&V?`${V}-error`:void 0,Le=me&&V?`${V}-hint`:void 0,X=Y&&P===`inline`,Re=X&&V?`${V}-requirements`:void 0,ze=Ie||(X?Re:Le),Be=[`input`,v===`sm`?`input-sm`:``,v===`lg`?`input-lg`:``,B?`error`:``,H?`pw`:``,S?`num-input`:``,!(j&&m||O||k||S||H||b)&&T&&De?`has-clear`:``,M===`bare`?`input-bare`:``,ye].filter(Boolean).join(` `),Z=d(u.Control,{id:V,name:ve,type:we,className:Be,disabled:w,required:h,"aria-invalid":B?`true`:`false`,"aria-describedby":ze,maxLength:D,...R,onChange:Pe(R.onChange),onBlur:Pe(R.onBlur),...Me,placeholder:j?` `:R.placeholder,ref:Te,onInput:J||Y?je:R.onInput}),Q=N===!0||N,Ve=Q&&typeof Q==`object`&&Q.title||`Password requirements`,He=Y?oe(Oe,Q):null,Ue=Y?d(`ul`,{className:`pw-criteria`,"aria-live":`polite`,id:Re,"aria-label":X?Ve:void 0,children:He.map(e=>f(`li`,{className:`pw-rule ${e.met?`met`:`unmet`}`,children:[d(`span`,{className:`pw-mark`,"aria-hidden":`true`}),d(`span`,{className:`pw-rule-text`,children:e.label}),d(`span`,{className:`visually-hidden`,children:e.met?`: met`:`: not met`})]},e.key))}):null,$;if(j&&m&&!H)$=f(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:[Z,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]});else if(A)$=f(`div`,{className:`input-action-row`,children:[f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}),d(`div`,{className:`input-action`,children:A})]});else if(O||k)$=f(`div`,{className:`input-affixed`,children:[O!=null&&d(`span`,{className:`affix affix-pre`,children:O}),Z,k!=null&&d(`span`,{className:`affix affix-suf`,children:k})]});else if(S)$=f(`div`,{className:`input-with-unit`,children:[Z,d(`span`,{className:`unit`,children:S})]});else if(H){let e=f(`button`,{type:`button`,className:`pw-toggle${z?` pw-revealed`:``}`,onClick:()=>be(e=>!e),"aria-label":z?`Hide password`:`Show password`,tabIndex:-1,children:[d(r,{name:`eye`,size:18,className:`pw-eye`}),d(r,{name:`eye-off`,size:18,className:`pw-eye-off`})]}),t=j&&m?d(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:f(`div`,{className:`input-wrap`,children:[Z,e,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]})}):f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,e]});$=Y&&!X?d(te,{trigger:t,triggerType:`focus`,placement:P,title:Ve,className:`pw-popover`,children:Ue}):t}else $=b?f(`div`,{className:`input-wrap`,children:[Z,d(`button`,{type:`button`,className:`pw-toggle`,onClick:x,disabled:!x,tabIndex:-1,"aria-label":ge||b,children:d(r,{name:b,size:18})})]}):T?f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,Fe]}):y?f(`div`,{className:`input-icon`,children:[d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}):Z;return f(u.Group,{...e(`AppInput`,o),className:`field${C?` ${C}`:``}`,children:[m&&!j&&f(u.Label,{className:`label`,htmlFor:V,children:[m,h&&d(i,{}),g&&d(ne,{label:he,children:g})]}),$,X&&d(`div`,{className:`wui-pw-inline`,children:Ue}),d(ee,{error:B,hint:X?null:me,errorId:Ie,hintId:Le}),E&&f(`div`,{className:`field-count${D&&K>=D?` at-limit`:``}`,children:[K,D?` / ${D}`:``]})]})});export{p 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 ee from"../lib/FieldMessage.js";import te from"./AppPopover.js";import ne from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{MASK_INPUT_TYPES as re,MASK_NAMES as ie,attachInputMask as ae,evaluatePassword as oe,formatMasked as a,isMaskPattern as se,postedMasked as ce}from"@webority/ui-elements/helpers";import{forwardRef as o,useEffect as s,useId as le,useRef as c,useState as l}from"react";import{Form as u}from"react-bootstrap";import{jsx as d,jsxs as f}from"react/jsx-runtime";var ue=[`sm`,`md`,`lg`,`xl`],de=[`bare`],fe=[!0,!1,`above`],p=o(function(o,p){let{label:m,required:h=!1,error:pe,hint:me,help:g,helpLabel:he=`More information`,type:_=`text`,size:v=`md`,leftIcon:y,rightIcon:b,onRightIconClick:x,rightIconLabel:ge,unit:S,id:_e,name:ve,className:ye=``,fieldClassName:C=``,disabled:w=!1,clearable:T=!1,showCount:E=!1,maxLength:D,prefix:O,suffix:k,action:A,floatingLabel:j=!1,variant:M,passwordRequirements:N=!1,requirementsPlacement:P=`auto`,mask:F,postFormatted:I=!1,onMaskChange:L,...R}=o;n(`AppInput`,R),t(`AppInput`,`size`,v,ue),t(`AppInput`,`variant`,M,de),t(`AppInput`,`floatingLabel`,j,fe),F!=null&&!se(F)&&t(`AppInput`,`mask`,F,ie),F!=null&&t(`AppInput`,`type`,_,re);let[z,be]=l(!1),[xe,Se]=l(``),B=pe||xe,Ce=le(),V=_e||Ce,H=_===`password`,we=H&&z?`text`:_,U=c(null),Te=e=>{U.current=e,typeof p==`function`?p(e):p&&(p.current=e)},W=String(R.value??R.defaultValue??``),[Ee,G]=l(()=>!!W),[K,q]=l(()=>W.length),De=T&&!w,J=T||E,Y=H&&!!N,[Oe,ke]=l(W);s(()=>{!Y||R.value===void 0||ke(String(R.value??``))},[R.value,Y]),s(()=>{if(!J||R.value===void 0)return;let e=String(R.value??``);G(!!e),q(e.length)},[R.value,J]);let Ae=e=>{G(!!e.target.value),q(e.target.value.length),R.onInput?.(e)},je=e=>{Y&&ke(e.target.value),J?Ae(e):R.onInput?.(e)},Me=F?{...R.value!==void 0&&{value:a(F,R.value)},...R.defaultValue!==void 0&&{defaultValue:a(F,R.defaultValue)}}:null,Ne=c(L);Ne.current=L,s(()=>{let e=U.current;if(!(!F||!e))return ae(e,{mask:F,postFormatted:I,onChange:(e,t)=>Ne.current?.(e,t),onInvalidChange:Se})},[F,I]);let Pe=e=>F&&!I&&e?t=>{let n=t.target,r=new Proxy(n,{get:(e,t)=>{if(t===`value`)return ce(F,e.value);let n=Reflect.get(e,t,e);return typeof n==`function`?n.bind(e):n}});e(Object.create(t,{target:{value:r}}))}:e,Fe=De?d(`button`,{type:`button`,className:`input-clear`,onClick:()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?t.call(e,``):e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),G(!1),e.focus()},"aria-label":`Clear`,tabIndex:-1,hidden:!Ee,children:d(r,{name:`x`,size:16})}):null,Ie=B&&V?`${V}-error`:void 0,Le=me&&V?`${V}-hint`:void 0,X=Y&&P===`inline`,Re=X&&V?`${V}-requirements`:void 0,ze=Ie||(X?Re:Le),Be=[`input`,v===`sm`?`input-sm`:``,v===`lg`?`input-lg`:``,v===`xl`?`wui-input-xl`:``,B?`error`:``,H?`pw`:``,S?`num-input`:``,!(j&&m||O||k||S||H||b)&&T&&De?`has-clear`:``,M===`bare`?`input-bare`:``,ye].filter(Boolean).join(` `),Z=d(u.Control,{id:V,name:ve,type:we,className:Be,disabled:w,required:h,"aria-invalid":B?`true`:`false`,"aria-describedby":ze,maxLength:D,...R,onChange:Pe(R.onChange),onBlur:Pe(R.onBlur),...Me,placeholder:j?` `:R.placeholder,ref:Te,onInput:J||Y?je:R.onInput}),Q=N===!0||N,Ve=Q&&typeof Q==`object`&&Q.title||`Password requirements`,He=Y?oe(Oe,Q):null,Ue=Y?d(`ul`,{className:`pw-criteria`,"aria-live":`polite`,id:Re,"aria-label":X?Ve:void 0,children:He.map(e=>f(`li`,{className:`pw-rule ${e.met?`met`:`unmet`}`,children:[d(`span`,{className:`pw-mark`,"aria-hidden":`true`}),d(`span`,{className:`pw-rule-text`,children:e.label}),d(`span`,{className:`visually-hidden`,children:e.met?`: met`:`: not met`})]},e.key))}):null,$;if(j&&m&&!H)$=f(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:[Z,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]});else if(A)$=f(`div`,{className:`input-action-row`,children:[f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}),d(`div`,{className:`input-action`,children:A})]});else if(O||k)$=f(`div`,{className:`input-affixed`,children:[O!=null&&d(`span`,{className:`affix affix-pre`,children:O}),Z,k!=null&&d(`span`,{className:`affix affix-suf`,children:k})]});else if(S)$=f(`div`,{className:`input-with-unit`,children:[Z,d(`span`,{className:`unit`,children:S})]});else if(H){let e=f(`button`,{type:`button`,className:`pw-toggle${z?` pw-revealed`:``}`,onClick:()=>be(e=>!e),"aria-label":z?`Hide password`:`Show password`,tabIndex:-1,children:[d(r,{name:`eye`,size:18,className:`pw-eye`}),d(r,{name:`eye-off`,size:18,className:`pw-eye-off`})]}),t=j&&m?d(`div`,{className:j===`above`?`field-float wui-float-above`:`field-float`,children:f(`div`,{className:`input-wrap`,children:[Z,e,f(`label`,{className:`float-label`,htmlFor:V,children:[m,h&&d(i,{})]})]})}):f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,e]});$=Y&&!X?d(te,{trigger:t,triggerType:`focus`,placement:P,title:Ve,className:`pw-popover`,children:Ue}):t}else $=b?f(`div`,{className:`input-wrap`,children:[Z,d(`button`,{type:`button`,className:`pw-toggle`,onClick:x,disabled:!x,tabIndex:-1,"aria-label":ge||b,children:d(r,{name:b,size:18})})]}):T?f(`div`,{className:y?`input-icon`:`input-wrap`,children:[y&&d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z,Fe]}):y?f(`div`,{className:`input-icon`,children:[d(`span`,{className:`ic`,children:d(r,{name:y,size:16})}),Z]}):Z;return f(u.Group,{...e(`AppInput`,o),className:`field${C?` ${C}`:``}`,children:[m&&!j&&f(u.Label,{className:`label`,htmlFor:V,children:[m,h&&d(i,{}),g&&d(ne,{label:he,children:g})]}),$,X&&d(`div`,{className:`wui-pw-inline`,children:Ue}),d(ee,{error:B,hint:X?null:me,errorId:Ie,hintId:Le}),E&&f(`div`,{className:`field-count${D&&K>=D?` at-limit`:``}`,children:[K,D?` / ${D}`:``]})]})});export{p as default};

package/dist/components/AppLink.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={sm:13,md:15,lg:18},l=[`underline`,`underline-center`,`static`,`slide`,`icon`,`highlight`,`bracket`,`fade`,`grow`,`glow`,`shine`,`none`];function u(e,t,n){if(!e)return null;let r=`wui-link__ic wui-link__ic--${t}`;return typeof e==`string`?o(`span`,{className:r,children:o(i,{name:e,size:c[n]??c.md})}):o(`span`,{className:r,children:e})}function d(i){let{children:d,label:f,href:p,animation:m=`underline`,leftIcon:h=null,rightIcon:g=null,size:_=`md`,surface:v=`default`,external:y=!1,disabled:b=!1,linkComponent:x,className:S=``,...C}=i;r(`AppLink`,C),n(`AppLink`,`animation`,m,l),n(`AppLink`,`size`,_,Object.keys(c)),n(`AppLink`,`surface`,v,[`default`,`dark`]),!p&&C.onClick&&t(`[@webority/ui-react] AppLink has onClick but no href, so it renders an anchor that keyboards cannot reach. Use AppButton for an action, or pass href.`);let w=l.includes(m)?m:`underline`,T=w===`icon`&&!g&&!h?`arrow-right`:g,E=[`wui-link`,`wui-link--${w}`,_===`md`?``:`wui-link--${_}`,b?`is-disabled`:``,v===`dark`?`wui-link--surface-dark`:``,S].filter(Boolean).join(` `),D=s(a,{children:[u(h,`left`,_),o(`span`,{className:`wui-link__label`,children:d??f}),u(T,`right`,_)]});return b?o(`span`,{className:E,"aria-disabled":`true`,...e(`AppLink`,i),...C,children:D}):x&&!y?o(x,{className:E,to:p,...e(`AppLink`,i),...C,children:D}):o(`a`,{className:E,href:p,target:y?`_blank`:void 0,rel:y?`noopener noreferrer`:void 0,...e(`AppLink`,i),...C,children:D})}export{d as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{Fragment as a,jsx as o,jsxs as s}from"react/jsx-runtime";var c={sm:13,md:15,lg:18},l=[`underline`,`underline-center`,`static`,`slide`,`icon`,`highlight`,`bracket`,`fade`,`grow`,`glow`,`shine`,`none`];function u(e,t,n){if(!e)return null;let r=`wui-link__ic wui-link__ic--${t}`;return typeof e==`string`?o(`span`,{className:r,children:o(i,{name:e,size:c[n]??c.md})}):o(`span`,{className:r,children:e})}function d(i){let{children:d,label:f,href:p,animation:m=`underline`,leftIcon:h=null,rightIcon:g=null,size:_=`md`,surface:v=`default`,external:y=!1,disabled:b=!1,linkComponent:x,className:S=``,...C}=i;r(`AppLink`,C),n(`AppLink`,`animation`,m,l),n(`AppLink`,`size`,_,Object.keys(c)),n(`AppLink`,`surface`,v,[`default`,`dark`]),!p&&C.onClick&&!x&&t(`[@webority/ui-react] AppLink has onClick but no href, so it renders an anchor that keyboards cannot reach. Use AppButton for an action, or pass href.`);let w=l.includes(m)?m:`underline`,T=w===`icon`&&!g&&!h?`arrow-right`:g,E=[`wui-link`,`wui-link--${w}`,_===`md`?``:`wui-link--${_}`,b?`is-disabled`:``,v===`dark`?`wui-link--surface-dark`:``,S].filter(Boolean).join(` `),D=s(a,{children:[u(h,`left`,_),o(`span`,{className:`wui-link__label`,children:d??f}),u(T,`right`,_)]});return b?o(`span`,{className:E,"aria-disabled":`true`,...e(`AppLink`,i),...C,children:D}):x&&!y?o(x,{className:E,to:p,...e(`AppLink`,i),...C,children:D}):o(`a`,{className:E,href:p,target:y?`_blank`:void 0,rel:y?`noopener noreferrer`:void 0,...e(`AppLink`,i),...C,children:D})}export{d as default};

package/dist/components/AppSelect.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import ee from"./warnUnknownProps.js";import te from"../lib/FieldMessage.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o}from"./useWuiControl.js";import{forwardRef as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var ne=[`sm`,`lg`],re=(e,t)=>({value:e.value,label:t,icon:e.icon}),m=s(function(s,m){let{value:h,onChange:g,options:_=[],placeholder:v=`Select...`,searchPlaceholder:y=`Search...`,searchable:b=!1,clearable:ie=!1,size:x,icon:ae,prefix:S,suffix:C,floatingLabel:w=!1,disabled:oe,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,...R}=s;ee(`AppSelect`,R),t(`AppSelect`,`size`,x,ne);let z=c(),{setRef:B,innerRef:V}=a({ref:m,value:h??``,onChange:g}),{portal:H,toElementOptions:U}=i(_),W=u({el:null,options:null,map:null});l(()=>{let e=V.current;if(!e||W.current.el===e&&W.current.options===_&&W.current.map===U)return;W.current={el:e,options:_,map:U};let t=U(_,re);o(t,e.options)||(e.options=t)});let G=j||z,K=w&&T,q=D&&G?`${G}-error`:void 0,J=O&&G?`${G}-hint`:void 0,se=q||J||L,Y=!K&&(S!=null||C!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,s),Q=p(d,{children:[f(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":se||void 0,"aria-invalid":D?`true`:void 0,ref:B,value:h||void 0,id:G,name:M,placeholder:w&&T?` `:v,"search-placeholder":y,searchable:b?``:void 0,clearable:ie?``:void 0,size:x||void 0,icon:ae||void 0,disabled:oe?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...R}),H]}),$=Y?p(`div`,{...X?Z:null,className:`input-affixed`,children:[S!=null&&f(`span`,{className:`affix affix-pre`,children:S}),Q,C!=null&&f(`span`,{className:`affix affix-suf`,children:C})]}):Q;if(X)return $;let ce=[`field`,P].filter(Boolean).join(` `);return p(`div`,{...Z,className:ce,children:[T&&!K&&p(`label`,{className:`label`,htmlFor:G,children:[T,E&&f(r,{}),k&&f(n,{label:A,children:k})]}),K?p(`div`,{className:`field-float`,children:[Q,p(`label`,{className:`float-label`,htmlFor:G,children:[T,E&&f(r,{})]})]}):$,f(te,{error:D,hint:O,errorId:q,hintId:J})]})});export{m as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import ee from"./warnUnknownProps.js";import te from"../lib/FieldMessage.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o}from"./useWuiControl.js";import{forwardRef as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var ne=[`sm`,`lg`,`xl`],re=(e,t)=>({value:e.value,label:t,icon:e.icon}),m=s(function(s,m){let{value:h,onChange:g,options:_=[],placeholder:v=`Select...`,searchPlaceholder:y=`Search...`,searchable:b=!1,clearable:ie=!1,size:x,icon:ae,prefix:S,suffix:C,floatingLabel:w=!1,disabled:oe,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,...R}=s;ee(`AppSelect`,R),t(`AppSelect`,`size`,x,ne);let z=c(),{setRef:B,innerRef:V}=a({ref:m,value:h??``,onChange:g}),{portal:H,toElementOptions:U}=i(_),W=u({el:null,options:null,map:null});l(()=>{let e=V.current;if(!e||W.current.el===e&&W.current.options===_&&W.current.map===U)return;W.current={el:e,options:_,map:U};let t=U(_,re);o(t,e.options)||(e.options=t)});let G=j||z,K=w&&T,q=D&&G?`${G}-error`:void 0,J=O&&G?`${G}-hint`:void 0,se=q||J||L,Y=!K&&(S!=null||C!=null),X=!T&&!D&&!O,Z=e(`AppSelect`,s),Q=p(d,{children:[f(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":se||void 0,"aria-invalid":D?`true`:void 0,ref:B,value:h||void 0,id:G,name:M,placeholder:w&&T?` `:v,"search-placeholder":y,searchable:b?``:void 0,clearable:ie?``:void 0,size:x||void 0,icon:ae||void 0,disabled:oe?``:void 0,required:E?``:void 0,className:N||void 0,...X&&!Y?Z:null,...R}),H]}),$=Y?p(`div`,{...X?Z:null,className:`input-affixed`,children:[S!=null&&f(`span`,{className:`affix affix-pre`,children:S}),Q,C!=null&&f(`span`,{className:`affix affix-suf`,children:C})]}):Q;if(X)return $;let ce=[`field`,P].filter(Boolean).join(` `);return p(`div`,{...Z,className:ce,children:[T&&!K&&p(`label`,{className:`label`,htmlFor:G,children:[T,E&&f(r,{}),k&&f(n,{label:A,children:k})]}),K?p(`div`,{className:`field-float`,children:[Q,p(`label`,{className:`float-label`,htmlFor:G,children:[T,E&&f(r,{})]})]}):$,f(te,{error:D,hint:O,errorId:q,hintId:J})]})});export{m as default};

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=[`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};
+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:w,launcher:T,children:E,collapsed:O,onCollapsedChange:j,noSidebar:N=!1,density:F=`comfortable`,itemHeight:I,iconVariant:L,topbarTone:R=`default`,navLabel:ne=`Main navigation`,linkComponent:z,currentPath:B,rememberCollapsed:V=!1,collapsedCookie:H=`wui-shell-collapsed`,tabBarLabel:re=`Quick navigation`,moreLabel:ie=`More`,userMenu:U,notifications:W,search:G,className:ae=``,style:K,...q}=i;n(`AppShell`,q),t(`AppShell`,`density`,F,x),t(`AppShell`,`topbarTone`,R,S),t(`AppShell`,`iconVariant`,L,C);let oe=I>0?{...K,"--wui-nav-item-height":`${I}px`}:K,[se,ce]=p(()=>V&&O===void 0&&typeof document<`u`?o(H)??!1:!1),[J,Y]=p(!1),[le,ue]=p(!1),[de,fe]=p(!1),X=f(null),Z=O??se,pe=()=>{let e=!Z;O===void 0&&ce(e),V&&s(e,H),j?.(e)},Q=d(()=>D(a,B),[a,B]),$=N?null:k(Q);return l(()=>{let e=()=>ue(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=()=>fe(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`:``,N?`no-sidebar`:``,J?`mobile-open`:``,ae].filter(Boolean).join(` `),"data-density":F===`compact`?`compact`:void 0,style:oe,...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":ne,ref:X,tabIndex:de?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:z,onNavigate:()=>Y(!1),iconVariant:L},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}),!N&&h(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:pe,"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${le?` scrolled`:``}`,"data-tone":R===`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,G&&h(te,{config:G})]}),g(`div`,{className:`app-topbar-end`,children:[b,W&&h(ee,{config:W}),U&&h(P,{config:U,linkComponent:z})]})]}),h(`main`,{className:`app-content`,id:`main-content`,children:E}),w&&h(`footer`,{className:`app-footer`,children:w})]}),T&&h(`div`,{className:`wui-shell-launcher`,children:T}),$&&g(`nav`,{className:`wui-tabbar`,"aria-label":re,children:[$.tabs.map(e=>h(A,{tab:e,linkComponent:z,iconVariant:L},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:ie})]})]}),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,iconVariant:n}){let i=`wui-tabbar-item${e.active?` active`:``}`,a=g(m,{children:[e.icon&&h(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?h(r,{name:e.icon,size:24,variant:e.iconVariant??n}):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})]}),o=e.active?`page`:void 0;return t?h(t,{className:i,to:e.href,"aria-current":o,children:a}):h(`a`,{className:i,href:e.href,"aria-current":o,children:a})}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,iconVariant:a}){let o=i>0,s=i>1?` wui-nav-depth-${Math.min(i,6)}`:``,c=Array.isArray(e.children)&&e.children.length>0,u=c?j(e.children):void 0,d=!!u,f=u?u.key??u.href??u.label:null,[_,v]=p(d);l(()=>{f!=null&&v(!0)},[f]);let y=typeof e.label==`string`?e.label:void 0,b=!o&&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??a}):e.icon}),x=e.badge!=null&&h(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,title:e.badgeTitle||void 0,children:e.badge}),S=g(m,{children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,e.trailingIcon&&h(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?h(r,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),C=e.active?`page`:void 0;if(c){let c=h(`div`,{className:`app-nav-sub${_?` expanded`:``}`,inert:!_,"aria-hidden":!_||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,iconVariant:a},e.key??e.href))})});if(e.href){let i=t?h(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":C,onClick:n,children:S}):h(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":C,onClick:n,children:S});return g(m,{children:[g(`div`,{className:`app-nav-item has-children wui-nav-split${o?` app-nav-subitem`:``}${d||e.active?` active`:``}${s}`,"data-label":y,children:[i,h(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":_,"aria-label":`Show or hide ${y??``} pages`,onClick:()=>v(e=>!e),children:h(r,{name:`chevron-right`,size:16})})]}),c]})}return g(m,{children:[g(`button`,{type:`button`,className:`app-nav-item${o?` app-nav-subitem`:``} has-children${d?` active`:``}${s}`,"aria-expanded":_,"data-label":y,onClick:()=>v(e=>!e),children:[b,h(`span`,{className:`app-nav-text`,children:e.label}),x,h(`span`,{className:`app-nav-caret`,children:h(r,{name:`chevron-right`,size:16})})]}),c]})}let w=`app-nav-item${o?` app-nav-subitem`:``}${e.active?` active`:``}${s}`;return t?h(t,{className:w,to:e.href,"aria-current":C,"data-label":y,onClick:n,children:S}):h(`a`,{className:w,href:e.href,"aria-current":C,"data-label":y,onClick:n,children:S})}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 P({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 ee({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 F=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function te({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||F(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/AppAlert.d.ts

@@ -11,7 +11,7 @@
  *   `accent` adds the thick left edge that marks such an aside.
  *
  * @param {object} props
- * @param {"info"|"success"|"warning"|"danger"} [props.variant="info"]
+ * @param {"info"|"success"|"warning"|"danger"|"neutral"} [props.variant="info"] `neutral` is a plain notice in ink on a grey surface, with no semantic colour.
  * @param {import('react').ReactNode} props.children The alert body.
  * @param {import('react').ReactNode} [props.title] A bold heading line above the body (`.alert-heading`).
  * @param {string|import('react').ReactNode} [props.icon] A leading glyph — a semantic icon name or a node. Defaults to the variant's badge glyph; pass `null` for none.
@@ -33,7 +33,7 @@
  *   explanatory page content, which must not interrupt a screen reader.
  */
 export default function AppAlert(props: {
-    variant?: "info" | "success" | "warning" | "danger";
+    variant?: "info" | "success" | "warning" | "danger" | "neutral";
     children: import('react').ReactNode;
     title?: import('react').ReactNode;
     icon?: string | import('react').ReactNode;

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

@@ -10,6 +10,7 @@
  * @param {import('react').ReactNode} [props.subtitle] Muted line under the title.
  * @param {string} [props.headerIcon] Leading header glyph — an Icon name (or a node).
  * @param {string} [props.titleClassName]
+ * @param {"sans"|"serif"} [props.titleFont="sans"] Face of the title. `serif` draws it in the display typeface.
  * @param {import('react').ReactNode} [props.header] Fully custom header — overrides title/subtitle/icon/extra/actions.
  * @param {import('react').ReactNode} [props.headerExtra]
  * @param {import('react').ReactNode} [props.headerActions] Right-aligned header controls.
@@ -40,6 +41,7 @@ export default function AppCard(props: {
     subtitle?: import('react').ReactNode;
     headerIcon?: string;
     titleClassName?: string;
+    titleFont?: "sans" | "serif";
     header?: import('react').ReactNode;
     headerExtra?: import('react').ReactNode;
     headerActions?: import('react').ReactNode;

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

@@ -7,7 +7,7 @@ declare const AppInput: import("react").ForwardRefExoticComponent<{
     help?: import('react').ReactNode;
     helpLabel?: string;
     type?: string;
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "md" | "lg" | "xl";
     leftIcon?: string;
     rightIcon?: string;
     onRightIconClick?: () => void;

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

@@ -16,7 +16,7 @@ declare const AppSelect: import("react").ForwardRefExoticComponent<{
     searchPlaceholder?: string;
     searchable?: boolean;
     clearable?: boolean;
-    size?: "sm" | "lg";
+    size?: "sm" | "lg" | "xl";
     icon?: string;
     floatingLabel?: boolean;
     disabled?: boolean;

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

@@ -203,6 +203,10 @@ export type SearchShape = {
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange]
  * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard. No tab bar either.
  * @param {'comfortable'|'compact'} [props.density='comfortable'] Compact sets the content's top padding to 12px.
+ * @param {number} [props.itemHeight] The height of every sidebar row in px, in place of the density's row height.
+ *   Unset, the rows keep the density's height. A value above zero applies on every pointer, touch included.
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of every
+ *   sidebar icon, so one prop sets the look of the whole nav. An item's own `iconVariant` overrides it; `bulk` is the filled look.
  * @param {'default'|'primary'} [props.topbarTone='default'] The top bar's colour. primary paints the bar in the primary colour, with its text, menu button, bell and account menu in the ink that reads on it; the search field keeps its own surface.
  * @param {string} [props.navLabel='Main navigation']
  * @param {string} [props.currentPath] The current location; items without `active` are matched against it.
@@ -234,6 +238,8 @@ export default function AppShell(props: {
     onCollapsedChange?: (collapsed: boolean) => void;
     noSidebar?: boolean;
     density?: 'comfortable' | 'compact';
+    itemHeight?: number;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
     topbarTone?: 'default' | 'primary';
     navLabel?: string;
     currentPath?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.86.1",
+  "version": "0.86.3",
   "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.86.1",
-    "@webority/ui-elements": "0.86.1"
+    "@webority/theme": "0.86.3",
+    "@webority/ui-elements": "0.86.3"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",