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