periplo-ui 4.5.0 → 4.6.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 type CheckboxProps = {
     /** Additional CSS classes to be applied to the checkbox */
     className?: string;
-    /** The controlled checked state of the checkbox */
-    checked?: boolean;
+    /** The controlled checked state of the checkbox. `'indeterminate'` renders a partial (dash) state. */
+    checked?: CheckboxPrimitive.CheckedState;
     /** The default checked state when initially rendered */
     defaultChecked?: boolean;
     /** Whether the checkbox is disabled */
@@ -42,8 +42,8 @@ type CheckboxProps = {
 declare const Checkbox: React.ForwardRefExoticComponent<{
     /** Additional CSS classes to be applied to the checkbox */
     className?: string;
-    /** The controlled checked state of the checkbox */
-    checked?: boolean;
+    /** The controlled checked state of the checkbox. `'indeterminate'` renders a partial (dash) state. */
+    checked?: CheckboxPrimitive.CheckedState;
     /** The default checked state when initially rendered */
     defaultChecked?: boolean;
     /** Whether the checkbox is disabled */

package/dist/components/Checkbox/Checkbox.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Check } from '@phosphor-icons/react/dist/ssr/Check';
+import { Minus } from '@phosphor-icons/react/dist/ssr/Minus';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
@@ -14,11 +15,12 @@ const Checkbox = React.forwardRef(
         "focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2 focus-visible:outline-none",
         "disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50",
         "data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500",
+        "data-[state=indeterminate]:border-neutral-500 data-[state=indeterminate]:bg-neutral-500",
         "hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("absolute inset-0 flex items-center justify-center"), children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white" }) })
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("absolute inset-0 flex items-center justify-center"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5 text-white", weight: "bold" }) : /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white" }) })
     }
   )
 );

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox */\n  checked?: boolean\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n        'focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2 focus-visible:outline-none',\n        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n        'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={cn('absolute inset-0 flex items-center justify-center')}>\n        <Check className=\"h-3.5 w-3.5 text-white\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;AA8CA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,iBAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAA,CAAkB,SAAA,EAAlB,EAA4B,SAAA,EAAW,EAAA,CAAG,mDAAmD,CAAA,EAC5F,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,CAAA,EAC5C;AAAA;AAAA;AAGN;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react/dist/ssr/Check'\nimport { Minus } from '@phosphor-icons/react/dist/ssr/Minus'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = {\n  /** Additional CSS classes to be applied to the checkbox */\n  className?: string\n  /** The controlled checked state of the checkbox. `'indeterminate'` renders a partial (dash) state. */\n  checked?: CheckboxPrimitive.CheckedState\n  /** The default checked state when initially rendered */\n  defaultChecked?: boolean\n  /** Whether the checkbox is disabled */\n  disabled?: boolean\n  /** Whether the checkbox is required in a form */\n  required?: boolean\n  /** The name of the checkbox when used in a form */\n  name?: string\n  /** The value of the checkbox when used in a form */\n  value?: string\n  /** Handler called when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void\n} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n *   <Checkbox id=\"terms\" />\n *   <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(\n        'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n        'focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2 focus-visible:outline-none',\n        'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n        'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n        'data-[state=indeterminate]:border-neutral-500 data-[state=indeterminate]:bg-neutral-500',\n        'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={cn('absolute inset-0 flex items-center justify-center')}>\n        {props.checked === 'indeterminate' ? (\n          <Minus className=\"h-3.5 w-3.5 text-white\" weight=\"bold\" />\n        ) : (\n          <Check className=\"h-3.5 w-3.5 text-white\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,iBAAA,CAAkB,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,yFAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,SAAA,EAAlB,EAA4B,WAAW,EAAA,CAAG,mDAAmD,CAAA,EAC3F,QAAA,EAAA,KAAA,CAAM,OAAA,KAAY,eAAA,uBAChB,KAAA,EAAA,EAAM,SAAA,EAAU,0BAAyB,MAAA,EAAO,MAAA,EAAO,oBAExD,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,wBAAA,EAAyB,CAAA,EAE9C;AAAA;AAAA;AAGN;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}

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

@@ -3,4 +3,4 @@ import { DataTableProps } from './types';
  * A feature-rich data table component built on top of TanStack Table.
  * Provides sorting, filtering, pagination, and column visibility controls.
  */
-export declare function DataTable<TData extends object>({ columns: userColumns, data, getRowId, columnVisibility: columnVisibilityConfig, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, selection, labels, emptyState, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends object>({ columns: userColumns, data, getRowId, columnVisibility: columnVisibilityConfig, isLoading, pagination, grouping, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, selection, labels, emptyState, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -1,15 +1,18 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { getPaginationRowModel, useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+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 { 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 { useSelection } from './hooks/useSelection.js';
+import { flattenLeaves } from './utils.js';
 import { cn } from '../../lib/utils.js';
 
 function DataTable({
@@ -19,6 +22,7 @@ function DataTable({
   columnVisibility: columnVisibilityConfig,
   isLoading = false,
   pagination,
+  grouping,
   primaryFilters,
   secondaryFilters,
   activePrimaryFiltersCount = 0,
@@ -39,12 +43,17 @@ function DataTable({
   const [pageIndex, setPageIndex] = React.useState(0);
   const columnVisibilityState = columnVisibilityConfig?.state ?? internalColumnVisibility;
   const setColumnVisibilityState = columnVisibilityConfig?.onChange ?? setInternalColumnVisibility;
+  const { isGroupOpen, toggleGroup } = useGroupExpansion({ grouping, data, getRowId });
+  const selectionData = React.useMemo(
+    () => grouping ? flattenLeaves(data, grouping.getSubRows) : data,
+    [grouping, data]
+  );
   const isBackendPagination = pagination !== void 0 && "onPageChange" in pagination;
   const total = isBackendPagination ? pagination.total : data.length;
   const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length);
   const totalPages = Math.ceil(total / pageSize);
   const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({
-    data,
+    data: selectionData,
     getRowId,
     selection
   });
@@ -58,7 +67,7 @@ function DataTable({
       {
         isBackendPagination,
         selectedIds,
-        data,
+        data: selectionData,
         handleSelectAll,
         isLoading,
         isSelectionDisabled: selection?.isSelectionDisabled ?? false,
@@ -68,7 +77,7 @@ function DataTable({
     [
       isBackendPagination,
       selectedIds,
-      data,
+      selectionData,
       handleSelectAll,
       isLoading,
       selection?.isSelectionDisabled,
@@ -76,18 +85,32 @@ function DataTable({
     ]
   );
   const SelectColumnCell = React.useCallback(
-    ({ row }) => /* @__PURE__ */ jsx(
-      DataTableRowSelector,
-      {
-        row,
-        selectedIds,
-        getRowId,
-        handleRowSelect,
-        isRowSelectionDisabled: selection?.isRowSelectionDisabled,
-        rowSelectionDisabledTooltip: selection?.labels?.rowSelectionDisabledTooltip
+    ({ 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,
@@ -149,13 +172,16 @@ function DataTable({
     columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: tableGetPaginationRowModel,
+    getSubRows: grouping?.getSubRows,
+    getExpandedRowModel: grouping ? getExpandedRowModel() : void 0,
     onColumnVisibilityChange: setColumnVisibilityState,
     enableRowSelection: !!selection,
     getRowId,
     state: {
       columnVisibility: columnVisibilityState,
       rowSelection,
-      pagination: tablePaginationState
+      pagination: tablePaginationState,
+      expanded: grouping ? true : void 0
     },
     manualPagination: isBackendPagination,
     onPaginationChange: isBackendPagination ? void 0 : tableOnPaginationChange
@@ -175,7 +201,7 @@ 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 overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full overscroll-contain", tableClassName: cn("table-fixed ", tableClassName), 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(
           DataTableBody,
@@ -185,8 +211,13 @@ function DataTable({
             pageSize,
             getRowId,
             rowSelection,
-            isSelectionStarted: selection?.isSelectionStarted ?? false,
-            emptyState
+            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
           }
         )
       ] }) }) }),

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  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 { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\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  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 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,\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={data}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n        isSelectionDisabled={selection?.isSelectionDisabled ?? false}\n        selectionDisabledTooltip={selection?.labels?.selectionDisabledTooltip}\n      />\n    ),\n    [\n      isBackendPagination,\n      selectedIds,\n      data,\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      <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      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    onColumnVisibilityChange: setColumnVisibilityState,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility: columnVisibilityState,\n      rowSelection,\n      pagination: tablePaginationState,\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 overflow-auto\">\n            <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', 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                isSelectionStarted={selection?.isSelectionStarted ?? false}\n                emptyState={emptyState}\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":";;;;;;;;;;;;;;AA+BO;AAAyC;AACrC;AACT;AACmD;AACjC;AACN;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACE;AACI;AACf;AACa;AACJ;AACM;AACf;AACA;AAEF;AACE;AACA;AAEA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACuD;AACV;AAAA;AAC/C;AAEF;AACE;AACA;AACA;AACA;AACA;AACW;AACQ;AACrB;AAGF;AAA+B;AAE3B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACmC;AACa;AAAA;AAClD;AAEF;AACE;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;AACG;AACJ;AACtB;AACO;AACa;AAClB;AACY;AACd;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;AACqD;AACrD;AAAA;AACF;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  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;;"}

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

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

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

@@ -3,13 +3,23 @@ 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 { DataTableGroupRow } from './DataTableGroupRow.js';
 import { cn } from '../../../lib/utils.js';
 
-function TableRowComponent({
-  row,
-  isSelected
-}) {
-  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, { children: cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id)) });
+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",
+    {
+      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()) }) }) })
+    }
+  ) }, cell.id)) });
 }
 function DataTableBody({
   table,
@@ -17,8 +27,8 @@ function DataTableBody({
   pageSize,
   getRowId,
   rowSelection,
-  isSelectionStarted,
-  emptyState
+  emptyState,
+  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) => {
@@ -54,10 +64,35 @@ function DataTableBody({
       /* @__PURE__ */ jsx(Typography, { variant: "title-sm", className: "text-center opacity-80", children: emptyState.description })
     ] }) }) }) });
   }
+  const visibleColumnCount = table.getVisibleLeafColumns().length;
   return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
     const rowId = getRowId(row.original);
+    if (group && row.getCanExpand()) {
+      const content = group.renderGroupRow?.(row) ?? `${String(row.getLeafRows().length)} items`;
+      return /* @__PURE__ */ jsx(
+        DataTableGroupRow,
+        {
+          colSpan: visibleColumnCount,
+          selector: group.renderGroupSelector ? /* @__PURE__ */ jsx(group.renderGroupSelector, { row }) : void 0,
+          content,
+          isOpen: group.isOpen(row),
+          onToggle: () => group.onToggle(row)
+        },
+        rowId
+      );
+    }
     const isSelected = rowSelection[rowId] ?? false;
-    return /* @__PURE__ */ jsx(TableRowComponent, { row, isSelected, isSelectionStarted }, rowId);
+    const parentRow = group ? row.getParentRow() : void 0;
+    return /* @__PURE__ */ jsx(
+      TableRowComponent,
+      {
+        row,
+        isSelected,
+        isCollapsible: !!group,
+        isOpen: parentRow ? group?.isOpen(parentRow) ?? 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'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\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 isSelectionStarted: boolean\n  readonly emptyState: {\n    title: string\n    description: string\n    imageRoute?: string\n    imageAlt?: string\n    imageClassName?: string\n  }\n}\n\ntype TableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelectable: boolean\n  readonly isSelected: boolean\n  readonly isSelectionStarted: boolean\n  readonly getRowId: (row: TData) => string\n  readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n  row,\n  isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\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>\n            {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </Typography>\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  isSelectionStarted,\n  emptyState,\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  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n        return (\n          <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\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 { 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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"}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type DataTableGroupRowProps = {
+    readonly colSpan: number;
+    readonly selector?: ReactNode;
+    readonly content: ReactNode;
+    readonly isOpen: boolean;
+    readonly onToggle: () => void;
+};
+export declare function DataTableGroupRow({ colSpan, selector, content, isOpen, onToggle }: DataTableGroupRowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+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 { 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: [
+      selector,
+      /* @__PURE__ */ jsx(Typography, { weight: "medium", children: content })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sticky right-0 flex items-center bg-inherit px-4 py-4", children: /* @__PURE__ */ jsx(
+      CaretRight,
+      {
+        size: 16,
+        weight: "bold",
+        className: cn("shrink-0 transition-transform", isOpen && "rotate-90")
+      }
+    ) })
+  ] }) }) });
+}
+
+export { DataTableGroupRow };
+//# sourceMappingURL=DataTableGroupRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGroupRow.js","sources":["../../../../src/components/DataTable/components/DataTableGroupRow.tsx"],"sourcesContent":["import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight'\nimport { ReactNode } from 'react'\n\nimport { TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableGroupRowProps = {\n  readonly colSpan: number\n  readonly selector?: ReactNode\n  readonly content: ReactNode\n  readonly isOpen: boolean\n  readonly onToggle: () => void\n}\n\nexport function DataTableGroupRow({ colSpan, selector, content, isOpen, onToggle }: DataTableGroupRowProps) {\n  return (\n    <TableRow onClick={onToggle} aria-expanded={isOpen} className=\"cursor-pointer bg-white hover:bg-neutral-50\">\n      <TableCell colSpan={colSpan} className=\"p-0\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3 px-4 py-4\">\n            {selector}\n            <Typography weight=\"medium\">{content}</Typography>\n          </div>\n          <div className=\"sticky right-0 flex items-center bg-inherit px-4 py-4\">\n            <CaretRight\n              size={16}\n              weight=\"bold\"\n              className={cn('shrink-0 transition-transform', isOpen && 'rotate-90')}\n            />\n          </div>\n        </div>\n      </TableCell>\n    </TableRow>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAgBO,SAAS,kBAAkB,EAAE,OAAA,EAAS,UAAU,OAAA,EAAS,MAAA,EAAQ,UAAS,EAA2B;AAC1G,EAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAS,QAAA,EAAU,eAAA,EAAe,QAAQ,SAAA,EAAU,6CAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAkB,SAAA,EAAU,KAAA,EACrC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAO,QAAA,EAAU,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EACvC,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,EAAA;AAAA,QACN,MAAA,EAAO,MAAA;AAAA,QACP,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,MAAA,IAAU,WAAW;AAAA;AAAA,KACtE,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,9 @@
+import { Row } from '@tanstack/react-table';
+type DataTableGroupRowSelectorProps<TData extends object> = {
+    readonly row: Row<TData>;
+    readonly selectedIds: Set<string>;
+    readonly getRowId: (original: TData) => string;
+    readonly handleRowSelect: (rowId: string, checked: boolean) => void;
+};
+export declare function DataTableGroupRowSelector<TData extends object>({ row, selectedIds, getRowId, handleRowSelect, }: DataTableGroupRowSelectorProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/DataTableGroupRowSelector.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+
+function DataTableGroupRowSelector({
+  row,
+  selectedIds,
+  getRowId,
+  handleRowSelect
+}) {
+  const leafRows = row.getLeafRows();
+  const leafIds = leafRows.map((leaf) => getRowId(leaf.original));
+  const selectedCount = leafIds.filter((id) => selectedIds.has(id)).length;
+  const allSelected = leafIds.length > 0 && selectedCount === leafIds.length;
+  const someSelected = selectedCount > 0 && !allSelected;
+  const handleToggle = (checked) => {
+    leafIds.forEach((id) => handleRowSelect(id, checked));
+  };
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: someSelected ? "indeterminate" : allSelected,
+      onCheckedChange: (checked) => handleToggle(!!checked),
+      onClick: (event) => event.stopPropagation(),
+      className: "cursor-default",
+      disabled: leafIds.length === 0,
+      "aria-label": "Select group"
+    }
+  );
+}
+
+export { DataTableGroupRowSelector };
+//# sourceMappingURL=DataTableGroupRowSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableGroupRowSelector.js","sources":["../../../../src/components/DataTable/components/DataTableGroupRowSelector.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\n\nimport { Checkbox } from '@/components/Checkbox'\n\ntype DataTableGroupRowSelectorProps<TData extends object> = {\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\nexport function DataTableGroupRowSelector<TData extends object>({\n  row,\n  selectedIds,\n  getRowId,\n  handleRowSelect,\n}: DataTableGroupRowSelectorProps<TData>) {\n  const leafRows = row.getLeafRows()\n  const leafIds = leafRows.map((leaf) => getRowId(leaf.original))\n  const selectedCount = leafIds.filter((id) => selectedIds.has(id)).length\n\n  const allSelected = leafIds.length > 0 && selectedCount === leafIds.length\n  const someSelected = selectedCount > 0 && !allSelected\n\n  const handleToggle = (checked: boolean) => {\n    leafIds.forEach((id) => handleRowSelect(id, checked))\n  }\n\n  return (\n    <Checkbox\n      checked={someSelected ? 'indeterminate' : allSelected}\n      onCheckedChange={(checked) => handleToggle(!!checked)}\n      onClick={(event) => event.stopPropagation()}\n      className=\"cursor-default\"\n      disabled={leafIds.length === 0}\n      aria-label=\"Select group\"\n    />\n  )\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,yBAAA,CAAgD;AAAA,EAC9D,GAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA0C;AACxC,EAAA,MAAM,QAAA,GAAW,IAAI,WAAA,EAAY;AACjC,EAAA,MAAM,OAAA,GAAU,SAAS,GAAA,CAAI,CAAC,SAAS,QAAA,CAAS,IAAA,CAAK,QAAQ,CAAC,CAAA;AAC9D,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAA,CAAO,CAAC,OAAO,WAAA,CAAY,GAAA,CAAI,EAAE,CAAC,CAAA,CAAE,MAAA;AAElE,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,MAAA,GAAS,CAAA,IAAK,kBAAkB,OAAA,CAAQ,MAAA;AACpE,EAAA,MAAM,YAAA,GAAe,aAAA,GAAgB,CAAA,IAAK,CAAC,WAAA;AAE3C,EAAA,MAAM,YAAA,GAAe,CAAC,OAAA,KAAqB;AACzC,IAAA,OAAA,CAAQ,QAAQ,CAAC,EAAA,KAAO,eAAA,CAAgB,EAAA,EAAI,OAAO,CAAC,CAAA;AAAA,EACtD,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,eAAe,eAAA,GAAkB,WAAA;AAAA,MAC1C,iBAAiB,CAAC,OAAA,KAAY,YAAA,CAAa,CAAC,CAAC,OAAO,CAAA;AAAA,MACpD,OAAA,EAAS,CAAC,KAAA,KAAU,KAAA,CAAM,eAAA,EAAgB;AAAA,MAC1C,SAAA,EAAU,gBAAA;AAAA,MACV,QAAA,EAAU,QAAQ,MAAA,KAAW,CAAA;AAAA,MAC7B,YAAA,EAAW;AAAA;AAAA,GACb;AAEJ;;;;"}

package/dist/components/DataTable/components/DataTableSelectHeader.js

@@ -14,17 +14,23 @@ function DataTableSelectHeader({
   if (isBackendPagination) {
     return null;
   }
+  const allSelected = data.length > 0 && selectedIds.size === data.length;
+  const someSelected = selectedIds.size > 0 && !allSelected;
+  const checkbox = /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: someSelected ? "indeterminate" : allSelected,
+      onCheckedChange: handleSelectAll,
+      disabled: isLoading || !data.length || isSelectionDisabled,
+      "aria-label": "Select all rows"
+    }
+  );
+  if (!selectionDisabledTooltip) {
+    return checkbox;
+  }
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 200, children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: selectedIds.size === data.length,
-        onCheckedChange: handleSelectAll,
-        disabled: isLoading || !data.length || isSelectionDisabled,
-        "aria-label": "Select all rows"
-      }
-    ) }),
-    selectionDisabledTooltip && /* @__PURE__ */ jsx(TooltipContent, { children: selectionDisabledTooltip })
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "inline-flex", children: checkbox }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: selectionDisabledTooltip })
   ] }) });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectHeader.js","sources":["../../../../src/components/DataTable/components/DataTableSelectHeader.tsx"],"sourcesContent":["import { Checkbox } from '@/components/Checkbox'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\n\ntype SelectAllHeaderProps<TData extends object> = {\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 | undefined\n}\n\nexport function DataTableSelectHeader<TData extends object>({\n  isBackendPagination,\n  selectedIds,\n  data,\n  handleSelectAll,\n  isLoading,\n  isSelectionDisabled,\n  selectionDisabledTooltip,\n}: SelectAllHeaderProps<TData>) {\n  if (isBackendPagination) {\n    return null\n  }\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={200}>\n        <TooltipTrigger asChild>\n          <Checkbox\n            checked={selectedIds.size === data.length}\n            onCheckedChange={handleSelectAll}\n            disabled={isLoading || !data.length || isSelectionDisabled}\n            aria-label=\"Select all rows\"\n          />\n        </TooltipTrigger>\n        {selectionDisabledTooltip && <TooltipContent>{selectionDisabledTooltip}</TooltipContent>}\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,qBAAA,CAA4C;AAAA,EAC1D,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,IAAI,mBAAA,EAAqB;AACvB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,WAAA,CAAY,IAAA,KAAS,IAAA,CAAK,MAAA;AAAA,QACnC,eAAA,EAAiB,eAAA;AAAA,QACjB,QAAA,EAAU,SAAA,IAAa,CAAC,IAAA,CAAK,MAAA,IAAU,mBAAA;AAAA,QACvC,YAAA,EAAW;AAAA;AAAA,KACb,EACF,CAAA;AAAA,IACC,wBAAA,oBAA4B,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,wBAAA,EAAyB;AAAA,GAAA,EACzE,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DataTableSelectHeader.js","sources":["../../../../src/components/DataTable/components/DataTableSelectHeader.tsx"],"sourcesContent":["import { Checkbox } from '@/components/Checkbox'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\n\ntype SelectAllHeaderProps<TData extends object> = {\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 | undefined\n}\n\nexport function DataTableSelectHeader<TData extends object>({\n  isBackendPagination,\n  selectedIds,\n  data,\n  handleSelectAll,\n  isLoading,\n  isSelectionDisabled,\n  selectionDisabledTooltip,\n}: SelectAllHeaderProps<TData>) {\n  if (isBackendPagination) {\n    return null\n  }\n\n  const allSelected = data.length > 0 && selectedIds.size === data.length\n  const someSelected = selectedIds.size > 0 && !allSelected\n\n  const checkbox = (\n    <Checkbox\n      checked={someSelected ? 'indeterminate' : allSelected}\n      onCheckedChange={handleSelectAll}\n      disabled={isLoading || !data.length || isSelectionDisabled}\n      aria-label=\"Select all rows\"\n    />\n  )\n\n  if (!selectionDisabledTooltip) {\n    return checkbox\n  }\n\n  return (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={200}>\n        <TooltipTrigger asChild>\n          <div className=\"inline-flex\">{checkbox}</div>\n        </TooltipTrigger>\n        <TooltipContent>{selectionDisabledTooltip}</TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n"],"names":[],"mappings":";;;;AAaO,SAAS,qBAAA,CAA4C;AAAA,EAC1D,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,IAAI,mBAAA,EAAqB;AACvB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,cAAc,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK,WAAA,CAAY,SAAS,IAAA,CAAK,MAAA;AACjE,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,IAAA,GAAO,CAAA,IAAK,CAAC,WAAA;AAE9C,EAAA,MAAM,QAAA,mBACJ,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,eAAe,eAAA,GAAkB,WAAA;AAAA,MAC1C,eAAA,EAAiB,eAAA;AAAA,MACjB,QAAA,EAAU,SAAA,IAAa,CAAC,IAAA,CAAK,MAAA,IAAU,mBAAA;AAAA,MACvC,YAAA,EAAW;AAAA;AAAA,GACb;AAGF,EAAA,IAAI,CAAC,wBAAA,EAA0B;AAC7B,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,aAAA,EAAe,oBAAS,CAAA,EACzC,CAAA;AAAA,oBACA,GAAA,CAAC,kBAAgB,QAAA,EAAA,wBAAA,EAAyB;AAAA,GAAA,EAC5C,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,19 @@
+import { GroupingConfig, RowIdentifierFn } from '../types';
+type UseGroupExpansionParams<TData> = {
+    grouping?: GroupingConfig<TData>;
+    data: Array<TData>;
+    getRowId: RowIdentifierFn<TData>;
+};
+type UseGroupExpansionResult = {
+    /** Whether the group identified by `groupId` is currently expanded. */
+    isGroupOpen: (groupId: string) => boolean;
+    /** Toggles the expanded state of the group identified by `groupId`. */
+    toggleGroup: (groupId: string) => void;
+};
+/**
+ * Encapsulates the expanded-state bookkeeping for grouped tables: tracks which
+ * groups are open (supporting both controlled and uncontrolled modes) and
+ * exposes helpers to query and toggle individual groups.
+ */
+export declare function useGroupExpansion<TData>({ grouping, data, getRowId, }: UseGroupExpansionParams<TData>): UseGroupExpansionResult;
+export {};

package/dist/components/DataTable/hooks/useGroupExpansion.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+function useGroupExpansion({
+  grouping,
+  data,
+  getRowId
+}) {
+  const [internalExpanded, setInternalExpanded] = React.useState(grouping?.defaultOpen ? true : {});
+  const expandedState = grouping?.open ?? internalExpanded;
+  const setExpandedState = grouping?.onOpenChange ?? setInternalExpanded;
+  const isGroupOpen = React.useCallback(
+    (groupId) => expandedState === true || typeof expandedState === "object" && expandedState[groupId] === true,
+    [expandedState]
+  );
+  const groupIds = React.useMemo(
+    () => grouping ? data.filter((item) => (grouping.getSubRows(item)?.length ?? 0) > 0).map(getRowId) : [],
+    [grouping, data, getRowId]
+  );
+  const toggleGroup = React.useCallback(
+    (groupId) => {
+      const updater = (prev) => {
+        const current = prev === true ? Object.fromEntries(groupIds.map((id) => [id, true])) : { ...prev };
+        current[groupId] = !current[groupId];
+        return current;
+      };
+      setExpandedState(updater);
+    },
+    [setExpandedState, groupIds]
+  );
+  return { isGroupOpen, toggleGroup };
+}
+
+export { useGroupExpansion };
+//# sourceMappingURL=useGroupExpansion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupExpansion.js","sources":["../../../../src/components/DataTable/hooks/useGroupExpansion.ts"],"sourcesContent":["import { ExpandedState, Updater } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { GroupingConfig, RowIdentifierFn } from '../types'\n\ntype UseGroupExpansionParams<TData> = {\n  grouping?: GroupingConfig<TData>\n  data: Array<TData>\n  getRowId: RowIdentifierFn<TData>\n}\n\ntype UseGroupExpansionResult = {\n  /** Whether the group identified by `groupId` is currently expanded. */\n  isGroupOpen: (groupId: string) => boolean\n  /** Toggles the expanded state of the group identified by `groupId`. */\n  toggleGroup: (groupId: string) => void\n}\n\n/**\n * Encapsulates the expanded-state bookkeeping for grouped tables: tracks which\n * groups are open (supporting both controlled and uncontrolled modes) and\n * exposes helpers to query and toggle individual groups.\n */\nexport function useGroupExpansion<TData>({\n  grouping,\n  data,\n  getRowId,\n}: UseGroupExpansionParams<TData>): UseGroupExpansionResult {\n  const [internalExpanded, setInternalExpanded] = React.useState<ExpandedState>(grouping?.defaultOpen ? true : {})\n\n  const expandedState = grouping?.open ?? internalExpanded\n  const setExpandedState = grouping?.onOpenChange ?? setInternalExpanded\n\n  const isGroupOpen = React.useCallback(\n    (groupId: string) =>\n      expandedState === true || (typeof expandedState === 'object' && expandedState[groupId] === true),\n    [expandedState],\n  )\n\n  const groupIds = React.useMemo(\n    () => (grouping ? data.filter((item) => (grouping.getSubRows(item)?.length ?? 0) > 0).map(getRowId) : []),\n    [grouping, data, getRowId],\n  )\n\n  const toggleGroup = React.useCallback(\n    (groupId: string) => {\n      const updater = (prev: ExpandedState): ExpandedState => {\n        const current = prev === true ? Object.fromEntries(groupIds.map((id) => [id, true])) : { ...prev }\n        current[groupId] = !current[groupId]\n        return current\n      }\n      ;(setExpandedState as (u: Updater<ExpandedState>) => void)(updater)\n    },\n    [setExpandedState, groupIds],\n  )\n\n  return { isGroupOpen, toggleGroup }\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAAA,CAAyB;AAAA,EACvC,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAA4D;AAC1D,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,KAAA,CAAM,SAAwB,QAAA,EAAU,WAAA,GAAc,IAAA,GAAO,EAAE,CAAA;AAE/G,EAAA,MAAM,aAAA,GAAgB,UAAU,IAAA,IAAQ,gBAAA;AACxC,EAAA,MAAM,gBAAA,GAAmB,UAAU,YAAA,IAAgB,mBAAA;AAEnD,EAAA,MAAM,cAAc,KAAA,CAAM,WAAA;AAAA,IACxB,CAAC,YACC,aAAA,KAAkB,IAAA,IAAS,OAAO,aAAA,KAAkB,QAAA,IAAY,aAAA,CAAc,OAAO,CAAA,KAAM,IAAA;AAAA,IAC7F,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAW,KAAA,CAAM,OAAA;AAAA,IACrB,MAAO,QAAA,GAAW,IAAA,CAAK,MAAA,CAAO,CAAC,UAAU,QAAA,CAAS,UAAA,CAAW,IAAI,CAAA,EAAG,UAAU,CAAA,IAAK,CAAC,EAAE,GAAA,CAAI,QAAQ,IAAI,EAAC;AAAA,IACvG,CAAC,QAAA,EAAU,IAAA,EAAM,QAAQ;AAAA,GAC3B;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,WAAA;AAAA,IACxB,CAAC,OAAA,KAAoB;AACnB,MAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAuC;AACtD,QAAA,MAAM,UAAU,IAAA,KAAS,IAAA,GAAO,MAAA,CAAO,WAAA,CAAY,SAAS,GAAA,CAAI,CAAC,EAAA,KAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAA,GAAI,EAAE,GAAG,IAAA,EAAK;AACjG,QAAA,OAAA,CAAQ,OAAO,CAAA,GAAI,CAAC,OAAA,CAAQ,OAAO,CAAA;AACnC,QAAA,OAAO,OAAA;AAAA,MACT,CAAA;AACC,MAAC,iBAAyD,OAAO,CAAA;AAAA,IACpE,CAAA;AAAA,IACA,CAAC,kBAAkB,QAAQ;AAAA,GAC7B;AAEA,EAAA,OAAO,EAAE,aAAa,WAAA,EAAY;AACpC;;;;"}

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

@@ -1,4 +1,4 @@
-import { ColumnDef, OnChangeFn, VisibilityState } from '@tanstack/react-table';
+import { ColumnDef, ExpandedState, OnChangeFn, Row, VisibilityState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 export type User = {
     id: string;
@@ -107,7 +107,19 @@ export type BackendPaginationProps = {
     /** Callback when page changes */
     readonly onPageChange: (page: number) => void;
 } & BasePaginationProps;
-export type DataTableProps<TData> = {
+export type GroupingConfig<TData> = {
+    /** Returns the children for a row. Return `undefined`/empty for leaf rows (no group). */
+    readonly getSubRows: (row: TData) => Array<TData> | undefined;
+    /** Whether all groups are expanded on first render (default: `false`, all collapsed). */
+    readonly defaultOpen?: boolean;
+    /** Controlled expanded state. When provided, you must manage it via `onOpenChange`. */
+    readonly open?: ExpandedState;
+    /** Callback when the expanded state changes (controlled mode). */
+    readonly onOpenChange?: OnChangeFn<ExpandedState>;
+    /** Renders the content of a group row (label, count, etc.). Defaults to an item count. */
+    readonly renderGroupRow?: (row: Row<TData>) => ReactNode;
+};
+type DataTableBaseProps<TData> = {
     /** Array of column definitions that describe the table structure */
     readonly columns: Array<ColumnDef<TData>>;
     /** Array of data items to be displayed in the table */
@@ -116,8 +128,6 @@ export type DataTableProps<TData> = {
     readonly columnVisibility?: ColumnVisibilityConfig;
     /** Whether the table is in a loading state */
     readonly isLoading?: boolean;
-    /** Pagination configuration. If not provided, pagination is disabled */
-    readonly pagination?: BasePaginationProps | BackendPaginationProps;
     /** Primary filters that appear directly above the table */
     readonly primaryFilters?: ReactNode;
     /** Secondary filters that appear in the filters dropdown */
@@ -154,13 +164,23 @@ export type DataTableProps<TData> = {
     readonly className?: string;
     /** Optional className for the table */
     readonly tableClassName?: string;
-} & (HasId<TData> extends true ? {
+};
+type IdProps<TData> = HasId<TData> extends true ? {
     /** Function to get unique identifier from a row. Not needed when data has 'id' property */
     readonly getRowId?: RowIdentifierFn<TData>;
 } : {
     /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
     readonly getRowId: RowIdentifierFn<TData>;
-});
+};
+type PaginatedVariant = {
+    readonly pagination?: BasePaginationProps | BackendPaginationProps;
+    readonly grouping?: never;
+};
+type GroupedVariant<TData> = {
+    readonly grouping: GroupingConfig<TData>;
+    readonly pagination?: never;
+};
+export type DataTableProps<TData> = DataTableBaseProps<TData> & IdProps<TData> & (PaginatedVariant | GroupedVariant<TData>);
 /**
  * Type helper to check if a type has an 'id' property
  */
@@ -171,3 +191,4 @@ export type HasId<T> = T extends {
  * Function to get a unique identifier from a row
  */
 export type RowIdentifierFn<T> = (row: T) => string;
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ * Recursively flattens a sub-row tree into its leaf items, discarding group
+ * nodes. Used so selection (counts, select-all, ids) operates over the actual
+ * selectable leaf rows rather than the group containers.
+ */
+export declare function flattenLeaves<TData>(data: Array<TData>, getSubRows: (row: TData) => Array<TData> | undefined): Array<TData>;

package/dist/components/DataTable/utils.js

@@ -0,0 +1,15 @@
+function flattenLeaves(data, getSubRows) {
+  const leaves = [];
+  for (const item of data) {
+    const children = getSubRows(item);
+    if (children && children.length > 0) {
+      leaves.push(...flattenLeaves(children, getSubRows));
+    } else {
+      leaves.push(item);
+    }
+  }
+  return leaves;
+}
+
+export { flattenLeaves };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/DataTable/utils.ts"],"sourcesContent":["/**\n * Recursively flattens a sub-row tree into its leaf items, discarding group\n * nodes. Used so selection (counts, select-all, ids) operates over the actual\n * selectable leaf rows rather than the group containers.\n */\nexport function flattenLeaves<TData>(\n  data: Array<TData>,\n  getSubRows: (row: TData) => Array<TData> | undefined,\n): Array<TData> {\n  const leaves: Array<TData> = []\n  for (const item of data) {\n    const children = getSubRows(item)\n    if (children && children.length > 0) {\n      leaves.push(...flattenLeaves(children, getSubRows))\n    } else {\n      leaves.push(item)\n    }\n  }\n  return leaves\n}\n"],"names":[],"mappings":"AAKO,SAAS,aAAA,CACd,MACA,UAAA,EACc;AACd,EAAA,MAAM,SAAuB,EAAC;AAC9B,EAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,IAAA,MAAM,QAAA,GAAW,WAAW,IAAI,CAAA;AAChC,IAAA,IAAI,QAAA,IAAY,QAAA,CAAS,MAAA,GAAS,CAAA,EAAG;AACnC,MAAA,MAAA,CAAO,IAAA,CAAK,GAAG,aAAA,CAAc,QAAA,EAAU,UAAU,CAAC,CAAA;AAAA,IACpD,CAAA,MAAO;AACL,MAAA,MAAA,CAAO,KAAK,IAAI,CAAA;AAAA,IAClB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.5.0",
+  "version": "4.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",