periplo-ui 4.6.2 → 4.6.3

package/dist/components/DataTable/DataTable.js

@@ -1,16 +1,14 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getPaginationRowModel, useReactTable, getExpandedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as React from 'react';
 import { Table, TableHeader, TableRow, TableHead } from '../Table/Table.js';
-import { Typography } from '../Typography/Typography.js';
 import { DataTableBody } from './components/DataTableBody.js';
-import { DataTableGroupRowSelector } from './components/DataTableGroupRowSelector.js';
+import { getDataTableCellClassName } from './components/dataTableCellStyles.js';
 import { DataTablePagination } from './components/DataTablePagination.js';
-import { DataTableRowSelector } from './components/DataTableRowSelector.js';
-import { DataTableSelectHeader } from './components/DataTableSelectHeader.js';
 import { DataTableToolbar } from './components/DataTableToolbar.js';
 import { useGroupExpansion } from './hooks/useGroupExpansion.js';
+import { useSelectColumn } from './hooks/useSelectColumn.js';
 import { useSelection } from './hooks/useSelection.js';
 import { flattenLeaves } from './utils.js';
 import { cn } from '../../lib/utils.js';
@@ -61,76 +59,20 @@ function DataTable({
     () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),
     [selectedIds]
   );
-  const SelectColumnHeader = React.useCallback(
-    () => /* @__PURE__ */ jsx(
-      DataTableSelectHeader,
-      {
-        isBackendPagination,
-        selectedIds,
-        data: selectionData,
-        handleSelectAll,
-        isLoading,
-        isSelectionDisabled: selection?.isSelectionDisabled ?? false,
-        selectionDisabledTooltip: selection?.labels?.selectionDisabledTooltip
-      }
-    ),
-    [
-      isBackendPagination,
-      selectedIds,
-      selectionData,
-      handleSelectAll,
-      isLoading,
-      selection?.isSelectionDisabled,
-      selection?.labels?.selectionDisabledTooltip
-    ]
-  );
-  const SelectColumnCell = React.useCallback(
-    ({ row }) => {
-      if (grouping && row.getCanExpand()) {
-        return /* @__PURE__ */ jsx(
-          DataTableGroupRowSelector,
-          {
-            row,
-            selectedIds,
-            getRowId,
-            handleRowSelect
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        DataTableRowSelector,
-        {
-          row,
-          selectedIds,
-          getRowId,
-          handleRowSelect,
-          isRowSelectionDisabled: selection?.isRowSelectionDisabled,
-          rowSelectionDisabledTooltip: selection?.labels?.rowSelectionDisabledTooltip
-        }
-      );
-    },
-    [
-      grouping,
-      selectedIds,
-      getRowId,
-      handleRowSelect,
-      selection?.isRowSelectionDisabled,
-      selection?.labels?.rowSelectionDisabledTooltip
-    ]
-  );
+  const selectColumn = useSelectColumn({
+    selection,
+    selectedIds,
+    selectionData,
+    getRowId,
+    handleRowSelect,
+    handleSelectAll,
+    isBackendPagination,
+    isLoading
+  });
   const tableColumns = React.useMemo(() => {
-    const baseColumns = [...userColumns];
-    if (selection !== void 0) {
-      const selectColumn = {
-        id: "select",
-        size: 50,
-        cell: SelectColumnCell,
-        header: SelectColumnHeader
-      };
-      baseColumns.unshift(selectColumn);
-    }
-    return baseColumns;
-  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader]);
+    if (!selectColumn) return userColumns;
+    return [selectColumn.column, ...userColumns];
+  }, [userColumns, selectColumn]);
   const toolbarSelectionProps = React.useMemo(() => {
     if (isBackendPagination && selection) {
       return {
@@ -165,8 +107,18 @@ function DataTable({
         setPageIndex(newState.pageIndex);
       }
     },
-    [pageIndex, pageSize, setPageIndex]
+    [pageIndex, pageSize]
   );
+  const groupConfig = React.useMemo(() => {
+    if (!grouping) return void 0;
+    return {
+      renderGroupRow: grouping.renderGroupRow,
+      renderGroupSelector: selectColumn?.GroupSelectCell,
+      isGroupOpen,
+      toggleGroup,
+      getRowId
+    };
+  }, [grouping, selectColumn, isGroupOpen, toggleGroup, getRowId]);
   const table = useReactTable({
     data,
     columns: tableColumns,
@@ -201,8 +153,16 @@ function DataTable({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col rounded-md border bg-white", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "h-full scrollbar-gutter-stable overflow-auto overscroll-x-none overscroll-y-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", tableClassName: cn("min-w-max", tableClassName), children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { style: { width: header.column.columnDef.size }, children: /* @__PURE__ */ jsx(Typography, { weight: "medium", className: "whitespace-nowrap", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto overscroll-x-none overscroll-y-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", tableClassName: cn("min-w-max", tableClassName), children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            style: { width: header.column.columnDef.size },
+            className: "h-auto p-0 text-neutral-900",
+            children: /* @__PURE__ */ jsx("div", { className: getDataTableCellClassName({ columnId: header.column.id, kind: "header" }), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
+          },
+          header.id
+        )) }, headerGroup.id)) }),
         /* @__PURE__ */ jsx(
           DataTableBody,
           {
@@ -212,15 +172,10 @@ function DataTable({
             getRowId,
             rowSelection,
             emptyState,
-            group: grouping ? {
-              renderGroupRow: grouping.renderGroupRow,
-              renderGroupSelector: selection ? SelectColumnCell : void 0,
-              isOpen: (row) => isGroupOpen(getRowId(row.original)),
-              onToggle: (row) => toggleGroup(getRowId(row.original))
-            } : void 0
+            group: groupConfig
           }
         )
-      ] }) }) }),
+      ] }) }),
       !!pagination && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2", children: /* @__PURE__ */ jsx(
         DataTablePagination,
         {

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n  Row,\n  PaginationState,\n  Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTableGroupRowSelector } from './components/DataTableGroupRowSelector'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useGroupExpansion } from './hooks/useGroupExpansion'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\nimport { flattenLeaves } from './utils'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  columnVisibility: columnVisibilityConfig,\n  isLoading = false,\n  pagination,\n  grouping,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  emptyState = {\n    title: 'No data available',\n    description: 'Try adjusting your filters or search criteria',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const columnVisibilityState = columnVisibilityConfig?.state ?? internalColumnVisibility\n  const setColumnVisibilityState = columnVisibilityConfig?.onChange ?? setInternalColumnVisibility\n\n  const { isGroupOpen, toggleGroup } = useGroupExpansion({ grouping, data, getRowId })\n\n  const selectionData = React.useMemo(\n    () => (grouping ? flattenLeaves(data, grouping.getSubRows) : data),\n    [grouping, data],\n  )\n\n  const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n    data: selectionData,\n    getRowId,\n    selection,\n  })\n\n  const rowSelection = React.useMemo(\n    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n    [selectedIds],\n  )\n\n  const SelectColumnHeader = React.useCallback(\n    () => (\n      <DataTableSelectHeader\n        isBackendPagination={isBackendPagination}\n        selectedIds={selectedIds}\n        data={selectionData}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n        isSelectionDisabled={selection?.isSelectionDisabled ?? false}\n        selectionDisabledTooltip={selection?.labels?.selectionDisabledTooltip}\n      />\n    ),\n    [\n      isBackendPagination,\n      selectedIds,\n      selectionData,\n      handleSelectAll,\n      isLoading,\n      selection?.isSelectionDisabled,\n      selection?.labels?.selectionDisabledTooltip,\n    ],\n  )\n\n  const SelectColumnCell = React.useCallback(\n    ({ row }: { row: Row<TData> }) => {\n      if (grouping && row.getCanExpand()) {\n        return (\n          <DataTableGroupRowSelector\n            row={row}\n            selectedIds={selectedIds}\n            getRowId={getRowId}\n            handleRowSelect={handleRowSelect}\n          />\n        )\n      }\n      return (\n        <DataTableRowSelector\n          row={row}\n          selectedIds={selectedIds}\n          getRowId={getRowId}\n          handleRowSelect={handleRowSelect}\n          isRowSelectionDisabled={selection?.isRowSelectionDisabled}\n          rowSelectionDisabledTooltip={selection?.labels?.rowSelectionDisabledTooltip}\n        />\n      )\n    },\n    [\n      grouping,\n      selectedIds,\n      getRowId,\n      handleRowSelect,\n      selection?.isRowSelectionDisabled,\n      selection?.labels?.rowSelectionDisabledTooltip,\n    ],\n  )\n\n  const tableColumns = React.useMemo(() => {\n    const baseColumns = [...userColumns]\n    if (selection !== undefined) {\n      const selectColumn = {\n        id: 'select',\n        size: 50,\n        cell: SelectColumnCell,\n        header: SelectColumnHeader,\n      }\n      baseColumns.unshift(selectColumn)\n    }\n    return baseColumns\n  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n  const toolbarSelectionProps = React.useMemo(() => {\n    if (isBackendPagination && selection) {\n      return {\n        isSelectionStarted: selection.isSelectionStarted,\n        onSelectionStart: selection.onSelectionStart,\n        onSelectionCancel: selection.onSelectionCancel,\n        selectionSummary: selection.labels?.selectionSummary,\n        isSelectionDisabled: selection.isSelectionDisabled,\n        labels: selection.labels,\n      }\n    }\n    return undefined\n  }, [isBackendPagination, selection])\n\n  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n  const tablePaginationState = React.useMemo(() => {\n    if (!pagination) {\n      return undefined\n    }\n    return {\n      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n      pageSize,\n    }\n  }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n  const tableGetPaginationRowModel = React.useMemo(() => {\n    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n  }, [pagination, isBackendPagination])\n\n  const tableOnPaginationChange = React.useCallback(\n    (updater: Updater<PaginationState>) => {\n      if (typeof updater === 'function') {\n        const newState = updater({ pageIndex, pageSize })\n        setPageIndex(newState.pageIndex)\n      }\n    },\n    [pageIndex, pageSize, setPageIndex],\n  )\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: tableGetPaginationRowModel,\n    getSubRows: grouping?.getSubRows,\n    getExpandedRowModel: grouping ? getExpandedRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibilityState,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility: columnVisibilityState,\n      rowSelection,\n      pagination: tablePaginationState,\n      expanded: grouping ? true : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        columnVisibility={columnVisibilityConfig}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n        selection={toolbarSelectionProps}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full scrollbar-gutter-stable overflow-auto overscroll-x-none overscroll-y-auto\">\n            <TableComponent className=\"w-full\" tableClassName={cn('min-w-max', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => (\n                      <TableHead key={header.id} style={{ width: header.column.columnDef.size }}>\n                        <Typography weight=\"medium\" className=\"whitespace-nowrap\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <DataTableBody\n                table={table}\n                isLoading={isLoading}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n                emptyState={emptyState}\n                group={\n                  grouping\n                    ? {\n                        renderGroupRow: grouping.renderGroupRow,\n                        renderGroupSelector: selection ? SelectColumnCell : undefined,\n                        isOpen: (row: Row<TData>) => isGroupOpen(getRowId(row.original)),\n                        onToggle: (row: Row<TData>) => toggleGroup(getRowId(row.original)),\n                      }\n                    : undefined\n                }\n              />\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmCO;AAAyC;AACrC;AACT;AACmD;AACjC;AACN;AACZ;AACA;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACE;AACI;AACf;AACa;AACJ;AACM;AACf;AACA;AAEF;AACE;AACA;AAEA;AACA;AAEA;AAEA;AAA4B;AACmC;AAC9C;AAGjB;AAEA;AACA;AACA;AAEA;AAAuE;AAC/D;AACN;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACM;AACN;AACA;AACuD;AACV;AAAA;AAC/C;AAEF;AACE;AACA;AACA;AACA;AACA;AACW;AACQ;AACrB;AAGF;AAA+B;AAE3B;AACE;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AAAA;AACF;AAGJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACmC;AACa;AAAA;AAClD;AAEJ;AACA;AACE;AACA;AACA;AACA;AACW;AACQ;AACrB;AAGF;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AACL;AACb;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACD;AACkC;AAC9B;AACJ;AACtB;AACO;AACa;AAClB;AACY;AACgB;AAC9B;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACkB;AAClB;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAcA;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AAGM;AAC2B;AAC2B;AACW;AACE;AAEnE;AAAA;AAER;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n  PaginationState,\n  Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { getDataTableCellClassName } from './components/dataTableCellStyles'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useGroupExpansion } from './hooks/useGroupExpansion'\nimport { useSelectColumn } from './hooks/useSelectColumn'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\nimport { flattenLeaves } from './utils'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  columnVisibility: columnVisibilityConfig,\n  isLoading = false,\n  pagination,\n  grouping,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  emptyState = {\n    title: 'No data available',\n    description: 'Try adjusting your filters or search criteria',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const columnVisibilityState = columnVisibilityConfig?.state ?? internalColumnVisibility\n  const setColumnVisibilityState = columnVisibilityConfig?.onChange ?? setInternalColumnVisibility\n\n  const { isGroupOpen, toggleGroup } = useGroupExpansion({ grouping, data, getRowId })\n\n  const selectionData = React.useMemo(\n    () => (grouping ? flattenLeaves(data, grouping.getSubRows) : data),\n    [grouping, data],\n  )\n\n  const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n    data: selectionData,\n    getRowId,\n    selection,\n  })\n\n  const rowSelection = React.useMemo(\n    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n    [selectedIds],\n  )\n\n  const selectColumn = useSelectColumn({\n    selection,\n    selectedIds,\n    selectionData,\n    getRowId,\n    handleRowSelect,\n    handleSelectAll,\n    isBackendPagination,\n    isLoading,\n  })\n\n  const tableColumns = React.useMemo(() => {\n    if (!selectColumn) return userColumns\n    return [selectColumn.column, ...userColumns]\n  }, [userColumns, selectColumn])\n\n  const toolbarSelectionProps = React.useMemo(() => {\n    if (isBackendPagination && selection) {\n      return {\n        isSelectionStarted: selection.isSelectionStarted,\n        onSelectionStart: selection.onSelectionStart,\n        onSelectionCancel: selection.onSelectionCancel,\n        selectionSummary: selection.labels?.selectionSummary,\n        isSelectionDisabled: selection.isSelectionDisabled,\n        labels: selection.labels,\n      }\n    }\n    return undefined\n  }, [isBackendPagination, selection])\n\n  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n  const tablePaginationState = React.useMemo(() => {\n    if (!pagination) {\n      return undefined\n    }\n    return {\n      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n      pageSize,\n    }\n  }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n  const tableGetPaginationRowModel = React.useMemo(() => {\n    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n  }, [pagination, isBackendPagination])\n\n  const tableOnPaginationChange = React.useCallback(\n    (updater: Updater<PaginationState>) => {\n      if (typeof updater === 'function') {\n        const newState = updater({ pageIndex, pageSize })\n        setPageIndex(newState.pageIndex)\n      }\n    },\n    [pageIndex, pageSize],\n  )\n\n  const groupConfig = React.useMemo(() => {\n    if (!grouping) return undefined\n\n    return {\n      renderGroupRow: grouping.renderGroupRow,\n      renderGroupSelector: selectColumn?.GroupSelectCell,\n      isGroupOpen,\n      toggleGroup,\n      getRowId,\n    }\n  }, [grouping, selectColumn, isGroupOpen, toggleGroup, getRowId])\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: tableGetPaginationRowModel,\n    getSubRows: grouping?.getSubRows,\n    getExpandedRowModel: grouping ? getExpandedRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibilityState,\n    enableRowSelection: !!selection,\n    getRowId,\n    state: {\n      columnVisibility: columnVisibilityState,\n      rowSelection,\n      pagination: tablePaginationState,\n      expanded: grouping ? true : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        columnVisibility={columnVisibilityConfig}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n        selection={toolbarSelectionProps}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto overscroll-x-none overscroll-y-auto\">\n          <TableComponent className=\"w-full\" tableClassName={cn('min-w-max', tableClassName)}>\n            <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => (\n                    <TableHead\n                      key={header.id}\n                      style={{ width: header.column.columnDef.size }}\n                      className=\"h-auto p-0 text-neutral-900\"\n                    >\n                      <div className={getDataTableCellClassName({ columnId: header.column.id, kind: 'header' })}>\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(header.column.columnDef.header, header.getContext())}\n                      </div>\n                    </TableHead>\n                  ))}\n                </TableRow>\n              ))}\n            </TableHeader>\n            <DataTableBody\n              table={table}\n              isLoading={isLoading}\n              pageSize={pageSize}\n              getRowId={getRowId}\n              rowSelection={rowSelection}\n              emptyState={emptyState}\n              group={groupConfig}\n            />\n          </TableComponent>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgCO;AAAyC;AACrC;AACT;AACmD;AACjC;AACN;AACZ;AACA;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACE;AACI;AACf;AACa;AACJ;AACM;AACf;AACA;AAEF;AACE;AACA;AAEA;AACA;AAEA;AAEA;AAA4B;AACmC;AAC9C;AAGjB;AAEA;AACA;AACA;AAEA;AAAuE;AAC/D;AACN;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAqC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGF;AACE;AACA;AAA2C;AAG7C;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AACL;AACb;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACoB;AAGtB;AACE;AAEA;AAAO;AACoB;AACU;AACnC;AACA;AACA;AACF;AAGF;AAA4B;AAC1B;AACS;AACwB;AACV;AACD;AACkC;AAC9B;AACJ;AACtB;AACO;AACa;AAClB;AACY;AACgB;AAC9B;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACkB;AAClB;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAEI;AAIQ;AAAC;AAAA;AAE8C;AACnC;AAMV;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACO;AAAA;AACT;AAEJ;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}

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

@@ -1,13 +1,13 @@
-import { Table, Row } from '@tanstack/react-table';
-import { ReactNode } from 'react';
-import { RowIdentifierFn } from '../types';
+import { Row, Table } from '@tanstack/react-table';
+import { EmptyStateConfig, RowIdentifierFn } from '../types';
 type GroupRenderConfig<TData> = {
-    readonly renderGroupRow?: (row: Row<TData>) => ReactNode;
+    readonly renderGroupRow?: (row: Row<TData>) => React.ReactNode;
     readonly renderGroupSelector?: React.ComponentType<{
         row: Row<TData>;
     }>;
-    readonly isOpen: (row: Row<TData>) => boolean;
-    readonly onToggle: (row: Row<TData>) => void;
+    readonly isGroupOpen: (groupId: string) => boolean;
+    readonly toggleGroup: (groupId: string) => void;
+    readonly getRowId: RowIdentifierFn<TData>;
 };
 type DataTableBodyProps<TData> = {
     readonly table: Table<TData>;
@@ -15,13 +15,7 @@ type DataTableBodyProps<TData> = {
     readonly pageSize: number;
     readonly getRowId: RowIdentifierFn<TData>;
     readonly rowSelection: Record<string, boolean>;
-    readonly emptyState: {
-        title: string;
-        description: string;
-        imageRoute?: string;
-        imageAlt?: string;
-        imageClassName?: string;
-    };
+    readonly emptyState: EmptyStateConfig;
     readonly group?: GroupRenderConfig<TData>;
 };
 export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, emptyState, group, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/components/DataTableBody.js

@@ -3,23 +3,38 @@ import { flexRender } from '@tanstack/react-table';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
 import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
 import { Typography } from '../../Typography/Typography.js';
+import { DataTableCell } from './DataTableCell.js';
+import { getSkeletonClassName, SELECT_COLUMN_ID, ACTIONS_COLUMN_ID } from './dataTableCellStyles.js';
 import { DataTableGroupRow } from './DataTableGroupRow.js';
 import { cn } from '../../../lib/utils.js';
 
-function TableRowComponent({ row, isSelected, isCollapsible = false, isOpen = true }) {
-  if (!isCollapsible) {
-    return /* @__PURE__ */ jsx(TableRow, { "data-selected": isSelected, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { style: { width: cell.column.columnDef.size }, children: /* @__PURE__ */ jsx(Typography, { className: "whitespace-nowrap", children: cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id)) });
-  }
-  return /* @__PURE__ */ jsx(TableRow, { "data-selected": isSelected, className: cn("transition-colors", !isOpen && "border-b-0"), children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { style: { width: cell.column.columnDef.size }, className: "p-0", children: /* @__PURE__ */ jsx(
-    "div",
+function DataTableRow({
+  row,
+  isSelected,
+  isCollapsible = false,
+  isOpen = true
+}) {
+  return /* @__PURE__ */ jsx(
+    TableRow,
     {
-      className: cn(
-        "grid transition-[grid-template-rows] duration-200 ease-in-out",
-        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: "min-w-max overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4", children: /* @__PURE__ */ jsx(Typography, { className: "whitespace-nowrap", children: cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext()) }) }) })
+      "data-selected": isSelected,
+      className: cn(isCollapsible && "transition-colors", isCollapsible && !isOpen && "border-b-0"),
+      children: row.getVisibleCells().map((cell) => {
+        const content = cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext());
+        return /* @__PURE__ */ jsx(
+          DataTableCell,
+          {
+            columnId: cell.column.id,
+            isCollapsible,
+            isOpen,
+            style: { width: cell.column.columnDef.size },
+            children: content
+          },
+          cell.id
+        );
+      })
     }
-  ) }, cell.id)) });
+  );
 }
 function DataTableBody({
   table,
@@ -31,22 +46,16 @@ function DataTableBody({
   group
 }) {
   if (isLoading) {
-    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => {
-      let skeletonClass = "h-[20px] w-full";
-      if (column.id === "actions") skeletonClass = "h-8 w-8 shrink-0";
-      else if (column.id === "select") skeletonClass = "h-5 w-5 shrink-0";
-      let justifyClass = "justify-center";
-      if (column.id === "actions") justifyClass = "justify-end";
-      else if (column.id === "select") justifyClass = "justify-start";
-      return /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          style: { width: column.columnDef.size },
-          children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center", justifyClass), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(skeletonClass) }) })
-        },
-        `skeleton-cell-${String(index)}-${column.id}`
-      );
-    }) }, `skeleton-row-${String(index)}`)) });
+    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => /* @__PURE__ */ jsx(
+      DataTableCell,
+      {
+        columnId: column.id,
+        style: { width: column.columnDef.size },
+        className: column.id !== SELECT_COLUMN_ID && column.id !== ACTIONS_COLUMN_ID ? "w-full" : void 0,
+        children: /* @__PURE__ */ jsx(Skeleton, { className: getSkeletonClassName(column.id) })
+      },
+      `skeleton-cell-${String(index)}-${column.id}`
+    )) }, `skeleton-row-${String(index)}`)) });
   }
   const rows = table.getRowModel().rows;
   if (!rows.length) {
@@ -75,8 +84,8 @@ function DataTableBody({
           colSpan: visibleColumnCount,
           selector: group.renderGroupSelector ? /* @__PURE__ */ jsx(group.renderGroupSelector, { row }) : void 0,
           content,
-          isOpen: group.isOpen(row),
-          onToggle: () => group.onToggle(row)
+          isOpen: group.isGroupOpen(rowId),
+          onToggle: () => group.toggleGroup(rowId)
         },
         rowId
       );
@@ -84,12 +93,12 @@ function DataTableBody({
     const isSelected = rowSelection[rowId] ?? false;
     const parentRow = group ? row.getParentRow() : void 0;
     return /* @__PURE__ */ jsx(
-      TableRowComponent,
+      DataTableRow,
       {
         row,
         isSelected,
         isCollapsible: !!group,
-        isOpen: parentRow ? group?.isOpen(parentRow) ?? true : true
+        isOpen: parentRow ? group?.isGroupOpen(getRowId(parentRow.original)) ?? true : true
       },
       rowId
     );

package/dist/components/DataTable/components/DataTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\nimport { ReactNode } from 'react'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { DataTableGroupRow } from './DataTableGroupRow'\n\nimport { cn } from '@/lib/utils'\n\ntype GroupRenderConfig<TData> = {\n  readonly renderGroupRow?: (row: Row<TData>) => ReactNode\n  readonly renderGroupSelector?: React.ComponentType<{ row: Row<TData> }>\n  readonly isOpen: (row: Row<TData>) => boolean\n  readonly onToggle: (row: Row<TData>) => void\n}\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly emptyState: {\n    title: string\n    description: string\n    imageRoute?: string\n    imageAlt?: string\n    imageClassName?: string\n  }\n  readonly group?: GroupRenderConfig<TData>\n}\n\ntype TableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelected: boolean\n  readonly isCollapsible?: boolean\n  readonly isOpen?: boolean\n}\n\nfunction TableRowComponent<TData>({ row, isSelected, isCollapsible = false, isOpen = true }: TableRowProps<TData>) {\n  if (!isCollapsible) {\n    return (\n      <TableRow data-selected={isSelected}>\n        {row.getVisibleCells().map((cell) => (\n          <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n            <Typography className=\"whitespace-nowrap\">\n              {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n            </Typography>\n          </TableCell>\n        ))}\n      </TableRow>\n    )\n  }\n\n  return (\n    <TableRow data-selected={isSelected} className={cn('transition-colors', !isOpen && 'border-b-0')}>\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }} className=\"p-0\">\n          <div\n            className={cn(\n              'grid transition-[grid-template-rows] duration-200 ease-in-out',\n              isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <div className=\"min-w-max overflow-hidden\">\n              <div className=\"px-4 py-4\">\n                <Typography className=\"whitespace-nowrap\">\n                  {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </Typography>\n              </div>\n            </div>\n          </div>\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  emptyState,\n  group,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => {\n                let skeletonClass = 'h-[20px] w-full'\n                if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n                else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n                let justifyClass = 'justify-center'\n                if (column.id === 'actions') justifyClass = 'justify-end'\n                else if (column.id === 'select') justifyClass = 'justify-start'\n\n                return (\n                  <TableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    style={{ width: column.columnDef.size }}\n                  >\n                    <div className={cn('flex items-center', justifyClass)}>\n                      <Skeleton className={cn(skeletonClass)} />\n                    </div>\n                  </TableCell>\n                )\n              })}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n    return (\n      <TableBody>\n        <TableRow className=\"h-full\">\n          <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n            <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n              {emptyState.imageRoute && (\n                <img\n                  className={cn('mb-6 w-[200px] md:w-[300px]', emptyState.imageClassName)}\n                  src={emptyState.imageRoute}\n                  alt={emptyState.imageAlt ?? 'No data available'}\n                />\n              )}\n              <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n                {emptyState.title}\n              </Typography>\n              <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n                {emptyState.description}\n              </Typography>\n            </div>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  const visibleColumnCount = table.getVisibleLeafColumns().length\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n\n        if (group && row.getCanExpand()) {\n          const content = group.renderGroupRow?.(row) ?? `${String(row.getLeafRows().length)} items`\n          return (\n            <DataTableGroupRow\n              key={rowId}\n              colSpan={visibleColumnCount}\n              selector={group.renderGroupSelector ? <group.renderGroupSelector row={row} /> : undefined}\n              content={content}\n              isOpen={group.isOpen(row)}\n              onToggle={() => group.onToggle(row)}\n            />\n          )\n        }\n\n        const isSelected = rowSelection[rowId] ?? false\n        const parentRow = group ? row.getParentRow() : undefined\n        return (\n          <TableRowComponent\n            key={rowId}\n            row={row}\n            isSelected={isSelected}\n            isCollapsible={!!group}\n            isOpen={parentRow ? (group?.isOpen(parentRow) ?? true) : true}\n          />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { flexRender, Row, Table } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { EmptyStateConfig, RowIdentifierFn } from '../types'\n\nimport { DataTableCell } from './DataTableCell'\nimport { ACTIONS_COLUMN_ID, getSkeletonClassName, SELECT_COLUMN_ID } from './dataTableCellStyles'\nimport { DataTableGroupRow } from './DataTableGroupRow'\n\nimport { cn } from '@/lib/utils'\n\ntype GroupRenderConfig<TData> = {\n  readonly renderGroupRow?: (row: Row<TData>) => React.ReactNode\n  readonly renderGroupSelector?: React.ComponentType<{ row: Row<TData> }>\n  readonly isGroupOpen: (groupId: string) => boolean\n  readonly toggleGroup: (groupId: string) => void\n  readonly getRowId: RowIdentifierFn<TData>\n}\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly emptyState: EmptyStateConfig\n  readonly group?: GroupRenderConfig<TData>\n}\n\ntype DataTableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelected: boolean\n  readonly isCollapsible?: boolean\n  readonly isOpen?: boolean\n}\n\nfunction DataTableRow<TData>({\n  row,\n  isSelected,\n  isCollapsible = false,\n  isOpen = true,\n}: DataTableRowProps<TData>) {\n  return (\n    <TableRow\n      data-selected={isSelected}\n      className={cn(isCollapsible && 'transition-colors', isCollapsible && !isOpen && 'border-b-0')}\n    >\n      {row.getVisibleCells().map((cell) => {\n        const content = cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())\n\n        return (\n          <DataTableCell\n            key={cell.id}\n            columnId={cell.column.id}\n            isCollapsible={isCollapsible}\n            isOpen={isOpen}\n            style={{ width: cell.column.columnDef.size }}\n          >\n            {content}\n          </DataTableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  emptyState,\n  group,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                  <DataTableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    columnId={column.id}\n                    style={{ width: column.columnDef.size }}\n                    className={\n                      column.id !== SELECT_COLUMN_ID && column.id !== ACTIONS_COLUMN_ID ? 'w-full' : undefined\n                    }\n                  >\n                    <Skeleton className={getSkeletonClassName(column.id)} />\n                  </DataTableCell>\n                ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n    return (\n      <TableBody>\n        <TableRow className=\"h-full\">\n          <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n            <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n              {emptyState.imageRoute && (\n                <img\n                  className={cn('mb-6 w-[200px] md:w-[300px]', emptyState.imageClassName)}\n                  src={emptyState.imageRoute}\n                  alt={emptyState.imageAlt ?? 'No data available'}\n                />\n              )}\n              <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n                {emptyState.title}\n              </Typography>\n              <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n                {emptyState.description}\n              </Typography>\n            </div>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  const visibleColumnCount = table.getVisibleLeafColumns().length\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n\n        if (group && row.getCanExpand()) {\n          const content = group.renderGroupRow?.(row) ?? `${String(row.getLeafRows().length)} items`\n          return (\n            <DataTableGroupRow\n              key={rowId}\n              colSpan={visibleColumnCount}\n              selector={group.renderGroupSelector ? <group.renderGroupSelector row={row} /> : undefined}\n              content={content}\n              isOpen={group.isGroupOpen(rowId)}\n              onToggle={() => group.toggleGroup(rowId)}\n            />\n          )\n        }\n\n        const isSelected = rowSelection[rowId] ?? false\n        const parentRow = group ? row.getParentRow() : undefined\n        return (\n          <DataTableRow\n            key={rowId}\n            row={row}\n            isSelected={isSelected}\n            isCollapsible={!!group}\n            isOpen={parentRow ? (group?.isGroupOpen(getRowId(parentRow.original)) ?? true) : true}\n          />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { ComponentProps, ReactNode } from 'react';
+import { TableCell } from '../../Table';
+type DataTableCellProps = {
+    readonly columnId: string;
+    readonly isCollapsible?: boolean;
+    readonly isOpen?: boolean;
+    readonly className?: string;
+    readonly children: ReactNode;
+} & Omit<ComponentProps<typeof TableCell>, 'className' | 'children'>;
+export declare function DataTableCell({ columnId, isCollapsible, isOpen, className, children, ...tableCellProps }: DataTableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/DataTableCell.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { TableCell } from '../../Table/Table.js';
+import { getDataTableCellClassName } from './dataTableCellStyles.js';
+import { cn } from '../../../lib/utils.js';
+
+function DataTableCell({
+  columnId,
+  isCollapsible = false,
+  isOpen = true,
+  className,
+  children,
+  ...tableCellProps
+}) {
+  const content = /* @__PURE__ */ jsx("div", { className: cn(getDataTableCellClassName({ columnId }), className), children });
+  return /* @__PURE__ */ jsx(TableCell, { className: "p-0", ...tableCellProps, children: isCollapsible ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid transition-[grid-template-rows] duration-200 ease-in-out",
+        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "min-w-max overflow-hidden", children: content })
+    }
+  ) : content });
+}
+
+export { DataTableCell };
+//# sourceMappingURL=DataTableCell.js.map

package/dist/components/DataTable/components/DataTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.js","sources":["../../../../src/components/DataTable/components/DataTableCell.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from 'react'\n\nimport { TableCell } from '../../Table'\n\nimport { getDataTableCellClassName } from './dataTableCellStyles'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableCellProps = {\n  readonly columnId: string\n  readonly isCollapsible?: boolean\n  readonly isOpen?: boolean\n  readonly className?: string\n  readonly children: ReactNode\n} & Omit<ComponentProps<typeof TableCell>, 'className' | 'children'>\n\nexport function DataTableCell({\n  columnId,\n  isCollapsible = false,\n  isOpen = true,\n  className,\n  children,\n  ...tableCellProps\n}: DataTableCellProps) {\n  const content = (\n    <div className={cn(getDataTableCellClassName({ columnId }), className)}>{children}</div>\n  )\n\n  return (\n    <TableCell className=\"p-0\" {...tableCellProps}>\n      {isCollapsible ? (\n        <div\n          className={cn(\n            'grid transition-[grid-template-rows] duration-200 ease-in-out',\n            isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n          )}\n        >\n          <div className=\"min-w-max overflow-hidden\">{content}</div>\n        </div>\n      ) : (\n        content\n      )}\n    </TableCell>\n  )\n}\n"],"names":[],"mappings":";;;;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,MAAA,GAAS,IAAA;AAAA,EACT,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,OAAA,mBACJ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,QAAA,EAAU,CAAA,EAAG,SAAS,CAAA,EAAI,QAAA,EAAS,CAAA;AAGpF,EAAA,2BACG,SAAA,EAAA,EAAU,SAAA,EAAU,KAAA,EAAO,GAAG,gBAC5B,QAAA,EAAA,aAAA,mBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+DAAA;AAAA,QACA,SAAS,iBAAA,GAAoB;AAAA,OAC/B;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EAA6B,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA,MAGtD,OAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,30 @@
+import { Row } from '@tanstack/react-table';
+type HeaderProps<TData> = {
+    readonly variant: 'header';
+    readonly isBackendPagination: boolean;
+    readonly selectedIds: Set<string>;
+    readonly data: Array<TData>;
+    readonly handleSelectAll: (checked: boolean) => void;
+    readonly isLoading: boolean;
+    readonly isSelectionDisabled: boolean;
+    readonly selectionDisabledTooltip?: string;
+};
+type RowProps<TData extends object> = {
+    readonly variant: 'row';
+    readonly row: Row<TData>;
+    readonly selectedIds: Set<string>;
+    readonly getRowId: (original: TData) => string;
+    readonly handleRowSelect: (rowId: string, checked: boolean) => void;
+    readonly isRowSelectionDisabled?: boolean | ((row: TData) => boolean);
+    readonly rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined);
+};
+type GroupProps<TData extends object> = {
+    readonly variant: 'group';
+    readonly row: Row<TData>;
+    readonly selectedIds: Set<string>;
+    readonly getRowId: (original: TData) => string;
+    readonly handleRowSelect: (rowId: string, checked: boolean) => void;
+};
+type DataTableCheckboxProps<TData extends object> = HeaderProps<TData> | RowProps<TData> | GroupProps<TData>;
+export declare function DataTableCheckbox<TData extends object>(props: DataTableCheckboxProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/DataTableCheckbox.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from '../../Tooltip/Tooltip.js';
+
+function withTooltip(tooltip, children) {
+  if (!tooltip) {
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex", children });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 200, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
+}
+function DataTableCheckbox(props) {
+  if (props.variant === "header") {
+    if (props.isBackendPagination) {
+      return /* @__PURE__ */ jsx("span", { className: "inline-flex h-5 w-5 shrink-0", "aria-hidden": true });
+    }
+    const allSelected = props.data.length > 0 && props.selectedIds.size === props.data.length;
+    const someSelected = props.selectedIds.size > 0 && !allSelected;
+    return withTooltip(
+      props.selectionDisabledTooltip,
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: someSelected ? "indeterminate" : allSelected,
+          onCheckedChange: props.handleSelectAll,
+          disabled: props.isLoading || !props.data.length || props.isSelectionDisabled,
+          "aria-label": "Select all rows"
+        }
+      )
+    );
+  }
+  if (props.variant === "group") {
+    const leafIds = props.row.getLeafRows().map((leaf) => props.getRowId(leaf.original));
+    const selectedCount = leafIds.filter((id) => props.selectedIds.has(id)).length;
+    const allSelected = leafIds.length > 0 && selectedCount === leafIds.length;
+    const someSelected = selectedCount > 0 && !allSelected;
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: someSelected ? "indeterminate" : allSelected,
+        onCheckedChange: (checked) => leafIds.forEach((id) => props.handleRowSelect(id, !!checked)),
+        onClick: (event) => event.stopPropagation(),
+        className: "cursor-default",
+        disabled: leafIds.length === 0,
+        "aria-label": "Select group"
+      }
+    );
+  }
+  const isDisabled = typeof props.isRowSelectionDisabled === "function" ? props.isRowSelectionDisabled(props.row.original) : props.isRowSelectionDisabled ?? false;
+  const tooltipText = typeof props.rowSelectionDisabledTooltip === "function" ? props.rowSelectionDisabledTooltip(props.row.original) : props.rowSelectionDisabledTooltip;
+  return withTooltip(
+    isDisabled ? tooltipText : void 0,
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: props.selectedIds.has(props.getRowId(props.row.original)),
+        onCheckedChange: (checked) => props.handleRowSelect(props.getRowId(props.row.original), !!checked),
+        "aria-label": "Select row",
+        disabled: isDisabled
+      }
+    )
+  );
+}
+
+export { DataTableCheckbox };
+//# sourceMappingURL=DataTableCheckbox.js.map

package/dist/components/DataTable/components/DataTableCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCheckbox.js","sources":["../../../../src/components/DataTable/components/DataTableCheckbox.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\nimport { ReactNode } from 'react'\n\nimport { Checkbox } from '@/components/Checkbox'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\n\ntype HeaderProps<TData> = {\n  readonly variant: 'header'\n  readonly isBackendPagination: boolean\n  readonly selectedIds: Set<string>\n  readonly data: Array<TData>\n  readonly handleSelectAll: (checked: boolean) => void\n  readonly isLoading: boolean\n  readonly isSelectionDisabled: boolean\n  readonly selectionDisabledTooltip?: string\n}\n\ntype RowProps<TData extends object> = {\n  readonly variant: 'row'\n  readonly row: Row<TData>\n  readonly selectedIds: Set<string>\n  readonly getRowId: (original: TData) => string\n  readonly handleRowSelect: (rowId: string, checked: boolean) => void\n  readonly isRowSelectionDisabled?: boolean | ((row: TData) => boolean)\n  readonly rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined)\n}\n\ntype GroupProps<TData extends object> = {\n  readonly variant: 'group'\n  readonly row: Row<TData>\n  readonly selectedIds: Set<string>\n  readonly getRowId: (original: TData) => string\n  readonly handleRowSelect: (rowId: string, checked: boolean) => void\n}\n\ntype DataTableCheckboxProps<TData extends object> = HeaderProps<TData> | RowProps<TData> | GroupProps<TData>\n\nfunction withTooltip(tooltip: string | undefined, children: ReactNode) {\n  if (!tooltip) {\n    return <span className=\"inline-flex\">{children}</span>\n  }\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={200}>\n        <TooltipTrigger asChild>\n          <span className=\"inline-flex\">{children}</span>\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n\nexport function DataTableCheckbox<TData extends object>(props: DataTableCheckboxProps<TData>) {\n  if (props.variant === 'header') {\n    if (props.isBackendPagination) {\n      return <span className=\"inline-flex h-5 w-5 shrink-0\" aria-hidden />\n    }\n\n    const allSelected = props.data.length > 0 && props.selectedIds.size === props.data.length\n    const someSelected = props.selectedIds.size > 0 && !allSelected\n\n    return withTooltip(\n      props.selectionDisabledTooltip,\n      <Checkbox\n        checked={someSelected ? 'indeterminate' : allSelected}\n        onCheckedChange={props.handleSelectAll}\n        disabled={props.isLoading || !props.data.length || props.isSelectionDisabled}\n        aria-label=\"Select all rows\"\n      />,\n    )\n  }\n\n  if (props.variant === 'group') {\n    const leafIds = props.row.getLeafRows().map((leaf) => props.getRowId(leaf.original))\n    const selectedCount = leafIds.filter((id) => props.selectedIds.has(id)).length\n    const allSelected = leafIds.length > 0 && selectedCount === leafIds.length\n    const someSelected = selectedCount > 0 && !allSelected\n\n    return (\n      <Checkbox\n        checked={someSelected ? 'indeterminate' : allSelected}\n        onCheckedChange={(checked) => leafIds.forEach((id) => props.handleRowSelect(id, !!checked))}\n        onClick={(event) => event.stopPropagation()}\n        className=\"cursor-default\"\n        disabled={leafIds.length === 0}\n        aria-label=\"Select group\"\n      />\n    )\n  }\n\n  const isDisabled =\n    typeof props.isRowSelectionDisabled === 'function'\n      ? props.isRowSelectionDisabled(props.row.original)\n      : (props.isRowSelectionDisabled ?? false)\n\n  const tooltipText =\n    typeof props.rowSelectionDisabledTooltip === 'function'\n      ? props.rowSelectionDisabledTooltip(props.row.original)\n      : props.rowSelectionDisabledTooltip\n\n  return withTooltip(\n    isDisabled ? tooltipText : undefined,\n    <Checkbox\n      checked={props.selectedIds.has(props.getRowId(props.row.original))}\n      onCheckedChange={(checked) => props.handleRowSelect(props.getRowId(props.row.original), !!checked)}\n      aria-label=\"Select row\"\n      disabled={isDisabled}\n    />,\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/DataTableGroupRow.js

@@ -1,23 +1,32 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight';
 import { TableRow, TableCell } from '../../Table/Table.js';
-import { Typography } from '../../Typography/Typography.js';
+import { getDataTableCellClassName, ACTIONS_COLUMN_ID } from './dataTableCellStyles.js';
 import { cn } from '../../../lib/utils.js';
 
 function DataTableGroupRow({ colSpan, selector, content, isOpen, onToggle }) {
-  return /* @__PURE__ */ jsx(TableRow, { onClick: onToggle, "aria-expanded": isOpen, className: "cursor-pointer bg-white hover:bg-neutral-50", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [
+  return /* @__PURE__ */ jsx(TableRow, { onClick: onToggle, "aria-expanded": isOpen, className: "cursor-pointer bg-white hover:bg-neutral-50", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-stretch justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(getDataTableCellClassName({ columnId: "default", kind: "group-label" }), "gap-3"), children: [
       selector,
-      /* @__PURE__ */ jsx(Typography, { weight: "medium", children: content })
+      content
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "sticky right-0 flex items-center bg-inherit px-4 py-4", children: /* @__PURE__ */ jsx(
-      CaretRight,
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        size: 16,
-        weight: "bold",
-        className: cn("shrink-0 transition-transform", isOpen && "rotate-90")
+        className: cn(
+          getDataTableCellClassName({ columnId: ACTIONS_COLUMN_ID }),
+          "sticky right-0 shrink-0 bg-inherit"
+        ),
+        children: /* @__PURE__ */ jsx(
+          CaretRight,
+          {
+            size: 16,
+            weight: "bold",
+            className: cn("shrink-0 transition-transform", isOpen && "rotate-90")
+          }
+        )
       }
-    ) })
+    )
   ] }) }) });
 }