@webority/ui-react 0.75.0 → 0.76.0

package/dist/components/AppAvatar.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./withTooltip.js";import r from"./AppIcon.js";import{initialsOf as i}from"../lib/initials.js";import{useEffect as a,useState as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`circle`,`rounded`,`square`],d=[`primary`,`neutral`,`success`,`warning`,`danger`,`info`,`auto`],f=[`none`,`online`,`offline`,`away`,`busy`],p=new Set([`xs`,`sm`,`md`,`lg`,`xl`,`2xl`]),m={xs:20,sm:24,md:32,lg:48,xl:64,"2xl":96};function h(e){return i(e)||`?`}function g(e){let t=e||``,n=0;for(let e=0;e<t.length;e+=1)n=Math.imul(n,31)+t.charCodeAt(e)>>>0;return n%360}function _(e){if(typeof e==`number`)return e;if(m[e]!=null)return m[e];let t=Number.parseInt(e,10);return Number.isNaN(t)?32:t}function v({name:i,src:m,size:v=`md`,shape:y=`circle`,tone:b=`primary`,status:x=`none`,ring:S=!1,label:C,icon:w,badge:T,href:E,onClick:D,linkComponent:O,tooltip:k,tooltipPlacement:A,className:j=``,...M}){t(`AppAvatar`,M),e(`AppAvatar`,`shape`,y,u),e(`AppAvatar`,`tone`,b,d),e(`AppAvatar`,`status`,x,f);let{style:N,...P}=M,[F,I]=o(!1);a(()=>{I(!1)},[m]);let L=typeof v==`string`&&p.has(v),R=L?null:typeof v==`number`||/^\d+$/.test(v)?`${v}px`:v,z=E!=null||D!=null,B=m!=null&&m!==``&&!F,V=[`avatar`,L&&v!==`md`?`avatar-${v}`:``,y===`circle`?``:`avatar-${y}`,b===`primary`?``:`avatar-${b}`,S?`avatar-ring`:``,z?`avatar-clickable`:``,j].filter(Boolean).join(` `),H={};R&&(H[`--avatar-size`]=R),b===`auto`&&(H[`--avatar-hue`]=g(i));let U=Object.keys(H).length||N?{...H,...N}:void 0,W=c(`span`,{className:`avatar-face`,"aria-hidden":`true`,children:w==null?h(i):c(r,{name:w,size:Math.round(_(v)*.55)})}),G=l(s,{children:[x!==`none`&&c(`span`,{className:`avatar-status avatar-status-${x}`,"aria-hidden":`true`}),T!=null&&c(`span`,{className:`avatar-badge`,children:T}),C!=null&&c(`span`,{className:`avatar-label`,"aria-hidden":`true`,children:C})]}),K=l(s,{children:[W,B&&c(`img`,{className:`avatar-img`,src:m,alt:z?``:i||`Profile photo`,onError:()=>I(!0)}),G]});if(E!=null){let e=O||`a`,t=O?{to:E}:{href:E};return n(c(e,{className:V,style:U,...P,"aria-label":C||i,...t,onClick:D,children:K}),k,A)}if(D!=null)return n(c(`button`,{type:`button`,className:V,style:U,...P,"aria-label":C||i,onClick:D,children:K}),k,A);if(B)return n(c(`span`,{className:V,style:U,...P,children:K}),k,A);let q=C?.trim()||i?.trim();return n(q?c(`span`,{className:V,style:U,...P,role:`img`,"aria-label":q,children:K}):c(`span`,{className:V,style:U,...P,"aria-hidden":`true`,children:K}),k,A)}export{v as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./withTooltip.js";import r from"./renderIconProp.js";import{initialsOf as i}from"../lib/initials.js";import{useEffect as a,useState as o}from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`circle`,`rounded`,`square`],d=[`primary`,`neutral`,`success`,`warning`,`danger`,`info`,`auto`],f=[`none`,`online`,`offline`,`away`,`busy`],p=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],m=new Set([`xs`,`sm`,`md`,`lg`,`xl`,`2xl`]),h={xs:20,sm:24,md:32,lg:48,xl:64,"2xl":96};function g(e){return i(e)||`?`}function _(e){let t=e||``,n=0;for(let e=0;e<t.length;e+=1)n=Math.imul(n,31)+t.charCodeAt(e)>>>0;return n%360}function v(e){if(typeof e==`number`)return e;if(h[e]!=null)return h[e];let t=Number.parseInt(e,10);return Number.isNaN(t)?32:t}function y({name:i,src:h,size:y=`md`,shape:b=`circle`,tone:x=`primary`,status:S=`none`,ring:C=!1,label:w,icon:T,iconVariant:E,badge:D,href:O,onClick:k,linkComponent:A,tooltip:j,tooltipPlacement:M,className:N=``,...P}){t(`AppAvatar`,P),e(`AppAvatar`,`shape`,b,u),e(`AppAvatar`,`tone`,x,d),e(`AppAvatar`,`status`,S,f),e(`AppAvatar`,`iconVariant`,E,p);let{style:F,...I}=P,[L,R]=o(!1);a(()=>{R(!1)},[h]);let z=typeof y==`string`&&m.has(y),B=z?null:typeof y==`number`||/^\d+$/.test(y)?`${y}px`:y,V=O!=null||k!=null,H=h!=null&&h!==``&&!L,U=[`avatar`,z&&y!==`md`?`avatar-${y}`:``,b===`circle`?``:`avatar-${b}`,x===`primary`?``:`avatar-${x}`,C?`avatar-ring`:``,V?`avatar-clickable`:``,N].filter(Boolean).join(` `),W={};B&&(W[`--avatar-size`]=B),x===`auto`&&(W[`--avatar-hue`]=_(i));let G=Object.keys(W).length||F?{...W,...F}:void 0,K=c(`span`,{className:`avatar-face`,"aria-hidden":`true`,children:T!=null&&T!==!1&&T!==``?r(T,{size:Math.round(v(y)*.55),variant:E}):g(i)}),q=l(s,{children:[S!==`none`&&c(`span`,{className:`avatar-status avatar-status-${S}`,"aria-hidden":`true`}),D!=null&&c(`span`,{className:`avatar-badge`,children:D}),w!=null&&c(`span`,{className:`avatar-label`,"aria-hidden":`true`,children:w})]}),J=l(s,{children:[K,H&&c(`img`,{className:`avatar-img`,src:h,alt:V?``:i||`Profile photo`,onError:()=>R(!0)}),q]});if(O!=null){let e=A||`a`,t=A?{to:O}:{href:O};return n(c(e,{className:U,style:G,...I,"aria-label":w||i,...t,onClick:k,children:J}),j,M)}if(k!=null)return n(c(`button`,{type:`button`,className:U,style:G,...I,"aria-label":w||i,onClick:k,children:J}),j,M);if(H)return n(c(`span`,{className:U,style:G,...I,children:J}),j,M);let Y=w?.trim()||i?.trim();return n(Y?c(`span`,{className:U,style:G,...I,role:`img`,"aria-label":Y,children:J}):c(`span`,{className:U,style:G,...I,"aria-hidden":`true`,children:J}),j,M)}export{y as default};

package/dist/components/AppInput.js

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

package/dist/components/AppPopover.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`h3`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`div`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};

package/dist/components/AppTabs.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppTooltip.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useCallback as o,useEffect as s,useLayoutEffect as c,useRef as l,useState as ee}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/overflow";var te=[`underline`,`pills`],p=[`horizontal`,`vertical`],m=[`sm`,`md`,`lg`],h=[`automatic`,`manual`],g=[`scroll`,`menu`],_=[`success`,`warning`,`danger`,`info`],v=1,y=28,ne=.7;function b({tabs:b,value:x,onChange:S,linkComponent:C,variant:w=`underline`,orientation:T=`horizontal`,size:E=`md`,fitted:D=!1,overflow:O=`scroll`,moreLabel:k=`More`,maxVisible:A,activation:j=`automatic`,ariaLabel:M,className:N=``,style:P,...F}){t(`AppTabs`,F),e(`AppTabs`,`variant`,w,te),e(`AppTabs`,`orientation`,T,p),e(`AppTabs`,`size`,E,m),e(`AppTabs`,`activation`,j,h),e(`AppTabs`,`overflow`,O,g);for(let t of b)e(`AppTabs`,`tabs[].tone`,t.tone,_);let I=l(null),L=l(null),R=T===`vertical`,z=(O===`menu`||A!=null)&&!R,[B,V]=ee(x);s(()=>{V(x)},[x]);let H=b.find(e=>!e.disabled)?.key,U=b.some(e=>e.key===B&&!e.disabled)?B:void 0,W=b.some(e=>e.key===x&&!e.disabled)?x:void 0,G=U??W??H,K=e=>{I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},q=o(()=>{let e=I.current,t=L.current;if(!e||!t||R||z)return;let n=e.scrollWidth-e.clientWidth;t.classList.toggle(`is-overflow-start`,e.scrollLeft>v),t.classList.toggle(`is-overflow-end`,n>v&&e.scrollLeft<n-v)},[R,z]),J=o(()=>{let e=I.current;if(!e)return;let t=e.querySelector(`.app-tab.active`);t?(R?(e.style.setProperty(`--wui-tab-y`,`${t.offsetTop}px`),e.style.setProperty(`--wui-tab-h`,`${t.offsetHeight}px`)):(e.style.setProperty(`--wui-tab-x`,`${t.offsetLeft}px`),e.style.setProperty(`--wui-tab-w`,`${t.offsetWidth}px`)),e.toggleAttribute(`data-active-danger`,!!b.find(e=>e.key===x)?.danger)):e.style.setProperty(R?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),q()},[R,b,x,q]),Y=e=>!z||!I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"][data-wui-overflow-hidden]`),X=o(()=>{let e=I.current;if(!e||R)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=y,r=t.offsetLeft,i=r+t.offsetWidth;r-n<e.scrollLeft?e.scrollLeft=Math.max(0,r-n):i+n>e.scrollLeft+e.clientWidth&&(e.scrollLeft=i+n-e.clientWidth)},[R]);c(()=>{J()},[J]),c(()=>{X()},[x,X]);let Z=l(J);s(()=>{Z.current=J},[J]),s(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>Z.current());return I.current&&e.observe(I.current),L.current&&e.observe(L.current),()=>e.disconnect()},[R,z]),s(()=>{let e=L.current;if(!z||!e)return;let t=()=>Z.current();return e.addEventListener(`wui-overflow-change`,t),()=>e.removeEventListener(`wui-overflow-change`,t)},[z]);function re(e){let t=e.target?.dataset?.key;if(t==null)return;let n=b.findIndex(e=>e.key===t);if(n<0)return;let r=b.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=b[((e+t*n)%r+r)%r];if(!i.disabled&&Y(i.key))return i}return null},a=R?`ArrowDown`:`ArrowRight`,o=R?`ArrowUp`:`ArrowLeft`,s=null;if(e.key===a?s=i(n,1):e.key===o?s=i(n,-1):e.key===`Home`?s=b.find(e=>!e.disabled&&Y(e.key))??null:e.key===`End`&&(s=[...b].reverse().find(e=>!e.disabled&&Y(e.key))??null),!s)return;e.preventDefault(),V(s.key),K(s.key);let c=s.href!=null||s.to!=null;j===`automatic`&&!c&&S?.(s.key)}let Q=e=>{let t=I.current;t&&t.scrollBy({left:e*t.clientWidth*ne})},ie=[`app-tabs`,w===`pills`?`app-tabs-pills`:``,R?`app-tabs-vertical`:``,E===`sm`?`app-tabs-sm`:``,E===`lg`?`app-tabs-lg`:``,D?`app-tabs-fitted`:``,N].filter(Boolean).join(` `),$=f(`div`,{ref:I,role:`tablist`,"aria-orientation":R?`vertical`:void 0,"aria-label":M,className:ie,style:P,"data-wui-overflow-list":z?``:void 0,...F,onKeyDown:re,onScroll:q,children:[b.map(e=>{let t=e.key===x,r=e.href!=null||e.to!=null,o={role:`tab`,"data-key":e.key,"aria-selected":t,tabIndex:e.key===G?0:-1,className:`app-tab${t?` active`:``}${e.danger?` danger`:``}${r&&e.disabled?` disabled`:``}`},s=f(u,{children:[e.image?d(`img`,{className:`app-tab-img`,src:e.image,alt:e.imageAlt??``}):i(e.icon,{size:16,className:`app-tab-icon`}),e.label,(e.countLabel||e.count!=null)&&d(`span`,{className:`app-tab-count${e.tone?` ${e.tone}`:``}`,children:e.countLabel||a(e.count,{decimals:0})})]}),c;if(r){let t=e.to!=null&&C?C:`a`,n=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0),r=e.disabled?{"aria-disabled":!0}:t===`a`?{href:e.href??e.to,target:e.target,rel:n}:{to:e.to,target:e.target,rel:n},i=t=>{if(e.disabled){t.preventDefault();return}t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||(V(e.key),S?.(e.key))};c=d(t,{...o,...r,onClick:i,children:s},e.key)}else c=d(`button`,{type:`button`,...o,disabled:e.disabled,onClick:()=>{e.disabled||(V(e.key),S?.(e.key))},children:s},e.key);return e.tooltip?d(n,{content:e.tooltip,children:c},e.key):c}),d(`span`,{className:`app-tab-indicator`,"aria-hidden":`true`,"data-wui-overflow-skip":``})]});return R?$:z?d(`wui-overflow`,{ref:L,class:`app-tabs-wrap`,label:k,children:$}):f(`div`,{ref:L,className:`app-tabs-wrap`,children:[d(`button`,{type:`button`,className:`app-tabs-scroll-btn prev`,"aria-label":`Scroll tabs backward`,tabIndex:-1,onClick:()=>Q(-1),children:d(r,{name:`chevron-left`,size:16})}),$,d(`button`,{type:`button`,className:`app-tabs-scroll-btn next`,"aria-label":`Scroll tabs forward`,tabIndex:-1,onClick:()=>Q(1),children:d(r,{name:`chevron-right`,size:16})})]})}export{b as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppTooltip.js";import r from"./AppIcon.js";import i from"./renderIconProp.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useCallback as o,useEffect as s,useLayoutEffect as c,useRef as l,useState as ee}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/overflow";var te=[`underline`,`pills`],p=[`horizontal`,`vertical`],m=[`sm`,`md`,`lg`],h=[`automatic`,`manual`],g=[`scroll`,`menu`],_=[`success`,`warning`,`danger`,`info`],v=1,y=28,ne=.7;function b({tabs:b,value:x,onChange:S,linkComponent:C,variant:w=`underline`,orientation:T=`horizontal`,size:E=`md`,fitted:D=!1,overflow:O=`scroll`,moreLabel:k=`More`,maxVisible:A,activation:j=`automatic`,ariaLabel:M,className:N=``,style:P,...F}){t(`AppTabs`,F),e(`AppTabs`,`variant`,w,te),e(`AppTabs`,`orientation`,T,p),e(`AppTabs`,`size`,E,m),e(`AppTabs`,`activation`,j,h),e(`AppTabs`,`overflow`,O,g);for(let t of b)e(`AppTabs`,`tabs[].tone`,t.tone,_);let I=l(null),L=l(null),R=T===`vertical`,z=(O===`menu`||A!=null)&&!R,[B,V]=ee(x);s(()=>{V(x)},[x]);let H=b.find(e=>!e.disabled)?.key,U=b.some(e=>e.key===B&&!e.disabled)?B:void 0,W=b.some(e=>e.key===x&&!e.disabled)?x:void 0,G=U??W??H,K=e=>{I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},q=o(()=>{let e=I.current,t=L.current;if(!e||!t||R||z)return;let n=e.scrollWidth-e.clientWidth;t.classList.toggle(`is-overflow-start`,e.scrollLeft>v),t.classList.toggle(`is-overflow-end`,n>v&&e.scrollLeft<n-v)},[R,z]),J=o(()=>{let e=I.current;if(!e)return;let t=e.querySelector(`.app-tab.active`);t?(R?(e.style.setProperty(`--wui-tab-y`,`${t.offsetTop}px`),e.style.setProperty(`--wui-tab-h`,`${t.offsetHeight}px`)):(e.style.setProperty(`--wui-tab-x`,`${t.offsetLeft}px`),e.style.setProperty(`--wui-tab-w`,`${t.offsetWidth}px`)),e.toggleAttribute(`data-active-danger`,!!b.find(e=>e.key===x)?.danger)):e.style.setProperty(R?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),q()},[R,b,x,q]),Y=e=>!z||!I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"][data-wui-overflow-hidden]`),X=o(()=>{let e=I.current;if(!e||R)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=y,r=t.offsetLeft,i=r+t.offsetWidth;r-n<e.scrollLeft?e.scrollLeft=Math.max(0,r-n):i+n>e.scrollLeft+e.clientWidth&&(e.scrollLeft=i+n-e.clientWidth)},[R]);c(()=>{J()},[J]),c(()=>{X()},[x,X]);let Z=l(J);s(()=>{Z.current=J},[J]),s(()=>{if(!document.fonts)return;let e=!0;return document.fonts.ready.then(()=>{e&&Z.current()}),()=>{e=!1}},[]),s(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>Z.current());return I.current&&e.observe(I.current),L.current&&e.observe(L.current),()=>e.disconnect()},[R,z]),s(()=>{let e=L.current;if(!z||!e)return;let t=()=>Z.current();return e.addEventListener(`wui-overflow-change`,t),()=>e.removeEventListener(`wui-overflow-change`,t)},[z]);function re(e){let t=e.target?.dataset?.key;if(t==null)return;let n=b.findIndex(e=>e.key===t);if(n<0)return;let r=b.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=b[((e+t*n)%r+r)%r];if(!i.disabled&&Y(i.key))return i}return null},a=R?`ArrowDown`:`ArrowRight`,o=R?`ArrowUp`:`ArrowLeft`,s=null;if(e.key===a?s=i(n,1):e.key===o?s=i(n,-1):e.key===`Home`?s=b.find(e=>!e.disabled&&Y(e.key))??null:e.key===`End`&&(s=[...b].reverse().find(e=>!e.disabled&&Y(e.key))??null),!s)return;e.preventDefault(),V(s.key),K(s.key);let c=s.href!=null||s.to!=null;j===`automatic`&&!c&&S?.(s.key)}let Q=e=>{let t=I.current;t&&t.scrollBy({left:e*t.clientWidth*ne})},ie=[`app-tabs`,w===`pills`?`app-tabs-pills`:``,R?`app-tabs-vertical`:``,E===`sm`?`app-tabs-sm`:``,E===`lg`?`app-tabs-lg`:``,D?`app-tabs-fitted`:``,N].filter(Boolean).join(` `),$=f(`div`,{ref:I,role:`tablist`,"aria-orientation":R?`vertical`:void 0,"aria-label":M,className:ie,style:P,"data-wui-overflow-list":z?``:void 0,...F,onKeyDown:re,onScroll:q,children:[b.map(e=>{let t=e.key===x,r=e.href!=null||e.to!=null,o={role:`tab`,"data-key":e.key,"aria-selected":t,tabIndex:e.key===G?0:-1,className:`app-tab${t?` active`:``}${e.danger?` danger`:``}${r&&e.disabled?` disabled`:``}`},s=f(u,{children:[e.image?d(`img`,{className:`app-tab-img`,src:e.image,alt:e.imageAlt??``}):i(e.icon,{size:16,className:`app-tab-icon`}),e.label,(e.countLabel||e.count!=null)&&d(`span`,{className:`app-tab-count${e.tone?` ${e.tone}`:``}`,children:e.countLabel||a(e.count,{decimals:0})})]}),c;if(r){let t=e.to!=null&&C?C:`a`,n=e.rel??(e.target===`_blank`?`noopener noreferrer`:void 0),r=e.disabled?{"aria-disabled":!0}:t===`a`?{href:e.href??e.to,target:e.target,rel:n}:{to:e.to,target:e.target,rel:n},i=t=>{if(e.disabled){t.preventDefault();return}t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||(V(e.key),S?.(e.key))};c=d(t,{...o,...r,onClick:i,children:s},e.key)}else c=d(`button`,{type:`button`,...o,disabled:e.disabled,onClick:()=>{e.disabled||(V(e.key),S?.(e.key))},children:s},e.key);return e.tooltip?d(n,{content:e.tooltip,children:c},e.key):c}),d(`span`,{className:`app-tab-indicator`,"aria-hidden":`true`,"data-wui-overflow-skip":``})]});return R?$:z?d(`wui-overflow`,{ref:L,class:`app-tabs-wrap`,label:k,children:$}):f(`div`,{ref:L,className:`app-tabs-wrap`,children:[d(`button`,{type:`button`,className:`app-tabs-scroll-btn prev`,"aria-label":`Scroll tabs backward`,tabIndex:-1,onClick:()=>Q(-1),children:d(r,{name:`chevron-left`,size:16})}),$,d(`button`,{type:`button`,className:`app-tabs-scroll-btn next`,"aria-label":`Scroll tabs forward`,tabIndex:-1,onClick:()=>Q(1),children:d(r,{name:`chevron-right`,size:16})})]})}export{b as default};

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

@@ -10,7 +10,8 @@
  * @param {"none"|"online"|"offline"|"away"|"busy"} [props.status="none"]  A presence dot.
  * @param {boolean} [props.ring=false]  A ring around the disc.
  * @param {string} [props.label]  Text shown as a tooltip above the avatar on hover/focus.
- * @param {string} [props.icon]  Icon-name fallback face, used instead of initials when there's no photo.
+ * @param {string|import('react').ReactNode} [props.icon]  Fallback face used instead of initials when there's no photo: a library icon name, or any React node (a product's own glyph), drawn as given.
+ * @param {"linear"|"outline"|"bold"|"bulk"|"broken"|"twotone"} [props.iconVariant="linear"]  The iconsax style of a named `icon`; a node icon is drawn as given.
  * @param {import('react').ReactNode} [props.badge]  A small count/marker in the top-right corner.
  * @param {string} [props.href]  Makes the avatar a link.
  * @param {(e) => void} [props.onClick]  Makes the avatar a button (when no href).
@@ -19,7 +20,7 @@
  * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"]  Preferred tooltip side; `auto` picks the side with the most room.
  * @param {string} [props.className]
  */
-export default function AppAvatar({ name, src, size, shape, tone, status, ring, label, icon, badge, href, onClick, linkComponent: Link, tooltip, tooltipPlacement, className, ...rest }: {
+export default function AppAvatar({ name, src, size, shape, tone, status, ring, label, icon, iconVariant, badge, href, onClick, linkComponent: Link, tooltip, tooltipPlacement, className, ...rest }: {
     name?: string;
     src?: string;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number | string;
@@ -28,7 +29,8 @@ export default function AppAvatar({ name, src, size, shape, tone, status, ring,
     status?: "none" | "online" | "offline" | "away" | "busy";
     ring?: boolean;
     label?: string;
-    icon?: string;
+    icon?: string | import('react').ReactNode;
+    iconVariant?: "linear" | "outline" | "bold" | "bulk" | "broken" | "twotone";
     badge?: import('react').ReactNode;
     href?: string;
     onClick?: (e: any) => void;

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

@@ -38,8 +38,9 @@
  *   border — a labelled action button (verify, apply, send code), or a confirmation once the field
  *   is resolved. The field flexes to fill the row; the action keeps its natural width. Exclusive
  *   with the in-field shells (unit / password / affix / trailing icon); pairs with a leading icon.
- * @param {boolean} [props.floatingLabel=false] Label sits inside as a placeholder, then slides up
- *   on focus/fill. Opt-in variant; standalone only (no icon/unit/prefix in the same field).
+ * @param {boolean|"above"} [props.floatingLabel=false] Label sits inside as a placeholder, then slides
+ *   up on focus/fill. `true` rests it on the top border; `"above"` rests it above the box at the
+ *   top-left, clear of the border. Opt-in variant; standalone only (no icon/unit/prefix in the same field).
  * @param {"bare"} [props.variant] Borderless variant — no border/background, inherits the
  *   container's chrome (inline-rename, ⌘K).
  * @param {boolean|object} [props.passwordRequirements=false] Only honoured when `type="password"`.

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

@@ -11,7 +11,7 @@
  *   App* like AppButton/AppActionIcon). It renders as written; clicking (or hovering/focusing) it
  *   toggles the panel.
  * @param {import('react').ReactNode} props.children The panel body.
- * @param {string} [props.title] Optional panel heading.
+ * @param {string} [props.title] Optional panel title (plain text, not a heading, so it never breaks the page's heading order).
  * @param {'top'|'bottom'|'start'|'end'|'auto'} [props.placement='bottom'] Where it opens; `auto`
  *   flips to stay in view.
  * @param {'click'|'hover'|'focus'|('click'|'hover'|'focus')[]} [props.triggerType='click'] What

package/package.json

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