@webority/ui-react 0.40.0 → 0.41.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{useEffect as i,useState as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`circle`,`rounded`,`square`],u=[`primary`,`neutral`,`success`,`warning`,`danger`,`info`,`auto`],d=[`none`,`online`,`offline`,`away`,`busy`],f=new Set([`xs`,`sm`,`md`,`lg`,`xl`,`2xl`]),p={xs:20,sm:24,md:32,lg:48,xl:64,"2xl":96};function m(e){let t=(e||``).trim();if(!t)return`?`;let n=t.split(/\s+/).filter(Boolean);return n.length===1?n[0].slice(0,2).toUpperCase():(n[0][0]+n[n.length-1][0]).toUpperCase()}function h(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 g(e){if(typeof e==`number`)return e;if(p[e]!=null)return p[e];let t=Number.parseInt(e,10);return Number.isNaN(t)?32:t}function _({name:p,src:_,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,l),e(`AppAvatar`,`tone`,b,u),e(`AppAvatar`,`status`,x,d);let{style:N,...P}=M,[F,I]=a(!1);i(()=>{I(!1)},[_]);let L=typeof v==`string`&&f.has(v),R=L?null:typeof v==`number`||/^\d+$/.test(v)?`${v}px`:v,z=E!=null||D!=null,B=_!=null&&_!==``&&!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`]=h(p));let U=Object.keys(H).length||N?{...H,...N}:void 0,W=s(`span`,{className:`avatar-face`,"aria-hidden":`true`,children:w==null?m(p):s(r,{name:w,size:Math.round(g(v)*.55)})}),G=c(o,{children:[x!==`none`&&s(`span`,{className:`avatar-status avatar-status-${x}`,"aria-hidden":`true`}),T!=null&&s(`span`,{className:`avatar-badge`,children:T}),C!=null&&s(`span`,{className:`avatar-label`,"aria-hidden":`true`,children:C})]}),K=c(o,{children:[W,B&&s(`img`,{className:`avatar-img`,src:_,alt:z?``:p||`Profile photo`,onError:()=>I(!0)}),G]});if(E!=null){let e=O||`a`,t=O?{to:E}:{href:E};return n(s(e,{className:V,style:U,...P,"aria-label":C||p,...t,onClick:D,children:K}),k,A)}return n(D==null?B?s(`span`,{className:V,style:U,...P,children:K}):s(`span`,{className:V,style:U,...P,role:`img`,"aria-label":p,children:K}):s(`button`,{type:`button`,className:V,style:U,...P,"aria-label":C||p,onClick:D,children:K}),k,A)}export{_ as default};
+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)}return n(D==null?B?c(`span`,{className:V,style:U,...P,children:K}):c(`span`,{className:V,style:U,...P,role:`img`,"aria-label":i,children:K}):c(`button`,{type:`button`,className:V,style:U,...P,"aria-label":C||i,onClick:D,children:K}),k,A)}export{v as default};

package/dist/components/AppPhoneNumberInput.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppRequiredMark.js";import r from"./useWuiControl.js";import{forwardRef as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import"@webority/ui-elements/elements/phone";var c=[`sm`,`md`,`lg`],l=i(function({value:i,onChange:l,country:u,disabled:d=!1,name:f,id:p,label:m=`Phone number`,placeholder:h,required:g=!1,error:_,showFlag:v=!0,showDialCode:y=!0,size:b=`md`,fieldClassName:x=``,...S},C){t(`AppPhoneNumberInput`,S),e(`AppPhoneNumberInput`,`size`,b,c);let w=a(),T=p||w,E=_&&T?`${T}-error`:void 0,{setRef:D}=r({ref:C,value:i??``,onChange:l,events:[`input`,`change`]});return s(`div`,{className:`field app-phone-number-input${b===`sm`?` phone-sm`:``}${b===`lg`?` phone-lg`:``}${x?` ${x}`:``}`,children:[m&&s(`label`,{className:`label`,htmlFor:T,children:[m,g&&o(n,{})]}),o(`wui-phone`,{ref:D,id:T,name:f,"aria-label":typeof m==`string`?m:void 0,"aria-describedby":E,"aria-invalid":_?`true`:void 0,country:u,placeholder:h,required:g?``:void 0,disabled:d?``:void 0,"hide-flag":v?void 0:``,"hide-dial":y?void 0:``,...S}),_&&o(`div`,{className:`field-error`,id:E,children:_})]})});export{l as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppRequiredMark.js";import r from"./useWuiControl.js";import{forwardRef as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import"@webority/ui-elements/elements/phone";var c=[`sm`,`md`,`lg`],l=i(function({value:i,onChange:l,country:u,disabled:d=!1,name:f,id:p,label:m=`Phone number`,placeholder:h,required:g=!1,hint:_,error:v,showFlag:y=!0,showDialCode:b=!0,size:x=`md`,fieldClassName:S=``,...C},w){t(`AppPhoneNumberInput`,C),e(`AppPhoneNumberInput`,`size`,x,c);let T=a(),E=p||T,D=v&&E?`${E}-error`:void 0,O=!v&&_&&E?`${E}-hint`:void 0,{setRef:k}=r({ref:w,value:i??``,onChange:l,events:[`input`,`change`]});return s(`div`,{className:`field app-phone-number-input${x===`sm`?` phone-sm`:``}${x===`lg`?` phone-lg`:``}${S?` ${S}`:``}`,children:[m&&s(`label`,{className:`label`,htmlFor:E,children:[m,g&&o(n,{})]}),o(`wui-phone`,{ref:k,id:E,name:f,"aria-label":typeof m==`string`?m:void 0,"aria-describedby":D||O,"aria-invalid":v?`true`:void 0,country:u,placeholder:h,required:g?``:void 0,disabled:d?``:void 0,"hide-flag":y?void 0:``,"hide-dial":b?void 0:``,...C}),v?o(`div`,{className:`field-error`,id:D,children:v}):_?o(`div`,{className:`field-hint`,id:O,children:_}):null]})});export{l as default};

package/dist/components/AppWorkspaceSwitcher.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{forwardRef as r,useEffect as i,useMemo as a,useRef as o,useState as s}from"react";import{Dropdown as c}from"react-bootstrap";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`sm`,`md`,`lg`],p=new Set([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`]);function m({tenants:r=[],currentId:l,onSelect:m,menuLabel:h,footerAction:y,linkComponent:b,searchable:x=!1,onCreate:S,canCreate:C=!1,createLabel:w=`Create workspace`,compact:T=!1,size:E=`md`,ariaLabel:D,...O}){let{onToggle:k,...A}=O;t(`AppWorkspaceSwitcher`,A),e(`AppWorkspaceSwitcher`,`size`,E,f);let[j,M]=s(``),[N,P]=s(!1),F=o(null),I=(e,t)=>{P(e),k?.(e,t)},L=r.find(e=>e.id===l)??r[0],R=a(()=>{let e=j.trim().toLowerCase();return!x||!e?r:r.filter(t=>String(t.name??``).toLowerCase().includes(e))},[r,j,x]);i(()=>{N&&x&&F.current?.focus()},[N,x]),i(()=>{if(!x)return;let e=F.current;if(!e)return;let t=e=>{if(p.has(e.key)){e.stopPropagation();return}e.key===`Escape`&&N&&(e.preventDefault(),e.stopPropagation(),I(!1,{source:`keydown`,originalEvent:e}))};return e.addEventListener(`keydown`,t),()=>e.removeEventListener(`keydown`,t)},[x,N]);let z=L?.name??``,B=D??`Workspace ${z}`;return d(c,{className:`workspace-switcher${E===`sm`?` workspace-switcher-sm`:``}${E===`lg`?` workspace-switcher-lg`:``}`,show:N,onToggle:I,...A,children:[u(c.Toggle,{as:v,compact:T,tenant:L,"aria-label":B}),d(c.Menu,{className:`workspace-switcher-menu`,renderOnMount:!0,popperConfig:{strategy:`fixed`},children:[h?u(`div`,{className:`workspace-switcher-menu-label`,children:h}):null,x?d(`div`,{className:`workspace-switcher-search`,children:[u(n,{name:`search`,size:14}),u(`input`,{ref:F,type:`search`,className:`workspace-switcher-search-input`,placeholder:`Search workspaces`,"aria-label":`Search workspaces`,value:j,onChange:e=>M(e.target.value)})]}):null,d(`div`,{className:`workspace-switcher-list`,children:[R.map(e=>d(c.Item,{as:`button`,type:`button`,className:`workspace-switcher-option${e.id===L?.id?` is-active`:``}`,onClick:()=>m?.(e),children:[u(g,{tenant:e}),u(`span`,{className:`workspace-switcher-option-name`,children:e.name}),e.badge?u(`span`,{className:`workspace-switcher-badge`,children:e.badge}):null,e.id===L?.id?u(n,{name:`check`,size:16,className:`workspace-switcher-tick`}):null]},e.id)),R.length===0?u(`div`,{className:`workspace-switcher-empty`,children:`No workspaces match.`}):null]}),C?d(c.Item,{as:`button`,type:`button`,className:`workspace-switcher-create`,onClick:()=>S?.(),children:[u(n,{name:`plus`,size:16}),w]}):null,y?u(`div`,{className:`workspace-switcher-footer`,children:_(y,b)}):null]})]})}function h(e){let t=String(e??``).trim().split(/\s+/).filter(Boolean);return t.length===0?``:(t[0][0]+(t.length>1?t[t.length-1][0]:``)).toUpperCase()}function g({tenant:e}){return e?.logoUrl?u(`img`,{className:`workspace-switcher-mark`,src:e.logoUrl,alt:``,loading:`lazy`}):u(`span`,{className:`workspace-switcher-mark`,children:h(e?.name)})}function _(e,t){if(typeof e!=`object`||!e||!(`label`in e))return e;let{label:r,icon:i,href:a}=e;return d(a?t??`a`:`button`,{className:`workspace-switcher-footer-action`,...a?t?{to:a}:{href:a}:{type:`button`},children:[i?u(n,{name:i,size:16}):null,r]})}var v=r(function({compact:e,tenant:t,"aria-label":r,className:i,...a},o){return d(`button`,{ref:o,type:`button`,className:`workspace-switcher-trigger${e?` is-compact`:``}`,"aria-haspopup":`true`,"aria-label":r,...a,children:[u(g,{tenant:t}),e?null:d(l,{children:[u(`span`,{className:`workspace-switcher-trigger-name`,children:t?.name}),u(n,{name:`chevrons-up-down`,size:16,className:`workspace-switcher-chevron`})]})]})});export{m as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{initialsOf as r}from"../lib/initials.js";import{forwardRef as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import{Dropdown as l}from"react-bootstrap";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`sm`,`md`,`lg`],m=new Set([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`]);function h({tenants:r=[],currentId:i,onSelect:u,menuLabel:h,footerAction:y,linkComponent:b,searchable:x=!1,onCreate:S,canCreate:C=!1,createLabel:w=`Create workspace`,compact:T=!1,size:E=`md`,ariaLabel:D,...O}){let{onToggle:k,...A}=O;t(`AppWorkspaceSwitcher`,A),e(`AppWorkspaceSwitcher`,`size`,E,p);let[j,M]=c(``),[N,P]=c(!1),F=s(null),I=(e,t)=>{P(e),k?.(e,t)},L=r.find(e=>e.id===i)??r[0],R=o(()=>{let e=j.trim().toLowerCase();return!x||!e?r:r.filter(t=>String(t.name??``).toLowerCase().includes(e))},[r,j,x]);a(()=>{N&&x&&F.current?.focus()},[N,x]),a(()=>{if(!x)return;let e=F.current;if(!e)return;let t=e=>{if(m.has(e.key)){e.stopPropagation();return}e.key===`Escape`&&N&&(e.preventDefault(),e.stopPropagation(),I(!1,{source:`keydown`,originalEvent:e}))};return e.addEventListener(`keydown`,t),()=>e.removeEventListener(`keydown`,t)},[x,N]);let z=L?.name??``,B=D??`Workspace ${z}`;return f(l,{className:`workspace-switcher${E===`sm`?` workspace-switcher-sm`:``}${E===`lg`?` workspace-switcher-lg`:``}`,show:N,onToggle:I,...A,children:[d(l.Toggle,{as:v,compact:T,tenant:L,"aria-label":B}),f(l.Menu,{className:`workspace-switcher-menu`,renderOnMount:!0,popperConfig:{strategy:`fixed`},children:[h?d(`div`,{className:`workspace-switcher-menu-label`,children:h}):null,x?f(`div`,{className:`workspace-switcher-search`,children:[d(n,{name:`search`,size:14}),d(`input`,{ref:F,type:`search`,className:`workspace-switcher-search-input`,placeholder:`Search workspaces`,"aria-label":`Search workspaces`,value:j,onChange:e=>M(e.target.value)})]}):null,f(`div`,{className:`workspace-switcher-list`,children:[R.map(e=>f(l.Item,{as:`button`,type:`button`,className:`workspace-switcher-option${e.id===L?.id?` is-active`:``}`,onClick:()=>u?.(e),children:[d(g,{tenant:e}),d(`span`,{className:`workspace-switcher-option-name`,children:e.name}),e.badge?d(`span`,{className:`workspace-switcher-badge`,children:e.badge}):null,e.id===L?.id?d(n,{name:`check`,size:16,className:`workspace-switcher-tick`}):null]},e.id)),R.length===0?d(`div`,{className:`workspace-switcher-empty`,children:`No workspaces match.`}):null]}),C?f(l.Item,{as:`button`,type:`button`,className:`workspace-switcher-create`,onClick:()=>S?.(),children:[d(n,{name:`plus`,size:16}),w]}):null,y?d(`div`,{className:`workspace-switcher-footer`,children:_(y,b)}):null]})]})}function g({tenant:e}){return e?.logoUrl?d(`img`,{className:`workspace-switcher-mark`,src:e.logoUrl,alt:``,loading:`lazy`}):d(`span`,{className:`workspace-switcher-mark`,children:r(e?.name,1)})}function _(e,t){if(typeof e!=`object`||!e||!(`label`in e))return e;let{label:r,icon:i,href:a}=e;return f(a?t??`a`:`button`,{className:`workspace-switcher-footer-action`,...a?t?{to:a}:{href:a}:{type:`button`},children:[i?d(n,{name:i,size:16}):null,r]})}var v=i(function({compact:e,tenant:t,"aria-label":r,className:i,...a},o){return f(`button`,{ref:o,type:`button`,className:`workspace-switcher-trigger${e?` is-compact`:``}`,"aria-haspopup":`true`,"aria-label":r,...a,children:[d(g,{tenant:t}),e?null:f(u,{children:[d(`span`,{className:`workspace-switcher-trigger-name`,children:t?.name}),d(n,{name:`chevrons-up-down`,size:16,className:`workspace-switcher-chevron`})]})]})});export{h as default};

package/dist/lib/initials.js

@@ -0,0 +1 @@
+var e=new Set([`pvt`,`private`,`ltd`,`limited`,`llp`,`llc`,`inc`,`corp`,`co`]),t=/\p{L}/u;function n(e){let t=``,n=0;for(let r of e)r===`(`?(n+=1,t+=` `):r===`)`?(n=Math.max(0,n-1),t+=` `):n===0&&(t+=r);return t}function r(e){return e.map(e=>{let t=e.toUpperCase();return Array.from(t).length===1?t:e}).join(``)}function i(i,a=2){let o=n(String(i??``)).split(/\s+/).map(e=>Array.from(e).filter(e=>t.test(e))).filter(t=>t.length>0&&!e.has(t.join(``).toLowerCase()));return o.length===0?``:o.length===1?r(o[0].slice(0,a)):r([o[0][0],o[1][0]])}export{i as initialsOf};

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

@@ -7,7 +7,8 @@
  * of strings for `multiEnum`, and `{ from, to }` (yyyy-MM-dd strings) for `dateRange`; the empty value
  * is "", [] and `{ from: "", to: "" }`. An `enum` shows as segments (with an "All" segment) up to three
  * options and as a clearable select beyond that. A `text` facet has no chip: its box shows the text
- * and clears itself.
+ * and clears itself. The controls, chips and Clear all share one row, the search box wider and
+ * selects and date ranges narrow; it wraps only when full, and each facet takes its own line on a phone.
  *
  * @param {object} props
  * @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',

package/dist/types/lib/initials.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param {string} [name]
+ * @param {number} [singleWordLetters=2] Letters a one-word name gives.
+ * @returns {string}
+ */
+export declare function initialsOf(name?: string, singleWordLetters?: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.40.0",
+  "version": "0.41.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.40.0",
-    "@webority/ui-elements": "0.40.0"
+    "@webority/theme": "0.41.0",
+    "@webority/ui-elements": "0.41.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0",