@webority/ui-react 0.51.3 → 0.52.0

package/dist/components/AppDataTable.js

@@ -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,useRef as ee,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`comfortable`,`cozy`,`compact`];function p(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function te(e){return e==null||e===``?`-`:typeof e==`boolean`?String(e):e}function m({columns:m,rows:h,rowKey:g=e=>e.id,sort:_,onSort:v,loading:y=!1,skeletonRows:b=5,empty:ne=`No records found.`,emptyFiltered:x,sourceCount:re,rowActions:S,rowActionsLabel:C,pagination:w,ariaLabel:T,className:ie=``,wrapperClassName:ae=``,selectable:E=!1,selectedIds:D,onToggleRow:O,onToggleAll:k,renderExpanded:A,density:j=`comfortable`,striped:oe=!1,maxHeight:M,stickyFirstColumn:se=!1,stackOnMobile:N=!1,hiddenColumns:P,rowStatus:F,rowHref:I,onRowClick:L,...R}){t(`AppDataTable`,R);let z=P?.length?new Set(P):null;m=z?m.filter(e=>!(e.hideable&&z.has(e.key))):m,e(`AppDataTable`,`density`,j,f);let B=[`table table-ledger`,j===`cozy`||j===`compact`?`wui-table-${j}`:``,oe?`wui-table-striped`:``,se?`wui-table-sticky-first`:``,N?`wui-table-stack`:``,ie].filter(Boolean).join(` `),V=typeof A==`function`,[H,U]=c(()=>new Set),W=e=>U(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),G=m.some(e=>typeof e.footer==`function`),K=typeof I==`function`||typeof L==`function`,ce=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),q=(e,t)=>{if(ce(t)||(L&&L(e),!I))return;let n=I(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},J=M!==void 0,le=[`table-wrap`,J?`wui-table-scroll`:``,ae].filter(Boolean).join(` `),ue=J?{maxHeight:M}:void 0,Y=Math.max(1,m.length+ +!!S+ +!!E+ +!!V),X=E&&h?h.reduce((e,t,n)=>e+ +!!D?.has(g(t,n)),0):0,Z=E&&h&&h.length>0&&X===h.length,de=X>0&&!Z,fe=e=>{e&&(e.indeterminate=de)},Q=ee(null);s(()=>{let e=Q.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())};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t);let n=a(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),n()}},[]);let $=x!==void 0&&re>0?x:ne;return d(l,{children:[d(`div`,{ref:Q,className:le,style:ue,tabIndex:0,...R,children:[d(`table`,{className:B,"aria-label":T,children:[u(`thead`,{children:d(`tr`,{children:[V&&u(`th`,{className:`wui-expand-cell`,children:u(`span`,{className:`visually-hidden`,children:`Expand`})}),E&&u(`th`,{className:`wui-select-cell`,children:u(`input`,{ref:fe,type:`checkbox`,className:`wui-check`,checked:Z,onChange:e=>k?.(e.target.checked),"aria-label":`Select all rows`})}),m.map((e,t)=>{let r=!!(e.sortable&&v),i=_&&_.key===e.key,a=e.align===`num`||e.align===`end`,o=r&&u(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:u(n,{name:`chevrons-up-down`,size:14})});return d(`th`,{className:(r?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+p(e.align),style:e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0,tabIndex:r?0:void 0,"aria-sort":i?_.dir===`asc`?`ascending`:`descending`:r?`none`:void 0,onClick:r?()=>v(e.key):void 0,onKeyDown:r?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),v(e.key))}:void 0,children:[a&&o,e.label,!a&&o]},e.key)}),S&&(C?u(`th`,{className:`wui-cell-end`,children:C}):u(`th`,{className:`wui-cell-end`,children:u(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),u(`tbody`,{children:y?u(r,{rows:b,cols:Y}):h?.length?h.map((e,t)=>{let r=g(e,t),i=V&&H.has(r),a=String(r).replace(/[^a-z0-9]/gi,`_`);return d(o,{children:[d(`tr`,{className:[E&&D?.has(r)?`is-selected`:``,K?`wui-row-link`:``].filter(Boolean).join(` `)||void 0,"data-status":F?.(e)||void 0,"data-href":I?.(e)||void 0,tabIndex:K?0:void 0,onClick:K?t=>q(e,t):void 0,onAuxClick:K&&I?t=>t.button===1&&q(e,t):void 0,onKeyDown:K?t=>{t.key===`Enter`&&t.target===t.currentTarget&&q(e,t)}:void 0,children:[V&&u(`td`,{className:`wui-expand-cell`,children:u(`button`,{type:`button`,className:`wui-expand-toggle${i?` is-open`:``}`,"aria-expanded":i,"aria-controls":i?`${a}-expanded`:void 0,"aria-label":i?`Collapse row`:`Expand row`,onClick:()=>W(r),children:u(n,{name:`chevron-down`,size:16})})}),E&&u(`td`,{className:`wui-select-cell`,children:u(`input`,{type:`checkbox`,className:`wui-check`,checked:D?.has(r)||!1,onChange:()=>O?.(r),"aria-label":`Select row`})}),m.map((t,n)=>u(`td`,{className:(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+p(t.align)+(t.cellClassName?` ${t.cellClassName}`:``),style:t.cellStyle,"data-label":N&&typeof t.label==`string`?t.label:void 0,children:t.render?t.render(e):te(e[t.key])},t.key)),S&&u(`td`,{children:u(`div`,{className:`u-row-actions`,children:S(e)})})]}),i&&u(`tr`,{className:`wui-row-expanded`,children:u(`td`,{id:`${a}-expanded`,colSpan:Y,children:A(e)})})]},r)}):null}),G&&!y&&h?.length>0&&u(`tfoot`,{children:d(`tr`,{children:[V&&u(`td`,{className:`wui-expand-cell`}),E&&u(`td`,{className:`wui-select-cell`}),m.map((e,t)=>u(`td`,{className:(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+p(e.align),children:e.footer?e.footer(h):null},e.key)),S&&u(`td`,{})]})})]}),!y&&!h?.length&&u(`div`,{className:`tbl-empty-block`,children:typeof $==`string`?u(`div`,{className:`tbl-empty-plain`,children:$}):$})]}),w&&w.total>0&&u(i,{page:w.page,totalPages:w.totalPages,pageSize:w.pageSize,onPageChange:w.setPage,onPageSizeChange:w.setPageSize,pageSizes:w.pageSizes,mode:w.mode})]})}export{m as default};
+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,useRef as ee,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";var te=[`comfortable`,`cozy`,`compact`];function f(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function ne(e){return e==null||e===``?`-`:typeof e==`boolean`?String(e):e}function p({columns:p,rows:m,rowKey:h=e=>e.id,sort:g,onSort:_,loading:v=!1,skeletonRows:y=5,empty:b=`No records found.`,emptyFiltered:x,sourceCount:re,rowActions:S,rowActionsLabel:C,pagination:w,ariaLabel:T,className:ie=``,wrapperClassName:E=``,selectable:D=!1,selectedIds:O,onToggleRow:k,onToggleAll:ae,renderExpanded:A,density:j=`comfortable`,striped:oe=!1,maxHeight:M,stickyFirstColumn:se=!1,stickyActions:N=!1,stackOnMobile:P=!1,hiddenColumns:F,rowStatus:I,rowHref:L,onRowClick:R,...z}){t(`AppDataTable`,z);let B=F?.length?new Set(F):null;p=B?p.filter(e=>!(e.hideable&&B.has(e.key))):p,e(`AppDataTable`,`density`,j,te);let V=[`table table-ledger`,j===`cozy`||j===`compact`?`wui-table-${j}`:``,oe?`wui-table-striped`:``,se?`wui-table-sticky-first`:``,N?`wui-table-sticky-actions`:``,P?`wui-table-stack`:``,ie].filter(Boolean).join(` `),H=typeof A==`function`,[U,W]=c(()=>new Set),G=e=>W(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),ce=p.some(e=>typeof e.footer==`function`),K=typeof L==`function`||typeof R==`function`,le=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),q=(e,t)=>{if(le(t)||(R&&R(e),!L))return;let n=L(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},J=M!==void 0,ue=[`table-wrap`,J?`wui-table-scroll`:``,E].filter(Boolean).join(` `),de=J?{maxHeight:M}:void 0,Y=Math.max(1,p.length+ +!!S+ +!!D+ +!!H),X=D&&m?m.reduce((e,t,n)=>e+ +!!O?.has(h(t,n)),0):0,Z=D&&m&&m.length>0&&X===m.length,fe=X>0&&!Z,pe=e=>{e&&(e.indeterminate=fe)},Q=ee(null);s(()=>{let e=Q.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())};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t);let n=a(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),n()}},[]);let $=x!==void 0&&re>0?x:b;return d(l,{children:[d(`div`,{ref:Q,className:ue,style:de,tabIndex:0,...z,children:[d(`table`,{className:V,"aria-label":T,children:[u(`thead`,{children:d(`tr`,{children:[H&&u(`th`,{className:`wui-expand-cell`,children:u(`span`,{className:`visually-hidden`,children:`Expand`})}),D&&u(`th`,{className:`wui-select-cell`,children:u(`input`,{ref:pe,type:`checkbox`,className:`wui-check`,checked:Z,onChange:e=>ae?.(e.target.checked),"aria-label":`Select all rows`})}),p.map((e,t)=>{let r=!!(e.sortable&&_),i=g&&g.key===e.key,a=e.align===`num`||e.align===`end`,o=r&&u(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:u(n,{name:`chevrons-up-down`,size:14})});return d(`th`,{className:(r?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+f(e.align),style:e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0,tabIndex:r?0:void 0,"aria-sort":i?g.dir===`asc`?`ascending`:`descending`:r?`none`:void 0,onClick:r?()=>_(e.key):void 0,onKeyDown:r?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),_(e.key))}:void 0,children:[a&&o,e.label,!a&&o]},e.key)}),S&&(C?u(`th`,{className:`wui-cell-end`,children:C}):u(`th`,{className:`wui-cell-end`,children:u(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),u(`tbody`,{children:v?u(r,{rows:y,cols:Y}):m?.length?m.map((e,t)=>{let r=h(e,t),i=H&&U.has(r),a=String(r).replace(/[^a-z0-9]/gi,`_`);return d(o,{children:[d(`tr`,{className:[D&&O?.has(r)?`is-selected`:``,K?`wui-row-link`:``].filter(Boolean).join(` `)||void 0,"data-status":I?.(e)||void 0,"data-href":L?.(e)||void 0,tabIndex:K?0:void 0,onClick:K?t=>q(e,t):void 0,onAuxClick:K&&L?t=>t.button===1&&q(e,t):void 0,onKeyDown:K?t=>{t.key===`Enter`&&t.target===t.currentTarget&&q(e,t)}:void 0,children:[H&&u(`td`,{className:`wui-expand-cell`,children:u(`button`,{type:`button`,className:`wui-expand-toggle${i?` is-open`:``}`,"aria-expanded":i,"aria-controls":i?`${a}-expanded`:void 0,"aria-label":i?`Collapse row`:`Expand row`,onClick:()=>G(r),children:u(n,{name:`chevron-down`,size:16})})}),D&&u(`td`,{className:`wui-select-cell`,children:u(`input`,{type:`checkbox`,className:`wui-check`,checked:O?.has(r)||!1,onChange:()=>k?.(r),"aria-label":`Select row`})}),p.map((t,n)=>u(`td`,{className:(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+f(t.align)+(t.cellClassName?` ${t.cellClassName}`:``),style:t.cellStyle,"data-label":P&&typeof t.label==`string`?t.label:void 0,children:t.render?t.render(e):ne(e[t.key])},t.key)),S&&u(`td`,{children:u(`div`,{className:`u-row-actions`,children:S(e)})})]}),i&&u(`tr`,{className:`wui-row-expanded`,children:u(`td`,{id:`${a}-expanded`,colSpan:Y,children:A(e)})})]},r)}):null}),ce&&!v&&m?.length>0&&u(`tfoot`,{children:d(`tr`,{children:[H&&u(`td`,{className:`wui-expand-cell`}),D&&u(`td`,{className:`wui-select-cell`}),p.map((e,t)=>u(`td`,{className:(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+f(e.align),children:e.footer?e.footer(m):null},e.key)),S&&u(`td`,{})]})})]}),!v&&!m?.length&&u(`div`,{className:`tbl-empty-block`,children:typeof $==`string`?u(`div`,{className:`tbl-empty-plain`,children:$}):$})]}),w&&w.total>0&&u(i,{page:w.page,totalPages:w.totalPages,pageSize:w.pageSize,onPageChange:w.setPage,onPageSizeChange:w.setPageSize,pageSizes:w.pageSizes,mode:w.mode})]})}export{p as default};

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

@@ -39,6 +39,8 @@
  *   column on top, then "label: value" lines from the column labels, actions at the bottom.
  * @param {boolean} [props.stickyFirstColumn=false] Pins the first column (and the select/expand
  *   column before it) while a wide table scrolls sideways.
+ * @param {boolean} [props.stickyActions=false] Pins the last column, where `rowActions` render, to the
+ *   end edge while a wide table scrolls sideways, so a row's actions stay in view in a narrow box.
  * @param {(row: object) => string} [props.rowHref] Makes the whole row open this URL on click or Enter
  *   (Ctrl/Cmd or middle click opens a new tab). Checkboxes, buttons, links and menus in the row keep
  *   their own behaviour. Razor: `data-href` on the <tr>.
@@ -53,7 +55,7 @@
  * @param {(row: object) => import('react').ReactNode} [props.renderExpanded] When given, each row
  *   gets a leading expand toggle; the returned content renders in a full-width row beneath it.
  */
-export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, ...rest }: {
+export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, density, striped, maxHeight, stickyFirstColumn, stickyActions, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, ...rest }: {
     columns: object[];
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
@@ -79,6 +81,7 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
     hiddenColumns?: string[];
     stackOnMobile?: boolean;
     stickyFirstColumn?: boolean;
+    stickyActions?: boolean;
     rowHref?: (row: object) => string;
     onRowClick?: (row: object) => void;
     rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.51.3",
+  "version": "0.52.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.51.3",
-    "@webority/ui-elements": "0.51.3"
+    "@webority/ui-elements": "0.52.0",
+    "@webority/theme": "0.52.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.21.0",