@verifiedinc-public/shared-ui-elements 11.1.0 → 11.1.2-beta.0

package/dist/components/DataTable/DataTable.context.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, MouseEvent, MutableRefObject, ReactNode, RefObject, Touc
 import { Cell, ColumnPinningPosition, Header, OnChangeFn, Row, Table } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
 import { DataTableActiveFilters, DataTableBidirectionalScroll, DataTableCellProps, DataTableData, DataTableIcons, DataTableRowContext } from './DataTable.types';
+import { DataTableExportColumn } from './DataTable.export';
 /** Where a floating panel opens and which of its top corners pins there. */
 export type DataTablePanelAnchor = {
     anchorPosition: {
@@ -55,6 +56,7 @@ export interface DataTableContextValue<TData extends DataTableData> {
     enableColumnMenu: boolean;
     enableExport: boolean;
     exportFilename: string;
+    additionalExportColumns?: ReadonlyArray<DataTableExportColumn<TData>>;
     disablePagination: boolean;
     pageSizeOptions: number[];
     footerLeft?: ReactNode;
@@ -63,6 +65,11 @@ export interface DataTableContextValue<TData extends DataTableData> {
     renderRow?: (context: DataTableRowContext<TData>) => ReactNode;
     filters: DataTableActiveFilters;
     onFiltersChange: OnChangeFn<DataTableActiveFilters>;
+    /** Consumer-rendered filter panel content, shown in place of the built-in operator
+     * panel. Can be used for custom/domain specific filters. */
+    renderFilterPanel?: () => ReactNode;
+    /** Active-filter count for the Filters button badge when using renderFilterPanel. */
+    activeFilterCount?: number;
     search: string;
     onSearchChange: OnChangeFn<string>;
     columnPanel: DataTableColumnPanelState;

package/dist/components/DataTable/DataTable.d.ts

@@ -5,4 +5,4 @@ import { DataTableData, DataTableProps } from './DataTable.types';
  * footer, floating panels) through DataTableProvider, and renders the
  * layout shell around them.
  */
-export declare function DataTable<TData extends DataTableData>({ data, columns, getRowId, renderRow, initialSorting, sorting: controlledSorting, onSortingChange, manualSorting, initialPageSize, pageSizeOptions, pagination: controlledPagination, onPaginationChange, manualPagination, rowCount, disableSorting, disablePagination, bidirectionalScroll, enableColumnResizing, enableColumnMenu, enableColumnPinning, showToolbar, enableExport, exportFilename, initialFilters, filters: controlledFilters, onFiltersChange, manualFiltering, initialSearch, search: controlledSearch, onSearchChange, initialColumnVisibility, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, footerLeft, estimateRowHeight, minWidth, maxHeight, tableLayout, icons, emptyMessage, isLoading, renderLoading, }: Readonly<DataTableProps<TData>>): import("react").JSX.Element;
+export declare function DataTable<TData extends DataTableData>({ data, columns, getRowId, renderRow, initialSorting, sorting: controlledSorting, onSortingChange, manualSorting, initialPageSize, pageSizeOptions, pagination: controlledPagination, onPaginationChange, manualPagination, rowCount, disableSorting, disablePagination, bidirectionalScroll, enableColumnResizing, enableColumnMenu, enableColumnPinning, pinFirstColumn, showToolbar, enableExport, exportFilename, additionalExportColumns, initialFilters, filters: controlledFilters, onFiltersChange, manualFiltering, renderFilterPanel, activeFilterCount, initialSearch, search: controlledSearch, onSearchChange, initialColumnVisibility, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, initialColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, footerLeft, estimateRowHeight, minWidth, maxHeight, tableLayout, icons, emptyMessage, isLoading, renderLoading, }: Readonly<DataTableProps<TData>>): import("react").JSX.Element;

package/dist/components/DataTable/DataTable.export.d.ts

@@ -2,6 +2,15 @@ import { Table } from '@tanstack/react-table';
 import { DataTableData } from './DataTable.types';
 /** Cell value shape carried into the export formats. */
 export type DataTableExportValue = string | number | boolean;
+/**
+ * An extra export-only column appended after the visible table columns, for data shown outside
+ * the grid (e.g. an expandable detail row) that should still land in the CSV / Excel / Print output.
+ * The consumer supplies the header and a per-row value extractor, the table has no knowledge of it.
+ */
+export interface DataTableExportColumn<TData extends DataTableData> {
+    header: string;
+    value: (row: TData) => DataTableExportValue;
+}
 /**
  * Snapshot of the displayed table used by every export format: the
  * filtered + sorted rows across every page and the visible accessor
@@ -24,7 +33,7 @@ export interface DataTableExportModel {
  * the loaded page is available). Display-only columns (no accessor, e.g.
  * expand chevrons) are skipped.
  */
-export declare function getDataTableExportModel<TData extends DataTableData>(table: Table<TData>): DataTableExportModel;
+export declare function getDataTableExportModel<TData extends DataTableData>(table: Table<TData>, additionalColumns?: ReadonlyArray<DataTableExportColumn<TData>>): DataTableExportModel;
 /** Downloads the export snapshot as `<filename>.csv`. */
 export declare function exportDataTableToCsv(model: DataTableExportModel, filename: string): void;
 /** Downloads the export snapshot as `<filename>.xlsx`. */

package/dist/components/DataTable/DataTable.export.mjs

@@ -1,8 +1,8 @@
-"use strict";import{getColumnLabel as y}from"./DataTable.utils.mjs";function b(e){return e==null?"":typeof e=="number"||typeof e=="boolean"?e:e instanceof Date?e.toLocaleString():typeof e=="object"?JSON.stringify(e):String(e)}function U(e){const n=e.getVisibleLeafColumns().filter(o=>o.accessorFn!==void 0),t=n.map(o=>{var r;const l=(r=o.parent)==null?void 0:r.columnDef.header;return typeof l=="string"?l:""});return{groupHeader:t.some(o=>o!=="")?t.map((o,r)=>r>0&&t[r-1]===o?"":o):void 0,header:n.map(o=>y(o)),rows:e.getPrePaginationRowModel().rows.map(o=>n.map(r=>b(o.getValue(r.id))))}}function x(e,n){const t=URL.createObjectURL(e),o=document.createElement("a");o.href=t,o.download=n,o.click(),URL.revokeObjectURL(t)}function w(e){const n=String(e);return/[",\n]/.test(n)?`"${n.replace(/"/g,'""')}"`:n}function v(e,n){const t=[...e.groupHeader?[e.groupHeader]:[],e.header,...e.rows].map(r=>r.map(w).join(",")),o=new Blob(["\uFEFF",t.join(`
-`)],{type:"text/csv;charset=utf-8;"});x(o,`${n}.csv`)}function f(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}function k(e){let n="",t=e+1;for(;t>0;)n=String.fromCharCode(65+(t-1)%26)+n,t=Math.floor((t-1)/26);return n}function T(e){return`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${[...e.groupHeader?[e.groupHeader]:[],e.header,...e.rows].map((n,t)=>{const o=n.map((r,l)=>{const s=`${k(l)}${t+1}`;return typeof r=="number"&&Number.isFinite(r)?`<c r="${s}"><v>${r}</v></c>`:typeof r=="boolean"?`<c r="${s}" t="b"><v>${r?1:0}</v></c>`:`<c r="${s}" t="inlineStr"><is><t xml:space="preserve">${f(String(r))}</t></is></c>`}).join("");return`<row r="${t+1}">${o}</row>`}).join("")}</sheetData></worksheet>`}const $=[{name:"[Content_Types].xml",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/></Types>'},{name:"_rels/.rels",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>'},{name:"xl/workbook.xml",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="Data" sheetId="1" r:id="rId1"/></sheets></workbook>'},{name:"xl/_rels/workbook.xml.rels",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/></Relationships>'}],D=(()=>{const e=new Uint32Array(256);for(let n=0;n<256;n++){let t=n;for(let o=0;o<8;o++)t=t&1?3988292384^t>>>1:t>>>1;e[n]=t>>>0}return e})();function R(e){let n=4294967295;for(let t=0;t<e.length;t++)n=D[(n^e[t])&255]^n>>>8;return(n^4294967295)>>>0}function C(e){const n=new TextEncoder,t=[],o=[];let r=0;for(const p of e){const m=n.encode(p.name),c=n.encode(p.content),g=R(c),i=new DataView(new ArrayBuffer(30));i.setUint32(0,67324752,!0),i.setUint16(4,20,!0),i.setUint16(6,2048,!0),i.setUint16(8,0,!0),i.setUint16(10,0,!0),i.setUint16(12,33,!0),i.setUint32(14,g,!0),i.setUint32(18,c.length,!0),i.setUint32(22,c.length,!0),i.setUint16(26,m.length,!0),i.setUint16(28,0,!0),t.push(new Uint8Array(i.buffer),m,c);const a=new DataView(new ArrayBuffer(46));a.setUint32(0,33639248,!0),a.setUint16(4,20,!0),a.setUint16(6,20,!0),a.setUint16(8,2048,!0),a.setUint16(10,0,!0),a.setUint16(12,0,!0),a.setUint16(14,33,!0),a.setUint32(16,g,!0),a.setUint32(20,c.length,!0),a.setUint32(24,c.length,!0),a.setUint16(28,m.length,!0),a.setUint32(42,r,!0),o.push(new Uint8Array(a.buffer),m),r+=30+m.length+c.length}const l=o.reduce((p,m)=>p+m.length,0),s=new DataView(new ArrayBuffer(22));s.setUint32(0,101010256,!0),s.setUint16(8,e.length,!0),s.setUint16(10,e.length,!0),s.setUint32(12,l,!0),s.setUint32(16,r,!0);const h=new Uint8Array(s.buffer),d=new Uint8Array(r+l+h.length);let u=0;for(const p of[...t,...o,h])d.set(p,u),u+=p.length;return d.buffer}function j(e,n){const t=C([...$,{name:"xl/worksheets/sheet1.xml",content:T(e)}]);x(new Blob([t],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),`${n}.xlsx`)}function F(e,n){const t=(l,s)=>`<tr>${l.map(h=>`<${s}${typeof h=="number"?' class="num"':""}>${f(String(h))}</${s}>`).join("")}</tr>`,o=[...e.groupHeader?[t(e.groupHeader,"th")]:[],t(e.header,"th")].join(""),r=e.rows.map(l=>t(l,"td")).join("");return`<!doctype html><html><head><meta charset="utf-8"><title>${f(n)}</title><style>
+"use strict";import{getColumnLabel as b}from"./DataTable.utils.mjs";function x(e){return e==null?"":typeof e=="number"||typeof e=="boolean"?e:e instanceof Date?e.toLocaleString():typeof e=="object"?JSON.stringify(e):String(e)}function U(e,n=[]){const t=e.getVisibleLeafColumns().filter(o=>o.accessorFn!==void 0),r=t.map(o=>{var s;const a=(s=o.parent)==null?void 0:s.columnDef.header;return typeof a=="string"?a:""});return{groupHeader:r.some(o=>o!=="")?r.map((o,s)=>s>0&&r[s-1]===o?"":o).concat(n.map(()=>"")):void 0,header:[...t.map(o=>b(o)),...n.map(o=>o.header)],rows:e.getPrePaginationRowModel().rows.map(o=>[...t.map(s=>x(o.getValue(s.id))),...n.map(s=>x(s.value(o.original)))])}}function y(e,n){const t=URL.createObjectURL(e),r=document.createElement("a");r.href=t,r.download=n,r.click(),URL.revokeObjectURL(t)}function w(e){const n=String(e);return/[",\n]/.test(n)?`"${n.replace(/"/g,'""')}"`:n}function v(e,n){const t=[...e.groupHeader?[e.groupHeader]:[],e.header,...e.rows].map(o=>o.map(w).join(",")),r=new Blob(["\uFEFF",t.join(`
+`)],{type:"text/csv;charset=utf-8;"});y(r,`${n}.csv`)}function f(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}function k(e){let n="",t=e+1;for(;t>0;)n=String.fromCharCode(65+(t-1)%26)+n,t=Math.floor((t-1)/26);return n}function T(e){return`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${[...e.groupHeader?[e.groupHeader]:[],e.header,...e.rows].map((n,t)=>{const r=n.map((o,s)=>{const a=`${k(s)}${t+1}`;return typeof o=="number"&&Number.isFinite(o)?`<c r="${a}"><v>${o}</v></c>`:typeof o=="boolean"?`<c r="${a}" t="b"><v>${o?1:0}</v></c>`:`<c r="${a}" t="inlineStr"><is><t xml:space="preserve">${f(String(o))}</t></is></c>`}).join("");return`<row r="${t+1}">${r}</row>`}).join("")}</sheetData></worksheet>`}const $=[{name:"[Content_Types].xml",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/></Types>'},{name:"_rels/.rels",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>'},{name:"xl/workbook.xml",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="Data" sheetId="1" r:id="rId1"/></sheets></workbook>'},{name:"xl/_rels/workbook.xml.rels",content:'<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/></Relationships>'}],D=(()=>{const e=new Uint32Array(256);for(let n=0;n<256;n++){let t=n;for(let r=0;r<8;r++)t=t&1?3988292384^t>>>1:t>>>1;e[n]=t>>>0}return e})();function R(e){let n=4294967295;for(let t=0;t<e.length;t++)n=D[(n^e[t])&255]^n>>>8;return(n^4294967295)>>>0}function j(e){const n=new TextEncoder,t=[],r=[];let o=0;for(const p of e){const m=n.encode(p.name),c=n.encode(p.content),g=R(c),l=new DataView(new ArrayBuffer(30));l.setUint32(0,67324752,!0),l.setUint16(4,20,!0),l.setUint16(6,2048,!0),l.setUint16(8,0,!0),l.setUint16(10,0,!0),l.setUint16(12,33,!0),l.setUint32(14,g,!0),l.setUint32(18,c.length,!0),l.setUint32(22,c.length,!0),l.setUint16(26,m.length,!0),l.setUint16(28,0,!0),t.push(new Uint8Array(l.buffer),m,c);const i=new DataView(new ArrayBuffer(46));i.setUint32(0,33639248,!0),i.setUint16(4,20,!0),i.setUint16(6,20,!0),i.setUint16(8,2048,!0),i.setUint16(10,0,!0),i.setUint16(12,0,!0),i.setUint16(14,33,!0),i.setUint32(16,g,!0),i.setUint32(20,c.length,!0),i.setUint32(24,c.length,!0),i.setUint16(28,m.length,!0),i.setUint32(42,o,!0),r.push(new Uint8Array(i.buffer),m),o+=30+m.length+c.length}const s=r.reduce((p,m)=>p+m.length,0),a=new DataView(new ArrayBuffer(22));a.setUint32(0,101010256,!0),a.setUint16(8,e.length,!0),a.setUint16(10,e.length,!0),a.setUint32(12,s,!0),a.setUint32(16,o,!0);const h=new Uint8Array(a.buffer),d=new Uint8Array(o+s+h.length);let u=0;for(const p of[...t,...r,h])d.set(p,u),u+=p.length;return d.buffer}function C(e,n){const t=j([...$,{name:"xl/worksheets/sheet1.xml",content:T(e)}]);y(new Blob([t],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),`${n}.xlsx`)}function F(e,n){const t=(s,a)=>`<tr>${s.map(h=>`<${a}${typeof h=="number"?' class="num"':""}>${f(String(h))}</${a}>`).join("")}</tr>`,r=[...e.groupHeader?[t(e.groupHeader,"th")]:[],t(e.header,"th")].join(""),o=e.rows.map(s=>t(s,"td")).join("");return`<!doctype html><html><head><meta charset="utf-8"><title>${f(n)}</title><style>
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; margin: 16px; }
 table { border-collapse: collapse; width: 100%; font-size: 12px; }
 th, td { padding: 6px 8px; border-bottom: 1px solid #ddd; text-align: left; }
 th { text-transform: uppercase; font-size: 10px; }
 .num { text-align: right; }
-</style></head><body><table><thead>${o}</thead><tbody>${r}</tbody></table></body></html>`}function S(e,n){const t=document.createElement("iframe");t.style.position="fixed",t.style.right="0",t.style.bottom="0",t.style.width="0",t.style.height="0",t.style.border="0",t.onload=()=>{const o=t.contentWindow;if(!o){t.remove();return}o.addEventListener("afterprint",()=>t.remove()),o.focus(),o.print()},t.srcdoc=F(e,n),document.body.appendChild(t)}export{v as exportDataTableToCsv,j as exportDataTableToExcel,U as getDataTableExportModel,S as printDataTable};
+</style></head><body><table><thead>${r}</thead><tbody>${o}</tbody></table></body></html>`}function S(e,n){const t=document.createElement("iframe");t.style.position="fixed",t.style.right="0",t.style.bottom="0",t.style.width="0",t.style.height="0",t.style.border="0",t.onload=()=>{const r=t.contentWindow;if(!r){t.remove();return}r.addEventListener("afterprint",()=>t.remove()),r.focus(),r.print()},t.srcdoc=F(e,n),document.body.appendChild(t)}export{v as exportDataTableToCsv,C as exportDataTableToExcel,U as getDataTableExportModel,S as printDataTable};

package/dist/components/DataTable/DataTable.mjs

@@ -1 +1 @@
-"use strict";import{useState as Y,useRef as x,useMemo as _,useEffect as Ze}from"react";import{useReactTable as Je,getPaginationRowModel as Qe,getSortedRowModel as Xe,getCoreRowModel as en}from"@tanstack/react-table";import{useVirtualizer as nn}from"@tanstack/react-virtual";import{Box as on,TableContainer as tn,Table as an}from"@mui/material";import{useBidirectionalScroll as ln}from"../../hooks/useBidirectionalScroll.mjs";import{DataTableProvider as rn}from"./DataTable.context.mjs";import{useControllableState as g,useHeaderRowTops as sn,useStickyHeaderHeight as gn,usePinnedOffsets as dn}from"./DataTable.hooks.mjs";import{applySearch as un,applyFilters as mn,EMPTY_FILTERS as fn}from"./DataTable.filters.mjs";import{inferColumns as cn,applyMetaWidthsToSizes as hn,measureRowGroup as pn,getColumnMeta as Cn}from"./DataTable.utils.mjs";import{DataTableBody as bn}from"./DataTableBody.mjs";import{DataTableFooter as Rn}from"./DataTableFooter.mjs";import{DataTableHead as wn}from"./DataTableHead.mjs";import{DataTablePanels as Sn}from"./DataTablePanels.mjs";import{DataTableToolbar as Pn}from"./DataTableToolbar.mjs";import{jsx as r,jsxs as q}from"react/jsx-runtime";const yn=25,vn=[10,25,50,100],xn=53,zn={},Ln={left:[],right:[]},A=()=>{};function Mn({data:a,columns:z,getRowId:L,renderRow:U,initialSorting:Z=[],sorting:J,onSortingChange:Q,manualSorting:M=!1,initialPageSize:X=yn,pageSizeOptions:ee=vn,pagination:ne,onPaginationChange:oe,manualPagination:u=!1,rowCount:h,disableSorting:p=!1,disablePagination:C=!1,bidirectionalScroll:o,enableColumnResizing:d=!1,enableColumnMenu:te=!1,enableColumnPinning:m=!1,showToolbar:ie=!1,enableExport:ae=!1,exportFilename:le="data",initialFilters:re=fn,filters:se,onFiltersChange:ge,manualFiltering:T=!1,initialSearch:de="",search:ue,onSearchChange:me,initialColumnVisibility:H={},columnVisibility:fe,onColumnVisibilityChange:ce,initialColumnPinning:he=Ln,columnPinning:pe,onColumnPinningChange:Ce,footerLeft:be,estimateRowHeight:Re=xn,minWidth:we=650,maxHeight:Se=800,tableLayout:b="auto",icons:Pe=zn,emptyMessage:ye="No data to display.",isLoading:ve=!1,renderLoading:xe}){const[ze,Le]=g(Z,J,Q),[Me,Te]=g({pageIndex:0,pageSize:X},ne,oe),[R,He]=g(re,se,ge),[w,Oe]=g(de,ue,me),[Fe,Ve]=g(H,fe,ce),[De,Ee]=g(he,pe,Ce),[S,Ie]=Y({}),O=d&&Object.keys(S).length>0,[Be,f]=Y(null),ke=()=>{f(null)},F=x(null),V=x(null),D=(e,n)=>{if(n){const s=n.getBoundingClientRect();return{anchorPosition:{top:s.bottom,left:s.right},transformHorizontal:"right"}}const t=e.getBoundingClientRect();return{anchorPosition:{top:t.bottom,left:t.left},transformHorizontal:"left"}},Ne=(e,n)=>{f({type:"filter",columnId:e,...D(n,F.current)})},$e=e=>{f({type:"manageColumns",...D(e,V.current)})},P=x(null),l=_(()=>{const e=z??cn(a);return d?hn(e):e},[z,a,d]),je=_(()=>T?a:un(mn(a,R,l),w,l),[a,R,w,T,l]),i=Je({data:je,columns:l,state:{...p?{}:{sorting:ze},...C?{}:{pagination:Me},...m?{columnPinning:De}:{},columnVisibility:Fe,columnSizing:S},initialState:{columnVisibility:H},onSortingChange:Le,onPaginationChange:Te,onColumnVisibilityChange:Ve,onColumnPinningChange:Ee,onColumnSizingChange:Ie,enableColumnPinning:m,columnResizeMode:"onChange",enableColumnResizing:d,getCoreRowModel:en(),defaultColumn:{enableSorting:!1},enableSorting:!p,manualSorting:M,...p||M?{}:{getSortedRowModel:Xe()},manualPagination:u,...u&&h!==void 0?{rowCount:h}:{},getRowCanExpand:()=>!0,...C||u?{}:{getPaginationRowModel:Qe()},...L?{getRowId:L}:{}}),y=i.getRowModel().rows,We=u?h??a.length:i.getPrePaginationRowModel().rows.length,Ge=i.getVisibleLeafColumns().length||1,v=m?i.getLeftVisibleLeafColumns().map(e=>e.id):[],E=m?i.getRightVisibleLeafColumns().map(e=>e.id):[],I=i.getHeaderGroups().length,{headerRowRefs:B,headerRowTops:Ke}=sn(I,l),k=o!==void 0,Ye=gn(k,B,I,l),{headerCellRefs:N,pinnedOffsets:$}=dn(v,E,l),_e=(e,n)=>{var t;for(const s of i.getVisibleLeafColumns())if(S[s.id]===void 0){const K=(t=N.current[s.id])==null?void 0:t.getBoundingClientRect().width;K&&(s.columnDef.size=Math.round(K))}e.getResizeHandler()(n)},j=(e,n)=>e==="left"?v[v.length-1]===n:E[0]===n,W=(e,n)=>{if(e==="left")return{left:$.left[n]??0};if(e==="right")return{right:$.right[n]??0}},G=b==="fixed"?{overflow:"hidden",textOverflow:"ellipsis"}:void 0,qe=(e,n)=>e?t=>({...G,position:"sticky",zIndex:1,bgcolor:"background.paper",".MuiTableRow-hover:hover > &":{backgroundImage:`linear-gradient(${t.palette.action.hover}, ${t.palette.action.hover})`},...j(e,n)?{boxShadow:`inset ${e==="left"?-1:1}px 0 0 ${t.palette.divider}`}:{}}):G,Ae=e=>{var n;const t=e.column.getIsPinned();return{align:(n=Cn(e.column.columnDef.meta))==null?void 0:n.align,style:W(t,e.column.id),sx:qe(t,e.column.id)}},c=nn({count:y.length,getScrollElement:()=>P.current,estimateSize:()=>Re,overscan:5,measureElement:pn});ln({enabled:k,scrollContainerRef:P,virtualizer:c,rowCount:y.length,hasNewer:o?.hasNewer,hasOlder:o?.hasOlder,isLoadingNewer:o?.isLoadingNewer,isLoadingOlder:o?.isLoadingOlder,onLoadNewer:o?.onLoadNewer??A,onLoadOlder:o?.onLoadOlder??A,resetKey:o?.resetKey});const{pageIndex:Ue}=i.getState().pagination;return Ze(()=>{c.scrollToOffset(0)},[Ue,c]),r(rn,{value:{table:i,data:a,rows:y,totalRowCount:We,columnCount:Ge,icons:Pe,isLoading:ve,emptyMessage:ye,tableLayout:b,enableColumnResizing:d,enableColumnMenu:te,enableExport:ae,exportFilename:le,disablePagination:C,pageSizeOptions:ee,footerLeft:be,bidirectionalScroll:o,renderLoading:xe,renderRow:U,filters:R,onFiltersChange:He,search:w,onSearchChange:Oe,columnPanel:Be,setColumnPanel:f,closeColumnPanel:ke,openFilterPanel:Ne,openManageColumnsPanel:$e,toolbarFilterButtonRef:F,toolbarManageColumnsButtonRef:V,headerRowRefs:B,headerCellRefs:N,headerRowTops:Ke,headerHeight:Ye,isPinnedEdge:j,getPinnedOffsetStyle:W,getCellProps:Ae,hasResizedColumns:O,startColumnResize:_e,virtualizer:c},children:q(on,{sx:{width:"100%"},children:[ie&&r(Pn,{}),r(tn,{ref:P,sx:{maxHeight:Se,width:0,minWidth:"100%"},children:q(an,{stickyHeader:!0,sx:{minWidth:we,tableLayout:b},style:O?{width:`max(${i.getTotalSize()}px, 100%)`}:void 0,"aria-label":"data table",children:[r(wn,{}),r(bn,{})]})}),r(Sn,{}),r(Rn,{})]})})}export{Mn as DataTable};
+"use strict";import{useMemo as O,useState as ee,useRef as E,useEffect as un}from"react";import{useReactTable as dn,getPaginationRowModel as gn,getSortedRowModel as mn,getCoreRowModel as cn}from"@tanstack/react-table";import{useVirtualizer as fn}from"@tanstack/react-virtual";import{Box as hn,TableContainer as pn,Table as Cn}from"@mui/material";import{useBidirectionalScroll as bn}from"../../hooks/useBidirectionalScroll.mjs";import{DataTableProvider as wn}from"./DataTable.context.mjs";import{useControllableState as m,useHeaderRowTops as Rn,useStickyHeaderHeight as Sn,usePinnedOffsets as Pn}from"./DataTable.hooks.mjs";import{applySearch as vn,applyFilters as yn,EMPTY_FILTERS as xn}from"./DataTable.filters.mjs";import{inferColumns as Ln,applyMetaWidthsToSizes as zn,getColumnMeta as ne,measureRowGroup as Mn}from"./DataTable.utils.mjs";import{DataTableBody as Tn}from"./DataTableBody.mjs";import{DataTableFooter as Fn}from"./DataTableFooter.mjs";import{DataTableHead as On}from"./DataTableHead.mjs";import{DataTablePanels as En}from"./DataTablePanels.mjs";import{DataTableToolbar as Hn}from"./DataTableToolbar.mjs";import{jsx as s,jsxs as te}from"react/jsx-runtime";const Dn=25,Vn=[10,25,50,100],In=53,Bn={},oe={left:[],right:[]},ie=()=>{};function ae(a){for(const l of a??[]){const u=l.columns;if(u!=null&&u.length){const h=ae(u);if(h)return h;continue}if(l.enablePinning===!1)continue;const c=l.accessorKey,f=l.id??(typeof c=="string"?c:void 0);if(f)return f}}function Nn({data:a,columns:l,getRowId:u,renderRow:c,initialSorting:f=[],sorting:h,onSortingChange:le,manualSorting:H=!1,initialPageSize:re=Dn,pageSizeOptions:se=Vn,pagination:ue,onPaginationChange:de,manualPagination:p=!1,rowCount:w,disableSorting:R=!1,disablePagination:S=!1,bidirectionalScroll:t,enableColumnResizing:d=!1,enableColumnMenu:ge=!1,enableColumnPinning:D=!1,pinFirstColumn:V=!0,showToolbar:me=!1,enableExport:ce=!1,exportFilename:fe="data",additionalExportColumns:he,initialFilters:pe=xn,filters:Ce,onFiltersChange:be,manualFiltering:I=!1,renderFilterPanel:we,activeFilterCount:Re,initialSearch:Se="",search:Pe,onSearchChange:ve,initialColumnVisibility:B={},columnVisibility:ye,onColumnVisibilityChange:xe,initialColumnPinning:N=oe,columnPinning:$,onColumnPinningChange:Le,footerLeft:ze,estimateRowHeight:Me=In,minWidth:Te=650,maxHeight:Fe=800,tableLayout:P="auto",icons:Oe=Bn,emptyMessage:Ee="No data to display.",isLoading:He=!1,renderLoading:De}){const[Ve,Ie]=m(f,h,le),[Be,Ne]=m({pageIndex:0,pageSize:re},ue,de),[v,$e]=m(pe,Ce,be),[y,ke]=m(Se,Pe,ve),[We,je]=m(B,ye,xe),x=O(()=>ae(l),[l]),Ke=$===void 0&&N===oe&&V&&x?{left:[x],right:[]}:N,[Ge,Ye]=m(Ke,$,Le),L=D||V&&x!==void 0,[z,qe]=ee({}),k=d&&Object.keys(z).length>0,[Je,C]=ee(null),Qe=()=>{C(null)},W=E(null),j=E(null),K=(e,n)=>{if(n){const g=n.getBoundingClientRect();return{anchorPosition:{top:g.bottom,left:g.right},transformHorizontal:"right"}}const o=e.getBoundingClientRect();return{anchorPosition:{top:o.bottom,left:o.left},transformHorizontal:"left"}},Ue=(e,n)=>{C({type:"filter",columnId:e,...K(n,W.current)})},Xe=e=>{C({type:"manageColumns",...K(e,j.current)})},M=E(null),r=O(()=>{const e=l??Ln(a);return d?zn(e):e},[l,a,d]),Ze=O(()=>I?a:vn(yn(a,v,r),y,r),[a,v,y,I,r]),i=dn({data:Ze,columns:r,state:{...R?{}:{sorting:Ve},...S?{}:{pagination:Be},...L?{columnPinning:Ge}:{},columnVisibility:We,columnSizing:z},initialState:{columnVisibility:B},onSortingChange:Ie,onPaginationChange:Ne,onColumnVisibilityChange:je,onColumnPinningChange:Ye,onColumnSizingChange:qe,enableColumnPinning:D,columnResizeMode:"onChange",enableColumnResizing:d,getCoreRowModel:cn(),defaultColumn:{enableSorting:!1},enableSorting:!R,manualSorting:H,...R||H?{}:{getSortedRowModel:mn()},manualPagination:p,...p&&w!==void 0?{rowCount:w}:{},getRowCanExpand:()=>!0,...S||p?{}:{getPaginationRowModel:gn()},...u?{getRowId:u}:{}}),T=i.getRowModel().rows,_e=p?w??a.length:i.getPrePaginationRowModel().rows.length,Ae=i.getVisibleLeafColumns().length||1,en=d&&i.getVisibleLeafColumns().some(e=>{var n;return typeof((n=ne(e.columnDef.meta))==null?void 0:n.width)=="number"}),nn=k||en,F=L?i.getLeftVisibleLeafColumns().map(e=>e.id):[],G=L?i.getRightVisibleLeafColumns().map(e=>e.id):[],Y=i.getHeaderGroups().length,{headerRowRefs:q,headerRowTops:tn}=Rn(Y,r),J=t!==void 0,on=Sn(J,q,Y,r),{headerCellRefs:Q,pinnedOffsets:U}=Pn(F,G,r),an=(e,n)=>{var o;for(const g of i.getVisibleLeafColumns())if(z[g.id]===void 0){const A=(o=Q.current[g.id])==null?void 0:o.getBoundingClientRect().width;A&&(g.columnDef.size=Math.round(A))}e.getResizeHandler()(n)},X=(e,n)=>e==="left"?F[F.length-1]===n:G[0]===n,Z=(e,n)=>{if(e==="left")return{left:U.left[n]??0};if(e==="right")return{right:U.right[n]??0}},_=P==="fixed"?{overflow:"hidden",textOverflow:"ellipsis"}:void 0,ln=(e,n)=>e?o=>({..._,position:"sticky",zIndex:1,bgcolor:"background.paper",".MuiTableRow-hover:hover > &":{backgroundImage:`linear-gradient(${o.palette.action.hover}, ${o.palette.action.hover})`},...X(e,n)?{boxShadow:`inset ${e==="left"?-1:1}px 0 0 ${o.palette.divider}`}:{}}):_,rn=e=>{var n;const o=e.column.getIsPinned();return{align:(n=ne(e.column.columnDef.meta))==null?void 0:n.align,style:Z(o,e.column.id),sx:ln(o,e.column.id)}},b=fn({count:T.length,getScrollElement:()=>M.current,estimateSize:()=>Me,overscan:5,measureElement:Mn});bn({enabled:J,scrollContainerRef:M,virtualizer:b,rowCount:T.length,hasNewer:t?.hasNewer,hasOlder:t?.hasOlder,isLoadingNewer:t?.isLoadingNewer,isLoadingOlder:t?.isLoadingOlder,onLoadNewer:t?.onLoadNewer??ie,onLoadOlder:t?.onLoadOlder??ie,resetKey:t?.resetKey});const{pageIndex:sn}=i.getState().pagination;return un(()=>{b.scrollToOffset(0)},[sn,b]),s(wn,{value:{table:i,data:a,rows:T,totalRowCount:_e,columnCount:Ae,icons:Oe,isLoading:He,emptyMessage:Ee,tableLayout:P,enableColumnResizing:d,enableColumnMenu:ge,enableExport:ce,exportFilename:fe,additionalExportColumns:he,disablePagination:S,pageSizeOptions:se,footerLeft:ze,bidirectionalScroll:t,renderLoading:De,renderRow:c,filters:v,onFiltersChange:$e,renderFilterPanel:we,activeFilterCount:Re,search:y,onSearchChange:ke,columnPanel:Je,setColumnPanel:C,closeColumnPanel:Qe,openFilterPanel:Ue,openManageColumnsPanel:Xe,toolbarFilterButtonRef:W,toolbarManageColumnsButtonRef:j,headerRowRefs:q,headerCellRefs:Q,headerRowTops:tn,headerHeight:on,isPinnedEdge:X,getPinnedOffsetStyle:Z,getCellProps:rn,hasResizedColumns:k,startColumnResize:an,virtualizer:b},children:te(hn,{sx:{width:"100%"},children:[me&&s(Hn,{}),s(pn,{ref:M,sx:{maxHeight:Fe,width:0,minWidth:"100%"},children:te(Cn,{stickyHeader:!0,sx:{minWidth:Te,tableLayout:P},style:nn?{width:`max(${i.getTotalSize()}px, 100%)`}:void 0,"aria-label":"data table",children:[s(On,{}),s(Tn,{})]})}),s(En,{}),s(Fn,{})]})})}export{Nn as DataTable};

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

@@ -2,6 +2,7 @@ import { ComponentType, CSSProperties, ReactNode, Ref } from 'react';
 import { SvgIconProps, SxProps, Theme } from '@mui/material';
 import { Cell, ColumnDef, ColumnPinningState, PaginationState, Row, SortingState, VisibilityState } from '@tanstack/react-table';
 import { VirtualItem } from '@tanstack/react-virtual';
+import { DataTableExportColumn } from './DataTable.export';
 /**
  * Generic record shape — the table works with arrays of objects whose
  * shape is unknown ahead of time.
@@ -60,6 +61,12 @@ export interface DataTableColumnMeta {
      * Column width — any CSS width value: a number for px (e.g. 140) or a
      * string for percentage fill (e.g. '40%'). Applied to the header cell,
      * which sizes the whole column.
+     *
+     * With `enableColumnResizing`, a numeric (px) width behaves like a
+     * drag-resize: the table grows to the sum of the column widths and
+     * scrolls horizontally rather than shrinking the other columns to fit,
+     * so a large width never reflows its neighbors. Percentage widths still
+     * split the available space.
      */
     width?: number | string;
     /**
@@ -69,6 +76,13 @@ export interface DataTableColumnMeta {
      * current page, so supply the full set here.
      */
     filterOptions?: string[];
+    /**
+     * Hides the hover kebab (column menu) on this column even when the table
+     * has `enableColumnMenu`. Use for utility columns with nothing to act on
+     * (e.g. an expand/select column) so they don't show a menu offering only
+     * the global "Manage columns" action.
+     */
+    disableColumnMenu?: boolean;
 }
 /**
  * Replacement component for one of the table's built-in MUI icons. Slots
@@ -347,7 +361,8 @@ export interface DataTableProps<TData extends DataTableData> {
      *
      * Every accessor column is filterable through the operator-based filter
      * panel by default — opt a column out with `enableColumnFilter: false`
-     * on its def.
+     * on its def. Hide the kebab on a specific column (e.g. a utility
+     * expand/select column) with `meta.disableColumnMenu`.
      */
     enableColumnMenu?: boolean;
     /**
@@ -365,6 +380,13 @@ export interface DataTableProps<TData extends DataTableData> {
      * otherwise there is nothing for pinned columns to stick over.
      */
     enableColumnPinning?: boolean;
+    /**
+     * Pins the left-most (first leaf) column to the left by default, so it stays visible while the
+     * table scrolls horizontally. Defaults to `true`. The pin applies even without
+     * `enableColumnPinning` (which only adds the column-menu pin actions). Set `false` to opt out, or
+     * pass `initialColumnPinning` / a controlled `columnPinning` to take over pinning entirely.
+     */
+    pinFirstColumn?: boolean;
     /**
      * Shows a toolbar row above the table with Manage columns and Filters
      * buttons plus a search button that expands into a quick-search input on
@@ -390,6 +412,12 @@ export interface DataTableProps<TData extends DataTableData> {
      * document title. Defaults to 'data'.
      */
     exportFilename?: string;
+    /**
+     * Extra export-only columns appended after the visible columns in the CSV / Excel / Print output,
+     * for data shown outside the grid (e.g. data in an expandable detail row) that should still be
+     * exported. Each supplies a `header` and a `(row) => value` extractor, not rendered in the table.
+     */
+    additionalExportColumns?: ReadonlyArray<DataTableExportColumn<TData>>;
     /**
      * Initial filter state. Rows are applied as AND by default; switch to OR
      * via `logicOperator: 'or'`.
@@ -416,6 +444,18 @@ export interface DataTableProps<TData extends DataTableData> {
      * search input only update their state, nothing is filtered client-side.
      */
     manualFiltering?: boolean;
+    /**
+     * Consumer-rendered filter panel. When provided, the toolbar's Filters button opens a popover
+     * rendering this content instead of the built-in operator-based panel, the consumer supplies its
+     * own filter controls (wired to its own state / server query) and the table stays filter-agnostic.
+     * Pair with `manualFiltering`. Use `activeFilterCount` to drive the Filters button badge.
+     */
+    renderFilterPanel?: () => ReactNode;
+    /**
+     * Active-filter count for the Filters button badge when using `renderFilterPanel` (the table can't
+     * infer it from consumer-owned filter state). Ignored without `renderFilterPanel`.
+     */
+    activeFilterCount?: number;
     /** Initial quick-search query for the toolbar search input. */
     initialSearch?: string;
     /**

package/dist/components/DataTable/DataTableExportMenu.d.ts

@@ -1,10 +1,13 @@
 import { Table } from '@tanstack/react-table';
 import { DataTableData, DataTableIcons } from './DataTable.types';
+import { DataTableExportColumn } from './DataTable.export';
 interface DataTableExportMenuProps<TData extends DataTableData> {
     table: Table<TData>;
     /** Base filename (no extension); also the printed document title. */
     filename: string;
     icons: DataTableIcons;
+    /** Export-only columns appended after the visible columns. */
+    additionalExportColumns?: ReadonlyArray<DataTableExportColumn<TData>>;
 }
 /**
  * Toolbar Export button opening a menu with Print / Download as CSV /
@@ -12,5 +15,5 @@ interface DataTableExportMenuProps<TData extends DataTableData> {
  * exports the displayed table: the filtered + sorted rows across every
  * page and the visible accessor columns in display order.
  */
-export declare function DataTableExportMenu<TData extends DataTableData>({ table, filename, icons, }: Readonly<DataTableExportMenuProps<TData>>): import("react").JSX.Element;
+export declare function DataTableExportMenu<TData extends DataTableData>({ table, filename, icons, additionalExportColumns, }: Readonly<DataTableExportMenuProps<TData>>): import("react").JSX.Element;
 export {};

package/dist/components/DataTable/DataTableExportMenu.mjs

@@ -1 +1 @@
-"use strict";import{useState as f}from"react";import{Tooltip as T,IconButton as D,Menu as b,MenuItem as t,ListItemIcon as r,ListItemText as i}from"@mui/material";import{GridOnOutlined as C,FileDownloadOutlined as E,Print as w,DescriptionOutlined as S}from"@mui/icons-material";import{getDataTableExportModel as z,printDataTable as I,exportDataTableToCsv as k,exportDataTableToExcel as M}from"./DataTable.export.mjs";import{jsxs as e,Fragment as O,jsx as l}from"react/jsx-runtime";function g({table:c,filename:d,icons:m}){const{export:p=E,print:h=w,downloadCsv:u=S,downloadExcel:x=C}=m,[s,a]=f(null),n=o=>{o(z(c),d),a(null)};return e(O,{children:[l(T,{title:"Export",placement:"bottom",arrow:!0,children:l(D,{size:"small","aria-label":"Export",onClick:o=>a(o.currentTarget),children:l(p,{fontSize:"small"})})}),e(b,{anchorEl:s,open:!!s,onClose:()=>a(null),children:[e(t,{onClick:()=>n(I),children:[l(r,{children:l(h,{fontSize:"small"})}),l(i,{children:"Print"})]}),e(t,{onClick:()=>n(k),children:[l(r,{children:l(u,{fontSize:"small"})}),l(i,{children:"Download as CSV"})]}),e(t,{onClick:()=>n(M),children:[l(r,{children:l(x,{fontSize:"small"})}),l(i,{children:"Download as Excel"})]})]})]})}export{g as DataTableExportMenu};
+"use strict";import{useState as T}from"react";import{Tooltip as C,IconButton as D,Menu as E,MenuItem as t,ListItemIcon as i,ListItemText as r}from"@mui/material";import{GridOnOutlined as b,FileDownloadOutlined as w,Print as S,DescriptionOutlined as z}from"@mui/icons-material";import{getDataTableExportModel as I,printDataTable as k,exportDataTableToCsv as M,exportDataTableToExcel as O}from"./DataTable.export.mjs";import{jsxs as a,Fragment as g,jsx as l}from"react/jsx-runtime";function L({table:c,filename:d,icons:m,additionalExportColumns:p}){const{export:u=w,print:x=S,downloadCsv:h=z,downloadExcel:f=b}=m,[s,e]=T(null),n=o=>{o(I(c,p),d),e(null)};return a(g,{children:[l(C,{title:"Export",placement:"bottom",arrow:!0,children:l(D,{size:"small","aria-label":"Export",onClick:o=>e(o.currentTarget),children:l(u,{fontSize:"small"})})}),a(E,{anchorEl:s,open:!!s,onClose:()=>e(null),children:[a(t,{onClick:()=>n(k),children:[l(i,{children:l(x,{fontSize:"small"})}),l(r,{children:"Print"})]}),a(t,{onClick:()=>n(M),children:[l(i,{children:l(h,{fontSize:"small"})}),l(r,{children:"Download as CSV"})]}),a(t,{onClick:()=>n(O),children:[l(i,{children:l(f,{fontSize:"small"})}),l(r,{children:"Download as Excel"})]})]})]})}export{L as DataTableExportMenu};

package/dist/components/DataTable/DataTableHeaderCell.mjs

@@ -1 +1 @@
-"use strict";import{flexRender as W}from"@tanstack/react-table";import{Typography as q,TableSortLabel as G,TableCell as J,Box as x,Tooltip as C,IconButton as w}from"@mui/material";import{FilterAlt as K,MoreVert as Q}from"@mui/icons-material";import{useDataTableContext as U}from"./DataTable.context.mjs";import{isFilterRowActive as X}from"./DataTable.filters.mjs";import{getColumnMeta as Y,getColumnLabel as v}from"./DataTable.utils.mjs";import{jsx as n,jsxs as S}from"react/jsx-runtime";const _={left:"flex-start",center:"center",right:"flex-end"};function Z({header:o,rowIndex:s,headerRowCount:T}){const{icons:f,isLoading:y,filters:z,tableLayout:D,enableColumnResizing:I,enableColumnMenu:R,hasResizedColumns:M,columnPanel:c,setColumnPanel:B,openFilterPanel:P,startColumnResize:p,getPinnedOffsetStyle:$,isPinnedEdge:k,headerRowTops:j,headerCellRefs:L}=U(),{columnMenu:A=Q,filter:F=K}=f,{column:e}=o,i=Y(e.columnDef.meta),l=e.columns.length>0,h=l?1:T-s,d=i?.align??(l?"center":"left"),E=e.getCanSort(),a=e.getIsSorted(),H=I&&!l&&e.getCanResize(),N=e.getIsResizing(),r=l?!1:e.getIsPinned(),u=R&&!l,O=c?.type==="menu"&&c.columnId===e.id,m=u?z.rows.filter(t=>t.columnId===e.id&&X(t)).length:0,V=m>0,g=n(q,{component:"span",variant:"subtitle2",sx:{textTransform:"uppercase",fontSize:12,fontWeight:900},children:W(e.columnDef.header,o.getContext())}),b=E?n(G,{active:a!==!1,direction:a===!1?"asc":a,disabled:y,onClick:e.getToggleSortingHandler(),IconComponent:f.sort,children:g}):g;return S(J,{ref:t=>{l||(L.current[e.id]=t)},align:d,colSpan:o.colSpan>1?o.colSpan:void 0,rowSpan:h>1?h:void 0,sortDirection:a,style:{...M?{width:o.getSize()}:{},...$(r,e.id)},sx:{width:i?.width,...D==="fixed"?{overflow:"hidden",textOverflow:"ellipsis"}:{},...l?{borderBottom:"none"}:{},...s>0?{top:j[s]??0}:{},...r?{zIndex:3,...k(r,e.id)?{boxShadow:t=>`inset ${r==="left"?-1:1}px 0 0 ${t.palette.divider}`}:{}}:{},...u?{"& .DataTable-columnMenuButton":{opacity:O?1:0,transition:"opacity .2s"},"&:hover .DataTable-columnMenuButton, &:focus-within .DataTable-columnMenuButton":{opacity:1}}:{}},children:[u?S(x,{sx:{display:"flex",alignItems:"center",gap:.5,justifyContent:_[d]},children:[b,V&&n(C,{title:`${m} active ${m===1?"filter":"filters"}`,placement:"bottom",arrow:!0,children:n(w,{size:"small","aria-label":`${v(e)} filter`,onClick:t=>P(e.id,t.currentTarget),children:n(F,{sx:{fontSize:16}})})}),n(C,{title:"Menu",placement:"bottom",arrow:!0,children:n(w,{size:"small",className:"DataTable-columnMenuButton","aria-label":`${v(e)} column menu`,onClick:t=>B({type:"menu",columnId:e.id,anchorEl:t.currentTarget}),sx:d!=="right"?{ml:"auto"}:void 0,children:n(A,{fontSize:"small"})})})]}):b,H&&n(x,{className:"DataTable-columnResizer","aria-hidden":!0,onMouseDown:t=>p(o,t),onTouchStart:t=>p(o,t),onDoubleClick:()=>e.resetSize(),sx:{position:"absolute",top:0,bottom:0,right:0,width:9,cursor:"col-resize",touchAction:"none",userSelect:"none",display:"flex",alignItems:"center",justifyContent:"center","&::after":{content:'""',transition:"background-color .2s",width:"1px",height:"50%",bgcolor:"divider"},"&:hover::after":{width:"4px",bgcolor:"primary.main"},...N?{"&::after, &:hover::after":{width:"4px",bgcolor:"primary.main"}}:{}}})]})}export{Z as DataTableHeaderCell};
+"use strict";import{flexRender as W}from"@tanstack/react-table";import{Typography as q,TableSortLabel as G,TableCell as J,Box as C,Tooltip as w,IconButton as v}from"@mui/material";import{FilterAlt as K,MoreVert as Q}from"@mui/icons-material";import{useDataTableContext as U}from"./DataTable.context.mjs";import{isFilterRowActive as X}from"./DataTable.filters.mjs";import{getColumnMeta as Y,getColumnLabel as y}from"./DataTable.utils.mjs";import{jsx as o,jsxs as S}from"react/jsx-runtime";const _={left:"flex-start",center:"center",right:"flex-end"};function Z({header:l,rowIndex:s,headerRowCount:T}){const{icons:f,isLoading:z,filters:D,tableLayout:I,enableColumnResizing:p,enableColumnMenu:M,hasResizedColumns:R,columnPanel:c,setColumnPanel:B,openFilterPanel:P,startColumnResize:h,getPinnedOffsetStyle:$,isPinnedEdge:k,headerRowTops:j,headerCellRefs:A}=U(),{columnMenu:L=Q,filter:F=K}=f,{column:e}=l,n=Y(e.columnDef.meta),a=e.columns.length>0,g=a?1:T-s,d=n?.align??(a?"center":"left"),E=e.getCanSort(),i=e.getIsSorted(),H=p&&!a&&e.getCanResize(),N=e.getIsResizing(),r=a?!1:e.getIsPinned(),u=M&&!a&&!(n!=null&&n.disableColumnMenu),O=c?.type==="menu"&&c.columnId===e.id,m=u?D.rows.filter(t=>t.columnId===e.id&&X(t)).length:0,V=m>0,b=o(q,{component:"span",variant:"subtitle2",sx:{textTransform:"uppercase",fontSize:12,fontWeight:900},children:W(e.columnDef.header,l.getContext())}),x=E?o(G,{active:i!==!1,direction:i===!1?"asc":i,disabled:z,onClick:e.getToggleSortingHandler(),IconComponent:f.sort,children:b}):b;return S(J,{ref:t=>{a||(A.current[e.id]=t)},align:d,colSpan:l.colSpan>1?l.colSpan:void 0,rowSpan:g>1?g:void 0,sortDirection:i,style:{...R||p&&typeof n?.width=="number"?{width:l.getSize()}:{},...$(r,e.id)},sx:{width:n?.width,verticalAlign:"bottom",...I==="fixed"?{overflow:"hidden",textOverflow:"ellipsis"}:{},...a?{borderBottom:"none"}:{},...s>0?{top:j[s]??0}:{},...r?{zIndex:3,...k(r,e.id)?{boxShadow:t=>`inset ${r==="left"?-1:1}px 0 0 ${t.palette.divider}`}:{}}:{},...u?{"& .DataTable-columnMenuButton":{opacity:O?1:0,transition:"opacity .2s"},"&:hover .DataTable-columnMenuButton, &:focus-within .DataTable-columnMenuButton":{opacity:1}}:{}},children:[u?S(C,{sx:{display:"flex",alignItems:"center",gap:.5,justifyContent:_[d]},children:[x,V&&o(w,{title:`${m} active ${m===1?"filter":"filters"}`,placement:"bottom",arrow:!0,children:o(v,{size:"small","aria-label":`${y(e)} filter`,onClick:t=>P(e.id,t.currentTarget),children:o(F,{sx:{fontSize:16}})})}),o(w,{title:"Menu",placement:"bottom",arrow:!0,children:o(v,{size:"small",className:"DataTable-columnMenuButton","aria-label":`${y(e)} column menu`,onClick:t=>B({type:"menu",columnId:e.id,anchorEl:t.currentTarget}),sx:d!=="right"?{ml:"auto"}:void 0,children:o(L,{fontSize:"small"})})})]}):x,H&&o(C,{className:"DataTable-columnResizer","aria-hidden":!0,onMouseDown:t=>h(l,t),onTouchStart:t=>h(l,t),onDoubleClick:()=>e.resetSize(),sx:{position:"absolute",top:0,bottom:0,right:0,width:9,cursor:"col-resize",touchAction:"none",userSelect:"none",display:"flex",alignItems:"center",justifyContent:"center","&::after":{content:'""',transition:"background-color .2s",width:"1px",height:"50%",bgcolor:"divider"},"&:hover::after":{width:"4px",bgcolor:"primary.main"},...N?{"&::after, &:hover::after":{width:"4px",bgcolor:"primary.main"}}:{}}})]})}export{Z as DataTableHeaderCell};

package/dist/components/DataTable/DataTablePanels.mjs

@@ -1 +1 @@
-"use strict";import{useDataTableContext as d}from"./DataTable.context.mjs";import{DataTableColumnMenu as p}from"./DataTableColumnMenu.mjs";import{DataTableFilterPanel as C}from"./DataTableFilterPanel.mjs";import{DataTableManageColumnsPanel as f}from"./DataTableManageColumnsPanel.mjs";import{jsxs as h,Fragment as g,jsx as e}from"react/jsx-runtime";function P(){const{table:n,data:i,icons:a,isLoading:r,filters:s,onFiltersChange:m,columnPanel:o,closeColumnPanel:l,openFilterPanel:u,openManageColumnsPanel:c}=d(),t=o?.type==="menu"?n.getColumn(o.columnId):void 0;return h(g,{children:[o?.type==="menu"&&t&&e(p,{column:t,anchorEl:o.anchorEl,icons:a,isLoading:r,onClose:l,onOpenFilter:()=>u(o.columnId,o.anchorEl),onOpenManageColumns:()=>c(o.anchorEl)}),o?.type==="filter"&&e(C,{table:n,data:i,initialColumnId:o.columnId,anchorPosition:o.anchorPosition,transformHorizontal:o.transformHorizontal,icons:a,filters:s,onFiltersChange:m,onClose:l}),o?.type==="manageColumns"&&e(f,{table:n,anchorPosition:o.anchorPosition,transformHorizontal:o.transformHorizontal,icons:a,onClose:l})]})}export{P as DataTablePanels};
+"use strict";import{Popover as h,Box as d}from"@mui/material";import{useDataTableContext as f}from"./DataTable.context.mjs";import{DataTableColumnMenu as P}from"./DataTableColumnMenu.mjs";import{DataTableFilterPanel as C}from"./DataTableFilterPanel.mjs";import{DataTableManageColumnsPanel as g}from"./DataTableManageColumnsPanel.mjs";import{jsxs as b,Fragment as v,jsx as n}from"react/jsx-runtime";function x(){const{table:l,data:i,icons:e,isLoading:s,filters:m,onFiltersChange:c,renderFilterPanel:r,columnPanel:o,closeColumnPanel:a,openFilterPanel:u,openManageColumnsPanel:p}=f(),t=o?.type==="menu"?l.getColumn(o.columnId):void 0;return b(v,{children:[o?.type==="menu"&&t&&n(P,{column:t,anchorEl:o.anchorEl,icons:e,isLoading:s,onClose:a,onOpenFilter:()=>u(o.columnId,o.anchorEl),onOpenManageColumns:()=>p(o.anchorEl)}),o?.type==="filter"&&(r?n(h,{open:!0,anchorReference:"anchorPosition",anchorPosition:o.anchorPosition,transformOrigin:{vertical:"top",horizontal:o.transformHorizontal},onClose:a,children:n(d,{sx:{p:2},children:r()})}):n(C,{table:l,data:i,initialColumnId:o.columnId,anchorPosition:o.anchorPosition,transformHorizontal:o.transformHorizontal,icons:e,filters:m,onFiltersChange:c,onClose:a})),o?.type==="manageColumns"&&n(g,{table:l,anchorPosition:o.anchorPosition,transformHorizontal:o.transformHorizontal,icons:e,onClose:a})]})}export{x as DataTablePanels};

package/dist/components/DataTable/DataTableToolbar.mjs

@@ -1 +1 @@
-"use strict";import{useRef as y,useState as A}from"react";import{Stack as B,Tooltip as l,IconButton as n,Badge as D,Divider as f,TextField as P,InputAdornment as b}from"@mui/material";import{Close as R,FilterList as j,ViewColumn as E,Search as O}from"@mui/icons-material";import{useDataTableContext as L}from"./DataTable.context.mjs";import{isFilterRowActive as K}from"./DataTable.filters.mjs";import{DataTableExportMenu as V}from"./DataTableExportMenu.mjs";import{jsxs as q,jsx as e}from"react/jsx-runtime";function X(){var i;const{table:s,icons:c,filters:g,search:r,onSearchChange:o,enableExport:m,exportFilename:v,toolbarFilterButtonRef:C,toolbarManageColumnsButtonRef:x,openFilterPanel:S,openManageColumnsPanel:w}=L(),{openFilterPanel:F=j,manageColumns:z=E,search:I=O,close:T=R}=c,a=y(null),[M,u]=A(!1),d=M||r!=="",k=g.rows.filter(K).length,p=(i=s.getAllLeafColumns().find(t=>t.getCanFilter()))==null?void 0:i.id;return q(B,{direction:"row",alignItems:"center",justifyContent:"flex-end",spacing:.5,sx:{mb:.5},children:[e(l,{title:"Manage columns",placement:"bottom",arrow:!0,children:e(n,{ref:x,size:"small","aria-label":"Manage columns",onClick:t=>w(t.currentTarget),children:e(z,{fontSize:"small"})})}),p!==void 0&&e(l,{title:"Filters",placement:"bottom",arrow:!0,children:e(n,{ref:C,size:"small","aria-label":"Show filters",onClick:t=>S(p,t.currentTarget),children:e(D,{badgeContent:k,color:"primary",children:e(F,{fontSize:"small"})})})}),m&&e(f,{orientation:"vertical",variant:"middle",flexItem:!0,sx:{height:14,alignSelf:"center"}}),m&&e(V,{table:s,filename:v,icons:c}),e(f,{orientation:"vertical",variant:"middle",flexItem:!0,sx:{height:14,alignSelf:"center"}}),e(P,{size:"small",variant:"outlined",value:r,placeholder:"Search\u2026",inputRef:a,onChange:t=>o(t.target.value),onFocus:()=>u(!0),onBlur:()=>u(!1),onKeyDown:t=>{var h;t.key==="Escape"&&(o(""),(h=a.current)==null||h.blur())},inputProps:{"aria-label":"Search"},InputProps:{startAdornment:e(b,{position:"start",children:e(l,{title:"Search",placement:"bottom",arrow:!0,children:e(n,{size:"small","aria-label":"Show search",onClick:()=>{var t;return(t=a.current)==null?void 0:t.focus()},children:e(I,{fontSize:"small"})})})}),endAdornment:r===""?void 0:e(b,{position:"end",children:e(l,{title:"Clear",placement:"bottom",arrow:!0,children:e(n,{size:"small","aria-label":"Clear search",onClick:()=>{var t;o(""),(t=a.current)==null||t.focus()},children:e(T,{fontSize:"small"})})})})},sx:{width:d?220:34,transition:"width .2s",overflow:"hidden","& .MuiOutlinedInput-root":{pl:.5,pr:.5},"& .MuiOutlinedInput-notchedOutline":{opacity:d?1:0,transition:"opacity .2s"}}})]})}export{X as DataTableToolbar};
+"use strict";import{useRef as B,useState as D}from"react";import{Stack as E,Tooltip as l,IconButton as n,Badge as R,Divider as b,TextField as j,InputAdornment as g}from"@mui/material";import{Close as O,FilterList as L,ViewColumn as K,Search as V}from"@mui/icons-material";import{useDataTableContext as q}from"./DataTable.context.mjs";import{isFilterRowActive as G}from"./DataTable.filters.mjs";import{DataTableExportMenu as H}from"./DataTableExportMenu.mjs";import{jsxs as J,jsx as e}from"react/jsx-runtime";function $(){var i;const{table:s,icons:c,filters:C,search:r,onSearchChange:o,enableExport:m,exportFilename:v,additionalExportColumns:x,renderFilterPanel:u,activeFilterCount:S,toolbarFilterButtonRef:w,toolbarManageColumnsButtonRef:F,openFilterPanel:z,openManageColumnsPanel:I}=q(),{openFilterPanel:T=L,manageColumns:M=K,search:k=V,close:y=O}=c,a=B(null),[P,d]=D(!1),p=P||r!=="",A=u?S??0:C.rows.filter(G).length,h=(i=s.getAllLeafColumns().find(t=>t.getCanFilter()))==null?void 0:i.id;return J(E,{direction:"row",alignItems:"center",justifyContent:"flex-end",spacing:.5,sx:{mb:.5},children:[e(l,{title:"Manage columns",placement:"bottom",arrow:!0,children:e(n,{ref:F,size:"small","aria-label":"Manage columns",onClick:t=>I(t.currentTarget),children:e(M,{fontSize:"small"})})}),(u!==void 0||h!==void 0)&&e(l,{title:"Filters",placement:"bottom",arrow:!0,children:e(n,{ref:w,size:"small","aria-label":"Show filters",onClick:t=>z(h??"",t.currentTarget),children:e(R,{badgeContent:A,color:"primary",children:e(T,{fontSize:"small"})})})}),m&&e(b,{orientation:"vertical",variant:"middle",flexItem:!0,sx:{height:14,alignSelf:"center"}}),m&&e(H,{table:s,filename:v,icons:c,additionalExportColumns:x}),e(b,{orientation:"vertical",variant:"middle",flexItem:!0,sx:{height:14,alignSelf:"center"}}),e(j,{size:"small",variant:"outlined",value:r,placeholder:"Search\u2026",inputRef:a,onChange:t=>o(t.target.value),onFocus:()=>d(!0),onBlur:()=>d(!1),onKeyDown:t=>{var f;t.key==="Escape"&&(o(""),(f=a.current)==null||f.blur())},inputProps:{"aria-label":"Search"},InputProps:{startAdornment:e(g,{position:"start",children:e(l,{title:"Search",placement:"bottom",arrow:!0,children:e(n,{size:"small","aria-label":"Show search",onClick:()=>{var t;return(t=a.current)==null?void 0:t.focus()},children:e(k,{fontSize:"small"})})})}),endAdornment:r===""?void 0:e(g,{position:"end",children:e(l,{title:"Clear",placement:"bottom",arrow:!0,children:e(n,{size:"small","aria-label":"Clear search",onClick:()=>{var t;o(""),(t=a.current)==null||t.focus()},children:e(y,{fontSize:"small"})})})})},sx:{width:p?220:34,transition:"width .2s",overflow:"hidden","& .MuiOutlinedInput-root":{pl:.5,pr:.5},"& .MuiOutlinedInput-notchedOutline":{opacity:p?1:0,transition:"opacity .2s"}}})]})}export{$ as DataTableToolbar};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "11.1.0",
+  "version": "11.1.2-beta.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,