@webority/ui-react 0.66.0 → 0.68.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AppDataTable.js +1 -1
- package/dist/components/AppDrawer.js +1 -1
- package/dist/components/AppFilterBar.js +1 -1
- package/dist/components/AppPageHeader.js +1 -1
- package/dist/components/AppPopover.js +1 -1
- package/dist/components/AppSearch.js +1 -1
- package/dist/components/AppShell.js +1 -1
- package/dist/lib/FocusPanel.js +1 -0
- package/dist/types/components/AppDataTable.d.ts +4 -2
- package/dist/types/components/AppDateRangePicker.d.ts +1 -1
- package/dist/types/components/AppDrawer.d.ts +5 -1
- package/dist/types/components/AppFilterBar.d.ts +3 -1
- package/dist/types/components/AppPageHeader.d.ts +1 -1
- package/dist/types/components/AppPopover.d.ts +11 -1
- package/dist/types/components/AppSearch.d.ts +8 -2
- package/dist/types/components/AppShell.d.ts +3 -0
- package/dist/types/lib/FocusPanel.d.ts +9 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{AppSkeletonRows as r}from"./AppSkeleton.js";import i from"./AppTablePagination.js";import{attachScrollEdges as a}from"@webority/ui-elements/helpers";import{Fragment as o,useEffect as s,useLayoutEffect as c,useMemo as l,useRef as u,useState as d}from"react";import{Fragment as ee,jsx as f,jsxs as p}from"react/jsx-runtime";import{COLUMN_MAX_WIDTH as te,COLUMN_MIN_WIDTH as ne,DATA_TABLE_TEXT as re,PIN_AT_VAR as ie,PIN_SIDES as ae,ROW_HEIGHTS as oe,ROW_MOVE_LIMIT as se,ROW_SAVE_ERROR_CLASS as ce,groupCount as le,groupItems as ue,measureRows as de,pinAtValue as fe,pinClasses as pe,planPins as me,playRowMoves as he,rowOrderChanged as ge,saveOutcomeText as _e,settledRows as ve,virtualRange as ye}from"@webority/ui-elements/elements/data-table";var be=[`comfortable`,`cozy`,`compact`],m=()=>{try{return process.env.NODE_ENV!==`production`}catch{return!0}},h=new Set;function g(e,t){h.has(e)||!m()||(h.add(e),console.warn(`[@webority/ui-react] <AppDataTable> ${t}`))}var xe=100;function Se(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function Ce(e){return e==null||e===``?`-`:typeof e==`boolean`?String(e):e}function _({columns:m,rows:h,rowKey:_=e=>e.id,sort:v,onSort:y,loading:b=!1,skeletonRows:we=5,empty:Te=`No records found.`,emptyFiltered:Ee,sourceCount:De,rowActions:x,rowActionsLabel:Oe,pagination:S,ariaLabel:ke,className:Ae=``,wrapperClassName:je=``,selectable:C=!1,selectedIds:w,onToggleRow:Me,onToggleAll:Ne,onSelectRange:Pe,renderExpanded:Fe,density:T=`comfortable`,striped:Ie=!1,flush:Le=!1,maxHeight:E,stickyFirstColumn:Re=!1,stickyActions:ze=!1,stackOnMobile:D=!1,hiddenColumns:Be,rowStatus:Ve,rowHref:O,onRowClick:k,activeRowKey:He,resizableColumns:A=!1,viewKey:Ue,groupBy:j,groupLabel:We,virtual:M=!1,rowSaving:Ge,rowSaveError:Ke,...qe}){t(`AppDataTable`,qe);let Je=Be?.length?new Set(Be):null;m=Je?m.filter(e=>!(e.hideable&&Je.has(e.key))):m,e(`AppDataTable`,`density`,T,be);for(let t of m)e(`AppDataTable`,`column.pin`,t.pin,ae);let Ye=[`table table-ledger`,T===`cozy`||T===`compact`?`wui-table-${T}`:``,Ie?`wui-table-striped`:``,Re?`wui-table-sticky-first`:``,ze?`wui-table-sticky-actions`:``,D?`wui-table-stack`:``,Ae].filter(Boolean).join(` `),N=typeof Fe==`function`,[Xe,Ze]=d(()=>new Set),Qe=e=>Ze(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),$e=m.some(e=>typeof e.footer==`function`),P=typeof O==`function`||typeof k==`function`,et=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),F=(e,t)=>{if(et(t)||(k&&k(e),!O))return;let n=O(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},I=E!==void 0,tt=[`table-wrap`,I?`wui-table-scroll`:``,Le?`wui-table-flush`:``,je].filter(Boolean).join(` `),nt=I?{maxHeight:E}:void 0,L=Math.max(1,m.length+ +!!x+ +!!C+ +!!N),rt=m.some(e=>e.pin===`start`||e.pin===`end`),R=rt||A||!!j||M,z=+!!N+ +!!C,it=rt?me([...N?[`lead`]:[],...C?[`lead`]:[],...m.map(e=>e.pin===`start`||e.pin===`end`?e.pin:null),...x?[null]:[]]):[],B=(e,t=``)=>{let n=it[e];return n?{className:`${t.trim()} ${pe(n)}`.trim(),style:{[ie]:fe(n.side,n.ordinal)}}:{className:t,style:void 0}},V=(e,t)=>it[e]?{...t,...B(e).style}:t,at=m.length-1+ +!!x;Ue&&!A&&g(`view-key`,"`viewKey` remembers resized widths: add `resizableColumns`."),M&&!I&&g(`virtual-height`,"`virtual` needs `maxHeight`: without a scroll box every row renders."),M&&(N||D)&&g(`virtual-shape`,"`virtual` takes rows of one height, so it is off with `renderExpanded` or `stackOnMobile`.");let H=M&&I&&!N&&!D&&!b&&h?.length>0,ot=C&&h?h.reduce((e,t,n)=>e+ +!!w?.has(_(t,n)),0):0,st=C&&h&&h.length>0&&ot===h.length,ct=ot>0&&!st,lt=e=>{e&&(e.indeterminate=ct)},ut=u(null),dt=(e,t)=>{let n=ut.current;ut.current=e;let r=t&&n!==null?h.findIndex((e,t)=>_(e,t)===n):-1,i=h.findIndex((t,n)=>_(t,n)===e);if(r<0||i<0||r===i){Me?.(e);return}let a=!w?.has(e),o=h.slice(Math.min(r,i),Math.max(r,i)+1).map((e,t)=>_(e,Math.min(r,i)+t)).filter(e=>(w?.has(e)||!1)!==a);if(Pe)Pe(o,a);else for(let e of o)Me?.(e)},[U,ft]=d(()=>new Set),pt=e=>ft(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),W=l(()=>{let e=(h||[]).map((e,t)=>({row:e,i:t}));return j?ue(e,({row:e})=>String(e[j]??``)).flatMap(e=>[{group:e,open:!U.has(e.key)},...U.has(e.key)?[]:e.items]):e},[h,j,U]),G=u(null),K=u(null);s(()=>{let e=G.current;if(!e)return;let t=e=>{let t=e.target.closest?.(`.u-name`);t&&!t.title&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)&&(t.title=t.textContent.trim())},n=e=>{let t=e.target.closest?.(`tbody > tr[aria-rowindex]`)?.getAttribute(`aria-rowindex`);K.current=t?Number(t)-2:null},r=t=>{e.contains(t.relatedTarget)||(K.current=null)};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t),e.addEventListener(`focusin`,n),e.addEventListener(`focusout`,r);let i=a(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),e.removeEventListener(`focusin`,n),e.removeEventListener(`focusout`,r),i()}},[R]);let[mt,ht]=d({top:0,height:0}),[q,gt]=d(oe[T]??oe.comfortable);s(()=>{let e=G.current;if(!H||!e)return;let t=0,n=()=>{t=0;let n=e.querySelector(`:scope > table > thead`)?.getBoundingClientRect().height||0,r={top:Math.max(0,e.scrollTop-n),height:e.clientHeight};ht(e=>e.top===r.top&&e.height===r.height?e:r)},r=()=>{t||=requestAnimationFrame(n)};e.addEventListener(`scroll`,r,{passive:!0});let i=typeof ResizeObserver<`u`?new ResizeObserver(r):null;return i?.observe(e),n(),()=>{e.removeEventListener(`scroll`,r),i?.disconnect(),t&&cancelAnimationFrame(t)}},[H,R]),c(()=>{if(!H)return;let e=(G.current?.querySelector(`:scope > table > tbody > tr:not(.wui-virtual-spacer, .wui-group-row)`))?.getBoundingClientRect().height;e>0&&Math.abs(e-q)>.5&>(e)});let J={start:0,end:W.length,before:0,after:0};if(H){J=ye({scrollTop:mt.top,viewport:mt.height||Number.parseFloat(E)||0,rowHeight:q,count:W.length});let e=K.current;e!==null&&e>=0&&e<W.length&&(e<J.start&&J.start-e<=xe&&(J={...J,start:e,before:e*q}),e>=J.end&&e-J.end<xe&&(J={...J,end:e+1,after:(W.length-e-1)*q}))}let _t=u(null),Y=u(null),X=u(null),vt=!M&&!b&&h?.length>0&&h.length<=se;c(()=>{let e=_t.current;if(!vt||!e){Y.current=null,X.current=null;return}let t=h.map((e,t)=>_(e,t));ge(X.current,t)&&he(e.rows,Y.current),Y.current=de(e.rows),X.current=t});let yt=typeof Ge==`function`||typeof Ke==`function`,bt=e=>{let t=!!Ge?.(e),n=t?``:Ke?.(e)||``;return{state:t?`saving`:n?`error`:null,message:n}},Z=u(null),xt=u(null);s(()=>{if(!yt){xt.current=null;return}let e=m[0]?.key,t=new Map;(h||[]).forEach((n,r)=>{let i=e===void 0?void 0:n[e],a=typeof i==`string`||typeof i==`number`?String(i):``;t.set(_(n,r),{...bt(n),label:a})});let n=_e(ve(xt.current,t));xt.current=t,n&&Z.current&&(Z.current.textContent=n)});let St=Ee!==void 0&&De>0?Ee:Te,Ct=({group:e,open:t},r)=>{let i=e.items[0].row[j],a=e.items.map(e=>e.row);return f(`tr`,{className:`wui-group-row`,"data-group-key":e.key,"aria-rowindex":H?r+2:void 0,children:f(`th`,{className:`wui-group-cell`,scope:`rowgroup`,colSpan:L,children:p(`button`,{type:`button`,className:`wui-group-toggle`,"aria-expanded":t,onClick:()=>pt(e.key),children:[f(n,{name:`chevron-down`,size:16}),f(`span`,{className:`wui-group-label`,children:We?We(i,a):Ce(i)}),f(`span`,{className:`wui-group-count`,"aria-hidden":`true`,children:le(e.items.length)}),f(`span`,{className:`visually-hidden wui-group-rows`,children:`, ${re.rows(e.items.length)}`})]})})},`group:${e.key}`)},wt=({row:e,i:t},r)=>{let i=_(e,t),a=N&&Xe.has(i),s=He!=null&&String(He)===String(i),c=String(i).replace(/[^a-z0-9]/gi,`_`),l=B(0,`wui-expand-cell`),u=B(+!!N,`wui-select-cell`),d=yt?bt(e):null;return p(o,{children:[p(`tr`,{className:[C&&w?.has(i)?`is-selected`:``,P?`wui-row-link`:``,s?`wui-row-active`:``].filter(Boolean).join(` `)||void 0,"aria-current":s?`true`:void 0,"aria-rowindex":H?r+2:void 0,"aria-busy":d?.state===`saving`?`true`:void 0,"data-wui-save-state":d?.state||void 0,"data-status":Ve?.(e)||void 0,"data-href":O?.(e)||void 0,tabIndex:P?0:void 0,onClick:P?t=>F(e,t):void 0,onAuxClick:P&&O?t=>t.button===1&&F(e,t):void 0,onKeyDown:P?t=>{t.key===`Enter`&&t.target===t.currentTarget&&F(e,t)}:void 0,children:[N&&f(`td`,{className:l.className,style:l.style,children:f(`button`,{type:`button`,className:`wui-expand-toggle${a?` is-open`:``}`,"aria-expanded":a,"aria-controls":a?`${c}-expanded`:void 0,"aria-label":a?`Collapse row`:`Expand row`,onClick:()=>Qe(i),children:f(n,{name:`chevron-down`,size:16})})}),C&&f(`td`,{className:u.className,style:u.style,children:f(`input`,{type:`checkbox`,className:`wui-check`,checked:w?.has(i)||!1,onChange:e=>dt(i,e.nativeEvent.shiftKey),onMouseDown:e=>{e.shiftKey&&e.preventDefault()},"aria-label":`Select row`})}),m.map((t,n)=>p(`td`,{className:B(z+n,(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+Se(t.align)+(t.cellClassName?` ${t.cellClassName}`:``)).className,style:V(z+n,t.cellStyle),"data-label":D&&typeof t.label==`string`?t.label:void 0,children:[t.render?t.render(e):Ce(e[t.key]),n===0&&d?.state===`error`&&f(`span`,{className:ce,children:d.message})]},t.key)),x&&f(`td`,{children:f(`div`,{className:`u-row-actions`,children:x(e)})})]}),a&&f(`tr`,{className:`wui-row-expanded`,children:f(`td`,{id:`${c}-expanded`,colSpan:L,children:Fe(e)})})]},i)},Tt=(e,t)=>e.group?Ct(e,t):wt(e,t),Et=(e,t)=>H?f(`tr`,{className:`wui-virtual-spacer`,"aria-hidden":`true`,hidden:t===0,children:f(`td`,{colSpan:L,style:{height:t}})},e):null,Q=B(0,`wui-expand-cell`),$=B(+!!N,`wui-select-cell`);return p(ee,{children:[p(R?`wui-data-table`:`div`,{ref:G,...R?{class:tt,resizable:A?``:void 0,"view-key":Ue||void 0}:{className:tt},style:nt,tabIndex:0,...qe,children:[p(`table`,{className:Ye,"aria-label":ke,"aria-rowcount":H?W.length+1:void 0,children:[f(`thead`,{children:p(`tr`,{"aria-rowindex":H?1:void 0,children:[N&&f(`th`,{className:Q.className,style:Q.style,children:f(`span`,{className:`visually-hidden`,children:`Expand`})}),C&&f(`th`,{className:$.className,style:$.style,children:f(`input`,{ref:lt,type:`checkbox`,className:`wui-check`,checked:st,onChange:e=>Ne?.(e.target.checked),"aria-label":`Select all rows`})}),m.map((e,t)=>{let r=!!(e.sortable&&y),i=v&&v.key===e.key,a=e.align===`num`||e.align===`end`,o=r&&f(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:f(n,{name:`chevrons-up-down`,size:14})}),s=A&&t!==at,c=e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0;return p(`th`,{className:B(z+t,(r?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+(e.grow?`wui-col-grow `:``)+(s?`wui-col-resizable `:``)+Se(e.align)).className,style:V(z+t,c),"data-key":R?e.key:void 0,"aria-label":s&&typeof e.label==`string`?e.label:void 0,"data-pin":e.pin===`start`||e.pin===`end`?e.pin:void 0,tabIndex:r?0:void 0,"aria-sort":i?v.dir===`asc`?`ascending`:`descending`:r?`none`:void 0,onClick:r?()=>y(e.key):void 0,onKeyDown:r?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),y(e.key))}:void 0,children:[a&&o,e.label,!a&&o,s&&f(`span`,{className:`wui-col-resize`,role:`separator`,"aria-orientation":`vertical`,"aria-valuemin":ne,"aria-valuemax":te,tabIndex:0,"aria-label":re.resize(typeof e.label==`string`?e.label:e.key)})]},e.key)}),x&&(Oe?f(`th`,{className:`wui-cell-end`,children:Oe}):f(`th`,{className:`wui-cell-end`,children:f(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),f(`tbody`,{ref:_t,children:b?f(r,{rows:we,cols:L}):h?.length?p(ee,{children:[Et(`before`,J.before),W.slice(J.start,J.end).map((e,t)=>Tt(e,J.start+t)),Et(`after`,J.after)]}):null}),$e&&!b&&h?.length>0&&f(`tfoot`,{children:p(`tr`,{children:[N&&f(`td`,{className:Q.className,style:Q.style}),C&&f(`td`,{className:$.className,style:$.style}),m.map((e,t)=>f(`td`,{className:B(z+t,(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+Se(e.align)).className,style:V(z+t,void 0),children:e.footer?e.footer(h):null},e.key)),x&&f(`td`,{})]})})]}),!b&&!h?.length&&f(`div`,{className:`tbl-empty-block`,children:typeof St==`string`?f(`div`,{className:`tbl-empty-plain`,children:St}):St})]}),S&&S.total>0&&f(i,{page:S.page,totalPages:S.totalPages,pageSize:S.pageSize,onPageChange:S.setPage,onPageSizeChange:S.setPageSize,pageSizes:S.pageSizes,mode:S.mode}),yt&&f(`div`,{ref:Z,className:`visually-hidden`,role:`status`,"aria-live":`polite`,"data-wui-table-status":``})]})}export{_ as default};
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{AppSkeletonRows as r}from"./AppSkeleton.js";import i from"./AppTablePagination.js";import{attachRowDrag as a,attachScrollEdges as o,syncTargets as s}from"@webority/ui-elements/helpers";import{Fragment as ee,useEffect as c,useLayoutEffect as l,useMemo as u,useRef as d,useState as f}from"react";import{Fragment as te,jsx as p,jsxs as m}from"react/jsx-runtime";import{COLUMN_MAX_WIDTH as ne,COLUMN_MIN_WIDTH as re,DATA_TABLE_TEXT as ie,PIN_AT_VAR as ae,PIN_SIDES as oe,ROW_HEIGHTS as se,ROW_MOVE_LIMIT as ce,ROW_SAVE_ERROR_CLASS as le,groupCount as ue,groupItems as de,measureRows as fe,pinAtValue as pe,pinClasses as me,planPins as he,playRowMoves as ge,rowOrderChanged as _e,saveOutcomeText as ve,settledRows as ye,virtualRange as be}from"@webority/ui-elements/elements/data-table";var xe=[`comfortable`,`cozy`,`compact`],h=()=>{try{return process.env.NODE_ENV!==`production`}catch{return!0}},g=new Set;function _(e,t){g.has(e)||!h()||(g.add(e),console.warn(`[@webority/ui-react] <AppDataTable> ${t}`))}var Se=100;function Ce(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function we(e){return e==null||e===``?`-`:typeof e==`boolean`?String(e):e}function v({columns:h,rows:g,rowKey:v=e=>e.id,sort:y,onSort:b,loading:x=!1,skeletonRows:Te=5,empty:Ee=`No records found.`,emptyFiltered:De,sourceCount:Oe,rowActions:S,rowActionsLabel:ke,pagination:C,ariaLabel:Ae,className:je=``,wrapperClassName:Me=``,selectable:w=!1,selectedIds:T,onToggleRow:Ne,onToggleAll:Pe,onSelectRange:Fe,renderExpanded:Ie,density:E=`comfortable`,striped:Le=!1,flush:Re=!1,rowDrag:D=!1,maxHeight:O,stickyFirstColumn:ze=!1,stickyActions:Be=!1,stackOnMobile:k=!1,hiddenColumns:Ve,rowStatus:He,rowHref:A,onRowClick:j,activeRowKey:Ue,resizableColumns:M=!1,viewKey:We,groupBy:N,groupLabel:Ge,virtual:P=!1,rowSaving:Ke,rowSaveError:qe,...Je}){t(`AppDataTable`,Je);let Ye=Ve?.length?new Set(Ve):null;h=Ye?h.filter(e=>!(e.hideable&&Ye.has(e.key))):h,e(`AppDataTable`,`density`,E,xe);for(let t of h)e(`AppDataTable`,`column.pin`,t.pin,oe);let Xe=[`table table-ledger`,E===`cozy`||E===`compact`?`wui-table-${E}`:``,Le?`wui-table-striped`:``,ze?`wui-table-sticky-first`:``,Be?`wui-table-sticky-actions`:``,k?`wui-table-stack`:``,je].filter(Boolean).join(` `),F=typeof Ie==`function`,[Ze,Qe]=f(()=>new Set),$e=e=>Qe(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),et=h.some(e=>typeof e.footer==`function`),I=typeof A==`function`||typeof j==`function`,tt=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),L=(e,t)=>{if(tt(t)||(j&&j(e),!A))return;let n=A(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},R=O!==void 0,nt=[`table-wrap`,R?`wui-table-scroll`:``,Re?`wui-table-flush`:``,Me].filter(Boolean).join(` `),rt=R?{maxHeight:O}:void 0,z=Math.max(1,h.length+ +!!S+ +!!w+ +!!F),it=h.some(e=>e.pin===`start`||e.pin===`end`),B=it||M||!!N||P,V=+!!F+ +!!w,at=it?he([...F?[`lead`]:[],...w?[`lead`]:[],...h.map(e=>e.pin===`start`||e.pin===`end`?e.pin:null),...S?[null]:[]]):[],H=(e,t=``)=>{let n=at[e];return n?{className:`${t.trim()} ${me(n)}`.trim(),style:{[ae]:pe(n.side,n.ordinal)}}:{className:t,style:void 0}},U=(e,t)=>at[e]?{...t,...H(e).style}:t,ot=h.length-1+ +!!S;We&&!M&&_(`view-key`,"`viewKey` remembers resized widths: add `resizableColumns`."),P&&!R&&_(`virtual-height`,"`virtual` needs `maxHeight`: without a scroll box every row renders."),P&&(F||k)&&_(`virtual-shape`,"`virtual` takes rows of one height, so it is off with `renderExpanded` or `stackOnMobile`.");let W=P&&R&&!F&&!k&&!x&&g?.length>0,G=w&&g?g.reduce((e,t,n)=>e+ +!!T?.has(v(t,n)),0):0,st=w&&g&&g.length>0&&G===g.length,ct=G>0&&!st,lt=e=>{e&&(e.indeterminate=ct)},ut=d(null),dt=(e,t)=>{let n=ut.current;ut.current=e;let r=t&&n!==null?g.findIndex((e,t)=>v(e,t)===n):-1,i=g.findIndex((t,n)=>v(t,n)===e);if(r<0||i<0||r===i){Ne?.(e);return}let a=!T?.has(e),o=g.slice(Math.min(r,i),Math.max(r,i)+1).map((e,t)=>v(e,Math.min(r,i)+t)).filter(e=>(T?.has(e)||!1)!==a);if(Fe)Fe(o,a);else for(let e of o)Ne?.(e)},[K,ft]=f(()=>new Set),pt=e=>ft(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),q=u(()=>{let e=(g||[]).map((e,t)=>({row:e,i:t}));return N?de(e,({row:e})=>String(e[N]??``)).flatMap(e=>[{group:e,open:!K.has(e.key)},...K.has(e.key)?[]:e.items]):e},[g,N,K]),J=d(null),Y=d(null);c(()=>{let e=J.current;if(!e)return;let t=e=>{let t=e.target.closest?.(`.u-name`);t&&!t.title&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)&&(t.title=t.textContent.trim())},n=e=>{let t=e.target.closest?.(`tbody > tr[aria-rowindex]`)?.getAttribute(`aria-rowindex`);Y.current=t?Number(t)-2:null},r=t=>{e.contains(t.relatedTarget)||(Y.current=null)};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t),e.addEventListener(`focusin`,n),e.addEventListener(`focusout`,r);let i=o(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),e.removeEventListener(`focusin`,n),e.removeEventListener(`focusout`,r),i()}},[B]),c(()=>{if(!D||!J.current)return;let e=a(J.current);return s(document),e},[D,B]);let mt=d(!1);c(()=>{!mt.current&&(mt.current=!0,G===0)||J.current?.querySelector(`table`)?.dispatchEvent(new CustomEvent(`selectionchange`,{bubbles:!0,detail:{selected:G,total:g?.length??0,keys:g?g.map((e,t)=>v(e,t)).filter(e=>T?.has(e)).map(String):[]}}))},[w,G]);let[ht,gt]=f({top:0,height:0}),[X,_t]=f(se[E]??se.comfortable);c(()=>{let e=J.current;if(!W||!e)return;let t=0,n=()=>{t=0;let n=e.querySelector(`:scope > table > thead`)?.getBoundingClientRect().height||0,r={top:Math.max(0,e.scrollTop-n),height:e.clientHeight};gt(e=>e.top===r.top&&e.height===r.height?e:r)},r=()=>{t||=requestAnimationFrame(n)};e.addEventListener(`scroll`,r,{passive:!0});let i=typeof ResizeObserver<`u`?new ResizeObserver(r):null;return i?.observe(e),n(),()=>{e.removeEventListener(`scroll`,r),i?.disconnect(),t&&cancelAnimationFrame(t)}},[W,B]),l(()=>{if(!W)return;let e=(J.current?.querySelector(`:scope > table > tbody > tr:not(.wui-virtual-spacer, .wui-group-row)`))?.getBoundingClientRect().height;e>0&&Math.abs(e-X)>.5&&_t(e)});let Z={start:0,end:q.length,before:0,after:0};if(W){Z=be({scrollTop:ht.top,viewport:ht.height||Number.parseFloat(O)||0,rowHeight:X,count:q.length});let e=Y.current;e!==null&&e>=0&&e<q.length&&(e<Z.start&&Z.start-e<=Se&&(Z={...Z,start:e,before:e*X}),e>=Z.end&&e-Z.end<Se&&(Z={...Z,end:e+1,after:(q.length-e-1)*X}))}let vt=d(null),yt=d(null),bt=d(null),xt=!P&&!x&&g?.length>0&&g.length<=ce;l(()=>{let e=vt.current;if(!xt||!e){yt.current=null,bt.current=null;return}let t=g.map((e,t)=>v(e,t));_e(bt.current,t)&&ge(e.rows,yt.current),yt.current=fe(e.rows),bt.current=t});let St=typeof Ke==`function`||typeof qe==`function`,Ct=e=>{let t=!!Ke?.(e),n=t?``:qe?.(e)||``;return{state:t?`saving`:n?`error`:null,message:n}},wt=d(null),Tt=d(null);c(()=>{if(!St){Tt.current=null;return}let e=h[0]?.key,t=new Map;(g||[]).forEach((n,r)=>{let i=e===void 0?void 0:n[e],a=typeof i==`string`||typeof i==`number`?String(i):``;t.set(v(n,r),{...Ct(n),label:a})});let n=ve(ye(Tt.current,t));Tt.current=t,n&&wt.current&&(wt.current.textContent=n)});let Et=De!==void 0&&Oe>0?De:Ee,Dt=({group:e,open:t},r)=>{let i=e.items[0].row[N],a=e.items.map(e=>e.row);return p(`tr`,{className:`wui-group-row`,"data-group-key":e.key,"aria-rowindex":W?r+2:void 0,children:p(`th`,{className:`wui-group-cell`,scope:`rowgroup`,colSpan:z,children:m(`button`,{type:`button`,className:`wui-group-toggle`,"aria-expanded":t,onClick:()=>pt(e.key),children:[p(n,{name:`chevron-down`,size:16}),p(`span`,{className:`wui-group-label`,children:Ge?Ge(i,a):we(i)}),p(`span`,{className:`wui-group-count`,"aria-hidden":`true`,children:ue(e.items.length)}),p(`span`,{className:`visually-hidden wui-group-rows`,children:`, ${ie.rows(e.items.length)}`})]})})},`group:${e.key}`)},Ot=({row:e,i:t},r)=>{let i=v(e,t),a=F&&Ze.has(i),o=Ue!=null&&String(Ue)===String(i),s=String(i).replace(/[^a-z0-9]/gi,`_`),c=H(0,`wui-expand-cell`),l=H(+!!F,`wui-select-cell`),u=St?Ct(e):null;return m(ee,{children:[m(`tr`,{className:[w&&T?.has(i)?`is-selected`:``,I?`wui-row-link`:``,o?`wui-row-active`:``].filter(Boolean).join(` `)||void 0,"aria-current":o?`true`:void 0,"aria-rowindex":W?r+2:void 0,"aria-busy":u?.state===`saving`?`true`:void 0,"data-wui-save-state":u?.state||void 0,"data-status":He?.(e)||void 0,"data-href":A?.(e)||void 0,"data-row-key":D?String(i):void 0,tabIndex:I?0:void 0,onClick:I?t=>L(e,t):void 0,onAuxClick:I&&A?t=>t.button===1&&L(e,t):void 0,onKeyDown:I?t=>{t.key===`Enter`&&t.target===t.currentTarget&&L(e,t)}:void 0,children:[F&&p(`td`,{className:c.className,style:c.style,children:p(`button`,{type:`button`,className:`wui-expand-toggle${a?` is-open`:``}`,"aria-expanded":a,"aria-controls":a?`${s}-expanded`:void 0,"aria-label":a?`Collapse row`:`Expand row`,onClick:()=>$e(i),children:p(n,{name:`chevron-down`,size:16})})}),w&&p(`td`,{className:l.className,style:l.style,children:p(`input`,{type:`checkbox`,className:`wui-check`,checked:T?.has(i)||!1,onChange:e=>dt(i,e.nativeEvent.shiftKey),onMouseDown:e=>{e.shiftKey&&e.preventDefault()},"aria-label":`Select row`})}),h.map((t,n)=>m(`td`,{className:H(V+n,(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+Ce(t.align)+(t.cellClassName?` ${t.cellClassName}`:``)).className,style:U(V+n,t.cellStyle),"data-label":k&&typeof t.label==`string`?t.label:void 0,children:[t.render?t.render(e):we(e[t.key]),n===0&&u?.state===`error`&&p(`span`,{className:le,children:u.message})]},t.key)),S&&p(`td`,{children:p(`div`,{className:`u-row-actions`,children:S(e)})})]}),a&&p(`tr`,{className:`wui-row-expanded`,children:p(`td`,{id:`${s}-expanded`,colSpan:z,children:Ie(e)})})]},i)},kt=(e,t)=>e.group?Dt(e,t):Ot(e,t),At=(e,t)=>W?p(`tr`,{className:`wui-virtual-spacer`,"aria-hidden":`true`,hidden:t===0,children:p(`td`,{colSpan:z,style:{height:t}})},e):null,Q=H(0,`wui-expand-cell`),$=H(+!!F,`wui-select-cell`);return m(te,{children:[m(B?`wui-data-table`:`div`,{ref:J,...B?{class:nt,resizable:M?``:void 0,"view-key":We||void 0,"data-wui-row-drag":D?``:void 0}:{className:nt,"data-wui-row-drag":D?``:void 0},style:rt,tabIndex:0,...Je,children:[m(`table`,{className:Xe,"aria-label":Ae,"aria-rowcount":W?q.length+1:void 0,children:[p(`thead`,{children:m(`tr`,{"aria-rowindex":W?1:void 0,children:[F&&p(`th`,{className:Q.className,style:Q.style,children:p(`span`,{className:`visually-hidden`,children:`Expand`})}),w&&p(`th`,{className:$.className,style:$.style,children:p(`input`,{ref:lt,type:`checkbox`,className:`wui-check`,checked:st,onChange:e=>Pe?.(e.target.checked),"aria-label":`Select all rows`})}),h.map((e,t)=>{let r=!!(e.sortable&&b),i=y&&y.key===e.key,a=e.align===`num`||e.align===`end`,o=r&&p(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:p(n,{name:`chevrons-up-down`,size:14})}),s=M&&t!==ot,ee=e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0;return m(`th`,{className:H(V+t,(r?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+(e.grow?`wui-col-grow `:``)+(s?`wui-col-resizable `:``)+Ce(e.align)).className,style:U(V+t,ee),"data-key":B?e.key:void 0,"aria-label":s&&typeof e.label==`string`?e.label:void 0,"data-pin":e.pin===`start`||e.pin===`end`?e.pin:void 0,tabIndex:r?0:void 0,"aria-sort":i?y.dir===`asc`?`ascending`:`descending`:r?`none`:void 0,onClick:r?()=>b(e.key):void 0,onKeyDown:r?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),b(e.key))}:void 0,children:[a&&o,e.label,!a&&o,s&&p(`span`,{className:`wui-col-resize`,role:`separator`,"aria-orientation":`vertical`,"aria-valuemin":re,"aria-valuemax":ne,tabIndex:0,"aria-label":ie.resize(typeof e.label==`string`?e.label:e.key)})]},e.key)}),S&&(ke?p(`th`,{className:`wui-cell-end`,children:ke}):p(`th`,{className:`wui-cell-end`,children:p(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),p(`tbody`,{ref:vt,children:x?p(r,{rows:Te,cols:z}):g?.length?m(te,{children:[At(`before`,Z.before),q.slice(Z.start,Z.end).map((e,t)=>kt(e,Z.start+t)),At(`after`,Z.after)]}):null}),et&&!x&&g?.length>0&&p(`tfoot`,{children:m(`tr`,{children:[F&&p(`td`,{className:Q.className,style:Q.style}),w&&p(`td`,{className:$.className,style:$.style}),h.map((e,t)=>p(`td`,{className:H(V+t,(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+Ce(e.align)).className,style:U(V+t,void 0),children:e.footer?e.footer(g):null},e.key)),S&&p(`td`,{})]})})]}),!x&&!g?.length&&p(`div`,{className:`tbl-empty-block`,children:typeof Et==`string`?p(`div`,{className:`tbl-empty-plain`,children:Et}):Et})]}),C&&C.total>0&&p(i,{page:C.page,totalPages:C.totalPages,pageSize:C.pageSize,onPageChange:C.setPage,onPageSizeChange:C.setPageSize,pageSizes:C.pageSizes,mode:C.mode}),St&&p(`div`,{ref:wt,className:`visually-hidden`,role:`status`,"aria-live":`polite`,"data-wui-table-status":``})]})}export{v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{useEffect as n,useRef as r}from"react";import{jsx as
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{useEffect as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import"@webority/ui-elements/elements/drawer";var s=[`end`,`start`],c=[`sm`,`md`,`lg`],l=[50,90],u=e=>Array.isArray(e)&&e.length>0&&e.every(e=>Number.isFinite(e)&&e>=10&&e<=100);function d({open:d=!1,onClose:f,title:p,subtitle:m,ariaLabel:h,side:g=`end`,size:_=`md`,snapPoints:v=l,defaultSnap:y=0,onSnapChange:b,dismissible:x=!0,staticBackdrop:S=!1,confirmDiscard:C,dirty:w=!1,footer:T,className:E=``,children:D,...O}){t(`AppDrawer`,O),e(`AppDrawer`,`side`,g,s),e(`AppDrawer`,`size`,_,c),e(`AppDrawer`,`snapPoints`,u(v)?void 0:JSON.stringify(v),[`an array of numbers from 10 to 100`]);let k=r(null),A=r(null),j=r(null),[M,N]=i(!1);A.current={onClose:f,onSnapChange:b,confirmDiscard:C,dirty:w},n(()=>{d||N(!1)},[d]),n(()=>{M&&j.current?.focus()},[M]),n(()=>{let e=k.current;if(!e)return;let t=t=>{if(t.target===e){if(t.preventDefault(),A.current.confirmDiscard&&A.current.dirty){N(!0);return}A.current.onClose?.()}},n=t=>{t.target===e&&A.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 P=()=>{N(!1),k.current?.dispatchEvent(new CustomEvent(`wui:drawer:discard`,{bubbles:!0})),A.current.onClose?.()},F=u(v)?v:l;return o(`wui-drawer`,{ref:k,...O,class:[`wui-drawer`,E].filter(Boolean).join(` `),side:g,size:_,"snap-points":F.join(`,`),"default-snap":String(y),static:S?``:void 0,"confirm-discard":C||void 0,open:d?``:void 0,children:[a(`div`,{className:`wui-drawer-backdrop`,"data-wui-drawer-backdrop":``,"aria-hidden":`true`}),o(`div`,{className:`wui-drawer-panel`,role:`dialog`,"aria-modal":`true`,"aria-label":h||p||void 0,tabIndex:-1,children:[a(`div`,{className:`wui-drawer-grip`,"data-wui-drawer-grip":``,children:a(`div`,{className:`wui-drawer-handle`,role:`slider`,tabIndex:0,"aria-orientation":`vertical`,"aria-label":`Sheet height`})}),o(`div`,{className:`wui-drawer-header`,"data-wui-drawer-grip":``,children:[o(`div`,{className:`wui-drawer-headtext`,children:[p&&a(`div`,{className:`wui-drawer-title`,children:p}),m&&a(`div`,{className:`wui-drawer-subtitle`,children:m})]}),x&&a(`button`,{type:`button`,className:`wui-drawer-close`,"data-wui-drawer-close":``,"aria-label":`Close`,children:a(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:a(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),a(`div`,{className:`wui-drawer-body`,children:D}),(T||M)&&o(`div`,{className:M?`wui-drawer-footer wui-drawer-discarding`:`wui-drawer-footer`,children:[M&&o(`div`,{className:`wui-drawer-discard`,role:`alert`,children:[a(`span`,{className:`wui-drawer-discard-text`,children:C}),a(`button`,{type:`button`,className:`btn btn-danger btn-sm`,"data-wui-discard-confirm":``,ref:j,onClick:P,children:`Discard`}),a(`button`,{type:`button`,className:`btn btn-secondary btn-sm`,"data-wui-discard-keep":``,onClick:()=>N(!1),children:`Keep editing`})]}),T]})]})]})}export{d as default};
|
|
@@ -1 +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.`))}function j({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);let N=i.filter(e=>!E(e)),
|
|
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);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 btn-outline-primary btn-sm wui-filter-popover-trigger`,"aria-expanded":`false`,"aria-controls":j,children:[_(n,{name:`filter`,size:14,className:`me-2`}),`Filters`,H(`wui-filter-popover-count`,I.length)]}),v(`div`,{id:j,className:`wui-filter-popover-panel`,role:`dialog`,"aria-label":`Filters`,hidden:!0,children:[_(`div`,{className:`wui-filter-popover-grid`,children:N.map(V)}),v(`div`,{className:`wui-filter-popover-foot`,children:[_(f,{label:`Keep open`,id:`${j}-pin`}),I.length>1&&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}){if(e.type===`enum`){let r=e.options??[];return r.length<T?_(i,{label:e.label,name:e.key,size:`sm`,value:t??``,onChange:n,options:[{value:``,label:e.allLabel||`All`},...r]}):_(d,{"aria-label":e.label,name:e.key,placeholder:e.label,size:`sm`,clearable:!0,value:t??``,onChange:n,options:r})}return e.type===`multiEnum`?_(l,{"aria-label":e.label,name:e.key,placeholder: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: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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{formatNumber as r}from"@webority/ui-elements/helpers";import{useEffect as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`primary`,`success`,`warning`,`danger`,`info`],l=[`sm`,`md`,`lg`,`bar`],u=[`start`,`center`],d=[`inline`,`below`],f=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`];function p({title:p,as:m=`h1`,subtitle:h,eyebrow:g,icon:_,tone:v=`primary`,status:y,breadcrumbs:b,actions:x,views:S,tools:C,meta:w,metaPlacement:T=`inline`,bulkFor:E,bulk:D,size:O=`md`,align:k=`start`,divider:A=!1,sticky:j=!1,className:M=``,...N}){t(`AppPageHeader`,N),e(`AppPageHeader`,`tone`,v,c),e(`AppPageHeader`,`size`,O,l),e(`AppPageHeader`,`align`,k,u),e(`AppPageHeader`,`as`,m,f),e(`AppPageHeader`,`metaPlacement`,T,d);let P=f.includes(m)?m:`h1`,F=O===`bar`,I=F&&T===`below`,L=[`page-header`,O&&O!==`md`?`page-header-${O}`:``,k===`center`?`page-header-center`:``,A?`page-header-divider`:``,j?`page-header-sticky`:``,v&&v!==`primary`?`tone-${v}`:``,I?`wui-page-header-meta-below`:``,M].filter(Boolean).join(` `),[R,z]=a(0),B=F?E:void 0;if(i(()=>{if(!B)return;document.getElementById(B)?.setAttribute(`data-wui-bulk-in-bar`,``);let e=e=>{typeof e.detail?.selected==`number`&&document.getElementById(B)?.contains(e.target)&&z(e.detail.selected)};return document.addEventListener(`selectionchange`,e),()=>{document.removeEventListener(`selectionchange`,e),document.getElementById(B)?.removeAttribute(`data-wui-bulk-in-bar`)}},[B]),F)return s(`header`,{className:L,"data-wui-page-header-bar":``,"data-wui-bulk-for":E||void 0,...N,children:[b!=null&&o(`div`,{className:`page-header-bar-crumbs`,children:b}),p!=null&&o(P,{className:`page-title`,children:p}),y!=null&&o(`span`,{className:`page-status`,children:y}),S!=null&&o(`div`,{className:`page-header-bar-views`,"data-wui-bar-swap":``,hidden:E&&R>0?!0:void 0,children:S}),w!=null&&!I&&o(`div`,{className:`page-header-bar-meta`,children:w}),C!=null&&o(`div`,{className:`page-header-bar-tools`,"data-wui-bar-swap":``,hidden:E&&R>0?!0:void 0,children:C}),E?s(`div`,{className:`page-header-bar-bulk`,"data-wui-bar-bulk":``,hidden:R===0||void 0,children:[o(`span`,{className:`page-header-bar-bulk-count`,"aria-live":`polite`,children:R>0?`${r(R,{decimals:0})} selected`:``}),D]}):null,x!=null&&o(`div`,{className:`page-actions`,children:x}),w!=null&&I&&o(`div`,{className:`page-header-bar-meta`,children:w})]});let V=_==null?null:typeof _==`string`?o(n,{name:_,size:20}):_;return s(`div`,{className:L,...N,children:[b!=null&&o(`div`,{className:`page-breadcrumbs`,children:b}),s(`div`,{className:`page-header-bar`,children:[s(`div`,{className:`page-header-lead`,children:[V!=null&&o(`span`,{className:`page-header-icon`,children:V}),s(`div`,{className:`page-header-titles`,children:[g!=null&&o(`div`,{className:`page-eyebrow`,children:g}),s(`div`,{className:`page-titlebar`,children:[p!=null&&o(P,{className:`page-title`,children:p}),y!=null&&o(`span`,{className:`page-status`,children:y})]}),h!=null&&o(`div`,{className:`page-subtitle`,children:h})]})]}),x!=null&&o(`div`,{className:`page-actions`,children:x})]})]})}export{p as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnUnknownProps.js";import{cloneElement as
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FocusPanel.js";import{cloneElement as r,useId as i,useRef as a,useState as o}from"react";import{OverlayTrigger as s,Popover as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={start:`left`,end:`right`,top:`top`,bottom:`bottom`,auto:`auto`},f={modifiers:[{name:`computeStyles`,options:{gpuAcceleration:!1}}]},p=[`dialog`];function m({trigger:m,children:h,title:g,placement:_=`bottom`,triggerType:v=`click`,onToggle:y,className:b=``,show:x,role:S,labelledBy:C,autoFocus:w=!1,...T}){t(`AppPopover`,T),e(`AppPopover`,`role`,S,p);let E=i(),D=`${E}-title`,O=a(null),[k,A]=o(!1),j=x!==void 0,M=j?x:k,N=S===`dialog`,P=e=>{j||A(e),y?.(e)},F=u(c,{id:E,className:b||void 0,...N?{role:`dialog`,"aria-modal":`false`,"aria-labelledby":C??(g?D:void 0)}:{},children:[w&&l(n,{triggerRef:O}),g&&l(c.Header,{as:`h3`,id:D,children:g}),h==null?null:l(c.Body,{children:h})]}),{onClick:I,"aria-expanded":L,...R}=T,z=m.props[`aria-expanded`],B,V=v===`click`||Array.isArray(v)&&v.includes(`click`);L===void 0?z===void 0?V&&(B=M):B=z:B=L;let H=r(m,{...R,...B===void 0?{}:{"aria-expanded":B},onClick:e=>{O.current=e.currentTarget,I?.(e),typeof m.props.onClick==`function`&&m.props.onClick(e)}}),U=v===`click`,W=v===`hover`||Array.isArray(v)&&v.includes(`hover`);return l(s,{trigger:v,placement:d[_]||_,popperConfig:f,overlay:F,rootClose:U||N,delay:W?{show:80,hide:220}:void 0,onToggle:P,...j?{show:x}:{},children:H})}export{m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{isTypingTarget as r}from"@webority/ui-elements/helpers";import{useCallback as i,useEffect as a,useRef as o,useState as s}from"react";import{Form as c}from"react-bootstrap";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d=[`sm`,`lg`];function f({value:f,onChange:p,placeholder:m=`Search…`,ariaLabel:h,iconSize:g=18,size:_,loading:v=!1,collapsible:y=!1,disabled:b=!1,className:x=``,form:S,onKeyDown:C,...w}){t(`AppSearch`,w),e(`AppSearch`,`size`,_,d);let[T,E]=s(!!f),D=o(null),O=o(null),k=!y||T||!!f,A=i(()=>{E(!0),requestAnimationFrame(()=>D.current?.focus())},[]);return a(()=>{if(!y)return;let e=e=>{e.key!==`/`||e.ctrlKey||e.altKey||e.metaKey||r(e.target)||[...document.querySelectorAll(`.search-wrap.wui-search-collapsible`)].find(e=>e.offsetParent!==null)===O.current&&(e.preventDefault(),A())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[y,A]),u(`div`,{className:[`search-wrap`,f?`has-value`:``,_===`sm`?`search-sm`:_===`lg`?`search-lg`:``,v?`is-loading`:``,y?`wui-search-collapsible`:``,y&&!k?`is-collapsed`:``,x].filter(Boolean).join(` `),ref:O,onBlur:e=>{y&&!e.currentTarget.contains(e.relatedTarget)&&!f&&E(!1)},children:[y&&l(`button`,{type:`button`,className:`wui-search-toggle`,"aria-label":h||m,"aria-expanded":k?`true`:`false`,onClick:A,children:l(n,{name:`search`,size:g})}),v&&l(`span`,{className:`search-spinner`,"aria-hidden":`true`}),l(n,{name:`search`,size:g,className:`search-icon`}),l(c.Control,{ref:D,type:`search`,className:`input search-input`,placeholder:m,value:f,onChange:e=>p?.(e.target.value),onKeyDown:e=>{C?.(e),y&&e.key===`Escape`&&!f&&E(!1)},"aria-label":h,form:S,disabled:b,...w}),!b&&l(`button`,{type:`button`,className:`search-clear`,"aria-label":`Clear search`,onClick:()=>p?.(``),hidden:!f,children:l(n,{name:`x`,size:16})})]})}export{f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppAvatar.js";import{navMatchScore as i}from"../lib/navMatch.js";import{readShellCollapsed as a,writeShellCollapsed as o}from"../lib/shellCookie.js";import{initScrollEdges as s}from"@webority/ui-elements/helpers";import{useEffect as c,useId as l,useMemo as u,useRef as d,useState as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";var g=99,_=4,v=5,y=[`prefix`,`exact`],b=[`comfortable`,`compact`],x=e=>e>g?`${g}+`:String(e);function S({groups:r=[],brand:i,sidebarStart:l,sidebarStartCompact:p,sidebarFooter:g,topbarStart:_,topbarEnd:v,footer:y,children:x,collapsed:S,onCollapsedChange:E,noSidebar:O=!1,density:j=`comfortable`,navLabel:N=`Main navigation`,linkComponent:P,currentPath:F,rememberCollapsed:I=!1,collapsedCookie:L=`wui-shell-collapsed`,tabBarLabel:R=`Quick navigation`,moreLabel:z=`More`,userMenu:B,notifications:V,search:H,className:U=``,...W}){t(`AppShell`,W),e(`AppShell`,`density`,j,b);let[G,K]=f(()=>I&&S===void 0&&typeof document<`u`?a(L)??!1:!1),[q,J]=f(!1),[Y,ee]=f(!1),X=d(null),Z=S??G,te=()=>{let e=!Z;S===void 0&&K(e),I&&o(e,L),E?.(e)},Q=u(()=>C(r,F),[r,F]),$=O?null:w(Q);return c(()=>{let e=()=>ee(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),c(()=>{s()},[]),c(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),c(()=>{if(!q)return;let e=e=>{e.key===`Escape`&&J(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[q]),h(`div`,{className:[`app-shell`,Z?`collapsed`:``,O?`no-sidebar`:``,q?`mobile-open`:``,U].filter(Boolean).join(` `),"data-density":j===`compact`?`compact`:void 0,...W,children:[m(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),h(`aside`,{className:`app-sidebar`,children:[i&&m(`div`,{className:`app-sidebar-brand`,children:i}),l&&m(`div`,{className:`app-sidebar-start`,children:l}),p&&m(`div`,{className:`app-sidebar-start-compact`,children:p}),m(`nav`,{className:`app-sidebar-scroll`,"aria-label":N,ref:X,children:Q.map((e,t)=>h(`div`,{className:`app-nav-group`,children:[e.label&&m(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>m(D,{item:e,linkComponent:P,onNavigate:()=>J(!1)},e.key??e.href??e.label)),e.after&&m(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),g&&m(`div`,{className:`app-sidebar-foot`,children:g}),!O&&m(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:te,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:m(n,{name:`chevrons-left`,size:20})})]}),h(`div`,{className:`app-main`,children:[h(`header`,{className:`app-topbar${Y?` scrolled`:``}`,children:[h(`div`,{className:`app-topbar-start`,children:[m(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>J(!0),"aria-label":`Open navigation`,"aria-expanded":q,children:m(n,{name:`menu`,size:18})}),_,H&&m(M,{config:H})]}),h(`div`,{className:`app-topbar-end`,children:[v,V&&m(A,{config:V}),B&&m(k,{config:B,linkComponent:P})]})]}),m(`main`,{className:`app-content`,id:`main-content`,children:x}),y&&m(`footer`,{className:`app-footer`,children:y})]}),$&&h(`nav`,{className:`wui-tabbar`,"aria-label":R,children:[$.tabs.map(e=>m(T,{tab:e,linkComponent:P},e.key??e.href)),$.hasMore&&h(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>J(!0),children:[m(`span`,{className:`wui-tabbar-icon`,children:m(n,{name:`more`,size:24})}),m(`span`,{className:`wui-tabbar-label`,children:z})]})]}),m(`button`,{type:`button`,className:`app-scrim`,onClick:()=>J(!1),"aria-label":`Close navigation`,tabIndex:q?0:-1})]})}function C(t,n){let r=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:r(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),a=t.map(e=>({...e,items:r(e.items)})).filter(e=>e.items.length>0),o=[],s=e=>{for(let t of e)o.push(t),t.children&&s(t.children)};for(let e of a)s(e.items);for(let t of o)e(`AppShell`,`match`,t.match,y);let c=null;if(n!=null&&!o.some(e=>e.active===!0)){let e=-1;for(let t of o){if(t.active!=null||t.children?.length)continue;let r=i(n,t.href,{exact:t.match===`exact`,also:t.matchAlso});r>e&&(e=r,c=t)}}for(let e of o)e.active=e.active??e===c;return a}function w(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?_:v;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function T({tab:e,linkComponent:t}){let r=`wui-tabbar-item${e.active?` active`:``}`,i=h(p,{children:[e.icon&&m(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:24}):e.icon}),m(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&m(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge})]}),a=e.active?`page`:void 0;return t?m(t,{className:r,to:e.href,"aria-current":a,children:i}):m(`a`,{className:r,href:e.href,"aria-current":a,children:i})}function E(e){for(let t of e){if(t.active)return t;let e=t.children?.length?E(t.children):void 0;if(e)return e}}function D({item:e,linkComponent:t,onNavigate:r,depth:i=0}){let a=i>0,o=i>1?{"--wui-nav-depth":i}:void 0,s=Array.isArray(e.children)&&e.children.length>0,l=s?E(e.children):void 0,u=!!l,d=l?l.key??l.href??l.label:null,[g,_]=f(u);c(()=>{d!=null&&_(!0)},[d]);let v=typeof e.label==`string`?e.label:void 0,y=!a&&e.icon&&m(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:22}):e.icon}),b=e.badge!=null&&m(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge});if(s)return h(p,{children:[h(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${u?` active`:``}`,style:o,"aria-expanded":g,"data-label":v,onClick:()=>_(e=>!e),children:[y,m(`span`,{className:`app-nav-text`,children:e.label}),b,m(`span`,{className:`app-nav-caret`,children:m(n,{name:`chevron-right`,size:16})})]}),m(`div`,{className:`app-nav-sub${g?` expanded`:``}`,inert:!g,"aria-hidden":!g||void 0,children:m(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>m(D,{item:e,linkComponent:t,onNavigate:r,depth:i+1},e.key??e.href))})})]});let x=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}`,S=h(p,{children:[y,m(`span`,{className:`app-nav-text`,children:e.label}),b,e.trailingIcon&&m(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?m(n,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),C=e.active?`page`:void 0;return t?m(t,{className:x,style:o,to:e.href,"aria-current":C,"data-label":v,onClick:r,children:S}):m(`a`,{className:x,style:o,href:e.href,"aria-current":C,"data-label":v,onClick:r,children:S})}function O(){let[e,t]=f(!1),n=d(null);return c(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function k({config:e,linkComponent:t}){let i=l(),{open:a,setOpen:o,ref:s}=O(),{name:c,role:u,photo:d,profileHref:f,profileLabel:g=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?m(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):m(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=h(p,{children:[m(n,{name:`log-out`,size:18}),y]});return h(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[h(`button`,{type:`button`,id:i,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[m(r,{name:c,src:d,tone:`auto`}),h(`span`,{className:`wui-usermenu-text`,children:[m(`span`,{className:`wui-usermenu-name`,children:c}),u&&m(`span`,{className:`wui-usermenu-role`,children:u})]}),m(n,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":i,"data-bs-popper":a?`static`:void 0,children:[h(`div`,{className:`wui-usermenu-head`,children:[m(r,{name:c,src:d,size:`lg`,tone:`auto`}),h(`div`,{className:`wui-usermenu-who`,children:[m(`div`,{className:`wui-usermenu-name`,children:c}),u&&m(`div`,{className:`wui-usermenu-role`,children:u})]})]}),f&&S(f,h(p,{children:[m(n,{name:`user`,size:18}),g]}),void 0,x),b.map(e=>{if(e.divider)return m(`hr`,{className:`dropdown-divider`},e.key);let t=h(p,{children:[e.icon&&m(n,{name:e.icon,size:18}),e.label]}),r=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,r):m(`button`,{type:`button`,className:`dropdown-item`,onClick:r,children:t},e.key)}),v?m(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:m(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&m(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function A({config:e}){let t=l(),{open:r,setOpen:i,ref:a}=O(),{unread:o=0,items:s,loading:u=!1,onOpen:g,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[S,C]=f(``),w=d(o);c(()=>{w.current!==o&&(w.current=o,C(o===0?`No unread notifications`:`${x(o)} unread notifications`))},[o]);let T=null;return s?.length?T=m(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let r=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=h(p,{children:[m(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&m(`span`,{className:`wui-bell-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-bell-body`,children:[!e.read&&m(`span`,{className:`visually-hidden`,children:`Unread: `}),m(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&m(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?m(`a`,{className:r,href:e.href,"data-id":e.id,children:i},e.id??t):m(`div`,{className:r,"data-id":e.id,children:i},e.id??t)})}):u?T=m(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(T=m(`div`,{className:`wui-bell-state`,children:b})),h(`div`,{className:`dropdown wui-bell`,ref:a,children:[h(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":r,"aria-label":o===0?y:`${y}, ${x(o)} unread`,onClick:()=>{let e=!r;i(e),e&&g?.()},children:[m(n,{name:`notification`,size:20}),m(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:x(o)})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:S}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${r?` show`:``}`,"aria-labelledby":t,"data-bs-popper":r?`static`:void 0,children:[h(`div`,{className:`wui-bell-head`,children:[m(`span`,{className:`wui-bell-title`,children:y}),_&&m(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),m(`div`,{className:`wui-bell-list`,"aria-busy":u||void 0,children:T}),v&&m(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var j=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function M({config:e}){let t=l(),{value:r=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:p,placeholder:g=`Search`}=e,[_,v]=f(!1),[y,b]=f(!1),[x,S]=f({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=d(null),E=d(null),D=d([]),O=u(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;c(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||j(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let M=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):p&&r.trim()!==``&&(e.preventDefault(),p(r.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},N=-1;return D.current=[],h(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[m(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":g,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:m(n,{name:`search`,size:20})}),h(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[h(`div`,{className:`search-wrap`,children:[m(n,{name:`search`,size:18,className:`search-icon`}),m(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:g,"aria-label":g,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:r,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:M})]}),m(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&h(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&h(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,r,`”`]}),a.filter(e=>e.hits?.length).map((e,r)=>h(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&m(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{N+=1;let r=N;return h(`a`,{className:`wui-topsearch-hit${r===C?` is-active`:``}`,role:`option`,"aria-selected":r===C,id:`${t}-opt-${r}`,href:e.href,ref:e=>{D.current[r]=e},onClick:t=>s?.(e,t),children:[e.icon&&m(`span`,{className:`wui-topsearch-hit-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-topsearch-hit-text`,children:[m(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&m(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${r}`)})]},e.label??r))]})})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{S as default};
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppAvatar.js";import{navMatchScore as i}from"../lib/navMatch.js";import{readShellCollapsed as a,writeShellCollapsed as o}from"../lib/shellCookie.js";import{initScrollEdges as s}from"@webority/ui-elements/helpers";import{useEffect as c,useId as l,useMemo as u,useRef as d,useState as f}from"react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";var g=99,_=4,v=5,y=[`prefix`,`exact`],b=[`comfortable`,`compact`],x=e=>e>g?`${g}+`:String(e);function S({groups:r=[],brand:i,sidebarStart:l,sidebarStartCompact:p,sidebarFooter:g,topbarStart:_,topbarEnd:v,footer:y,children:x,collapsed:S,onCollapsedChange:E,noSidebar:O=!1,density:j=`comfortable`,navLabel:N=`Main navigation`,linkComponent:P,currentPath:F,rememberCollapsed:I=!1,collapsedCookie:L=`wui-shell-collapsed`,tabBarLabel:R=`Quick navigation`,moreLabel:z=`More`,userMenu:B,notifications:V,search:H,className:U=``,...W}){t(`AppShell`,W),e(`AppShell`,`density`,j,b);let[G,K]=f(()=>I&&S===void 0&&typeof document<`u`?a(L)??!1:!1),[q,J]=f(!1),[Y,ee]=f(!1),X=d(null),Z=S??G,te=()=>{let e=!Z;S===void 0&&K(e),I&&o(e,L),E?.(e)},Q=u(()=>C(r,F),[r,F]),$=O?null:w(Q);return c(()=>{let e=()=>ee(window.scrollY>4);return e(),window.addEventListener(`scroll`,e,{passive:!0}),()=>window.removeEventListener(`scroll`,e)},[]),c(()=>{s()},[]),c(()=>{let e=X.current,t=e?.querySelector(`.app-nav-item[aria-current="page"]`);if(!e||!t)return;let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();n.top<r.top?e.scrollTop-=r.top-n.top:n.bottom>r.bottom&&(e.scrollTop+=n.bottom-r.bottom)},[]),c(()=>{if(!q)return;let e=e=>{e.key===`Escape`&&J(!1)};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[q]),h(`div`,{className:[`app-shell`,Z?`collapsed`:``,O?`no-sidebar`:``,q?`mobile-open`:``,U].filter(Boolean).join(` `),"data-density":j===`compact`?`compact`:void 0,...W,children:[m(`a`,{className:`wui-skip-link`,href:`#main-content`,children:`Skip to content`}),h(`aside`,{className:`app-sidebar`,children:[i&&m(`div`,{className:`app-sidebar-brand`,children:i}),l&&m(`div`,{className:`app-sidebar-start`,children:l}),p&&m(`div`,{className:`app-sidebar-start-compact`,children:p}),m(`nav`,{className:`app-sidebar-scroll`,"aria-label":N,ref:X,children:Q.map((e,t)=>h(`div`,{className:`app-nav-group`,children:[e.label&&m(`div`,{className:`app-nav-group-label`,children:e.label}),e.items.map(e=>m(D,{item:e,linkComponent:P,onNavigate:()=>J(!1)},e.key??e.href??e.label)),e.after&&m(`div`,{className:`wui-nav-group-after`,children:e.after})]},e.label??`group-${t}`))}),g&&m(`div`,{className:`app-sidebar-foot`,children:g}),!O&&m(`button`,{type:`button`,className:`app-sidebar-toggle`,onClick:te,"aria-label":Z?`Expand navigation`:`Collapse navigation`,"aria-expanded":!Z,children:m(n,{name:`chevrons-left`,size:20})})]}),h(`div`,{className:`app-main`,children:[h(`header`,{className:`app-topbar${Y?` scrolled`:``}`,children:[h(`div`,{className:`app-topbar-start`,children:[m(`button`,{type:`button`,className:`app-topbar-menu`,onClick:()=>J(!0),"aria-label":`Open navigation`,"aria-expanded":q,children:m(n,{name:`menu`,size:18})}),_,H&&m(M,{config:H})]}),h(`div`,{className:`app-topbar-end`,children:[v,V&&m(A,{config:V}),B&&m(k,{config:B,linkComponent:P})]})]}),m(`main`,{className:`app-content`,id:`main-content`,children:x}),y&&m(`footer`,{className:`app-footer`,children:y})]}),$&&h(`nav`,{className:`wui-tabbar`,"aria-label":R,children:[$.tabs.map(e=>m(T,{tab:e,linkComponent:P},e.key??e.href)),$.hasMore&&h(`button`,{type:`button`,className:`wui-tabbar-item${$.moreActive?` active`:``}`,onClick:()=>J(!0),children:[m(`span`,{className:`wui-tabbar-icon`,children:m(n,{name:`more`,size:24})}),m(`span`,{className:`wui-tabbar-label`,children:z})]})]}),m(`button`,{type:`button`,className:`app-scrim`,onClick:()=>J(!1),"aria-label":`Close navigation`,tabIndex:q?0:-1})]})}function C(t,n){let r=e=>(e??[]).map(e=>Array.isArray(e.children)?{...e,children:r(e.children)}:{...e}).filter(e=>(e.children?.length??0)>0||!!e.href),a=t.map(e=>({...e,items:r(e.items)})).filter(e=>e.items.length>0),o=[],s=e=>{for(let t of e)o.push(t),t.children&&s(t.children)};for(let e of a)s(e.items);for(let t of o)e(`AppShell`,`match`,t.match,y);let c=null;if(n!=null&&!o.some(e=>e.active===!0)){let e=-1;for(let t of o){if(t.active!=null||t.children?.length&&!t.href)continue;let r=i(n,t.href,{exact:t.match===`exact`,also:t.matchAlso});r>e&&(e=r,c=t)}}for(let e of o)e.active=e.active??e===c;return a}function w(e){let t=[],n=e=>{for(let r of e)r.children?.length?n(r.children):t.push(r)};for(let t of e)n(t.items);let r=t.filter(e=>e.tab);if(r.length===0)return null;let i=r.length<t.length,a=i?_:v;if(r.length>a)throw Error(`<AppShell>: ${r.length} items carry tab: true, but the phone tab bar holds ${a} (${i?`4 plus More, because other items exist`:`5 when every item is a tab`}). Flag fewer items.`);return{tabs:r,hasMore:i,moreActive:t.some(e=>!e.tab&&e.active)}}function T({tab:e,linkComponent:t}){let r=`wui-tabbar-item${e.active?` active`:``}`,i=h(p,{children:[e.icon&&m(`span`,{className:`wui-tabbar-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:24}):e.icon}),m(`span`,{className:`wui-tabbar-label`,children:e.tabLabel??e.label}),e.badge!=null&&m(`span`,{className:`wui-tabbar-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge})]}),a=e.active?`page`:void 0;return t?m(t,{className:r,to:e.href,"aria-current":a,children:i}):m(`a`,{className:r,href:e.href,"aria-current":a,children:i})}function E(e){for(let t of e){if(t.active)return t;let e=t.children?.length?E(t.children):void 0;if(e)return e}}function D({item:e,linkComponent:t,onNavigate:r,depth:i=0}){let a=i>0,o=i>1?{"--wui-nav-depth":i}:void 0,s=Array.isArray(e.children)&&e.children.length>0,l=s?E(e.children):void 0,u=!!l,d=l?l.key??l.href??l.label:null,[g,_]=f(u);c(()=>{d!=null&&_(!0)},[d]);let v=typeof e.label==`string`?e.label:void 0,y=!a&&e.icon&&m(`span`,{className:`app-nav-icon`,children:typeof e.icon==`string`?m(n,{name:e.icon,size:22}):e.icon}),b=e.badge!=null&&m(`span`,{className:`app-nav-badge${e.badgeTone?` tone-${e.badgeTone}`:``}`,children:e.badge}),x=h(p,{children:[y,m(`span`,{className:`app-nav-text`,children:e.label}),b,e.trailingIcon&&m(`span`,{className:`app-nav-trailing`,children:typeof e.trailingIcon==`string`?m(n,{name:e.trailingIcon,size:16}):e.trailingIcon})]}),S=e.active?`page`:void 0;if(s){let s=m(`div`,{className:`app-nav-sub${g?` expanded`:``}`,inert:!g,"aria-hidden":!g||void 0,children:m(`div`,{className:`app-nav-sub-inner`,children:e.children.map(e=>m(D,{item:e,linkComponent:t,onNavigate:r,depth:i+1},e.key??e.href))})});if(e.href){let i=t?m(t,{className:`wui-nav-split-link`,to:e.href,"aria-current":S,onClick:r,children:x}):m(`a`,{className:`wui-nav-split-link`,href:e.href,"aria-current":S,onClick:r,children:x});return h(p,{children:[h(`div`,{className:`app-nav-item has-children wui-nav-split${a?` app-nav-subitem`:``}${u||e.active?` active`:``}`,style:o,"data-label":v,children:[i,m(`button`,{type:`button`,className:`app-nav-caret wui-nav-split-toggle`,"aria-expanded":g,"aria-label":`Show or hide ${v??``} pages`,onClick:()=>_(e=>!e),children:m(n,{name:`chevron-right`,size:16})})]}),s]})}return h(p,{children:[h(`button`,{type:`button`,className:`app-nav-item${a?` app-nav-subitem`:``} has-children${u?` active`:``}`,style:o,"aria-expanded":g,"data-label":v,onClick:()=>_(e=>!e),children:[y,m(`span`,{className:`app-nav-text`,children:e.label}),b,m(`span`,{className:`app-nav-caret`,children:m(n,{name:`chevron-right`,size:16})})]}),s]})}let C=`app-nav-item${a?` app-nav-subitem`:``}${e.active?` active`:``}`;return t?m(t,{className:C,style:o,to:e.href,"aria-current":S,"data-label":v,onClick:r,children:x}):m(`a`,{className:C,style:o,href:e.href,"aria-current":S,"data-label":v,onClick:r,children:x})}function O(){let[e,t]=f(!1),n=d(null);return c(()=>{if(!e)return;let r=e=>{n.current?.contains(e.target)||t(!1)},i=e=>{e.key===`Escape`&&(t(!1),n.current?.querySelector(`button`)?.focus())};return document.addEventListener(`mousedown`,r),document.addEventListener(`keydown`,i),()=>{document.removeEventListener(`mousedown`,r),document.removeEventListener(`keydown`,i)}},[e]),{open:e,setOpen:t,ref:n}}function k({config:e,linkComponent:t}){let i=l(),{open:a,setOpen:o,ref:s}=O(),{name:c,role:u,photo:d,profileHref:f,profileLabel:g=`My profile`,onLogout:_,logoutAction:v,logoutLabel:y=`Sign out`,items:b=[]}=e;if(!c)throw Error(`<AppShell> userMenu.name is required; the trigger and the avatar are named from it.`);let x=()=>o(!1),S=(e,n,r,i)=>t?m(t,{className:`dropdown-item`,to:e,onClick:i,children:n},r):m(`a`,{className:`dropdown-item`,href:e,onClick:i,children:n},r),C=h(p,{children:[m(n,{name:`log-out`,size:18}),y]});return h(`div`,{className:`dropdown wui-usermenu`,ref:s,children:[h(`button`,{type:`button`,id:i,className:`wui-usermenu-trigger`,"aria-expanded":a,"aria-label":`Account menu for ${c}`,onClick:()=>o(e=>!e),children:[m(r,{name:c,src:d,tone:`auto`}),h(`span`,{className:`wui-usermenu-text`,children:[m(`span`,{className:`wui-usermenu-name`,children:c}),u&&m(`span`,{className:`wui-usermenu-role`,children:u})]}),m(n,{name:`chevron-down`,size:14,className:`wui-usermenu-caret`})]}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-usermenu-menu${a?` show`:``}`,"aria-labelledby":i,"data-bs-popper":a?`static`:void 0,children:[h(`div`,{className:`wui-usermenu-head`,children:[m(r,{name:c,src:d,size:`lg`,tone:`auto`}),h(`div`,{className:`wui-usermenu-who`,children:[m(`div`,{className:`wui-usermenu-name`,children:c}),u&&m(`div`,{className:`wui-usermenu-role`,children:u})]})]}),f&&S(f,h(p,{children:[m(n,{name:`user`,size:18}),g]}),void 0,x),b.map(e=>{if(e.divider)return m(`hr`,{className:`dropdown-divider`},e.key);let t=h(p,{children:[e.icon&&m(n,{name:e.icon,size:18}),e.label]}),r=()=>{e.onClick?.(),x()};return e.href?S(e.href,t,e.key,r):m(`button`,{type:`button`,className:`dropdown-item`,onClick:r,children:t},e.key)}),v?m(`form`,{method:`post`,action:v,className:`wui-usermenu-logout`,children:m(`button`,{type:`submit`,className:`dropdown-item danger`,children:C})}):_&&m(`button`,{type:`button`,className:`dropdown-item danger`,onClick:()=>{x(),_()},children:C})]})]})}function A({config:e}){let t=l(),{open:r,setOpen:i,ref:a}=O(),{unread:o=0,items:s,loading:u=!1,onOpen:g,onMarkAllRead:_,viewAllHref:v,label:y=`Notifications`,emptyText:b=`You are all caught up.`}=e,[S,C]=f(``),w=d(o);c(()=>{w.current!==o&&(w.current=o,C(o===0?`No unread notifications`:`${x(o)} unread notifications`))},[o]);let T=null;return s?.length?T=m(`div`,{className:`wui-bell-items`,children:s.map((e,t)=>{let r=`wui-bell-item${e.read?` wui-bell-item-read`:``}`,i=h(p,{children:[m(`span`,{className:`wui-bell-dot`,"aria-hidden":`true`}),e.icon&&m(`span`,{className:`wui-bell-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-bell-body`,children:[!e.read&&m(`span`,{className:`visually-hidden`,children:`Unread: `}),m(`span`,{className:`wui-bell-item-title`,children:e.title}),e.time&&m(`span`,{className:`wui-bell-when`,children:e.time})]})]});return e.href?m(`a`,{className:r,href:e.href,"data-id":e.id,children:i},e.id??t):m(`div`,{className:r,"data-id":e.id,children:i},e.id??t)})}):u?T=m(`div`,{className:`wui-bell-state`,children:`Loading…`}):s&&(T=m(`div`,{className:`wui-bell-state`,children:b})),h(`div`,{className:`dropdown wui-bell`,ref:a,children:[h(`button`,{type:`button`,id:t,className:`topbar-icon-btn wui-bell-trigger`,"aria-expanded":r,"aria-label":o===0?y:`${y}, ${x(o)} unread`,onClick:()=>{let e=!r;i(e),e&&g?.()},children:[m(n,{name:`notification`,size:20}),m(`span`,{className:`wui-bell-count`,"aria-hidden":`true`,hidden:o===0,children:x(o)})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:S}),h(`div`,{className:`dropdown-menu dropdown-menu-end wui-bell-menu${r?` show`:``}`,"aria-labelledby":t,"data-bs-popper":r?`static`:void 0,children:[h(`div`,{className:`wui-bell-head`,children:[m(`span`,{className:`wui-bell-title`,children:y}),_&&m(`button`,{type:`button`,className:`wui-bell-markall`,onClick:_,children:`Mark all read`})]}),m(`div`,{className:`wui-bell-list`,"aria-busy":u||void 0,children:T}),v&&m(`a`,{className:`wui-bell-foot`,href:v,children:`View all`})]})]})}var j=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));function M({config:e}){let t=l(),{value:r=``,onChange:i,results:a=null,loading:o=!1,onSelect:s,onSubmit:p,placeholder:g=`Search`}=e,[_,v]=f(!1),[y,b]=f(!1),[x,S]=f({results:null,index:-1}),C=x.results===a?x.index:-1,w=e=>S({results:a,index:e}),T=d(null),E=d(null),D=d([]),O=u(()=>(a??[]).flatMap(e=>e.hits??[]),[a]),k=a!=null&&!y,A=O.length;c(()=>{let e=e=>{e.key!==`/`||e.ctrlKey||e.metaKey||e.altKey||j(e.target)||(e.preventDefault(),v(!0),E.current?.focus())},t=e=>{T.current?.contains(e.target)||(b(!0),v(!1))};return document.addEventListener(`keydown`,e),document.addEventListener(`pointerdown`,t),()=>{document.removeEventListener(`keydown`,e),document.removeEventListener(`pointerdown`,t)}},[]);let M=e=>{if(e.key===`ArrowDown`||e.key===`ArrowUp`){if(!k||A===0)return;e.preventDefault(),w((C+(e.key===`ArrowDown`?1:-1)+A)%A)}else e.key===`Enter`?k&&C>=0&&D.current[C]?(e.preventDefault(),D.current[C].click()):p&&r.trim()!==``&&(e.preventDefault(),p(r.trim())):e.key===`Escape`&&(k?(e.preventDefault(),b(!0)):_&&(e.preventDefault(),v(!1)))},N=-1;return D.current=[],h(`div`,{className:`wui-topsearch${_?` is-open`:``}${o?` is-loading`:``}`,ref:T,children:[m(`button`,{type:`button`,className:`topbar-icon-btn wui-topsearch-open`,"aria-label":g,"aria-expanded":_,"aria-controls":`${t}-panel`,onClick:()=>{let e=!_;v(e),e&&E.current?.focus()},children:m(n,{name:`search`,size:20})}),h(`div`,{className:`wui-topsearch-panel`,id:`${t}-panel`,children:[h(`div`,{className:`search-wrap`,children:[m(n,{name:`search`,size:18,className:`search-icon`}),m(`input`,{ref:E,type:`search`,className:`form-control input search-input`,id:`${t}-input`,placeholder:g,"aria-label":g,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":k,"aria-controls":`${t}-list`,"aria-activedescendant":k&&C>=0?`${t}-opt-${C}`:void 0,autoComplete:`off`,value:r,onChange:e=>{b(!1),i?.(e.target.value)},onKeyDown:M})]}),m(`div`,{className:`wui-topsearch-results`,id:`${t}-list`,role:`listbox`,"aria-label":`Search results`,hidden:!k,children:k&&h(`div`,{className:`wui-topsearch-groups`,role:`presentation`,children:[A===0&&h(`div`,{className:`wui-topsearch-empty`,role:`option`,"aria-disabled":`true`,"aria-selected":`false`,children:[`No results for “`,r,`”`]}),a.filter(e=>e.hits?.length).map((e,r)=>h(`div`,{className:`wui-topsearch-group`,role:`group`,"aria-label":e.label??``,children:[e.label&&m(`div`,{className:`wui-topsearch-group-label`,role:`presentation`,children:e.label}),e.hits.map(e=>{N+=1;let r=N;return h(`a`,{className:`wui-topsearch-hit${r===C?` is-active`:``}`,role:`option`,"aria-selected":r===C,id:`${t}-opt-${r}`,href:e.href,ref:e=>{D.current[r]=e},onClick:t=>s?.(e,t),children:[e.icon&&m(`span`,{className:`wui-topsearch-hit-icon`,children:m(n,{name:e.icon,size:18})}),h(`span`,{className:`wui-topsearch-hit-text`,children:[m(`span`,{className:`wui-topsearch-hit-title`,children:e.title}),e.subtitle&&m(`span`,{className:`wui-topsearch-hit-sub`,children:e.subtitle})]})]},`${e.href}-${r}`)})]},e.label??r))]})})]}),m(`span`,{className:`visually-hidden`,"aria-live":`polite`,children:k?A===0?`No results`:`${A} ${A===1?`result`:`results`}`:``})]})}export{S as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useEffect as e,useRef as t}from"react";import{jsx as n}from"react/jsx-runtime";var r=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function i({triggerRef:i}){let a=t(null);return e(()=>{let e=i.current??document.activeElement;return a.current?.parentElement?.querySelector(r)?.focus(),()=>e?.focus?.()},[i]),n(`span`,{ref:a,hidden:!0})}export{i as default};
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
* follows the density (32 / 28 / 24px).
|
|
33
33
|
* @param {boolean} [props.striped=false] Alternate-row shading in place of divider lines.
|
|
34
34
|
* @param {boolean} [props.flush=false] No wrapper padding above the column header row.
|
|
35
|
+
* @param {boolean} [props.rowDrag=false] Rows drag onto page elements marked data-wui-drop-target; a ticked row drags the whole selection. Fires wui:row-drop ({ keys, target }) on the wrap. Razor: row-drag.
|
|
35
36
|
* @param {string|number} [props.maxHeight] Caps the table's height; the body scrolls inside it with
|
|
36
37
|
* the header pinned. Without it there is no scroll box for the header to stick to.
|
|
37
38
|
* @param {string[]} [props.hiddenColumns] Keys of `hideable` columns to leave out (from useTableView).
|
|
@@ -53,7 +54,7 @@
|
|
|
53
54
|
* open, e.g. in a detail pane beside the table. That row gets `aria-current="true"` and the subtle
|
|
54
55
|
* primary background; it is separate from `rowStatus`'s edge bar and from selected (checkbox) rows.
|
|
55
56
|
* Razor: `active-row-key` against each row's `data-row-key`.
|
|
56
|
-
* @param {boolean} [props.selectable=false] Render a leading checkbox column.
|
|
57
|
+
* @param {boolean} [props.selectable=false] Render a leading checkbox column. Fires a bubbling `selectionchange` ({ selected, total, keys }) when the ticked count changes, as Razor does.
|
|
57
58
|
* @param {Set<string|number>} [props.selectedIds] Currently selected row keys.
|
|
58
59
|
* @param {(id: string|number) => void} [props.onToggleRow]
|
|
59
60
|
* @param {(checked: boolean) => void} [props.onToggleAll] Toggle all current rows.
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
* A sort or reorder of up to 200 rows glides each row to its new place; not under reduced motion, and not
|
|
91
92
|
* on a `virtual` table.
|
|
92
93
|
*/
|
|
93
|
-
export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, onSelectRange, renderExpanded, density, striped, flush, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, activeRowKey, resizableColumns, viewKey, groupBy, groupLabel, virtual, rowSaving, rowSaveError, ...rest }: {
|
|
94
|
+
export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, onSelectRange, renderExpanded, density, striped, flush, rowDrag, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, activeRowKey, resizableColumns, viewKey, groupBy, groupLabel, virtual, rowSaving, rowSaveError, ...rest }: {
|
|
94
95
|
columns: object[];
|
|
95
96
|
rows: object[];
|
|
96
97
|
rowKey?: (row: object, index: number) => string | number;
|
|
@@ -113,6 +114,7 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
|
|
|
113
114
|
density?: 'comfortable' | 'cozy' | 'compact';
|
|
114
115
|
striped?: boolean;
|
|
115
116
|
flush?: boolean;
|
|
117
|
+
rowDrag?: boolean;
|
|
116
118
|
maxHeight?: string | number;
|
|
117
119
|
hiddenColumns?: string[];
|
|
118
120
|
stackOnMobile?: boolean;
|
|
@@ -25,7 +25,7 @@ import "@webority/ui-elements/elements/date-range";
|
|
|
25
25
|
* @param {'sm'|'md'|'lg'} [props.size] Control height tier, matching AppInput.
|
|
26
26
|
* @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
|
|
27
27
|
* follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
|
|
28
|
-
* @param {(('today'|'last7Days'|'thisMonth'|'lastMonth'|'thisFinancialYear')|{ label: string, start: string, end: string })[]} [props.presets]
|
|
28
|
+
* @param {(('today'|'yesterday'|'last7Days'|'last30Days'|'thisMonth'|'lastMonth'|'thisFinancialYear')|{ label: string, start: string, end: string })[]} [props.presets]
|
|
29
29
|
* Quick ranges, listed beside the calendar (above it on a phone); picking one fills the range and
|
|
30
30
|
* closes the calendar. An item is a name, resolved against today in IST (`thisFinancialYear` runs
|
|
31
31
|
* 1 April to 31 March; `thisMonth` and `lastMonth` span the whole month), or `{ label, start, end }`
|
|
@@ -23,11 +23,13 @@ import "@webority/ui-elements/elements/drawer";
|
|
|
23
23
|
* @param {(index: number, percent: number) => void} [props.onSnapChange] Called when the sheet moves to another point.
|
|
24
24
|
* @param {boolean} [props.dismissible=true] Show the close button.
|
|
25
25
|
* @param {boolean} [props.staticBackdrop=false] The backdrop, Escape and a drag down no longer close it; only the close button or `open` can.
|
|
26
|
+
* @param {string} [props.confirmDiscard] Ask before closing while dirty: this text, with Discard and Keep editing in the footer.
|
|
27
|
+
* @param {boolean} [props.dirty=false] True while a field differs from its loaded value; the caller owns it.
|
|
26
28
|
* @param {import('react').ReactNode} [props.footer] Pinned below the scrolling body.
|
|
27
29
|
* @param {string} [props.className]
|
|
28
30
|
* @param {import('react').ReactNode} props.children
|
|
29
31
|
*/
|
|
30
|
-
export default function AppDrawer({ open, onClose, title, subtitle, ariaLabel, side, size, snapPoints, defaultSnap, onSnapChange, dismissible, staticBackdrop, footer, className, children, ...rest }: {
|
|
32
|
+
export default function AppDrawer({ open, onClose, title, subtitle, ariaLabel, side, size, snapPoints, defaultSnap, onSnapChange, dismissible, staticBackdrop, confirmDiscard, dirty, footer, className, children, ...rest }: {
|
|
31
33
|
open?: boolean;
|
|
32
34
|
onClose?: () => void;
|
|
33
35
|
title?: string;
|
|
@@ -40,6 +42,8 @@ export default function AppDrawer({ open, onClose, title, subtitle, ariaLabel, s
|
|
|
40
42
|
onSnapChange?: (index: number, percent: number) => void;
|
|
41
43
|
dismissible?: boolean;
|
|
42
44
|
staticBackdrop?: boolean;
|
|
45
|
+
confirmDiscard?: string;
|
|
46
|
+
dirty?: boolean;
|
|
43
47
|
footer?: import('react').ReactNode;
|
|
44
48
|
className?: string;
|
|
45
49
|
children: import('react').ReactNode;
|
|
@@ -19,9 +19,10 @@ import "@webority/ui-elements/elements/filter-popover";
|
|
|
19
19
|
*
|
|
20
20
|
* @param {object} props
|
|
21
21
|
* @param {{ key: string, label: string, type: 'enum'|'multiEnum'|'dateRange'|'text',
|
|
22
|
-
* options?: { value: string, label: string }[], allLabel?: string }[]} props.facets `options` fills an `enum` or `multiEnum`;
|
|
22
|
+
* options?: { value: string, label: string }[], allLabel?: string, presets?: string[] }[]} props.facets `options` fills an `enum` or `multiEnum`;
|
|
23
23
|
* one with no options draws nothing. `label` names the control for assistive technology and is its placeholder.
|
|
24
24
|
* `allLabel` names an `enum` facet's clearing segment ("All payments"; default "All"); a facet shown as a select ignores it.
|
|
25
|
+
* `presets` gives a `dateRange` facet quick ranges (today, yesterday, last7Days, last30Days, thisMonth, lastMonth, thisFinancialYear).
|
|
25
26
|
* @param {Record<string, string|string[]|{ from: string, to: string }>} props.value The current filters.
|
|
26
27
|
* @param {(key: string, value: string|string[]|{ from: string, to: string }) => void} props.onChange
|
|
27
28
|
* Called with the facet key and its new value. Clear all calls it once per active facet, with the empty value.
|
|
@@ -39,6 +40,7 @@ export default function AppFilterBar({ facets: allFacets, value, onChange, inlin
|
|
|
39
40
|
label: string;
|
|
40
41
|
}[];
|
|
41
42
|
allLabel?: string;
|
|
43
|
+
presets?: string[];
|
|
42
44
|
}[];
|
|
43
45
|
value: Record<string, string | string[] | {
|
|
44
46
|
from: string;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
* @param {import('react').ReactNode} [props.tools] Search, filters and display, before the actions (size "bar" only).
|
|
31
31
|
* @param {import('react').ReactNode} [props.meta] One short facts line or summary (size "bar" only).
|
|
32
32
|
* @param {"inline"|"below"} [props.metaPlacement="inline"] Where the meta line sits: inside the bar, or under it (size "bar" only).
|
|
33
|
-
* @param {string} [props.bulkFor] Id of the data table whose selection swaps views and tools for its bulk bar (size "bar" only).
|
|
33
|
+
* @param {string} [props.bulkFor] Id of the data table whose selection swaps views and tools for its bulk bar (size "bar" only). Ticking rows hides views and tools and shows the bulk slot with an N selected count; the table's own toolbar bulk bar stays hidden.
|
|
34
34
|
* @param {import('react').ReactNode} [props.bulk] Bulk actions shown in the bar while the table named by bulkFor has rows ticked (size "bar" only).
|
|
35
35
|
* @param {"sm"|"md"|"lg"|"bar"} [props.size="md"] Title / spacing scale. "bar" is one 40px row.
|
|
36
36
|
* @param {"start"|"center"} [props.align="start"] Centre the masthead — for empty states and wizards.
|
|
@@ -18,8 +18,14 @@
|
|
|
18
18
|
* opens it; pass an array for multiple (e.g. ['hover', 'focus']).
|
|
19
19
|
* @param {(show: boolean) => void} [props.onToggle] Callback fired when the panel opens/closes.
|
|
20
20
|
* @param {string} [props.className] Class on the popover panel.
|
|
21
|
+
* @param {boolean} [props.show] Controls the open state. When set, the panel follows it, and
|
|
22
|
+
* `onToggle` reports each request to change it.
|
|
23
|
+
* @param {'dialog'} [props.role] `dialog` names the panel after `title` or `labelledBy`, sets
|
|
24
|
+
* `aria-modal="false"`, and lets Escape close it.
|
|
25
|
+
* @param {string} [props.labelledBy] Id of the element that names a dialog panel; wins over `title`.
|
|
26
|
+
* @param {boolean} [props.autoFocus=false] Moves focus into the panel on open and back to the trigger on close.
|
|
21
27
|
*/
|
|
22
|
-
export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, ...rest }: {
|
|
28
|
+
export default function AppPopover({ trigger, children, title, placement, triggerType, onToggle, className, show, role, labelledBy, autoFocus, ...rest }: {
|
|
23
29
|
trigger: import('react').ReactElement;
|
|
24
30
|
children: import('react').ReactNode;
|
|
25
31
|
title?: string;
|
|
@@ -27,4 +33,8 @@ export default function AppPopover({ trigger, children, title, placement, trigge
|
|
|
27
33
|
triggerType?: 'click' | 'hover' | 'focus' | ('click' | 'hover' | 'focus')[];
|
|
28
34
|
onToggle?: (show: boolean) => void;
|
|
29
35
|
className?: string;
|
|
36
|
+
show?: boolean;
|
|
37
|
+
role?: 'dialog';
|
|
38
|
+
labelledBy?: string;
|
|
39
|
+
autoFocus?: boolean;
|
|
30
40
|
}): import("react").JSX.Element;
|
|
@@ -9,11 +9,14 @@
|
|
|
9
9
|
* @param {number} [props.iconSize=18]
|
|
10
10
|
* @param {'sm'|'lg'} [props.size] Control size around the default.
|
|
11
11
|
* @param {boolean} [props.loading=false] Swap the leading glyph for a spinner while a search is in flight.
|
|
12
|
+
* @param {boolean} [props.collapsible=false] Render as an icon button labelled by ariaLabel (or placeholder) that opens the field on click or "/"; Escape or leaving an empty field folds it, and a value keeps it open.
|
|
12
13
|
* @param {boolean} [props.disabled=false]
|
|
13
14
|
* @param {string} [props.className]
|
|
15
|
+
* @param {string} [props.form] Id of the filter form this search joins, so it submits with the filters.
|
|
16
|
+
* @param {(event: import('react').KeyboardEvent<HTMLInputElement>) => void} [props.onKeyDown] Called for every key in the field, before a collapsible search folds on Escape.
|
|
14
17
|
*/
|
|
15
|
-
export default function AppSearch({ value, onChange, placeholder, ariaLabel, iconSize, size, loading, disabled, className, // extra classes on the wrapper
|
|
16
|
-
...rest }: {
|
|
18
|
+
export default function AppSearch({ value, onChange, placeholder, ariaLabel, iconSize, size, loading, collapsible, disabled, className, // extra classes on the wrapper
|
|
19
|
+
form, onKeyDown, ...rest }: {
|
|
17
20
|
value: string;
|
|
18
21
|
onChange?: (value: string) => void;
|
|
19
22
|
placeholder?: string;
|
|
@@ -21,6 +24,9 @@ export default function AppSearch({ value, onChange, placeholder, ariaLabel, ico
|
|
|
21
24
|
iconSize?: number;
|
|
22
25
|
size?: 'sm' | 'lg';
|
|
23
26
|
loading?: boolean;
|
|
27
|
+
collapsible?: boolean;
|
|
24
28
|
disabled?: boolean;
|
|
25
29
|
className?: string;
|
|
30
|
+
form?: string;
|
|
31
|
+
onKeyDown?: (event: import('react').KeyboardEvent<HTMLInputElement>) => void;
|
|
26
32
|
}): import("react").JSX.Element;
|
|
@@ -6,6 +6,9 @@ export type NavItemShape = {
|
|
|
6
6
|
* product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
|
|
7
7
|
*/
|
|
8
8
|
icon?: string | import('react').ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* With `children`, the label link goes here and the chevron alone opens the sub-list.
|
|
11
|
+
*/
|
|
9
12
|
href: string;
|
|
10
13
|
/**
|
|
11
14
|
* A count or short status at the row's end.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Rendered inside an open panel: mounting it moves focus to the panel's first focusable element, and
|
|
3
|
+
* unmounting it (close, Escape or an outside click) hands focus back to whatever opened the panel,
|
|
4
|
+
* which is the trigger for a click.
|
|
5
|
+
* @internal not exported from the package barrel
|
|
6
|
+
*/
|
|
7
|
+
export default function FocusPanel({ triggerRef }: {
|
|
8
|
+
triggerRef: any;
|
|
9
|
+
}): import("react").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.68.0",
|
|
4
4
|
"description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"type": "module",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@webority/
|
|
31
|
-
"@webority/
|
|
30
|
+
"@webority/ui-elements": "0.68.0",
|
|
31
|
+
"@webority/theme": "0.68.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@webority/analytics": "^0.23.0",
|