@webority/ui-react 0.104.1 → 0.107.0

package/dist/components/AppCommentThread.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{initialsOf as r}from"../lib/initials.js";import{parseMentionValue as i}from"@webority/ui-elements/elements/mention-input";import{formatDate as a,formatNumber as o,toInstant as s}from"@webority/ui-elements/helpers";import{Fragment as c,useEffect as l,useId as u,useRef as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{COMMENT_REACTIONS as m,COMMENT_TEXT as h}from"@webority/ui-elements/elements/comment-thread";function g(n){let{comments:r=[],onPost:i,onReply:a,onEdit:o,onDelete:s,onReact:c,people:g,loadPeople:v,reactionChoices:y,allowReplies:b=!0,allowReactions:x=!0,composerPlaceholder:S,readOnly:C=!1,label:w=h.listName,id:T,className:E=``,...D}=n;t(`AppCommentThread`,D);let O=u(),k=T||`comment-thread-${O.replace(/[^a-zA-Z0-9_-]/g,``)}`,A=d(null),j=typeof v==`function`,M=y?.length?y:m,N=d(null);return N.current={onPost:i,onReply:a,onEdit:o,onDelete:s,onReact:c,loadPeople:v},l(()=>{let e=A.current;if(e)return e.submit=async({intent:e,commentId:t,parentId:n,body:r,emoji:i})=>{let a=N.current;e===`post`?await a.onPost?.(r):e===`reply`?await a.onReply?.(n,r):e===`edit`?await a.onEdit?.(t,r):e===`delete`?await a.onDelete?.(t):e===`react`&&await a.onReact?.(t,i)},()=>{e.submit=void 0}},[]),l(()=>{let e=A.current;!e||j||(e.people=g||[])},[g,j]),l(()=>{let e=A.current;if(!e||!j)return;let t=new WeakMap,n=async e=>{let n=e.target,r=(t.get(n)??0)+1;t.set(n,r),n.loading=!0;try{let i=await N.current.loadPeople(e.detail.query);t.get(n)===r&&(n.people=i||[])}catch{t.get(n)===r&&(n.people=[])}finally{t.get(n)===r&&(n.loading=!1)}};return e.addEventListener(`search`,n),()=>e.removeEventListener(`search`,n)},[j]),p(`wui-comment-thread`,{ref:A,id:k,class:E?`wui-comment-thread ${E}`:`wui-comment-thread`,controlled:``,"read-only":C?``:void 0,remote:j?``:void 0,"reaction-choices":y?.length?y.join(` `):void 0,"no-replies":b?void 0:``,"no-reactions":x?void 0:``,"composer-placeholder":S,...e(`AppCommentThread`,n),...D,children:[f(`div`,{className:`wui-comment-items`,"data-wui-items":``,children:r.length?f(`ol`,{className:`wui-comment-list`,"aria-label":w,children:r.map(e=>f(_,{comment:e,topLevel:!0,readOnly:C,allowReplies:b,allowReactions:x},e.id))}):f(`p`,{className:`wui-comment-empty`,children:h.empty})}),!C&&x&&f(`div`,{className:`wui-reaction-picker`,role:`group`,"aria-label":h.pickerName,"data-wui-picker":``,hidden:!0,children:M.map(e=>f(`button`,{type:`button`,className:`wui-reaction-choice`,"data-wui-emoji":e,children:e},e))}),!C&&p(`div`,{className:`wui-comment-composer`,"data-wui-composer":``,children:[f(`wui-mention-input`,{id:`${k}-new`,class:`wui-mention-input`,label:h.composerLabel,placeholder:S??h.composerPlaceholder,rows:`3`,remote:j?``:void 0}),f(`div`,{className:`wui-comment-form-actions`,children:f(`button`,{type:`button`,className:`btn btn-primary btn-sm`,"data-wui-action":`post`,children:h.post})}),f(`div`,{className:`wui-comment-error`,"data-wui-error":``,hidden:!0})]}),f(`span`,{className:`visually-hidden`,"data-wui-live":``,"aria-live":`polite`,"aria-atomic":`true`})]})}function _({comment:e,topLevel:t=!1,readOnly:l,allowReplies:u,allowReactions:d}){let{id:m,author:g,at:v,value:y,edited:b,deleted:x,canEdit:S,canDelete:C,reactions:w=[],replies:T=[]}=e,E=g?.name||``,D=s(v),O=!l&&!x&&S,k=!l&&!x&&C,A=t&&u;return p(`li`,{className:`wui-comment`,"data-wui-comment":m,"data-value":y??``,"data-wui-deleted":x?``:void 0,children:[p(`div`,{className:`wui-comment-row`,children:[p(`span`,{className:`avatar avatar-sm wui-comment-avatar`,"aria-hidden":`true`,children:[f(`span`,{className:`avatar-face`,children:r(E)||`?`}),g?.src&&f(`img`,{className:`avatar-img`,src:g.src,alt:``,onError:e=>{e.currentTarget.hidden=!0}})]}),p(`div`,{className:`wui-comment-main`,children:[p(`div`,{className:`wui-comment-head`,children:[f(`span`,{className:`wui-comment-author`,children:E}),f(`time`,{className:`wui-comment-time`,dateTime:Number.isFinite(D)?new Date(D).toISOString():void 0,children:a(v,{pattern:`datetime`})}),b&&!x&&f(`span`,{className:`wui-comment-edited`,children:h.edited})]}),x?f(`div`,{className:`wui-comment-text wui-comment-text-deleted`,children:h.deleted}):f(`div`,{className:`wui-comment-text`,"data-wui-text":``,children:i(y).map((e,t)=>`text`in e?f(c,{children:e.text},t):p(`span`,{className:`wui-mention`,"data-mention-id":e.id,children:[`@`,e.label]},t))}),O&&f(`div`,{className:`wui-comment-editor`,"data-wui-editor":``,hidden:!0}),d&&!x&&(w.length>0||!l)&&p(`div`,{className:`wui-comment-reactions`,role:`group`,"aria-label":h.reactions,children:[w.map(e=>l?p(`span`,{className:e.mine?`wui-reaction wui-reaction-mine`:`wui-reaction`,children:[f(`span`,{className:`wui-reaction-emoji`,children:e.emoji}),f(`span`,{className:`wui-reaction-count`,children:o(e.count,{decimals:0})})]},e.emoji):p(`button`,{type:`button`,className:e.mine?`wui-reaction wui-reaction-mine`:`wui-reaction`,"data-wui-emoji":e.emoji,"aria-pressed":e.mine?`true`:`false`,children:[f(`span`,{className:`wui-reaction-emoji`,children:e.emoji}),f(`span`,{className:`wui-reaction-count`,children:o(e.count,{decimals:0})})]},e.emoji)),!l&&f(`button`,{type:`button`,className:`wui-reaction-add`,"data-wui-action":`react-menu`,"aria-label":h.addReaction,"aria-haspopup":`true`,"aria-expanded":`false`,children:f(n,{name:`emoji-smile`,size:16})})]}),!l&&!x&&(A||O||k)&&p(`div`,{className:`wui-comment-actions`,"data-wui-actions":``,children:[A&&f(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`reply`,children:h.reply}),O&&f(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`edit`,children:h.edit}),k&&f(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`delete`,children:h.delete})]}),k&&p(`div`,{className:`wui-comment-confirm`,"data-wui-confirm":``,hidden:!0,children:[f(`span`,{className:`wui-comment-confirm-text`,children:h.confirmDelete}),f(`button`,{type:`button`,className:`btn btn-danger btn-sm`,"data-wui-action":`confirm-delete`,children:h.delete}),f(`button`,{type:`button`,className:`btn btn-ghost btn-sm`,"data-wui-action":`cancel-delete`,children:h.cancel})]}),!l&&f(`div`,{className:`wui-comment-error`,"data-wui-error":``,hidden:!0})]})]}),t&&T.length>0&&f(`ol`,{className:`wui-comment-list wui-comment-replies`,"aria-label":h.repliesName(E),children:T.map(e=>f(_,{comment:e,readOnly:l,allowReactions:d},e.id))}),A&&!l&&!x&&f(`div`,{className:`wui-comment-reply`,"data-wui-reply":``,hidden:!0})]})}export{g 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{initialsOf as i}from"../lib/initials.js";import a from"./AppAvatar.js";import{parseMentionValue as o}from"@webority/ui-elements/elements/mention-input";import{formatDate as s,formatNumber as c,toInstant as l}from"@webority/ui-elements/helpers";import{Fragment as u,useEffect as d,useId as f,useRef as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{COMMENT_REACTIONS as g,COMMENT_TEXT as _}from"@webority/ui-elements/elements/comment-thread";var v=[`stacked`,`inline`];function y(r){let{comments:i=[],onPost:o,onReply:s,onEdit:c,onDelete:l,onReact:u,people:y,loadPeople:x,reactionChoices:S,allowReplies:C=!0,allowReactions:w=!0,composerPlaceholder:T,composer:E=`stacked`,author:D,postLabel:O=_.post,composerRows:k,readOnly:A=!1,label:j=_.listName,id:M,className:N=``,...P}=r;n(`AppCommentThread`,P),t(`AppCommentThread`,`composer`,E,v);let F=f(),I=M||`comment-thread-${F.replace(/[^a-zA-Z0-9_-]/g,``)}`,L=p(null),R=typeof x==`function`,z=S?.length?S:g,B=E===`inline`,V=k??(B?1:3),H=p(null);return H.current={onPost:o,onReply:s,onEdit:c,onDelete:l,onReact:u,loadPeople:x},d(()=>{let e=L.current;if(e)return e.submit=async({intent:e,commentId:t,parentId:n,body:r,emoji:i})=>{let a=H.current;e===`post`?await a.onPost?.(r):e===`reply`?await a.onReply?.(n,r):e===`edit`?await a.onEdit?.(t,r):e===`delete`?await a.onDelete?.(t):e===`react`&&await a.onReact?.(t,i)},()=>{e.submit=void 0}},[]),d(()=>{let e=L.current;!e||R||(e.people=y||[])},[y,R]),d(()=>{let e=L.current;if(!e||!R)return;let t=new WeakMap,n=async e=>{let n=e.target,r=(t.get(n)??0)+1;t.set(n,r),n.loading=!0;try{let i=await H.current.loadPeople(e.detail.query);t.get(n)===r&&(n.people=i||[])}catch{t.get(n)===r&&(n.people=[])}finally{t.get(n)===r&&(n.loading=!1)}};return e.addEventListener(`search`,n),()=>e.removeEventListener(`search`,n)},[R]),h(`wui-comment-thread`,{ref:L,id:I,class:N?`wui-comment-thread ${N}`:`wui-comment-thread`,controlled:``,"read-only":A?``:void 0,remote:R?``:void 0,"reaction-choices":S?.length?S.join(` `):void 0,"no-replies":C?void 0:``,"no-reactions":w?void 0:``,"composer-placeholder":T,...e(`AppCommentThread`,r),...P,children:[m(`div`,{className:`wui-comment-items`,"data-wui-items":``,children:i.length?m(`ol`,{className:`wui-comment-list`,"aria-label":j,children:i.map(e=>m(b,{comment:e,topLevel:!0,readOnly:A,allowReplies:C,allowReactions:w},e.id))}):m(`p`,{className:`wui-comment-empty`,children:_.empty})}),!A&&w&&m(`div`,{className:`wui-reaction-picker`,role:`group`,"aria-label":_.pickerName,"data-wui-picker":``,hidden:!0,children:z.map(e=>m(`button`,{type:`button`,className:`wui-reaction-choice`,"data-wui-emoji":e,children:e},e))}),!A&&h(`div`,{className:B?`wui-comment-composer wui-comment-composer-inline`:`wui-comment-composer`,"data-wui-composer":``,children:[B&&D?m(a,{name:D,size:`sm`,tone:`auto`,className:`wui-comment-composer-avatar`}):null,m(`wui-mention-input`,{id:`${I}-new`,class:`wui-mention-input`,label:_.composerLabel,placeholder:T??_.composerPlaceholder,rows:String(V),remote:R?``:void 0}),m(`div`,{className:`wui-comment-form-actions`,children:m(`button`,{type:`button`,className:B?`btn btn-outline-primary btn-sm`:`btn btn-primary btn-sm`,"data-wui-action":`post`,children:O})}),m(`div`,{className:`wui-comment-error`,"data-wui-error":``,hidden:!0})]}),m(`span`,{className:`visually-hidden`,"data-wui-live":``,"aria-live":`polite`,"aria-atomic":`true`})]})}function b({comment:e,topLevel:t=!1,readOnly:n,allowReplies:a,allowReactions:d}){let{id:f,author:p,at:g,value:v,edited:y,deleted:x,canEdit:S,canDelete:C,reactions:w=[],replies:T=[]}=e,E=p?.name||``,D=l(g),O=!n&&!x&&S,k=!n&&!x&&C,A=t&&a;return h(`li`,{className:`wui-comment`,"data-wui-comment":f,"data-value":v??``,"data-wui-deleted":x?``:void 0,children:[h(`div`,{className:`wui-comment-row`,children:[h(`span`,{className:`avatar avatar-sm wui-comment-avatar`,"aria-hidden":`true`,children:[m(`span`,{className:`avatar-face`,children:i(E)||`?`}),p?.src&&m(`img`,{className:`avatar-img`,src:p.src,alt:``,onError:e=>{e.currentTarget.hidden=!0}})]}),h(`div`,{className:`wui-comment-main`,children:[h(`div`,{className:`wui-comment-head`,children:[m(`span`,{className:`wui-comment-author`,children:E}),m(`time`,{className:`wui-comment-time`,dateTime:Number.isFinite(D)?new Date(D).toISOString():void 0,children:s(g,{pattern:`datetime`})}),y&&!x&&m(`span`,{className:`wui-comment-edited`,children:_.edited})]}),x?m(`div`,{className:`wui-comment-text wui-comment-text-deleted`,children:_.deleted}):m(`div`,{className:`wui-comment-text`,"data-wui-text":``,children:o(v).map((e,t)=>`text`in e?m(u,{children:e.text},t):h(`span`,{className:`wui-mention`,"data-mention-id":e.id,children:[`@`,e.label]},t))}),O&&m(`div`,{className:`wui-comment-editor`,"data-wui-editor":``,hidden:!0}),d&&!x&&(w.length>0||!n)&&h(`div`,{className:`wui-comment-reactions`,role:`group`,"aria-label":_.reactions,children:[w.map(e=>n?h(`span`,{className:e.mine?`wui-reaction wui-reaction-mine`:`wui-reaction`,children:[m(`span`,{className:`wui-reaction-emoji`,children:e.emoji}),m(`span`,{className:`wui-reaction-count`,children:c(e.count,{decimals:0})})]},e.emoji):h(`button`,{type:`button`,className:e.mine?`wui-reaction wui-reaction-mine`:`wui-reaction`,"data-wui-emoji":e.emoji,"aria-pressed":e.mine?`true`:`false`,children:[m(`span`,{className:`wui-reaction-emoji`,children:e.emoji}),m(`span`,{className:`wui-reaction-count`,children:c(e.count,{decimals:0})})]},e.emoji)),!n&&m(`button`,{type:`button`,className:`wui-reaction-add`,"data-wui-action":`react-menu`,"aria-label":_.addReaction,"aria-haspopup":`true`,"aria-expanded":`false`,children:m(r,{name:`emoji-smile`,size:16})})]}),!n&&!x&&(A||O||k)&&h(`div`,{className:`wui-comment-actions`,"data-wui-actions":``,children:[A&&m(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`reply`,children:_.reply}),O&&m(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`edit`,children:_.edit}),k&&m(`button`,{type:`button`,className:`wui-comment-action`,"data-wui-action":`delete`,children:_.delete})]}),k&&h(`div`,{className:`wui-comment-confirm`,"data-wui-confirm":``,hidden:!0,children:[m(`span`,{className:`wui-comment-confirm-text`,children:_.confirmDelete}),m(`button`,{type:`button`,className:`btn btn-danger btn-sm`,"data-wui-action":`confirm-delete`,children:_.delete}),m(`button`,{type:`button`,className:`btn btn-ghost btn-sm`,"data-wui-action":`cancel-delete`,children:_.cancel})]}),!n&&m(`div`,{className:`wui-comment-error`,"data-wui-error":``,hidden:!0})]})]}),t&&T.length>0&&m(`ol`,{className:`wui-comment-list wui-comment-replies`,"aria-label":_.repliesName(E),children:T.map(e=>m(b,{comment:e,readOnly:n,allowReactions:d},e.id))}),A&&!n&&!x&&m(`div`,{className:`wui-comment-reply`,"data-wui-reply":``,hidden:!0})]})}export{y as default};

package/dist/components/AppConfirmDialog.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppButton.js";import i from"./AppModal.js";import a from"./AppInput.js";import{MODAL_ICONS as o}from"./ModalIcons.js";import{useEffect as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`sm`,`md`,`lg`,`xl`];function p(p){let{open:m,title:h,message:g,confirmLabel:_=`Confirm`,cancelLabel:v=`Cancel`,danger:y=!1,tone:b,image:x,iconSize:S,confirmPhrase:C,onConfirm:w,onClose:T,loading:E=!1,staticBackdrop:D=!1,placement:O=`center`,size:k=`md`,className:A=``,children:j,...M}=p;n(`AppConfirmDialog`,M),t(`AppConfirmDialog`,`tone`,b,Object.keys(o)),t(`AppConfirmDialog`,`size`,typeof k==`string`?k:null,f);let[N,P]=c(``);if(s(()=>{m||P(``)},[m]),!m)return null;let F=!!C&&N.trim()!==C,I=x?null:o[b||(y?`delete`:`info`)],L=S>0?{"--wui-confirm-icon-size":`${S}px`}:void 0,R=()=>{E||T?.()};return u(i,{...e(`AppConfirmDialog`,p),...M,open:m,hideHeader:!0,title:h,onClose:R,staticBackdrop:D,placement:O,size:k,className:[`wui-confirm`,A].filter(Boolean).join(` `),footer:d(`div`,{className:`wui-confirm-actions`,children:[u(r,{variant:`secondary`,disabled:E,onClick:R,children:v}),u(r,{variant:y?`danger`:`primary`,disabled:F,loading:E,onClick:w,children:_})]}),children:d(`div`,{className:`wui-confirm-content`,children:[x?u(`span`,{className:`wui-confirm-icon`,style:L,children:u(`img`,{src:x,alt:``,"aria-hidden":`true`})}):I&&u(`span`,{className:`wui-confirm-icon`,style:L,children:u(I,{size:120})}),u(`h3`,{className:`wui-confirm-title`,tabIndex:-1,"data-autofocus":``,children:h}),g&&u(`p`,{className:`wui-confirm-msg`,children:g}),j!=null&&j!==!1&&u(`div`,{className:`wui-confirm-body`,children:j}),C&&u(a,{fieldClassName:`mt-3 mb-0 w-100 text-start`,label:d(l,{children:[`Type `,u(`strong`,{children:C}),` to confirm`]}),value:N,onChange:e=>P(e.target.value),"aria-label":`Type ${C} to confirm`,disabled:E})]})})}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"./AppButton.js";import i from"./AppModal.js";import a from"./AppInput.js";import{MODAL_ICONS as o}from"./ModalIcons.js";import{useEffect as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`sm`,`md`,`lg`,`xl`],p=[`default`,`plain`];function m(m){let{open:h,title:g,variant:_=`default`,message:v,confirmLabel:y=`Confirm`,cancelLabel:b=`Cancel`,danger:x=!1,tone:S,image:C,iconSize:w,confirmPhrase:T,onConfirm:E,onClose:D,loading:O=!1,staticBackdrop:k=!1,placement:A=`center`,size:j=`md`,className:M=``,children:N,...P}=m;n(`AppConfirmDialog`,P),t(`AppConfirmDialog`,`tone`,S,Object.keys(o)),t(`AppConfirmDialog`,`size`,typeof j==`string`?j:null,f),t(`AppConfirmDialog`,`variant`,_,p);let[F,I]=c(``);if(s(()=>{h||I(``)},[h]),!h)return null;let L=!!T&&F.trim()!==T,R=_===`plain`,z=R?`sm`:`md`,B=R||C?null:o[S||(x?`delete`:`info`)],V=w>0?{"--wui-confirm-icon-size":`${w}px`}:void 0,H=()=>{O||D?.()};return u(i,{...e(`AppConfirmDialog`,m),...P,open:h,hideHeader:!0,title:g,onClose:H,staticBackdrop:k,placement:A,size:j,className:[`wui-confirm`,R&&`wui-confirm-plain`,M].filter(Boolean).join(` `),footer:d(`div`,{className:`wui-confirm-actions`,children:[u(r,{variant:R?`light`:`secondary`,size:z,disabled:O,onClick:H,children:b}),u(r,{variant:x?`danger`:`primary`,size:z,disabled:L,loading:O,onClick:E,children:y})]}),children:d(`div`,{className:`wui-confirm-content`,children:[!R&&C?u(`span`,{className:`wui-confirm-icon`,style:V,children:u(`img`,{src:C,alt:``,"aria-hidden":`true`})}):B&&u(`span`,{className:`wui-confirm-icon`,style:V,children:u(B,{size:120})}),u(`h3`,{className:`wui-confirm-title`,tabIndex:-1,"data-autofocus":``,children:g}),v&&u(`p`,{className:`wui-confirm-msg`,children:v}),N!=null&&N!==!1&&u(`div`,{className:`wui-confirm-body`,children:N}),T&&u(a,{fieldClassName:`mt-3 mb-0 w-100 text-start`,label:d(l,{children:[`Type `,u(`strong`,{children:T}),` to confirm`]}),value:F,onChange:e=>I(e.target.value),"aria-label":`Type ${T} to confirm`,disabled:O})]})})}export{m as default};

package/dist/components/AppDetailPane.js

@@ -0,0 +1 @@
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import{jsx as n}from"react/jsx-runtime";function r(r){let{open:i=!1,onClose:a,label:o,sticky:s=!0,children:c,className:l=``,...u}=r;t(`AppDetailPane`,u);let d=e=>{u.onKeyDown?.(e),e.key===`Escape`&&a&&a()};return n(`aside`,{...e(`AppDetailPane`,r),...u,className:[`wui-detail-pane`,l].filter(Boolean).join(` `),"aria-label":o,"data-wui-pane-host":``,"data-sticky":s?``:void 0,hidden:!i,onKeyDown:d,children:c})}export{r as default};

package/dist/components/AppDrawer.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"../lib/DiscardPrompt.js";import{useEffect as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/drawer";var l=[`end`,`start`],u=[`sm`,`md`,`lg`],d=[50,90],f=e=>Array.isArray(e)&&e.length>0&&e.every(e=>Number.isFinite(e)&&e>=10&&e<=100);function p(p){let{open:m=!1,onClose:h,title:g,subtitle:_,ariaLabel:v,side:y=`end`,size:b=`md`,snapPoints:x=d,defaultSnap:S=0,onSnapChange:C,dismissible:w=!0,staticBackdrop:T=!1,confirmDiscard:E,dirty:D=!1,footer:O,className:k=``,children:A,...j}=p;n(`AppDrawer`,j),t(`AppDrawer`,`side`,y,l),t(`AppDrawer`,`size`,b,u),t(`AppDrawer`,`snapPoints`,f(x)?void 0:JSON.stringify(x),[`an array of numbers from 10 to 100`]);let M=a(null),N=a(null),P=a(null),[F,I]=o(!1);N.current={onClose:h,onSnapChange:C,confirmDiscard:E,dirty:D},i(()=>{m||I(!1)},[m]),i(()=>{F&&P.current?.focus()},[F]),i(()=>{let e=M.current;if(!e)return;let t=t=>{if(t.target===e){if(t.preventDefault(),N.current.confirmDiscard&&N.current.dirty){I(!0);return}N.current.onClose?.()}},n=t=>{t.target===e&&N.current.onSnapChange?.(t.detail.index,t.detail.percent)},r=n=>{n.target.closest?.(`[data-wui-dismiss]`)&&t({target:e,preventDefault(){}})};return e.addEventListener(`wui-drawer-close`,t),e.addEventListener(`wui-drawer-snap`,n),e.addEventListener(`click`,r),()=>{e.removeEventListener(`wui-drawer-close`,t),e.removeEventListener(`wui-drawer-snap`,n),e.removeEventListener(`click`,r)}},[]);let L=()=>{I(!1),M.current?.dispatchEvent(new CustomEvent(`wui:drawer:discard`,{bubbles:!0})),N.current.onClose?.()},R=f(x)?x:d;return c(`wui-drawer`,{ref:M,...e(`AppDrawer`,p),...j,class:[`wui-drawer`,k].filter(Boolean).join(` `),side:y,size:b,"snap-points":R.join(`,`),"default-snap":String(S),static:T?``:void 0,"confirm-discard":E||void 0,open:m?``:void 0,children:[s(`div`,{className:`wui-drawer-backdrop`,"data-wui-drawer-backdrop":``,"aria-hidden":`true`}),c(`div`,{className:`wui-drawer-panel`,role:`dialog`,"aria-modal":`true`,"aria-label":v||g||void 0,tabIndex:-1,children:[s(`div`,{className:`wui-drawer-grip`,"data-wui-drawer-grip":``,children:s(`div`,{className:`wui-drawer-handle`,role:`slider`,tabIndex:0,"aria-orientation":`vertical`,"aria-label":`Sheet height`})}),c(`div`,{className:`wui-drawer-header`,"data-wui-drawer-grip":``,children:[c(`div`,{className:`wui-drawer-headtext`,children:[g&&s(`div`,{className:`wui-drawer-title`,children:g}),_&&s(`div`,{className:`wui-drawer-subtitle`,children:_})]}),w&&s(`button`,{type:`button`,className:`wui-drawer-close`,"data-wui-drawer-close":``,"aria-label":`Close`,children:s(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:s(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),s(`div`,{className:`wui-drawer-body`,children:A}),(O||F)&&c(`div`,{className:F?`wui-drawer-footer wui-drawer-discarding`:`wui-drawer-footer`,children:[F&&s(r,{text:E,confirmRef:P,onDiscard:L,onKeep:()=>I(!1)}),O]})]})]})}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"../lib/DiscardPrompt.js";import{useEffect as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/drawer";var l=[`end`,`start`],u=[`sm`,`md`,`lg`,`xl`],d=[50,90],f=e=>Array.isArray(e)&&e.length>0&&e.every(e=>Number.isFinite(e)&&e>=10&&e<=100);function p(p){let{open:m=!1,onClose:h,title:g,subtitle:_,ariaLabel:v,side:y=`end`,size:b=`md`,snapPoints:x=d,defaultSnap:S=0,onSnapChange:C,dismissible:w=!0,staticBackdrop:T=!1,confirmDiscard:E,dirty:D=!1,footer:O,className:k=``,children:A,...j}=p;n(`AppDrawer`,j),t(`AppDrawer`,`side`,y,l),t(`AppDrawer`,`size`,b,u),t(`AppDrawer`,`snapPoints`,f(x)?void 0:JSON.stringify(x),[`an array of numbers from 10 to 100`]);let M=a(null),N=a(null),P=a(null),[F,I]=o(!1);N.current={onClose:h,onSnapChange:C,confirmDiscard:E,dirty:D},i(()=>{m||I(!1)},[m]),i(()=>{F&&P.current?.focus()},[F]),i(()=>{let e=M.current;if(!e)return;let t=t=>{if(t.target===e){if(t.preventDefault(),N.current.confirmDiscard&&N.current.dirty){I(!0);return}N.current.onClose?.()}},n=t=>{t.target===e&&N.current.onSnapChange?.(t.detail.index,t.detail.percent)},r=n=>{n.target.closest?.(`[data-wui-dismiss]`)&&t({target:e,preventDefault(){}})};return e.addEventListener(`wui-drawer-close`,t),e.addEventListener(`wui-drawer-snap`,n),e.addEventListener(`click`,r),()=>{e.removeEventListener(`wui-drawer-close`,t),e.removeEventListener(`wui-drawer-snap`,n),e.removeEventListener(`click`,r)}},[]);let L=()=>{I(!1),M.current?.dispatchEvent(new CustomEvent(`wui:drawer:discard`,{bubbles:!0})),N.current.onClose?.()},R=f(x)?x:d;return c(`wui-drawer`,{ref:M,...e(`AppDrawer`,p),...j,class:[`wui-drawer`,k].filter(Boolean).join(` `),side:y,size:b,"snap-points":R.join(`,`),"default-snap":String(S),static:T?``:void 0,"confirm-discard":E||void 0,open:m?``:void 0,children:[s(`div`,{className:`wui-drawer-backdrop`,"data-wui-drawer-backdrop":``,"aria-hidden":`true`}),c(`div`,{className:`wui-drawer-panel`,role:`dialog`,"aria-modal":`true`,"aria-label":v||g||void 0,tabIndex:-1,children:[s(`div`,{className:`wui-drawer-grip`,"data-wui-drawer-grip":``,children:s(`div`,{className:`wui-drawer-handle`,role:`slider`,tabIndex:0,"aria-orientation":`vertical`,"aria-label":`Sheet height`})}),c(`div`,{className:`wui-drawer-header`,"data-wui-drawer-grip":``,children:[c(`div`,{className:`wui-drawer-headtext`,children:[g&&s(`div`,{className:`wui-drawer-title`,children:g}),_&&s(`div`,{className:`wui-drawer-subtitle`,children:_})]}),w&&s(`button`,{type:`button`,className:`wui-drawer-close`,"data-wui-drawer-close":``,"aria-label":`Close`,children:s(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:s(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),s(`div`,{className:`wui-drawer-body`,children:A}),(O||F)&&c(`div`,{className:F?`wui-drawer-footer wui-drawer-discarding`:`wui-drawer-footer`,children:[F&&s(r,{text:E,confirmRef:P,onDiscard:L,onKeep:()=>I(!1)}),O]})]})]})}export{p as default};

package/dist/components/AppFilePicker.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnUnknownProps.js";import r from"./withTooltip.js";import i from"./AppIcon.js";import a from"../lib/FieldMessage.js";import o from"./AppRequiredMark.js";import{keyOf as s}from"../lib/fileItem.js";import ee from"../lib/FileItemRow.js";import{DEFAULT_MAX_SIZE_MB as c,acceptLabel as l,isImageFile as u,isImageOnlyAccept as te,isPdfFile as ne,validateFile as d}from"@webority/ui-elements/helpers";import{useEffect as f,useId as re,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _(_){let{label:v,value:y,name:ie,id:ae,onPick:b,multiple:x=!1,maxFiles:S,accept:C=`.jpg,.jpeg,.png`,maxSizeMb:w=c,required:oe,error:T,hint:E,loading:D=!1,className:O=``,fieldClassName:k=``,style:A,"data-canvas":se,...j}=_;n(`AppFilePicker`,j);let[ce,M]=m(null),[le,N]=m(null),[P,F]=m(!1),[ue,I]=m(``),L=p(null),de=re(),R=ae||de;f(()=>{if(!x&&y instanceof File&&u(y)){let e=URL.createObjectURL(y);return M(e),()=>URL.revokeObjectURL(e)}M(null)},[y,x]);let z=!x&&y&&!u(y)&&ne(y)?y instanceof File?y:y.url:null;f(()=>{if(!z){N(null);return}let e=!0,n=null;return import(`@webority/ui-elements/file-viewer`).then(e=>e.renderPdfFirstPage(typeof z==`string`?{url:z}:z)).then(t=>{e&&(n=URL.createObjectURL(t),N(n))}).catch(e=>t(`[AppFilePicker] the PDF preview failed:`,e?.message)),()=>{e=!1,N(null),n&&URL.revokeObjectURL(n)}},[z]);let B=x?Array.isArray(y)?y:y?[y]:[]:[],V=T||ue,H=V?`${R}-error`:void 0,U=E&&!V?`${R}-hint`:void 0,fe=H||U,W=te(C),G=!x&&!!y,K=G&&(y instanceof File?u(y):W||u(y)),pe=y?.name,q=K?y?.url||ce:le,J=K?`image`:`file`,me=v?`Change ${v}`:`Change ${J}`,Y=v?`Remove ${v}`:`Remove ${J}`,he=v?`${v} preview`:`Selected ${J} preview`,X=e=>{let t=d(e,{accept:C,maxSizeMb:w});return t?(I(t),!1):(I(``),b(e),!0)},Z=e=>{let t=Array.from(e||[]);if(!t.length)return;let n=Array.isArray(y)?y:y?[y]:[],r=new Set(n.map(s)),i=``,a=[];for(let e of t){let t=d(e,{accept:C,maxSizeMb:w});if(t){i||=t;continue}r.has(s(e))||(r.add(s(e)),a.push(e))}let o=n.concat(a);S&&o.length>S&&(o=o.slice(0,S),i||=`Up to ${S} files.`),I(i),b(o)},ge=e=>{if(x){Z(e.target.files);return}let t=e.target.files?.[0]||null;t&&(X(t)||(e.target.value=``))},_e=e=>{if(e.preventDefault(),F(!1),D)return;if(x){Z(e.dataTransfer.files);return}let t=e.dataTransfer.files?.[0];t&&X(t)},ve=e=>{I(``),b(B.filter((t,n)=>n!==e))},ye=()=>L.current?.click(),Q=D?h(`span`,{className:`wui-file-busy`,children:h(`span`,{className:`spinner-border spinner-border-sm`,role:`status`,"aria-label":`Loading`})}):null,$=h(`input`,{id:R,name:ie,ref:L,type:`file`,"aria-describedby":fe,accept:C,multiple:x||void 0,disabled:D||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:ge,...j});return g(`div`,{...e(`AppFilePicker`,_),className:`field${k?` ${k}`:``}`,children:[g(`label`,{className:`label`,htmlFor:R,children:[v,oe&&h(o,{})]}),G?g(`div`,{className:`file-preview${V?` error`:``}${O?` ${O}`:``}`,style:A,"aria-busy":D||void 0,children:[g(`button`,{type:`button`,className:`file-preview-open`,"aria-label":me,onClick:ye,disabled:D,children:[q?h(`img`,{src:q,alt:he,className:`file-preview-img`}):g(`span`,{className:`file-preview-file`,children:[h(i,{name:`file-text`,size:28}),h(`span`,{className:`file-preview-file-name`,children:pe})]}),h(`span`,{className:`file-preview-overlay`,children:g(`span`,{className:`file-preview-cta`,children:[h(i,{name:K?`image`:`file-text`,size:16}),` `,K?`Change image`:`Change file`]})})]}),r(h(`button`,{type:`button`,className:`file-preview-remove`,"aria-label":Y,onClick:()=>b(null),disabled:D,children:h(i,{name:`x`,size:16})}),Y),$,Q]}):g(`div`,{className:`file-input file-input-tall${P?` dragging`:``}${V?` error`:``}${x&&B.length>0?` has-files`:``}${O?` ${O}`:``}`,style:A,"aria-busy":D||void 0,onDragOver:e=>{e.preventDefault(),!D&&!P&&F(!0)},onDragLeave:e=>{e.preventDefault(),F(!1)},onDrop:_e,children:[g(`label`,{htmlFor:R,className:`file-input-zone-label`,children:[h(`span`,{className:`file-input-icon`,children:h(i,{name:`upload`,size:24})}),g(`span`,{className:`file-input-title`,children:[h(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),h(`span`,{className:`file-input-text`,children:w>0?`${l(C)}, up to ${w} MB`:l(C)})]}),$,Q,x&&B.length>0&&h(`div`,{className:`attach-list`,children:B.map((e,t)=>h(ee,{item:e,isImage:e instanceof File?u(e):W||u(e),noun:`file`,onRemove:()=>ve(t)},s(e)))})]}),h(a,{error:V,hint:E,errorId:H,hintId:U})]})}export{_ 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"./withTooltip.js";import a from"./AppIcon.js";import o from"../lib/FieldMessage.js";import ee from"./AppRequiredMark.js";import{keyOf as s}from"../lib/fileItem.js";import te from"../lib/FileItemRow.js";import{DEFAULT_MAX_SIZE_MB as ne,acceptLabel as c,isImageFile as l,isImageOnlyAccept as re,isPdfFile as ie,validateFile as u}from"@webority/ui-elements/helpers";import{useEffect as d,useId as ae,useRef as oe,useState as f}from"react";import{jsx as p,jsxs as m}from"react/jsx-runtime";var se=[`dropzone`,`button`];function h(h){let{label:g,value:_,name:ce,id:v,onPick:y,multiple:b=!1,variant:x=`dropzone`,buttonLabel:le=`Add file`,maxFiles:S,accept:C=`.jpg,.jpeg,.png`,maxSizeMb:w=ne,required:ue,error:T,hint:E,loading:D=!1,className:O=``,fieldClassName:k=``,style:A,"data-canvas":de,...j}=h;r(`AppFilePicker`,j),n(`AppFilePicker`,`variant`,x,se);let[fe,M]=f(null),[pe,N]=f(null),[P,F]=f(!1),[me,I]=f(``),L=oe(null),he=ae(),R=v||he;d(()=>{if(!b&&_ instanceof File&&l(_)){let e=URL.createObjectURL(_);return M(e),()=>URL.revokeObjectURL(e)}M(null)},[_,b]);let z=!b&&_&&!l(_)&&ie(_)?_ instanceof File?_:_.url:null;d(()=>{if(!z){N(null);return}let e=!0,n=null;return import(`@webority/ui-elements/file-viewer`).then(e=>e.renderPdfFirstPage(typeof z==`string`?{url:z}:z)).then(t=>{e&&(n=URL.createObjectURL(t),N(n))}).catch(e=>t(`[AppFilePicker] the PDF preview failed:`,e?.message)),()=>{e=!1,N(null),n&&URL.revokeObjectURL(n)}},[z]);let B=b?Array.isArray(_)?_:_?[_]:[]:[],V=T||me,H=V?`${R}-error`:void 0,U=E&&!V?`${R}-hint`:void 0,ge=H||U,W=re(C),_e=x===`button`,G=!b&&!!_,K=G&&(_ instanceof File?l(_):W||l(_)),ve=_?.name,q=K?_?.url||fe:pe,J=K?`image`:`file`,ye=g?`Change ${g}`:`Change ${J}`,Y=g?`Remove ${g}`:`Remove ${J}`,be=g?`${g} preview`:`Selected ${J} preview`,X=e=>{let t=u(e,{accept:C,maxSizeMb:w});return t?(I(t),!1):(I(``),y(e),!0)},Z=e=>{let t=Array.from(e||[]);if(!t.length)return;let n=Array.isArray(_)?_:_?[_]:[],r=new Set(n.map(s)),i=``,a=[];for(let e of t){let t=u(e,{accept:C,maxSizeMb:w});if(t){i||=t;continue}r.has(s(e))||(r.add(s(e)),a.push(e))}let o=n.concat(a);S&&o.length>S&&(o=o.slice(0,S),i||=`Up to ${S} files.`),I(i),y(o)},xe=e=>{if(b){Z(e.target.files);return}let t=e.target.files?.[0]||null;t&&(X(t)||(e.target.value=``))},Se=e=>{if(e.preventDefault(),F(!1),D)return;if(b){Z(e.dataTransfer.files);return}let t=e.dataTransfer.files?.[0];t&&X(t)},Ce=e=>{I(``),y(B.filter((t,n)=>n!==e))},we=()=>L.current?.click(),Q=D?p(`span`,{className:`wui-file-busy`,children:p(`span`,{className:`spinner-border spinner-border-sm`,role:`status`,"aria-label":`Loading`})}):null,$=p(`input`,{id:R,name:ce,ref:L,type:`file`,"aria-describedby":ge,accept:C,multiple:b||void 0,disabled:D||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:xe,...j});return m(`div`,{...e(`AppFilePicker`,h),className:`field${k?` ${k}`:``}`,children:[m(`label`,{className:`label`,htmlFor:R,children:[g,ue&&p(ee,{})]}),_e?m(`div`,{className:`file-input wui-file-input-button-field${V?` error`:``}${O?` ${O}`:``}`,style:A,"aria-busy":D||void 0,children:[m(`label`,{htmlFor:R,className:`btn btn-outline-primary btn-sm`,children:[p(a,{name:`paperclip`,size:16}),le]}),$,Q]}):G?m(`div`,{className:`file-preview${V?` error`:``}${O?` ${O}`:``}`,style:A,"aria-busy":D||void 0,children:[m(`button`,{type:`button`,className:`file-preview-open`,"aria-label":ye,onClick:we,disabled:D,children:[q?p(`img`,{src:q,alt:be,className:`file-preview-img`}):m(`span`,{className:`file-preview-file`,children:[p(a,{name:`file-text`,size:28}),p(`span`,{className:`file-preview-file-name`,children:ve})]}),p(`span`,{className:`file-preview-overlay`,children:m(`span`,{className:`file-preview-cta`,children:[p(a,{name:K?`image`:`file-text`,size:16}),` `,K?`Change image`:`Change file`]})})]}),i(p(`button`,{type:`button`,className:`file-preview-remove`,"aria-label":Y,onClick:()=>y(null),disabled:D,children:p(a,{name:`x`,size:16})}),Y),$,Q]}):m(`div`,{className:`file-input file-input-tall${P?` dragging`:``}${V?` error`:``}${b&&B.length>0?` has-files`:``}${O?` ${O}`:``}`,style:A,"aria-busy":D||void 0,onDragOver:e=>{e.preventDefault(),!D&&!P&&F(!0)},onDragLeave:e=>{e.preventDefault(),F(!1)},onDrop:Se,children:[m(`label`,{htmlFor:R,className:`file-input-zone-label`,children:[p(`span`,{className:`file-input-icon`,children:p(a,{name:`upload`,size:24})}),m(`span`,{className:`file-input-title`,children:[p(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),p(`span`,{className:`file-input-text`,children:w>0?`${c(C)}, up to ${w} MB`:c(C)})]}),$,Q,b&&B.length>0&&p(`div`,{className:`attach-list`,children:B.map((e,t)=>p(te,{item:e,isImage:e instanceof File?l(e):W||l(e),noun:`file`,onRemove:()=>Ce(t)},s(e)))})]}),p(o,{error:V,hint:E,errorId:H,hintId:U})]})}export{h as default};

package/dist/components/AppFileTiles.js

@@ -0,0 +1 @@
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import{sizeLabelOf as n}from"../lib/fileItem.js";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";function o(e){let t=e.lastIndexOf(`.`),n=t>0?e.slice(t+1):``;return n.length>0?n.slice(0,4).toUpperCase():`FILE`}function s(e){let t=n({sizeBytes:e.sizeBytes});return t&&e.meta?a(r,{children:[t,` · `,e.meta]}):t||e.meta||null}function c(n){let{label:c,files:l=[],className:u=``,"data-canvas":d,...f}=n;if(t(`AppFileTiles`,f),l.some(e=>!e.name))throw Error(`<AppFileTiles> each file needs a name.`);return i(`ul`,{className:[`wui-file-tiles`,u].filter(Boolean).join(` `),"aria-label":c,...e(`AppFileTiles`,n),...f,children:l.map(e=>{let t=s(e),n=a(r,{children:[i(`span`,{className:`wui-file-tile-ext`,"aria-hidden":`true`,children:o(e.name)}),a(`span`,{className:`wui-file-tile-text`,children:[i(`span`,{className:`wui-file-tile-name`,children:e.name}),t?i(`span`,{className:`wui-file-tile-meta`,children:t}):null]})]});return i(`li`,{children:e.href?i(`a`,{className:`wui-file-tile`,href:e.href,children:n}):i(`div`,{className:`wui-file-tile`,children:n})},e.key)})})}export{c as default};

package/dist/components/AppModal.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 a from"../lib/DiscardPrompt.js";import{useCallback as o,useEffect as s,useRef as c,useState as ee}from"react";import{Modal as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var te=[`default`,`danger`,`success`,`warning`],f=[`center`,`top`],p=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,m={sm:380,md:440,lg:640,xl:880},h=`wui-modal-fullscreen`,g=!1;function _(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||g||(g=!0,t("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function v(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.querySelectorAll(p));if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||a===t)?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}function y(){let e=[];for(let t of document.body.children)t.hasAttribute(`inert`)||t.matches(`.modal, .modal-backdrop`)||(t.setAttribute(`inert`,``),e.push(t));return e}function b(t){let{open:g,eyebrow:b,title:x,subtitle:S,headerIcon:C,tone:w=`default`,dismissible:T=!0,onClose:E,onBack:D,backLabel:O=`Back`,footer:k,size:A=`md`,placement:j=`center`,hideHeader:M=!1,staticBackdrop:N=!1,confirmDiscard:P,dirty:F=!1,ariaLabel:I,className:ne=``,children:re,"data-canvas":ie,...L}=t;r(`AppModal`,L),n(`AppModal`,`tone`,w,te),n(`AppModal`,`placement`,j,f),n(`AppModal`,`size`,typeof A==`string`?A:null,[...Object.keys(m),`fullscreen`]);let{style:R,ref:z,"data-wui":B,"data-wui-props":V,...H}=L,U=B?{"data-wui":B,"data-wui-props":V}:e(`AppModal`,t),W=U[`data-wui`],G=U[`data-wui-props`];M&&!I&&typeof x!=`string`&&_();let K=c(null),q=c(null),[J,Y]=ee(!1);s(()=>{g||Y(!1)},[g]),s(()=>{J&&q.current?.focus()},[J]),s(()=>{let e=K.current?.closest(`.modal`);e&&(P?e.setAttribute(`confirm-discard`,P):e.removeAttribute(`confirm-discard`))},[g,P]);let X=c(null),ae=o(e=>{X.current=e,typeof z==`function`?z(e):z&&(z.current=e)},[z]);s(()=>{let e=X.current?.dialog;e&&(e.setAttribute(`data-wui`,W),G===void 0?e.removeAttribute(`data-wui-props`):e.setAttribute(`data-wui-props`,G))},[g,W,G]),s(()=>{if(!g)return;let e=K.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(p));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`)&&!e.classList.contains(`wui-modal-back`))||t()[0]||e).focus?.();let n=e.closest(`.modal`),r=y(),i=e=>v(e,n);return n?.addEventListener(`keydown`,i),()=>{n?.removeEventListener(`keydown`,i);for(let e of r)e.removeAttribute(`inert`);n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[g]);let Z=()=>{if(P&&F){Y(!0);return}E?.()},Q=()=>{Y(!1),E?.()},oe=()=>{Y(!1),(K.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},$=A===`fullscreen`,se=typeof A==`number`?A:m[A]??m.md,ce=[`wui-modal`,w==="default"?``:`tone-${w}`,ne].filter(Boolean).join(` `);return d(l,{...H,ref:ae,show:g,onHide:Z,backdrop:!N||`static`,keyboard:!N,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:j!==`top`,className:$?`wui-modal-shell ${h}`:`wui-modal-shell`,style:$?R:{"--wui-modal-max-width":`${se}px`,...R},dialogClassName:`wui-rb-dialog`,contentClassName:ce,backdropClassName:`wui-modal-dim`,"aria-label":I||(typeof x==`string`?x:void 0),children:[!M&&d(`div`,{className:`wui-modal-header`,children:[D&&u(`button`,{type:`button`,className:`wui-modal-back`,onClick:D,"aria-label":O,children:u(i,{name:`arrow-left`,size:18})}),d(`div`,{className:`wui-modal-heading`,children:[C&&u(`span`,{className:`wui-modal-headicon`,children:u(i,{name:C,size:18})}),d(`div`,{className:`wui-modal-headtext`,children:[b&&u(`div`,{className:`wui-modal-eyebrow`,children:b}),u(`div`,{className:`wui-modal-title`,children:x}),S&&u(`div`,{className:`wui-modal-subtitle`,children:S})]})]}),T&&u(`button`,{type:`button`,className:`wui-modal-close`,onClick:Z,"aria-label":`Close`,children:u(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:u(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),u(`div`,{className:`wui-modal-body`,ref:K,children:re}),(k||J)&&d(`div`,{className:J?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[J&&u(a,{text:P,confirmRef:q,onDiscard:Q,onKeep:oe}),k]})]})}export{b 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 a from"../lib/DiscardPrompt.js";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import{Modal as ee}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`default`,`danger`,`success`,`warning`],p=[`center`,`top`],m=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,h={sm:380,md:440,lg:640,xl:880},g=`wui-modal-fullscreen`,_=!1;function v(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||_||(_=!0,t("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function y(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.querySelectorAll(m));if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||a===t)?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}function te(){let e=[];for(let t of document.body.children)t.hasAttribute(`inert`)||t.matches(`.modal, .modal-backdrop`)||(t.setAttribute(`inert`,``),e.push(t));return e}function ne(){return typeof document<`u`&&document.querySelector(`wui-drawer[open], .offcanvas.show`)!==null}function b(t){let{open:_,eyebrow:b,title:x,subtitle:S,headerIcon:C,tone:w=`default`,dismissible:T=!0,onClose:E,onBack:D,backLabel:re=`Back`,headerActions:O,footer:k,size:A=`md`,placement:j=`center`,hideHeader:M=!1,staticBackdrop:N=!1,confirmDiscard:P,dirty:F=!1,ariaLabel:I,className:ie=``,children:ae,"data-canvas":oe,...L}=t;r(`AppModal`,L),n(`AppModal`,`tone`,w,f),n(`AppModal`,`placement`,j,p),n(`AppModal`,`size`,typeof A==`string`?A:null,[...Object.keys(h),`fullscreen`]);let{style:R,ref:z,"data-wui":B,"data-wui-props":V,...H}=L,U=B?{"data-wui":B,"data-wui-props":V}:e(`AppModal`,t),W=U[`data-wui`],G=U[`data-wui-props`];M&&!I&&typeof x!=`string`&&v();let K=c(null),q=c(null),[J,Y]=l(!1);s(()=>{_||Y(!1)},[_]),s(()=>{J&&q.current?.focus()},[J]),s(()=>{let e=K.current?.closest(`.modal`);e&&(P?e.setAttribute(`confirm-discard`,P):e.removeAttribute(`confirm-discard`))},[_,P]);let X=c(null),se=o(e=>{X.current=e,typeof z==`function`?z(e):z&&(z.current=e)},[z]);s(()=>{let e=X.current?.dialog;e&&(e.setAttribute(`data-wui`,W),G===void 0?e.removeAttribute(`data-wui-props`):e.setAttribute(`data-wui-props`,G))},[_,W,G]),s(()=>{if(!_)return;let e=K.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(m));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`)&&!e.classList.contains(`wui-modal-back`))||t()[0]||e).focus?.();let n=e.closest(`.modal`),r=te(),i=e=>y(e,n);return n?.addEventListener(`keydown`,i),()=>{n?.removeEventListener(`keydown`,i);for(let e of r)e.removeAttribute(`inert`);n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[_]);let Z=()=>{if(P&&F){Y(!0);return}E?.()},ce=()=>{Y(!1),E?.()},le=()=>{Y(!1),(K.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},Q=A===`fullscreen`,ue=typeof A==`number`?A:h[A]??h.md,de=[`wui-modal`,w==="default"?``:`tone-${w}`,ie].filter(Boolean).join(` `),$=_&&ne(),fe=[`wui-modal-shell`,Q&&g,$&&`wui-modal-stacked`].filter(Boolean).join(` `);return d(ee,{...H,ref:se,show:_,onHide:Z,backdrop:!N||`static`,keyboard:!N,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:j!==`top`,className:fe,style:Q?R:{"--wui-modal-max-width":`${ue}px`,...R},dialogClassName:`wui-rb-dialog`,contentClassName:de,backdropClassName:$?`wui-modal-dim wui-modal-backdrop-stacked`:`wui-modal-dim`,"aria-label":I||(typeof x==`string`?x:void 0),children:[!M&&d(`div`,{className:`wui-modal-header`,children:[D&&u(`button`,{type:`button`,className:`wui-modal-back`,onClick:D,"aria-label":re,children:u(i,{name:`arrow-left`,size:18})}),d(`div`,{className:`wui-modal-heading`,children:[C&&u(`span`,{className:`wui-modal-headicon`,children:u(i,{name:C,size:18})}),d(`div`,{className:`wui-modal-headtext`,children:[b&&u(`div`,{className:`wui-modal-eyebrow`,children:b}),u(`div`,{className:`wui-modal-title`,children:x}),S&&u(`div`,{className:`wui-modal-subtitle`,children:S})]})]}),O&&u(`div`,{className:`wui-modal-header-actions`,children:O}),T&&u(`button`,{type:`button`,className:`wui-modal-close`,onClick:Z,"aria-label":`Close`,children:u(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:u(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),u(`div`,{className:`wui-modal-body`,ref:K,children:ae}),(k||J)&&d(`div`,{className:J?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[J&&u(a,{text:P,confirmRef:q,onDiscard:ce,onKeep:le}),k]})]})}export{b as default};

package/dist/components/AppNavList.js

@@ -0,0 +1 @@
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./renderIconProp.js";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";var s=[`primary`,`info`,`success`,`warning`,`danger`,`neutral`];function c(r){let{label:i,items:o=[],linkComponent:c,className:u=``,...d}=r;n(`AppNavList`,d);let f=c??`a`,p=e=>c?{to:e}:{href:e};return a(`nav`,{className:[`wui-nav-list`,u].filter(Boolean).join(` `),"aria-label":i,...e(`AppNavList`,r),...d,children:o.map(e=>{if(e.divider)return a(`hr`,{className:`wui-nav-list-divider`},e.key);if(t(`AppNavList`,`dotTone`,e.dotTone,s),e.icon&&e.dotTone)throw Error(`<AppNavList> item takes icon or dotTone, not both.`);let n=!!e.active,r=n?`wui-nav-list-item is-active`:`wui-nav-list-item`,i=n?`page`:void 0,o=l(e);return e.to?a(f,{...p(e.to),className:r,"aria-current":i,children:o},e.key):a(`button`,{type:`button`,className:r,"aria-current":i,children:o},e.key)})})}function l(e){return o(i,{children:[u(e),a(`span`,{className:`wui-nav-list-label`,children:e.label}),e.count>0?a(`span`,{className:`wui-nav-list-count`,children:e.count}):null]})}function u(e){return e.dotTone?a(`span`,{className:`wui-nav-list-dot tone-${s.includes(e.dotTone)?e.dotTone:`neutral`}`,"aria-hidden":`true`}):r(e.icon,{size:18,className:`wui-nav-list-icon`})}export{c as default};

package/dist/components/AppPageHeader.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{BreadcrumbTrailContext as i}from"./AppBreadcrumbs.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`sm`,`md`,`lg`,`bar`],f=[`start`,`center`],p=[`inline`,`below`],m=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`];function h(h){let{title:g,titleSlot:_,as:v=`h1`,subtitle:y,eyebrow:b,icon:x,tone:S=`primary`,status:C,breadcrumbs:w,actions:T,views:E,tools:D,meta:O,metaPlacement:k=`inline`,bulkFor:A,bulk:j,size:M=`md`,align:N=`start`,divider:P=!1,sticky:F=!1,className:I=``,...L}=h;n(`AppPageHeader`,L),t(`AppPageHeader`,`tone`,S,u),t(`AppPageHeader`,`size`,M,d),t(`AppPageHeader`,`align`,N,f),t(`AppPageHeader`,`as`,v,m),t(`AppPageHeader`,`metaPlacement`,k,p);let R=m.includes(v)?v:`h1`,z=M===`bar`,B=z&&k===`below`,V=[`page-header`,M&&M!==`md`?`page-header-${M}`:``,N===`center`?`page-header-center`:``,P?`page-header-divider`:``,F?`page-header-sticky`:``,S&&S!==`primary`?`tone-${S}`:``,B?`wui-page-header-meta-below`:``,I].filter(Boolean).join(` `),[H,U]=s(0),W=z?A:void 0;o(()=>{if(!W)return;document.getElementById(W)?.setAttribute(`data-wui-bulk-in-bar`,``);let e=e=>{typeof e.detail?.selected==`number`&&document.getElementById(W)?.contains(e.target)&&U(e.detail.selected)};return document.addEventListener(`selectionchange`,e),()=>{document.removeEventListener(`selectionchange`,e),document.getElementById(W)?.removeAttribute(`data-wui-bulk-in-bar`)}},[W]);let G=g!=null||_!=null?c(R,{className:_==null?`page-title`:`page-title wui-page-title-slot`,"aria-label":_!=null&&typeof g==`string`&&g!==``?g:void 0,children:_??g}):null;if(z)return l(`header`,{className:V,"data-wui-page-header-bar":``,"data-wui-bulk-for":A||void 0,...e(`AppPageHeader`,h),...L,children:[w!=null&&c(i.Provider,{value:!0,children:c(`div`,{className:`page-header-bar-crumbs`,children:w})}),G,C!=null&&c(`span`,{className:`page-status`,children:C}),E!=null&&c(`div`,{className:`page-header-bar-views`,"data-wui-bar-swap":``,hidden:A&&H>0?!0:void 0,children:E}),c(`span`,{className:`page-header-bar-spacer`,"aria-hidden":`true`}),O!=null&&!B&&c(`div`,{className:`page-header-bar-meta`,children:O}),D!=null&&c(`div`,{className:`page-header-bar-tools`,"data-wui-bar-swap":``,hidden:A&&H>0?!0:void 0,children:D}),A?l(`div`,{className:`page-header-bar-bulk`,"data-wui-bar-bulk":``,hidden:H===0||void 0,children:[c(`span`,{className:`page-header-bar-bulk-count`,"aria-live":`polite`,children:H>0?`${a(H,{decimals:0})} selected`:``}),j]}):null,T!=null&&c(`div`,{className:`page-actions`,children:T}),O!=null&&B&&c(`div`,{className:`page-header-bar-meta`,children:O})]});let K=x==null?null:typeof x==`string`?c(r,{name:x,size:20}):x;return l(`div`,{className:V,...e(`AppPageHeader`,h),...L,children:[w!=null&&c(`div`,{className:`page-breadcrumbs`,children:w}),l(`div`,{className:`page-header-bar`,children:[l(`div`,{className:`page-header-lead`,children:[K!=null&&c(`span`,{className:`page-header-icon`,children:K}),l(`div`,{className:`page-header-titles`,children:[b!=null&&c(`div`,{className:`page-eyebrow`,children:b}),l(`div`,{className:`page-titlebar`,children:[G,C!=null&&c(`span`,{className:`page-status`,children:C})]}),y!=null&&c(`div`,{className:`page-subtitle`,children:y})]})]}),T!=null&&c(`div`,{className:`page-actions`,children:T})]})]})}export{h 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{BreadcrumbTrailContext as i}from"./AppBreadcrumbs.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`sm`,`md`,`lg`,`bar`],f=[`start`,`center`],p=[`inline`,`below`],m=[`below`,`inline`],h=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`];function g(g){let{title:_,titleSlot:v,as:y=`h1`,subtitle:b,eyebrow:x,icon:S,tone:C=`primary`,status:w,breadcrumbs:T,actions:E,views:D,tools:O,meta:k,metaPlacement:A=`inline`,subtitlePlacement:j=`below`,bulkFor:M,bulk:N,size:P=`md`,align:F=`start`,divider:I=!1,sticky:L=!1,className:R=``,...z}=g;n(`AppPageHeader`,z),t(`AppPageHeader`,`tone`,C,u),t(`AppPageHeader`,`size`,P,d),t(`AppPageHeader`,`align`,F,f),t(`AppPageHeader`,`as`,y,h),t(`AppPageHeader`,`metaPlacement`,A,p),t(`AppPageHeader`,`subtitlePlacement`,j,m);let B=h.includes(y)?y:`h1`,V=P===`bar`,H=V&&A===`below`,U=!V&&j===`inline`,W=[`page-header`,P&&P!==`md`?`page-header-${P}`:``,F===`center`?`page-header-center`:``,I?`page-header-divider`:``,L?`page-header-sticky`:``,C&&C!==`primary`?`tone-${C}`:``,H?`wui-page-header-meta-below`:``,U?`wui-page-header-subtitle-inline`:``,R].filter(Boolean).join(` `),[G,K]=s(0),q=V?M:void 0;o(()=>{if(!q)return;document.getElementById(q)?.setAttribute(`data-wui-bulk-in-bar`,``);let e=e=>{typeof e.detail?.selected==`number`&&document.getElementById(q)?.contains(e.target)&&K(e.detail.selected)};return document.addEventListener(`selectionchange`,e),()=>{document.removeEventListener(`selectionchange`,e),document.getElementById(q)?.removeAttribute(`data-wui-bulk-in-bar`)}},[q]);let J=_!=null||v!=null?c(B,{className:v==null?`page-title`:`page-title wui-page-title-slot`,"aria-label":v!=null&&typeof _==`string`&&_!==``?_:void 0,children:v??_}):null;if(V)return l(`header`,{className:W,"data-wui-page-header-bar":``,"data-wui-bulk-for":M||void 0,...e(`AppPageHeader`,g),...z,children:[T!=null&&c(i.Provider,{value:!0,children:c(`div`,{className:`page-header-bar-crumbs`,children:T})}),J,w!=null&&c(`span`,{className:`page-status`,children:w}),D!=null&&c(`div`,{className:`page-header-bar-views`,"data-wui-bar-swap":``,hidden:M&&G>0?!0:void 0,children:D}),c(`span`,{className:`page-header-bar-spacer`,"aria-hidden":`true`}),k!=null&&!H&&c(`div`,{className:`page-header-bar-meta`,children:k}),O!=null&&c(`div`,{className:`page-header-bar-tools`,"data-wui-bar-swap":``,hidden:M&&G>0?!0:void 0,children:O}),M?l(`div`,{className:`page-header-bar-bulk`,"data-wui-bar-bulk":``,hidden:G===0||void 0,children:[c(`span`,{className:`page-header-bar-bulk-count`,"aria-live":`polite`,children:G>0?`${a(G,{decimals:0})} selected`:``}),N]}):null,E!=null&&c(`div`,{className:`page-actions`,children:E}),k!=null&&H&&c(`div`,{className:`page-header-bar-meta`,children:k})]});let Y=S==null?null:typeof S==`string`?c(r,{name:S,size:20}):S,X=b==null?null:c(`div`,{className:`page-subtitle`,children:b});return l(`div`,{className:W,...e(`AppPageHeader`,g),...z,children:[T!=null&&c(`div`,{className:`page-breadcrumbs`,children:T}),l(`div`,{className:`page-header-bar`,children:[l(`div`,{className:`page-header-lead`,children:[Y!=null&&c(`span`,{className:`page-header-icon`,children:Y}),l(`div`,{className:`page-header-titles`,children:[x!=null&&c(`div`,{className:`page-eyebrow`,children:x}),l(`div`,{className:`page-titlebar`,children:[J,w!=null&&c(`span`,{className:`page-status`,children:w}),U&&X]}),!U&&X]})]}),E!=null&&c(`div`,{className:`page-actions`,children:E})]})]})}export{g as default};

package/dist/components/AppSortableList.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"./useWuiControl.js";import{forwardRef as a,useEffect as o,useRef as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import"@webority/ui-elements/elements/sortable";var u=[`vertical`,`horizontal`],d=(e,t)=>{e.controlled=!0;let n=e.order;(n.length!==t.length||t.some((e,t)=>e!==n[t]))&&(e.order=t)},f=a(function(a,f){let{items:p=[],onReorder:m,ariaLabel:h,handle:g=!1,group:_,name:v,disabled:y=!1,orientation:b=`vertical`,className:x=``,...S}=a;n(`AppSortableList`,S),t(`AppSortableList`,`orientation`,b,u);let C=p.map(e=>e.id),w=s(C);o(()=>{w.current=C});let{setRef:T,innerRef:E}=i({ref:f,value:C,writeValue:d,on:{"wui-sortable:change":e=>{e.target===e.currentTarget&&(m?.(e.detail.ids,e.detail),requestAnimationFrame(()=>{E.current&&d(E.current,w.current)}))}}});return c(`wui-sortable`,{ref:T,role:`list`,"aria-label":h,name:v||void 0,group:_||void 0,orientation:b===`horizontal`?`horizontal`:void 0,handle:g?``:void 0,disabled:y?``:void 0,className:`wui-sortable${x?` ${x}`:``}`,...e(`AppSortableList`,a),...S,children:p.map(e=>l(`div`,{role:`listitem`,className:`wui-sortable-item`,"data-id":e.id,"data-label":e.label,"data-disabled":e.disabled?``:void 0,children:[c(`button`,{type:`button`,className:`wui-sortable-handle`,"aria-label":`Reorder ${e.label}`,disabled:y||e.disabled?!0:void 0,children:c(r,{name:`menu`,size:18})}),c(`div`,{className:`wui-sortable-body`,children:e.content??e.label})]},e.id))})});export{f 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"./useWuiControl.js";import{forwardRef as a,useEffect as o,useRef as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import"@webority/ui-elements/elements/sortable";var u=[`vertical`,`horizontal`],d=[`always`,`hover`],f=(e,t)=>{e.controlled=!0;let n=e.order;(n.length!==t.length||t.some((e,t)=>e!==n[t]))&&(e.order=t)},p=a(function(a,p){let{items:m=[],onReorder:h,ariaLabel:g,handle:_=!1,group:v,name:y,disabled:b=!1,orientation:x=`vertical`,handleDisplay:S=`always`,bordered:C=!0,className:w=``,...T}=a;n(`AppSortableList`,T),t(`AppSortableList`,`orientation`,x,u),t(`AppSortableList`,`handleDisplay`,S,d);let E=S===`hover`,D=m.map(e=>e.id),O=s(D);o(()=>{O.current=D});let{setRef:k,innerRef:A}=i({ref:p,value:D,writeValue:f,on:{"wui-sortable:change":e=>{e.target===e.currentTarget&&(h?.(e.detail.ids,e.detail),requestAnimationFrame(()=>{A.current&&f(A.current,O.current)}))}}});return c(`wui-sortable`,{ref:k,role:`list`,"aria-label":g,name:y||void 0,group:v||void 0,orientation:x===`horizontal`?`horizontal`:void 0,"handle-display":E?`hover`:void 0,handle:_||E?``:void 0,disabled:b?``:void 0,borderless:C?void 0:``,className:`wui-sortable${w?` ${w}`:``}`,...e(`AppSortableList`,a),...T,children:m.map(e=>l(`div`,{role:`listitem`,className:`wui-sortable-item`,"data-id":e.id,"data-label":e.label,"data-disabled":e.disabled?``:void 0,children:[c(`button`,{type:`button`,className:`wui-sortable-handle`,"aria-label":`Reorder ${e.label}`,disabled:b||e.disabled?!0:void 0,children:c(r,{name:`menu`,size:18})}),c(`div`,{className:`wui-sortable-body`,children:e.content??e.label})]},e.id))})});export{p as default};

package/dist/components/AppTablePagination.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{pageWindow as i}from"../lib/pageWindow.js";import a from"./AppSelectMini.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`numbered`,`prev-next`],l=[5,10,25,50];function u(u){let{page:d,totalPages:f,total:p,pageSize:m,onPageChange:h,onPageSizeChange:g,pageSizes:_=l,mode:v=`numbered`,showPageSize:y=!0,className:b=``,...x}=u;n(`AppTablePagination`,x),t(`AppTablePagination`,`mode`,v,c);let S=Number(d),C=Number(m)||0,w=Number(p)||0,T=f??Math.max(1,Math.ceil(w/(C>0?C:10))),E=v===`numbered`,D=E?i(S,T):null;return s(`div`,{className:`table-pagination${b?` ${b}`:``}`,...e(`AppTablePagination`,u),...x,children:[y&&o(`span`,{className:`tpg-rows`,children:o(a,{value:C,onChange:e=>g?.(Number(e)),ariaLabel:`Rows per page`,options:_.map(e=>({value:e,label:`${e} per page`}))})}),!E&&s(`span`,{className:`tpg-range`,children:[`Page `,S,` of `,T]}),s(`div`,{className:`tpg-nav`,children:[o(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>h?.(Math.max(1,S-1)),disabled:S<=1,"aria-label":`Previous page`,children:o(r,{name:`arrow-left`,size:18})}),E&&D.map(e=>typeof e==`number`?o(`button`,{type:`button`,className:`tpg-page${e===S?` is-active`:``}`,onClick:()=>h?.(e),"aria-current":e===S?`page`:void 0,"aria-label":`Page ${e}`,children:e},e):o(`span`,{className:`tpg-ellipsis`,"aria-hidden":`true`,children:`…`},e)),o(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>h?.(Math.min(T,S+1)),disabled:S>=T,"aria-label":`Next page`,children:o(r,{name:`arrow-right`,size:18})})]})]})}export{u 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{pageWindow as i}from"../lib/pageWindow.js";import a from"./AppSelectMini.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`numbered`,`prev-next`],l=[5,10,25,50];function u(u){let{page:d,totalPages:f,total:p,pageSize:m,onPageChange:h,onPageSizeChange:g,pageSizes:_=l,mode:v=`numbered`,showPageSize:y=!0,className:b=``,...x}=u;n(`AppTablePagination`,x),t(`AppTablePagination`,`mode`,v,c);let S=Number(d),C=Number(m)||0,w=C>0&&!_.includes(C)?[..._,C].sort((e,t)=>e-t):_,T=Number(p)||0,E=f??Math.max(1,Math.ceil(T/(C>0?C:10))),D=v===`numbered`,O=D?i(S,E):null;return s(`div`,{className:`table-pagination${b?` ${b}`:``}`,...e(`AppTablePagination`,u),...x,children:[y&&o(`span`,{className:`tpg-rows`,children:o(a,{value:C,onChange:e=>g?.(Number(e)),ariaLabel:`Rows per page`,options:w.map(e=>({value:e,label:`${e} per page`}))})}),!D&&s(`span`,{className:`tpg-range`,children:[`Page `,S,` of `,E]}),s(`div`,{className:`tpg-nav`,children:[o(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>h?.(Math.max(1,S-1)),disabled:S<=1,"aria-label":`Previous page`,children:o(r,{name:`arrow-left`,size:18})}),D&&O.map(e=>typeof e==`number`?o(`button`,{type:`button`,className:`tpg-page${e===S?` is-active`:``}`,onClick:()=>h?.(e),"aria-current":e===S?`page`:void 0,"aria-label":`Page ${e}`,children:e},e):o(`span`,{className:`tpg-ellipsis`,"aria-hidden":`true`,children:`…`},e)),o(`button`,{type:`button`,className:`tpg-arrow`,onClick:()=>h?.(Math.min(E,S+1)),disabled:S>=E,"aria-label":`Next page`,children:o(r,{name:`arrow-right`,size:18})})]})]})}export{u as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.104.1"
+    "version": "0.107.0"
   },
   "components": [
     {
@@ -2813,6 +2813,81 @@
         ]
       }
     },
+    {
+      "name": "AppDetailPane",
+      "usage": {
+        "when": [
+          "A person keeps working in a list and reads the details of one item beside it.",
+          "Choosing an item should not change page, and the list must stay where it is."
+        ],
+        "whenNot": [
+          {
+            "text": "The items form a queue the person works through one by one.",
+            "instead": "AppSplitView"
+          },
+          {
+            "text": "The detail is an overlay that covers the page.",
+            "instead": "AppDrawer"
+          },
+          {
+            "text": "The detail is a short task that interrupts the flow.",
+            "instead": "AppModal"
+          }
+        ],
+        "do": [
+          {
+            "note": "The pane sits beside the list it details. Escape inside it calls onClose.",
+            "example": [
+              {
+                "component": "AppDetailPane",
+                "props": {
+                  "label": "Request details",
+                  "open": true
+                },
+                "children": [
+                  {
+                    "component": "p",
+                    "children": "Expense claim: client travel. Dev Patel, Sales."
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "dont": [
+          {
+            "note": "Use a detail pane to cover the page or hold a multi-step task; use AppDrawer or AppModal for that.",
+            "example": [
+              {
+                "component": "AppDetailPane",
+                "props": {
+                  "label": "New leave request",
+                  "open": true
+                },
+                "children": [
+                  {
+                    "component": "p",
+                    "children": "Step 1 of 3: choose the leave type."
+                  },
+                  {
+                    "component": "AppButton",
+                    "props": {
+                      "variant": "outline",
+                      "size": "sm"
+                    },
+                    "children": "Next"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "a11y": [
+          "The pane is a region named by label. Escape inside it calls onClose.",
+          "A closed pane is hidden from assistive technology, so it is not read while it is closed."
+        ]
+      }
+    },
     {
       "name": "AppDrawer",
       "usage": {
@@ -3361,6 +3436,32 @@
         ]
       }
     },
+    {
+      "name": "AppFileTiles",
+      "usage": {
+        "when": [
+          "A few files attached to a record that the person reads rather than edits.",
+          "Files that open or download from the page, each shown with its type and size."
+        ],
+        "whenNot": [
+          {
+            "text": "The person picks or uploads the files.",
+            "instead": "AppFileAttachment"
+          },
+          {
+            "text": "One file to read in the page.",
+            "instead": "AppFileViewer"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The list takes its accessible name from label.",
+          "The type tile is hidden from assistive technology; the file name carries the meaning.",
+          "A file with an href is a link; a file without one is plain text."
+        ]
+      }
+    },
     {
       "name": "AppFileViewer",
       "usage": {
@@ -4858,6 +4959,35 @@
         ]
       }
     },
+    {
+      "name": "AppNavList",
+      "usage": {
+        "when": [
+          "A page has a short rail of destinations or groups, each with a count, beside its content.",
+          "The rows pick one current destination, and some rows are coloured by a status dot."
+        ],
+        "whenNot": [
+          {
+            "text": "A site's top navigation with dropdown panels.",
+            "instead": "AppNavigationMenu"
+          },
+          {
+            "text": "A signed-in app's sidebar of destinations.",
+            "instead": "AppSidebarMenu"
+          },
+          {
+            "text": "A choice between several values in a form.",
+            "instead": "AppRadioGroup"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The rows sit in a navigation landmark named by label, and the current row is marked with aria-current page.",
+          "A dot is decorative: the row's label carries the meaning, so the dot is hidden from assistive tech."
+        ]
+      }
+    },
     {
       "name": "AppNavigationMenu",
       "usage": {

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

@@ -8,9 +8,10 @@
  * component only tracks which panes are open.
  *
  * @param {object} props
- * @param {{ key?: string, title: import('react').ReactNode, content: import('react').ReactNode, open?: boolean }[]} props.items
+ * @param {{ key?: string, title: import('react').ReactNode, content: import('react').ReactNode, open?: boolean, count?: number }[]} props.items
  * @param {boolean} [props.multiple]
  * @param {string[]} [props.openItems]
+ * @param {"bordered"|"flat"} [props.variant]
  * @param {string} [props.id]
  * @param {string} [props.className]
  */
@@ -21,6 +22,7 @@ export default function AppAccordion(props: {
         title: import('react').ReactNode;
         content: import('react').ReactNode;
         open?: boolean;
+        count?: number;
     }[];
     /**
      * Allows more than one pane open at a time. Leave it off for a list the reader scans.
@@ -29,6 +31,11 @@ export default function AppAccordion(props: {
     multiple?: boolean;
     /** The keys of the panes that start open. It replaces each item's own open flag and is read again when its content changes. Without multiple only the first key opens. */
     openItems?: string[];
+    /**
+     * bordered (default) | flat: a text toggle with a leading chevron and an optional count chip, for a section header rather than a card of questions.
+     * @default "bordered"
+     */
+    variant?: "bordered" | "flat";
     /** Prefix for the generated pane ids. Set it when a pane needs a stable anchor to link to. */
     id?: string;
     /**

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

@@ -13,8 +13,13 @@ declare const AppCalendar: import("react").ForwardRefExoticComponent<{
         allDay?: boolean;
         tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
         url?: string;
+        stack?: {
+            count: number;
+            url: string;
+            label: string;
+        };
     }[];
-    /** Called with `start` and `end` (IST days) whenever the visible period changes; answers a JSON list of events. */
+    /** Called with `start`, `end` and `view` (month, week, day or list; IST days) whenever the visible period changes; answers a JSON list of events. */
     eventsUrl?: string;
     /** The view to show. Without it a calendar opens on the month, or on the list when it is narrower than a phone. */
     view?: 'month' | 'week' | 'day' | 'list';

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

@@ -85,6 +85,10 @@ export type CommentThreadItem = {
  * @param {boolean} [props.allowReplies] False leaves out the Reply action and the reply box; existing replies still show.
  * @param {boolean} [props.allowReactions] False leaves out the reaction panel and the reaction chips.
  * @param {string} [props.composerPlaceholder] The composer box's placeholder; without it the standard one.
+ * @param {"stacked"|"inline"} [props.composer] The box under the list, or one row with the author's avatar, the box and the post button.
+ * @param {string} [props.author] The name for the inline composer's avatar; ignored when stacked.
+ * @param {string} [props.postLabel] The post button's text; without it "Comment".
+ * @param {number} [props.composerRows] The composer box's rows; without it 3 stacked and 1 inline.
  * @param {boolean} [props.readOnly]
  * @param {string} [props.label]
  * @param {string} [props.id]
@@ -128,6 +132,20 @@ export default function AppCommentThread(props: {
     allowReactions?: boolean;
     /** The composer box's placeholder. Without it the standard placeholder asks for a comment and names @ mentions. */
     composerPlaceholder?: string;
+    /**
+     * stacked: the box under the list. inline: one row with the author's avatar, the box and the post button.
+     * @default "stacked"
+     */
+    composer?: "stacked" | "inline";
+    /** The name for the inline composer's avatar. Ignored when stacked. */
+    author?: string;
+    /**
+     * The post button's text.
+     * @default "Comment"
+     */
+    postLabel?: string;
+    /** The composer box's rows. Without it, 3 stacked and 1 inline. */
+    composerRows?: number;
     /**
      * Show the thread without the box, actions or reacting.
      * @default false

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

@@ -4,6 +4,7 @@
  * @param {object} props
  * @param {boolean} props.open
  * @param {string} props.title
+ * @param {'default'|'plain'} [props.variant] default keeps the illustration and equal-width actions; plain drops the illustration, starts the text at the edge and sizes the actions small, right-aligned.
  * @param {import('react').ReactNode} [props.message]
  * @param {import('react').ReactNode} [props.children] Extra content drawn between the message and the confirm-phrase field, such as a reason select or a note box.
  * @param {string} [props.confirmLabel]
@@ -26,6 +27,11 @@ export default function AppConfirmDialog(props: {
     open: boolean;
     /** The dialog heading. */
     title: string;
+    /**
+     * default keeps the status illustration and equal-width actions. plain drops the illustration, starts the text at the edge and sizes the actions small, right-aligned.
+     * @default "default"
+     */
+    variant?: 'default' | 'plain';
     /** The text that explains what the user is confirming. */
     message?: import('react').ReactNode;
     children?: import('react').ReactNode;

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

@@ -0,0 +1,33 @@
+/**
+ * An in-page detail column beside a list. It is hidden until `open`, and Escape inside it calls
+ * `onClose`. Razor counterpart: `<app-detail-pane>`, filled by `WUI.pane.load`.
+ *
+ * @param {object} props
+ * @param {boolean} [props.open] Shows the pane. Defaults to false.
+ * @param {() => void} [props.onClose] Called on Escape inside the pane.
+ * @param {string} props.label The accessible name of the pane region.
+ * @param {boolean} [props.sticky] Keeps the pane in view under the top bar while the list scrolls. Defaults to true.
+ * @param {import('react').ReactNode} [props.children]
+ * @param {string} [props.className]
+ */
+export default function AppDetailPane(props: {
+    /**
+     * Shows the pane. Closed, the pane is hidden and takes no room. The caller owns it and closes it in onClose.
+     * @default false
+     */
+    open?: boolean;
+    onClose?: () => void;
+    /** The accessible name of the pane region. */
+    label: string;
+    /**
+     * Keeps the pane in view under the top bar while the list beside it scrolls.
+     * @default true
+     */
+    sticky?: boolean;
+    children?: import('react').ReactNode;
+    /**
+     * Extra classes on the pane.
+     * @default ""
+     */
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -17,7 +17,7 @@ import "@webority/ui-elements/elements/drawer";
  * @param {string} [props.subtitle]
  * @param {string} [props.ariaLabel]
  * @param {'end'|'start'} [props.side]
- * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {'sm'|'md'|'lg'|'xl'} [props.size]
  * @param {number[]} [props.snapPoints]
  * @param {number} [props.defaultSnap]
  * @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
@@ -48,10 +48,10 @@ export default function AppDrawer(props: {
      */
     side?: 'end' | 'start';
     /**
-     * The side drawer's width: 360, 480 or 640 px.
+     * The side drawer's width: 360, 480, 640 or 720 px.
      * @default "md"
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     /**
      * The sheet's resting heights, each 10 to 100 percent of the screen.
      * @default [50,90]

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

@@ -16,6 +16,8 @@
  * @param {string} [props.id]
  * @param {(file: File|null) => void | (files: File[]) => void} props.onPick single → File|null; multiple → File[]
  * @param {boolean} [props.multiple]
+ * @param {"dropzone" | "button"} [props.variant] dropzone (default) | button: a small outline button that opens the file dialog; no previews.
+ * @param {string} [props.buttonLabel] The button form's text.
  * @param {number} [props.maxFiles]
  * @param {string} [props.accept]
  * @param {number} [props.maxSizeMb]
@@ -48,6 +50,16 @@ export default function AppFilePicker(props: {
      * @default false
      */
     multiple?: boolean;
+    /**
+     * dropzone is the tall drop target. button is a small outline button that opens the file dialog, with no preview and no list.
+     * @default "dropzone"
+     */
+    variant?: "dropzone" | "button";
+    /**
+     * The button form's text.
+     * @default "Add file"
+     */
+    buttonLabel?: string;
     /** Cap on total files in multiple mode. */
     maxFiles?: number;
     /**

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

@@ -0,0 +1,30 @@
+/**
+ * A read-only grid of files: a type tile, the name, then the size and a meta line. A file with an
+ * `href` is a link to it.
+ *
+ * @param {object} props
+ * @param {string} props.label Accessible name of the list.
+ * @param {{ key: string|number, name: string, href?: string, sizeBytes?: number,
+ *   meta?: import('react').ReactNode }[]} [props.files]
+ * @param {string} [props.className]
+ */
+export default function AppFileTiles(props: {
+    /** Accessible name of the list. */
+    label: string;
+    /**
+     * The files, each { key, name, href, sizeBytes, meta }. name's extension makes the type tile; href makes the tile a link; sizeBytes is the size in bytes; meta is text after the size.
+     * @default []
+     */
+    files?: {
+        key: string | number;
+        name: string;
+        href?: string;
+        sizeBytes?: number;
+        meta?: import('react').ReactNode;
+    }[];
+    /**
+     * Extra class names added to the list.
+     * @default ""
+     */
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -12,6 +12,7 @@
  * @param {() => void} props.onClose
  * @param {() => void} [props.onBack] Shows a back arrow before the title and runs this when it is pressed.
  * @param {string} [props.backLabel] The back arrow's accessible name.
+ * @param {import('react').ReactNode} [props.headerActions] Actions drawn beside the title, before the close button; not drawn while the header is hidden.
  * @param {import('react').ReactNode} [props.footer]
  * @param {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size]
  * @param {'center'|'top'} [props.placement]
@@ -51,6 +52,8 @@ export default function AppModal(props: {
      * @default "Back"
      */
     backLabel?: string;
+    /** Actions drawn beside the title, before the close button, such as Previous and Next. Not drawn while hideHeader is set. */
+    headerActions?: import('react').ReactNode;
     /** Content pinned at the bottom, usually the action buttons. */
     footer?: import('react').ReactNode;
     /**