@webority/ui-react 0.72.0 → 0.74.0

package/dist/components/AppButton.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{shortcutAria as n,shortcutChip as r}from"../lib/shortcutChip.js";import i from"./withTooltip.js";import a from"./AppIcon.js";import{Button as o}from"react-bootstrap";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={primary:`primary`,secondary:`secondary`,outline:`outline-primary`,ghost:`ghost`,danger:`danger`,success:`success`,"secondary-danger":`secondary-danger`,"outline-danger":`outline-danger`,light:`light`,warning:`warning`,subtle:`subtle`,"outline-light":`outline-light`,"outline-secondary":`outline-secondary`},u={sm:14,md:16,lg:20};function d(e,t,n){if(!e)return null;let r=t===`left`?`me-2`:`ms-2`;return typeof e==`string`?s(a,{name:e,size:u[n]??u.md,className:r}):s(`span`,{className:`d-inline-flex ${r}`,children:e})}function f({children:a,variant:f=`primary`,size:p=`md`,type:m=`button`,loading:h=!1,disabled:g=!1,block:_=!1,leftIcon:v=null,rightIcon:y=null,href:b,static:x=!1,tooltip:S,tooltipPlacement:C,shortcut:w,className:T=``,...E}){if(t(`AppButton`,E),e(`AppButton`,`variant`,f,Object.keys(l)),e(`AppButton`,`size`,p,Object.keys(u)),x)return i(c(`span`,{className:[`btn`,`btn-${l[f]??`primary`}`,p===`sm`?`btn-sm`:p===`lg`?`btn-lg`:``,_?`w-100`:``,`btn-static`,T].filter(Boolean).join(` `),...E,children:[d(v,`left`,p),a,d(y,`right`,p)]}),S,C);let D=[_?`w-100`:``,h?`is-loading`:``,T].filter(Boolean).join(` `),O=(E.as===void 0||E.as===`button`)&&b===void 0&&E.to===void 0,k=O?{}:{role:void 0,tabIndex:g||h?-1:void 0},A=S!=null&&S!==``;return i(c(o,{type:O?m:void 0,href:b,variant:l[f]??`primary`,size:p===`md`?void 0:p,disabled:g||h,"aria-busy":h||void 0,"aria-keyshortcuts":n(w),className:D||void 0,...k,...E,children:[h&&s(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!h&&d(v,`left`,p),a,!h&&d(y,`right`,p),!A&&r(w)]}),S,C,w)}export{f as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{shortcutAria as n,shortcutChip as r}from"../lib/shortcutChip.js";import i from"./withTooltip.js";import a from"./AppIcon.js";import{Button as o}from"react-bootstrap";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={primary:`primary`,secondary:`secondary`,outline:`outline-primary`,ghost:`ghost`,text:`text`,danger:`danger`,success:`success`,"secondary-danger":`secondary-danger`,"outline-danger":`outline-danger`,light:`light`,warning:`warning`,neutral:`neutral`,"outline-light":`outline-light`,"outline-secondary":`outline-secondary`},u={sm:14,md:16,lg:20},d=[`sheen`,`fill`,`expand`,`glow`,`roll`,`none`],f=[`rounded`,`pill`,`sharp`],p=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],m=e=>e===`pill`||e===`sharp`?`wui-btn-shape-${e}`:``;function h(e){return c(`span`,{className:`wui-btn-roll`,children:[s(`span`,{className:`wui-btn-roll__a`,children:e}),s(`span`,{className:`wui-btn-roll__b`,"aria-hidden":`true`,children:e})]})}function g(e,t,n,r){if(!e)return null;let i=n=>typeof e==`string`?s(a,{name:e,size:u[t]??u.md,variant:r,className:n}):s(`span`,{className:[`d-inline-flex`,n].filter(Boolean).join(` `),children:e});return c(`span`,{className:n?`wui-btn-roll-ico wui-btn-pin-icon`:`wui-btn-roll-ico ms-2`,"aria-hidden":`true`,children:[i(),i(`wui-btn-roll-ico__next`)]})}function _(e,t,n,r){if(!e)return null;let i=t===`left`?`me-2`:`ms-2`;return typeof e==`string`?s(a,{name:e,size:u[n]??u.md,variant:r,className:i}):s(`span`,{className:`d-inline-flex ${i}`,children:e})}function v(e,t,n){return e?s(`span`,{className:`wui-btn-pin-icon`,"aria-hidden":`true`,children:typeof e==`string`?s(a,{name:e,size:u[t]??u.md,variant:n}):e}):null}function y({children:a,variant:y=`primary`,size:b=`md`,type:x=`button`,loading:S=!1,disabled:C=!1,block:w=!1,leftIcon:T=null,rightIcon:E=null,href:D,static:O=!1,tooltip:k,tooltipPlacement:A,shortcut:j,animation:M,pinRightIcon:N=!1,shape:P=`rounded`,iconVariant:F,className:I=``,...L}){t(`AppButton`,L),M!==void 0&&e(`AppButton`,`animation`,M,d);let R=M===`roll`&&!O,z=N&&E!=null&&E!==``&&!O&&!S;if(e(`AppButton`,`variant`,y,Object.keys(l)),e(`AppButton`,`size`,b,Object.keys(u)),e(`AppButton`,`shape`,P,f),F!==void 0&&e(`AppButton`,`iconVariant`,F,p),O)return i(c(`span`,{className:[`btn`,`btn-${l[y]??`primary`}`,b===`sm`?`btn-sm`:b===`lg`?`btn-lg`:``,w?`w-100`:``,m(P),`btn-static`,I].filter(Boolean).join(` `),...L,children:[_(T,`left`,b,F),a,_(E,`right`,b,F)]}),k,A);let B=[w?`w-100`:``,S?`is-loading`:``,M&&d.includes(M)?`btn-anim-${M}`:``,z?`wui-btn-pin-end`:``,m(P),I].filter(Boolean).join(` `),V=(L.as===void 0||L.as===`button`)&&D===void 0&&L.to===void 0,H=V?{}:{role:void 0,tabIndex:C||S?-1:void 0},U=k!=null&&k!==``;return i(c(o,{type:V?x:void 0,href:D,variant:l[y]??`primary`,size:b===`md`?void 0:b,disabled:C||S,"aria-busy":S||void 0,"aria-keyshortcuts":n(j),className:B||void 0,...H,...L,children:[S&&s(`span`,{className:`spinner-border spinner-border-sm me-2`,"aria-hidden":`true`}),!S&&_(T,`left`,b,F),R?h(a):a,!S&&(R?g(E,b,z,F):z?v(E,b,F):_(E,`right`,b,F)),!U&&r(j)]}),k,A,j)}export{y as default};

package/dist/components/AppFilterBar.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppButton.js";import i from"./AppSegmented.js";import a from"./AppChip.js";import o from"./AppDateRangePicker.js";import{emptyFacetValue as s,isFacetActive as c}from"../lib/listQuery.js";import l from"./AppMultiSelect.js";import u from"./AppSearch.js";import d from"./AppSelect.js";import f from"./AppSwitch.js";import{useEffect as p,useId as m,useRef as h,useSyncExternalStore as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import"@webority/ui-elements/elements/filter-popover";var y=`(max-width: 575.98px)`,b=3,x=2,S=e=>{let t=window.matchMedia?.(y);return t?.addEventListener(`change`,e),()=>t?.removeEventListener(`change`,e)},C=()=>window.matchMedia?.(y).matches??!1,w=[`enum`,`multiEnum`,`dateRange`,`text`],T=4,E=e=>(e.type===`enum`||e.type===`multiEnum`)&&!e.options?.length,D=(e,t)=>e.options?.find(e=>e.value===t)?.label??t;function O(e,t){if(!c(e,t))return[];if(e.type===`enum`)return[{id:e.key,text:D(e,t),clear:()=>s(e)}];if(e.type===`multiEnum`)return t.map(n=>({id:`${e.key}:${n}`,text:D(e,n),clear:()=>t.filter(e=>e!==n)}));if(e.type===`dateRange`){let n=t.from&&t.to?`${t.from} to ${t.to}`:t.from?`From ${t.from}`:`Until ${t.to}`;return[{id:e.key,text:n,clear:()=>s(e)}]}return[]}var k=new Set;function A(e){let t=!0;try{t=process.env.NODE_ENV!==`production`}catch{t=!0}!t||k.has(e)||(k.add(e),console.warn(`[@webority/ui-react] <AppFilterBar> facet "${e}" sets allLabel, which only an enum facet uses.`))}var j=new Set;function M(e){let t=!0;try{t=process.env.NODE_ENV!==`production`}catch{t=!0}!t||j.has(e)||(j.add(e),console.warn(`[@webority/ui-react] <AppFilterBar> facet "${e}" sets presets, which only a dateRange facet uses.`))}function N({facets:i,value:o,onChange:l,inline:u=b,floating:d=!1,className:y=``,...T}){t(`AppFilterBar`,T);let D=g(S,C,()=>!1),k=h(null),j=m();for(let t of i)e(`AppFilterBar`,`facets[].type`,t.type,w);for(let e of i)e.allLabel!=null&&e.type!==`enum`&&A(e.key),e.presets!=null&&e.type!==`dateRange`&&M(e.key);let N=i.filter(e=>!E(e)),F=N.flatMap(e=>O(e,o[e.key]).map(t=>({...t,facet:e}))),I=N.filter(e=>c(e,o[e.key])),L=d||D?0:Math.max(0,u),R=N.slice(L),z=R.filter(e=>I.includes(e)).length,B=!d&&R.length>0;p(()=>{if(!B)return;let e=e=>{let t=k.current;t?.open&&(e.type===`keydown`?e.key===`Escape`:!e.composedPath().includes(t))&&(t.open=!1)};return document.addEventListener(`click`,e),document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`click`,e),document.removeEventListener(`keydown`,e)}},[B]);let V=e=>_(P,{facet:e,value:o[e.key],onChange:t=>l(e.key,t)},e.key),H=(e,t)=>t>0&&_(`span`,{className:e,children:` (${t})`}),U=e=>_(a,{size:`sm`,label:`${e.facet.label}: ${e.text}`,removeLabel:`Remove ${e.facet.label} filter ${e.text}`,onRemove:()=>l(e.facet.key,e.clear())},e.id),W=_(r,{variant:`ghost`,size:`sm`,onClick:()=>{for(let e of I)l(e.key,s(e))},children:`Clear all`});if(d){let e=F.slice(x),t=I.length,r=e=>v(`div`,{className:`wui-filter-popover-field`,children:[_(`span`,{className:`label`,"aria-hidden":`true`,children:e.label}),_(P,{facet:e,value:o[e.key],onChange:t=>l(e.key,t),floating:!0})]},e.key);return v(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${y?` ${y}`:``}`,...T,children:[v(`wui-filter-popover`,{class:`wui-filter-popover`,children:[v(`button`,{type:`button`,className:`btn ${t>0?`btn-outline-primary`:`btn-ghost`} btn-sm wui-filter-popover-trigger`,"aria-expanded":`false`,"aria-controls":j,"aria-label":t>0?`Filters, ${t} active`:void 0,children:[_(n,{name:`filter`,size:14,className:`me-2`}),`Filters`,t>0&&_(`span`,{className:`badge rounded-pill text-bg-primary ms-1`,children:t})]}),v(`div`,{id:j,className:`wui-filter-popover-panel`,role:`dialog`,"aria-label":`Filters`,hidden:!0,children:[v(`div`,{className:`wui-filter-popover-head`,children:[_(`span`,{className:`wui-filter-popover-title`,children:`Filters`}),_(f,{label:`Keep open`,id:`${j}-pin`})]}),_(`div`,{className:`wui-filter-popover-grid`,children:N.map(r)}),v(`div`,{className:`wui-filter-popover-foot`,children:[_(`span`,{className:`wui-filter-popover-note`,children:`Changes apply at once.`}),t>0&&W]})]})]}),F.slice(0,x).map(U),e.length>0&&v(`span`,{className:`chip chip-sm wui-filter-popover-more`,title:e.map(e=>`${e.facet.label}: ${e.text}`).join(`, `),children:[`+`,e.length]})]})}return v(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${D&&B?` wui-filter-bar--folded`:``}${y?` ${y}`:``}`,...T,children:[N.slice(0,L).map(V),B&&v(`details`,{ref:k,className:`wui-filter-more`,children:[v(`summary`,{className:`btn btn-outline-primary btn-sm wui-filter-more-trigger`,children:[_(n,{name:`filter`,size:14,className:`me-2`}),`Filters`,H(`wui-filter-count-desktop`,z),H(`wui-filter-count-phone`,I.length)]}),v(`div`,{className:`wui-filter-more-panel`,children:[_(`div`,{className:`wui-filter-more-head`,children:`Filters`}),R.map(V)]})]}),F.map(U),I.length>1&&W]})}function P({facet:e,value:t,onChange:n,floating:r=!1}){if(e.type===`enum`){let a=e.options??[];return a.length<T?_(i,{label:e.label,name:e.key,size:`sm`,value:t??``,onChange:n,options:[{value:``,label:e.allLabel||`All`},...a]}):_(d,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,clearable:!0,value:t??``,onChange:n,options:a})}return e.type===`multiEnum`?_(l,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,collapseChips:!0,values:t??[],onChange:n,options:e.options??[]}):e.type===`dateRange`?_(o,{ariaLabel:e.label,startName:`${e.key}From`,endName:`${e.key}To`,placeholder:r?`Any`:e.label,size:`sm`,presets:e.presets,start:t?.from??``,end:t?.to??``,onChange:e=>n({from:e.start??``,to:e.end??``})}):_(u,{ariaLabel:e.label,name:e.key,placeholder:e.label,size:`sm`,value:t??``,onChange:n})}export{N as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppButton.js";import i from"./AppSegmented.js";import a from"./AppChip.js";import o from"./AppDateRangePicker.js";import{emptyFacetValue as s,isFacetActive as c}from"../lib/listQuery.js";import l from"./AppMultiSelect.js";import u from"./AppSearch.js";import d from"./AppSelect.js";import f from"./AppSwitch.js";import{useEffect as p,useId as m,useRef as h,useSyncExternalStore as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import"@webority/ui-elements/elements/filter-popover";var y=`(max-width: 575.98px)`,b=3,x=2,S=e=>{let t=window.matchMedia?.(y);return t?.addEventListener(`change`,e),()=>t?.removeEventListener(`change`,e)},C=()=>window.matchMedia?.(y).matches??!1,w=[`enum`,`multiEnum`,`dateRange`,`text`],T=4,E=e=>(e.type===`enum`||e.type===`multiEnum`)&&!e.options?.length,D=(e,t)=>e.options?.find(e=>e.value===t)?.label??t;function O(e,t){if(!c(e,t))return[];if(e.type===`enum`)return[{id:e.key,text:D(e,t),clear:()=>s(e)}];if(e.type===`multiEnum`)return t.map(n=>({id:`${e.key}:${n}`,text:D(e,n),clear:()=>t.filter(e=>e!==n)}));if(e.type===`dateRange`){let n=t.from&&t.to?`${t.from} to ${t.to}`:t.from?`From ${t.from}`:`Until ${t.to}`;return[{id:e.key,text:n,clear:()=>s(e)}]}return[]}var k=new Set;function A(e){let t=!0;try{t=process.env.NODE_ENV!==`production`}catch{t=!0}!t||k.has(e)||(k.add(e),console.warn(`[@webority/ui-react] <AppFilterBar> facet "${e}" sets allLabel, which only an enum facet uses.`))}var j=new Set;function M(e){let t=!0;try{t=process.env.NODE_ENV!==`production`}catch{t=!0}!t||j.has(e)||(j.add(e),console.warn(`[@webority/ui-react] <AppFilterBar> facet "${e}" sets presets, which only a dateRange facet uses.`))}function N({facets:i,value:o,onChange:l,inline:u=b,floating:d=!1,className:y=``,...T}){t(`AppFilterBar`,T);let D=g(S,C,()=>!1),k=h(null),j=m();for(let t of i)e(`AppFilterBar`,`facets[].type`,t.type,w);for(let e of i)e.allLabel!=null&&e.type!==`enum`&&A(e.key),e.presets!=null&&e.type!==`dateRange`&&M(e.key);let N=i.filter(e=>!E(e)),F=N.flatMap(e=>O(e,o[e.key]).map(t=>({...t,facet:e}))),I=N.filter(e=>c(e,o[e.key])),L=d||D?0:Math.max(0,u),R=N.slice(L),z=R.filter(e=>I.includes(e)).length,B=!d&&R.length>0;p(()=>{if(!B)return;let e=e=>{let t=k.current;t?.open&&(e.type===`keydown`?e.key===`Escape`:!e.composedPath().includes(t))&&(t.open=!1)};return document.addEventListener(`click`,e),document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`click`,e),document.removeEventListener(`keydown`,e)}},[B]);let V=e=>_(P,{facet:e,value:o[e.key],onChange:t=>l(e.key,t)},e.key),H=e=>v(`div`,{className:`wui-filter-popover-field`,children:[_(`span`,{className:`label`,"aria-hidden":`true`,children:e.label}),_(P,{facet:e,value:o[e.key],onChange:t=>l(e.key,t),floating:!0})]},e.key),U=(e,t)=>t>0&&_(`span`,{className:e,children:` (${t})`}),W=e=>_(a,{size:`sm`,label:`${e.facet.label}: ${e.text}`,removeLabel:`Remove ${e.facet.label} filter ${e.text}`,onRemove:()=>l(e.facet.key,e.clear())},e.id),G=_(r,{variant:`ghost`,size:`sm`,onClick:()=>{for(let e of I)l(e.key,s(e))},children:`Clear all`});if(d){let e=F.slice(x),t=I.length;return v(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${y?` ${y}`:``}`,...T,children:[v(`wui-filter-popover`,{class:`wui-filter-popover`,children:[v(`button`,{type:`button`,className:`btn ${t>0?`btn-outline-primary`:`btn-ghost`} btn-sm wui-filter-popover-trigger`,"aria-expanded":`false`,"aria-controls":j,"aria-label":t>0?`Filters, ${t} active`:void 0,children:[_(n,{name:`filter`,size:14,className:`me-2`}),`Filters`,t>0&&_(`span`,{className:`badge rounded-pill text-bg-primary ms-1`,children:t})]}),v(`div`,{id:j,className:`wui-filter-popover-panel`,role:`dialog`,"aria-label":`Filters`,hidden:!0,children:[v(`div`,{className:`wui-filter-popover-head`,children:[_(`span`,{className:`wui-filter-popover-title`,children:`Filters`}),_(f,{label:`Keep open`,id:`${j}-pin`})]}),_(`div`,{className:`wui-filter-popover-grid`,children:N.map(H)}),v(`div`,{className:`wui-filter-popover-foot`,children:[_(`span`,{className:`wui-filter-popover-note`,children:`Changes apply at once.`}),t>0&&G]})]})]}),F.slice(0,x).map(W),e.length>0&&v(`span`,{className:`chip chip-sm wui-filter-popover-more`,title:e.map(e=>`${e.facet.label}: ${e.text}`).join(`, `),children:[`+`,e.length]})]})}return v(`div`,{className:`wui-filter-bar d-flex flex-wrap align-items-center gap-2${D&&B?` wui-filter-bar--folded`:``}${y?` ${y}`:``}`,...T,children:[N.slice(0,L).map(V),B&&v(`details`,{ref:k,className:`wui-filter-more`,children:[v(`summary`,{className:`btn btn-outline-primary btn-sm wui-filter-more-trigger`,children:[_(n,{name:`filter`,size:14,className:`me-2`}),`Filters`,U(`wui-filter-count-desktop`,z),U(`wui-filter-count-phone`,I.length)]}),v(`div`,{className:`wui-filter-more-panel`,children:[_(`div`,{className:`wui-filter-more-head`,children:`Filters`}),R.map(H)]})]}),F.map(W),I.length>1&&G]})}function P({facet:e,value:t,onChange:n,floating:r=!1}){if(e.type===`enum`){let a=e.options??[];return a.length<T?_(i,{label:e.label,name:e.key,size:`sm`,value:t??``,onChange:n,options:[{value:``,label:e.allLabel||`All`},...a]}):_(d,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,clearable:!0,value:t??``,onChange:n,options:a})}return e.type===`multiEnum`?_(l,{"aria-label":e.label,name:e.key,placeholder:r?`Any`:e.label,size:`sm`,collapseChips:!0,values:t??[],onChange:n,options:e.options??[]}):e.type===`dateRange`?_(o,{ariaLabel:e.label,startName:`${e.key}From`,endName:`${e.key}To`,placeholder:r?`Any`:e.label,size:`sm`,presets:e.presets,start:t?.from??``,end:t?.to??``,onChange:e=>n({from:e.start??``,to:e.end??``})}):_(u,{ariaLabel:e.label,name:e.key,placeholder:e.label,size:`sm`,value:t??``,onChange:n})}export{N 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{useCallback as a,useEffect as o,useLayoutEffect as s,useRef as c,useState as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/overflow";var p=[`underline`,`pills`],m=[`horizontal`,`vertical`],h=[`sm`,`md`,`lg`],g=[`automatic`,`manual`],_=[`scroll`,`menu`],v=[`success`,`warning`,`danger`,`info`],y=1,b=28,x=.7;function S({tabs:S,value:C,onChange:w,linkComponent:T,variant:E=`underline`,orientation:D=`horizontal`,size:O=`md`,fitted:k=!1,overflow:A=`scroll`,moreLabel:j=`More`,maxVisible:M,activation:N=`automatic`,ariaLabel:P,className:ee=``,style:te,...F}){t(`AppTabs`,F),e(`AppTabs`,`variant`,E,p),e(`AppTabs`,`orientation`,D,m),e(`AppTabs`,`size`,O,h),e(`AppTabs`,`activation`,N,g),e(`AppTabs`,`overflow`,A,_);for(let t of S)e(`AppTabs`,`tabs[].tone`,t.tone,v);let I=c(null),L=c(null),R=D===`vertical`,z=(A===`menu`||M!=null)&&!R,[B,V]=l(C);o(()=>{V(C)},[C]);let H=S.find(e=>!e.disabled)?.key,U=S.some(e=>e.key===B&&!e.disabled)?B:void 0,W=S.some(e=>e.key===C&&!e.disabled)?C:void 0,G=U??W??H,K=e=>{I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus()},q=a(()=>{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>y),t.classList.toggle(`is-overflow-end`,n>y&&e.scrollLeft<n-y)},[R,z]),J=a(()=>{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`,!!S.find(e=>e.key===C)?.danger)):e.style.setProperty(R?`--wui-tab-h`:`--wui-tab-w`,`0px`),e.setAttribute(`data-wui-tabs`,``),q()},[R,S,C,q]),Y=e=>!z||!I.current?.querySelector(`[data-key="${CSS.escape(String(e))}"][data-wui-overflow-hidden]`),X=a(()=>{let e=I.current;if(!e||R)return;let t=e.querySelector(`.app-tab.active`);if(!t)return;let n=b,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]);s(()=>{J()},[J]),s(()=>{X()},[C,X]);let Z=c(J);o(()=>{Z.current=J},[J]),o(()=>{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]),o(()=>{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 ne(e){let t=e.target?.dataset?.key;if(t==null)return;let n=S.findIndex(e=>e.key===t);if(n<0)return;let r=S.length,i=(e,t)=>{for(let n=1;n<=r;n++){let i=S[((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=S.find(e=>!e.disabled&&Y(e.key))??null:e.key===`End`&&(s=[...S].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;N===`automatic`&&!c&&w?.(s.key)}let Q=e=>{let t=I.current;t&&t.scrollBy({left:e*t.clientWidth*x})},re=[`app-tabs`,E===`pills`?`app-tabs-pills`:``,R?`app-tabs-vertical`:``,O===`sm`?`app-tabs-sm`:``,O===`lg`?`app-tabs-lg`:``,k?`app-tabs-fitted`:``,ee].filter(Boolean).join(` `),$=f(`div`,{ref:I,role:`tablist`,"aria-orientation":R?`vertical`:void 0,"aria-label":P,className:re,style:te,"data-wui-overflow-list":z?``:void 0,...F,onKeyDown:ne,onScroll:q,children:[S.map(e=>{let t=e.key===C,r=e.href!=null||e.to!=null,a={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`:``}`},o=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||e.count})]}),s;if(r){let t=e.to!=null&&T?T:`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),w?.(e.key))};s=d(t,{...a,...r,onClick:i,children:o},e.key)}else s=d(`button`,{type:`button`,...a,disabled:e.disabled,onClick:()=>{e.disabled||(V(e.key),w?.(e.key))},children:o},e.key);return e.tooltip?d(n,{content:e.tooltip,children:s},e.key):s}),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:j,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{S 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(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/components/AppThemeToggle.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`refresh-cw`},C=[`icon`,`segmented`],w={sm:16,md:20,lg:24,xl:28};function T({variant:T=`icon`,effect:E=i,includeAuto:D=!0,storageKey:O=a,duration:k,label:A=`Theme`,lightLabel:j=`Light`,darkLabel:M=`Dark`,autoLabel:N=`System`,name:P,size:F=`md`,tooltipPlacement:I=`auto`,onChange:L,className:R=``,...z}){t(`AppThemeToggle`,z),e(`AppThemeToggle`,`variant`,T,C),e(`AppThemeToggle`,`effect`,E,s),e(`AppThemeToggle`,`size`,F,Object.keys(w));let B=g(e=>e===`auto`&&!D?f(e):e,[D]),[V,H]=y(()=>B(typeof window>`u`?`auto`:d(O))),U=v(),W=P||U;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?H(B(e)):l(d(O))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&H(B(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[B]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let G=g((e,t,n)=>{let r=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},i={x:r.left+r.width/2,y:r.top+r.height/2};m(()=>{l(e),p(e,O),x(()=>H(e)),L?.(e)},{effect:E,to:f(e),origin:i,duration:k,live:n})},[O,E,k,L]);if(T===`segmented`){let e=[{value:`light`,label:j,icon:S.light},{value:`dark`,label:M,icon:S.dark}];return D&&e.push({value:`auto`,label:N,icon:S.auto}),b(r,{options:e,value:V,name:W,label:A,size:F,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,R].filter(Boolean).join(` `),onChange:e=>{if(e===V)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);G(e,t?.closest(`.segmented-option`)??t,t?.closest(`.segmented`))}})}return b(n,{icon:S[V],label:`${A}: ${V}`,size:w[F]??w.md,tooltipPlacement:I,onClick:e=>G(u(V,{includeAuto:D}),e.currentTarget,e.currentTarget),className:[`wui-theme-toggle`,R].filter(Boolean).join(` `)})}export{T as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`refresh-cw`},C=[`icon`,`segmented`],w={sm:16,md:20,lg:24,xl:28};function T({variant:T=`icon`,effect:E=i,includeAuto:D=!0,storageKey:O=a,duration:k,label:A=`Theme`,lightLabel:j=`Light`,darkLabel:M=`Dark`,autoLabel:N=`System`,name:P,size:F=`md`,tooltipPlacement:I=`auto`,onChange:L,className:R=``,...z}){t(`AppThemeToggle`,z),e(`AppThemeToggle`,`variant`,T,C),e(`AppThemeToggle`,`effect`,E,s),e(`AppThemeToggle`,`size`,F,Object.keys(w));let B=g(e=>e===`auto`&&!D?f(e):e,[D]),[V,H]=y(()=>B(typeof window>`u`?`auto`:d(O))),U=v(),W=P||U;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?H(B(e)):l(d(O))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&H(B(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[B]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let G=g((e,t)=>{let n=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},r={x:n.left+n.width/2,y:n.top+n.height/2};m(()=>{l(e),p(e,O),x(()=>H(e)),L?.(e)},{effect:E,to:f(e),origin:r,duration:k})},[O,E,k,L]);if(T===`segmented`){let e=[{value:`light`,label:j,icon:S.light},{value:`dark`,label:M,icon:S.dark}];return D&&e.push({value:`auto`,label:N,icon:S.auto}),b(r,{options:e,value:V,name:W,label:A,size:F,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,R].filter(Boolean).join(` `),onChange:e=>{if(e===V)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);G(e,t?.closest(`.segmented-option`)??t)}})}return b(n,{icon:S[V],label:`${A}: ${V}`,size:w[F]??w.md,tooltipPlacement:I,onClick:e=>G(u(V,{includeAuto:D}),e.currentTarget),className:[`wui-theme-toggle`,R].filter(Boolean).join(` `)})}export{T as default};

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

@@ -1,13 +1,17 @@
-export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, shortcut, className, ...rest }: {
+export default function AppButton({ children, variant, size, type, loading, disabled, block, leftIcon, rightIcon, href, static: isStatic, tooltip, tooltipPlacement, shortcut, animation, pinRightIcon, shape, iconVariant, className, ...rest }: {
     [x: string]: any;
+    animation: any;
     block?: boolean;
     children: any;
     className?: string;
     disabled?: boolean;
     href: any;
+    iconVariant: any;
     leftIcon?: any;
     loading?: boolean;
+    pinRightIcon?: boolean;
     rightIcon?: any;
+    shape?: string;
     shortcut: any;
     size?: string;
     static?: boolean;

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

@@ -24,6 +24,7 @@ import "@webority/ui-elements/elements/overflow";
  *
  * @param {object} props
  * @param {{ key: string, label: import('react').ReactNode, count?: number, countLabel?: string, tone?: string, icon?: string|import('react').ReactNode, image?: string, imageAlt?: string, tooltip?: import('react').ReactNode, danger?: boolean, disabled?: boolean, href?: string, to?: string, target?: string, rel?: string }[]} props.tabs
+ *   `count` is printed with Indian digit grouping (1,284; 12,34,567).
  *   `icon` is an iconsax name from the library catalogue OR a custom node (e.g. an iconsax glyph); `image` is a
  *   picture URL (logo/avatar) rendered before the label — `image` wins over `icon`. `tooltip`
  *   is a hover/focus hint (text or node) shown on the tab via AppTooltip — the same branded

package/package.json

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