@webority/ui-react 0.67.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/AppSearch.js +1 -1
- package/dist/components/AppShell.js +1 -1
- 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/AppSearch.d.ts +8 -2
- package/dist/types/components/AppShell.d.ts +3 -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"./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};
|
|
@@ -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.
|
|
@@ -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.
|
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",
|