periplo-ui 3.21.1 → 3.21.2

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

@@ -1,94 +1,6 @@
-import { ColumnDef } from '@tanstack/react-table';
-import * as React from 'react';
-type BasePaginationProps = {
-    /** Number of rows per page */
-    readonly pageSize: number;
-    /** Whether the pagination is in a loading state */
-    readonly isLoading?: boolean;
-    /** Text customization for pagination */
-    readonly labels?: {
-        /** Text shown before the page size number (default: "Showing") */
-        showing?: string;
-        /** Text shown before the total number (default: "of") */
-        of?: string;
-        /** Text shown after the total number (default: "results") */
-        results?: string;
-        /** Aria label for previous page button (default: "Previous page") */
-        previousPage?: string;
-        /** Aria label for next page button (default: "Next page") */
-        nextPage?: string;
-        /** Aria label for page number (default: "Page {number}") */
-        pageLabel?: string;
-    };
-};
-type BackendPaginationProps = BasePaginationProps & {
-    /** Current page */
-    readonly currentPage: number;
-    /** Total number of items */
-    readonly total: number;
-    /** Callback when page changes */
-    readonly onPageChange: (page: number) => void;
-};
-/**
- * Type helper to check if a type has an 'id' property
- */
-type HasId<T> = T extends {
-    id: string | number;
-} ? true : false;
-/**
- * Props for the DataTable component
- * @template TData The type of data being displayed in the table
- */
-export type DataTableProps<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 */
-    readonly data: Array<TData>;
-    /** Whether to show the column visibility toggle menu */
-    readonly showColumnVisibilityControls?: boolean;
-    /** 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?: React.ReactNode;
-    /** Secondary filters that appear in the filters dropdown */
-    readonly secondaryFilters?: React.ReactNode;
-    /** Number of active primary filters */
-    readonly activePrimaryFiltersCount?: number;
-    /** Number of active secondary filters */
-    readonly activeSecondaryFiltersCount?: number;
-    /** Text customization for filters */
-    readonly labels?: {
-        /** Text for the column visibility button (default: "Hide columns") */
-        columnVisibilityButton?: string;
-        /** Text for the filters button when only secondary filters are present (default: "Filters") */
-        filters?: string;
-        /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
-        moreFilters?: string;
-    };
-    /** Callback when all rows are selected */
-    readonly onSelectAll?: (selected: boolean) => void;
-    /** Callback when a row is selected */
-    readonly onSelect?: (selected: boolean, row: TData) => void;
-    /** Optional className for the table container */
-    readonly className?: string;
-    /** Optional className for the table */
-    readonly tableClassName?: string;
-} & (HasId<TData> extends true ? {
-    /** Function to get unique identifier from a row. Not needed when data has 'id' property */
-    readonly getRowId?: never;
-} : {
-    /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
-    readonly getRowId: RowIdentifierFn<TData>;
-});
-/**
- * Function to get a unique identifier from a row
- */
-type RowIdentifierFn<T> = (row: T) => string;
+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, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, labels, onSelectAll, onSelect, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DataTable<TData extends object>({ columns: userColumns, data, getRowId, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, selection, labels, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getPaginationRowModel, useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as React from 'react';
-import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Table, TableHeader, TableRow, TableHead } from '../Table/Table.js';
 import { Typography } from '../Typography/Typography.js';
 import { DataTableBody } from './components/DataTableBody.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 { DataTablePagination } from './DataTablePagination.js';
-import { useTableSelection } from './hooks/useTableSelection.js';
+import { useSelection } from './hooks/useSelection.js';
 import { cn } from '../../lib/utils.js';
 
 function DataTable({
@@ -22,51 +23,110 @@ function DataTable({
   secondaryFilters,
   activePrimaryFiltersCount = 0,
   activeSecondaryFiltersCount = 0,
+  selection,
   labels = {
     columnVisibilityButton: "Hide columns",
     filters: "Filters",
     moreFilters: "More filters"
   },
-  onSelectAll,
-  onSelect,
   className,
   tableClassName
 }) {
   const [columnVisibility, setColumnVisibility] = React.useState({});
   const [pageIndex, setPageIndex] = React.useState(0);
-  const isBackendPagination = pagination && "onPageChange" in pagination;
+  const isBackendPagination = pagination !== undefined && "onPageChange" in pagination;
   const total = isBackendPagination ? pagination.total : data.length;
-  const pageSize = pagination?.pageSize ?? data.length;
+  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length);
   const totalPages = Math.ceil(total / pageSize);
-  const { isSelectable, isAllRowsSelected, rowSelection, handleSelectAll, handleRowSelect } = useTableSelection({
+  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({
     data,
     getRowId,
-    onSelectAll,
-    onSelect
+    selection
   });
+  const rowSelection = React.useMemo(
+    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),
+    [selectedIds]
+  );
+  const SelectColumnHeader = React.useCallback(
+    () => /* @__PURE__ */ jsx(
+      DataTableSelectHeader,
+      {
+        isBackendPagination,
+        selectedIds,
+        data,
+        handleSelectAll,
+        isLoading
+      }
+    ),
+    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading]
+  );
+  const SelectColumnCell = React.useCallback(
+    ({ row }) => /* @__PURE__ */ jsx(DataTableRowSelector, { row, selectedIds, getRowId, handleRowSelect }),
+    [selectedIds, getRowId, handleRowSelect]
+  );
+  const tableColumns = React.useMemo(() => {
+    const baseColumns = [...userColumns];
+    if (selection !== undefined) {
+      const selectColumn = {
+        id: "select",
+        size: 50,
+        cell: SelectColumnCell,
+        header: SelectColumnHeader
+      };
+      baseColumns.unshift(selectColumn);
+    }
+    return baseColumns;
+  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader]);
+  const toolbarSelectionProps = React.useMemo(() => {
+    if (isBackendPagination && selection) {
+      return {
+        isSelectionStarted: selection.isSelectionStarted,
+        onSelectionStart: selection.onSelectionStart,
+        onSelectionCancel: selection.onSelectionCancel,
+        selectionSummary: selection.labels?.selectionSummary,
+        labels: selection.labels
+      };
+    }
+    return undefined;
+  }, [isBackendPagination, selection]);
+  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1;
+  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page) => setPageIndex(page - 1);
+  const tablePaginationState = React.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    return {
+      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,
+      pageSize
+    };
+  }, [pagination, isBackendPagination, pageIndex, pageSize]);
+  const tableGetPaginationRowModel = React.useMemo(() => {
+    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined;
+  }, [pagination, isBackendPagination]);
+  const tableOnPaginationChange = React.useCallback(
+    (updater) => {
+      if (typeof updater === "function") {
+        const newState = updater({ pageIndex, pageSize });
+        setPageIndex(newState.pageIndex);
+      }
+    },
+    [pageIndex, pageSize, setPageIndex]
+  );
   const table = useReactTable({
     data,
-    columns: userColumns,
+    columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,
+    getPaginationRowModel: tableGetPaginationRowModel,
     onColumnVisibilityChange: setColumnVisibility,
-    enableRowSelection: isSelectable,
+    enableRowSelection: !!selection,
     getRowId,
     state: {
       columnVisibility,
       rowSelection,
-      pagination: pagination ? {
-        pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,
-        pageSize
-      } : undefined
+      pagination: tablePaginationState
     },
     manualPagination: isBackendPagination,
-    onPaginationChange: isBackendPagination ? undefined : (updater) => {
-      if (typeof updater === "function") {
-        const newState = updater({ pageIndex, pageSize });
-        setPageIndex(newState.pageIndex);
-      }
-    }
+    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange
   });
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden", className), children: [
     /* @__PURE__ */ jsx(
@@ -78,41 +138,30 @@ function DataTable({
         secondaryFilters,
         activePrimaryFiltersCount,
         activeSecondaryFiltersCount,
-        labels
+        labels,
+        selection: toolbarSelectionProps
       }
     ),
     /* @__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", tableClassName: cn("table-fixed", tableClassName), children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { children: [
-          isSelectable && /* @__PURE__ */ jsx(TableHead, { className: "w-[50px]", children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: isAllRowsSelected,
-              onCheckedChange: handleSelectAll,
-              disabled: isLoading || !data.length,
-              "aria-label": "Select all rows"
-            }
-          ) }),
-          headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-            TableHead,
-            {
-              className: "whitespace-normal",
-              style: { width: header.column.columnDef.size },
-              children: /* @__PURE__ */ jsx(Typography, { weight: "medium", 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", 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(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,
+          {
+            className: "whitespace-normal",
+            style: { width: header.column.columnDef.size },
+            children: /* @__PURE__ */ jsx(Typography, { weight: "medium", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
+          },
+          header.id
+        )) }, headerGroup.id)) }),
         /* @__PURE__ */ jsx(
           DataTableBody,
           {
             table,
             isLoading,
-            isSelectable,
+            isSelectable: selection !== undefined,
             pageSize,
             getRowId,
-            rowSelection,
-            handleRowSelect
+            rowSelection
           }
         )
       ] }) }) }),
@@ -122,9 +171,9 @@ function DataTable({
           table,
           total,
           pageSize,
-          currentPage: isBackendPagination ? pagination.currentPage : table.getState().pagination.pageIndex + 1 || 1,
+          currentPage,
           totalPages,
-          onPageChange: isBackendPagination ? pagination.onPageChange : undefined,
+          onPageChange: handlePageChange,
           isLoading: pagination.isLoading,
           labels: pagination.labels
         }

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../Checkbox'\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { DataTablePagination } from './DataTablePagination'\nimport { useTableSelection } from './hooks/useTableSelection'\n\nimport { cn } from '@/lib/utils'\n\ntype BasePaginationProps = {\n  /** Number of rows per page */\n  readonly pageSize: number\n  /** Whether the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for pagination */\n  readonly labels?: {\n    /** Text shown before the page size number (default: \"Showing\") */\n    showing?: string\n    /** Text shown before the total number (default: \"of\") */\n    of?: string\n    /** Text shown after the total number (default: \"results\") */\n    results?: string\n    /** Aria label for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Aria label for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    pageLabel?: string\n  }\n}\n\ntype BackendPaginationProps = BasePaginationProps & {\n  /** Current page */\n  readonly currentPage: number\n  /** Total number of items */\n  readonly total: number\n  /** Callback when page changes */\n  readonly onPageChange: (page: number) => void\n}\n\n/**\n * Type helper to check if a type has an 'id' property\n */\ntype HasId<T> = T extends { id: string | number } ? true : false\n\n/**\n * Props for the DataTable component\n * @template TData The type of data being displayed in the table\n */\nexport type DataTableProps<TData> = {\n  /** Array of column definitions that describe the table structure */\n  readonly columns: Array<ColumnDef<TData>>\n  /** Array of data items to be displayed in the table */\n  readonly data: Array<TData>\n  /** Whether to show the column visibility toggle menu */\n  readonly showColumnVisibilityControls?: boolean\n  /** Whether the table is in a loading state */\n  readonly isLoading?: boolean\n  /** Pagination configuration. If not provided, pagination is disabled */\n  readonly pagination?: BasePaginationProps | BackendPaginationProps\n  /** Primary filters that appear directly above the table */\n  readonly primaryFilters?: React.ReactNode\n  /** Secondary filters that appear in the filters dropdown */\n  readonly secondaryFilters?: React.ReactNode\n  /** Number of active primary filters */\n  readonly activePrimaryFiltersCount?: number\n  /** Number of active secondary filters */\n  readonly activeSecondaryFiltersCount?: number\n  /** Text customization for filters */\n  readonly labels?: {\n    /** Text for the column visibility button (default: \"Hide columns\") */\n    columnVisibilityButton?: string\n    /** Text for the filters button when only secondary filters are present (default: \"Filters\") */\n    filters?: string\n    /** Text for the more filters button when both primary and secondary filters are present (default: \"More filters\") */\n    moreFilters?: string\n  }\n  /** Callback when all rows are selected */\n  readonly onSelectAll?: (selected: boolean) => void\n  /** Callback when a row is selected */\n  readonly onSelect?: (selected: boolean, row: TData) => void\n  /** Optional className for the table container */\n  readonly className?: string\n  /** Optional className for the table */\n  readonly tableClassName?: string\n} & (HasId<TData> extends true\n  ? {\n      /** Function to get unique identifier from a row. Not needed when data has 'id' property */\n      readonly getRowId?: never\n    }\n  : {\n      /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */\n      readonly getRowId: RowIdentifierFn<TData>\n    })\n\n/**\n * Function to get a unique identifier from a row\n */\ntype RowIdentifierFn<T> = (row: T) => string\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  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  onSelectAll,\n  onSelect,\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination && 'onPageChange' in pagination\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? data.length\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { isSelectable, isAllRowsSelected, rowSelection, handleSelectAll, handleRowSelect } = useTableSelection({\n    data,\n    getRowId,\n    onSelectAll,\n    onSelect,\n  })\n\n  const table = useReactTable({\n    data,\n    columns: userColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: isSelectable,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: pagination\n        ? {\n            pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n            pageSize,\n          }\n        : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination\n      ? undefined\n      : (updater) => {\n          if (typeof updater === 'function') {\n            const newState = updater({ pageIndex, pageSize })\n            setPageIndex(newState.pageIndex)\n          }\n        },\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        showColumnVisibilityControls={showColumnVisibilityControls}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\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\" 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                    {isSelectable && (\n                      <TableHead className=\"w-[50px]\">\n                        <Checkbox\n                          checked={isAllRowsSelected}\n                          onCheckedChange={handleSelectAll}\n                          disabled={isLoading || !data.length}\n                          aria-label=\"Select all rows\"\n                        />\n                      </TableHead>\n                    )}\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\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                isSelectable={isSelectable}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n                handleRowSelect={handleRowSelect}\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={\n                isBackendPagination ? pagination.currentPage : table.getState().pagination.pageIndex + 1 || 1\n              }\n              totalPages={totalPages}\n              onPageChange={isBackendPagination ? pagination.onPageChange : undefined}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwHO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AACrB;AACiB;AACf;AACI;AACf;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACA;AACA;AACA;AAEA;AAA8G;AAC5G;AACA;AACA;AACA;AAGF;AAA4B;AAC1B;AACS;AACwB;AACqD;AAC5D;AACN;AACpB;AACO;AACL;AACA;AAEI;AACgE;AAC9D;AAEF;AACN;AACkB;AAIZ;AACE;AACA;AAA+B;AACjC;AACF;AAGN;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACF;AAGE;AAGM;AAGO;AAEG;AAAC;AAAA;AACU;AACQ;AACY;AAClB;AAAA;AAEf;AAGA;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAUf;AAGP;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AAE8F;AAE9F;AAC8D;AACxC;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'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  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\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      />\n    ),\n    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n  )\n\n  const SelectColumnCell = React.useCallback(\n    ({ row }: { row: Row<TData> }) => (\n      <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n    ),\n    [selectedIds, getRowId, handleRowSelect],\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        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: setColumnVisibility,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\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        showColumnVisibilityControls={showColumnVisibilityControls}\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\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\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                isSelectable={selection !== undefined}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\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":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACf;AACA;AAEF;AACE;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;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;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;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AAC4B;AAC5B;AACA;AACA;AAAA;AACF;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,12 @@
 import { Table } from '@tanstack/react-table';
+import { RowIdentifierFn } from '../types';
 type DataTableBodyProps<TData> = {
     readonly table: Table<TData>;
-    readonly isLoading: boolean;
-    readonly isSelectable: boolean;
+    readonly isLoading?: boolean;
+    readonly isSelectable?: boolean;
     readonly pageSize: number;
-    readonly getRowId: (row: TData) => string;
+    readonly getRowId: RowIdentifierFn<TData>;
     readonly rowSelection: Record<string, boolean>;
-    readonly handleRowSelect: (checked: boolean, rowData: TData) => void;
 };
-export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, handleRowSelect, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,34 +1,36 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { flexRender } from '@tanstack/react-table';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
+import * as React from 'react';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
-import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
+import { TableRow, TableCell, TableBody } from '../../Table/Table.js';
 import { Typography } from '../../Typography/Typography.js';
 import { cn } from '../../../lib/utils.js';
 
+const MemoizedTableRow = React.memo(
+  function MemoizedTableRow2({
+    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)) });
+  },
+  (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected
+);
 function DataTableBody({
   table,
   isLoading,
   isSelectable,
   pageSize,
   getRowId,
-  rowSelection,
-  handleRowSelect
+  rowSelection
 }) {
   if (isLoading) {
-    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, rowIndex) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(Checkbox, { checked: false, disabled: true }) }),
-      table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          style: { width: column.columnDef.size },
-          children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", column.id === "actions" && "justify-end"), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(column.id === "actions" ? "h-8 w-8" : "h-[20px] w-full") }) })
-        },
-        `skeleton-cell-${rowIndex.toString()}-${column.id}`
-      ))
-    ] }, `skeleton-row-${rowIndex.toString()}`)) });
+    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }) }),
+      table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => /* @__PURE__ */ jsx(TableCell, { style: { width: column.columnDef.size }, children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", column.id === "actions" && "justify-end"), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(column.id === "actions" ? "h-8 w-8" : "h-[20px] w-full") }) }) }, `skeleton-cell-${String(index)}-${column.id}`))
+    ] }, `skeleton-row-${String(index)}`)) });
   }
-  if (table.getRowModel().rows.length === 0) {
+  const rows = table.getRowModel().rows;
+  if (!rows.length) {
     return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
       TableCell,
       {
@@ -38,23 +40,10 @@ function DataTableBody({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => {
+  return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
     const rowId = getRowId(row.original);
     const isSelected = rowSelection[rowId] ?? false;
-    return /* @__PURE__ */ jsxs(TableRow, { "data-selected": isSelected, children: [
-      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          checked: isSelected,
-          onCheckedChange: (checked) => {
-            const isChecked = checked;
-            handleRowSelect(isChecked, row.original);
-          },
-          "aria-label": `Select row ${rowId}`
-        }
-      ) }),
-      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))
-    ] }, rowId);
+    return /* @__PURE__ */ jsx(MemoizedTableRow, { row, isSelected }, 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 } from '@tanstack/react-table'\n\nimport { Checkbox } from '../../Checkbox'\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading: boolean\n  readonly isSelectable: boolean\n  readonly pageSize: number\n  readonly getRowId: (row: TData) => string\n  readonly rowSelection: Record<string, boolean>\n  readonly handleRowSelect: (checked: boolean, rowData: TData) => void\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  isSelectable,\n  pageSize,\n  getRowId,\n  rowSelection,\n  handleRowSelect,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, rowIndex) => (\n          <TableRow key={`skeleton-row-${rowIndex.toString()}`}>\n            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Checkbox checked={false} disabled />\n              </TableCell>\n            )}\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                <TableCell\n                  key={`skeleton-cell-${rowIndex.toString()}-${column.id}`}\n                  style={{ width: column.columnDef.size }}\n                >\n                  <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                    <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                  </div>\n                </TableCell>\n              ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  if (table.getRowModel().rows.length === 0) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  return (\n    <TableBody>\n      {table.getRowModel().rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n\n        return (\n          <TableRow key={rowId} data-selected={isSelected}>\n            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Checkbox\n                  checked={isSelected}\n                  onCheckedChange={(checked) => {\n                    const isChecked = checked\n                    handleRowSelect(isChecked, row.original)\n                  }}\n                  aria-label={`Select row ${rowId}`}\n                />\n              </TableCell>\n            )}\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    </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 * as React from 'react'\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 isSelectable?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n}\n\ntype MemoizedTableRowProps<TData> = {\n  row: Row<TData>\n  isSelectable: boolean\n  isSelected: boolean\n  getRowId: (row: TData) => string\n  handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nconst MemoizedTableRow = React.memo(\n  function MemoizedTableRow<TData>({\n    row,\n    isSelected,\n  }: Omit<MemoizedTableRowProps<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  (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected,\n) as <TData>(\n  props: Omit<MemoizedTableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>,\n) => React.ReactElement\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  isSelectable,\n  pageSize,\n  getRowId,\n  rowSelection,\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            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Skeleton className=\"h-5 w-5\" />\n              </TableCell>\n            )}\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                <TableCell key={`skeleton-cell-${String(index)}-${column.id}`} style={{ width: column.columnDef.size }}>\n                  <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                    <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                  </div>\n                </TableCell>\n              ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\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 <MemoizedTableRow key={rowId} row={row} isSelected={isSelected} />\n      })}\n    </TableBody>\n  )\n}\n"],"names":["MemoizedTableRow"],"mappings":"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"}

package/dist/components/DataTable/{DataTablePagination.d.ts → components/DataTablePagination.d.ts}

@@ -1,5 +1,5 @@
 import { Table } from '@tanstack/react-table';
-interface DataTablePaginationProps<TData> {
+type DataTablePaginationProps<TData> = {
     /** The table instance from tanstack/react-table */
     readonly table: Table<TData>;
     /** Total number of items across all pages (required for backend pagination) */
@@ -31,6 +31,6 @@ interface DataTablePaginationProps<TData> {
         /** Aria label for page number (default: "Page {number}") */
         page?: string;
     };
-}
+};
 export declare function DataTablePagination<TData>({ table, total, pageSize, currentPage, totalPages, onPageChange, className, isLoading, labels, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/{DataTablePagination.js → components/DataTablePagination.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Skeleton } from '../Skeleton/Skeleton.js';
-import { Pagination } from '../Pagination/Pagination.js';
+import { Pagination } from '../../Pagination/Pagination.js';
+import { Skeleton } from '../../Skeleton/Skeleton.js';
 
 function DataTablePagination({
   table,

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sources":["../../../../src/components/DataTable/components/DataTablePagination.tsx"],"sourcesContent":["import { Table } from '@tanstack/react-table'\n\nimport { Pagination } from '../../Pagination'\nimport { Skeleton } from '../../Skeleton'\n\ntype DataTablePaginationProps<TData> = {\n  /** The table instance from tanstack/react-table */\n  readonly table: Table<TData>\n  /** Total number of items across all pages (required for backend pagination) */\n  readonly total: number\n  /** Current page size */\n  readonly pageSize: number\n  /** Current page number (1-based) */\n  readonly currentPage: number\n  /** Total number of pages */\n  readonly totalPages: number\n  /** Called when page changes. If provided, enables backend pagination mode */\n  readonly onPageChange?: (page: number) => void\n  /** Additional className for the pagination component */\n  readonly className?: string\n  /** Indicates if the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for localization */\n  readonly labels?: {\n    /** Text shown before the page size number (default: \"Showing\") */\n    showing?: string\n    /** Text shown before the total number (default: \"of\") */\n    of?: string\n    /** Text shown after the total number (default: \"results\") */\n    results?: string\n    /** Text for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Text for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    page?: string\n  }\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  total,\n  pageSize,\n  currentPage,\n  totalPages,\n  onPageChange,\n  className,\n  isLoading,\n  labels = {},\n}: DataTablePaginationProps<TData>) {\n  const {\n    showing = 'Showing',\n    of = 'of',\n    results = 'results',\n    previousPage = '',\n    nextPage = '',\n    page = 'Page {number}',\n  } = labels\n\n  const isBackendPagination = !!onPageChange\n\n  const handlePageChange = (newPage: number) => {\n    if (isBackendPagination) {\n      onPageChange(newPage)\n    } else {\n      table.setPageIndex(newPage - 1)\n    }\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-between\">\n        <Skeleton className=\"h-[20px] w-[175px]\" />\n        <div className=\"flex items-center gap-2\">\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-2 md:flex-row md:justify-between\">\n      <div className=\"text-sm text-neutral-600\">\n        <span>{showing}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{Math.min(pageSize, total)}</span>\n        <span>{of}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{total}</span>\n        <span>{results}</span>\n      </div>\n\n      <Pagination\n        currentPage={currentPage}\n        totalPages={totalPages}\n        onPageChange={handlePageChange}\n        className={className}\n        mode=\"button\"\n        labels={{\n          previous: previousPage,\n          next: nextPage,\n          page,\n        }}\n      />\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAuCO,SAAS,mBAA2B,CAAA;AAAA,EACzC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAS;AACX,CAAoC,EAAA;AAClC,EAAM,MAAA;AAAA,IACJ,OAAU,GAAA,SAAA;AAAA,IACV,EAAK,GAAA,IAAA;AAAA,IACL,OAAU,GAAA,SAAA;AAAA,IACV,YAAe,GAAA,EAAA;AAAA,IACf,QAAW,GAAA,EAAA;AAAA,IACX,IAAO,GAAA;AAAA,GACL,GAAA,MAAA;AAEJ,EAAM,MAAA,mBAAA,GAAsB,CAAC,CAAC,YAAA;AAE9B,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAoB,KAAA;AAC5C,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,KACf,MAAA;AACL,MAAM,KAAA,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA;AAChC,GACF;AAEA,EAAA,IAAI,SAAW,EAAA;AACb,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,mCACb,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA,EAAS,WAAU,oBAAqB,EAAA,CAAA;AAAA,sBACzC,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA,EAAS,WAAU,mBAAoB,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,mBAAoB,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,mBAAoB,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,mBAAoB,EAAA,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,mBAAoB,EAAA;AAAA,OAC1C,EAAA;AAAA,KACF,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wEACb,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,sBACf,GAAA,CAAC,UAAK,SAAU,EAAA,mCAAA,EAAqC,eAAK,GAAI,CAAA,QAAA,EAAU,KAAK,CAAE,EAAA,CAAA;AAAA,sBAC/E,GAAA,CAAC,UAAM,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,sBACT,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,mCAAA,EAAqC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAC3D,GAAA,CAAC,UAAM,QAAQ,EAAA,OAAA,EAAA;AAAA,KACjB,EAAA,CAAA;AAAA,oBAEA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,UAAA;AAAA,QACA,YAAc,EAAA,gBAAA;AAAA,QACd,SAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACL,MAAQ,EAAA;AAAA,UACN,QAAU,EAAA,YAAA;AAAA,UACV,IAAM,EAAA,QAAA;AAAA,UACN;AAAA;AACF;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,9 @@
+import { Row } from '@tanstack/react-table';
+type DataTableRowSelectorProps<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 DataTableRowSelector<TData extends object>({ row, selectedIds, getRowId, handleRowSelect, }: DataTableRowSelectorProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/DataTableRowSelector.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+
+function DataTableRowSelector({
+  row,
+  selectedIds,
+  getRowId,
+  handleRowSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: selectedIds.has(getRowId(row.original)),
+      onCheckedChange: (checked) => handleRowSelect(getRowId(row.original), !!checked),
+      "aria-label": "Select row"
+    }
+  );
+}
+
+export { DataTableRowSelector };
+//# sourceMappingURL=DataTableRowSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRowSelector.js","sources":["../../../../src/components/DataTable/components/DataTableRowSelector.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\n\nimport { Checkbox } from '@/components/Checkbox'\n\ntype DataTableRowSelectorProps<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 DataTableRowSelector<TData extends object>({\n  row,\n  selectedIds,\n  getRowId,\n  handleRowSelect,\n}: DataTableRowSelectorProps<TData>) {\n  return (\n    <Checkbox\n      checked={selectedIds.has(getRowId(row.original))}\n      onCheckedChange={(checked) => handleRowSelect(getRowId(row.original), !!checked)}\n      aria-label=\"Select row\"\n    />\n  )\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,oBAA2C,CAAA;AAAA,EACzD,GAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAqC,EAAA;AACnC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAS,WAAY,CAAA,GAAA,CAAI,QAAS,CAAA,GAAA,CAAI,QAAQ,CAAC,CAAA;AAAA,MAC/C,eAAA,EAAiB,CAAC,OAAA,KAAY,eAAgB,CAAA,QAAA,CAAS,IAAI,QAAQ,CAAA,EAAG,CAAC,CAAC,OAAO,CAAA;AAAA,MAC/E,YAAW,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}

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

@@ -0,0 +1,9 @@
+type SelectAllHeaderProps<TData extends object> = {
+    readonly isBackendPagination: boolean;
+    readonly selectedIds: Set<string>;
+    readonly data: Array<TData>;
+    readonly handleSelectAll: (checked: boolean) => void;
+    readonly isLoading: boolean;
+};
+export declare function DataTableSelectHeader<TData extends object>({ isBackendPagination, selectedIds, data, handleSelectAll, isLoading, }: SelectAllHeaderProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+
+function DataTableSelectHeader({
+  isBackendPagination,
+  selectedIds,
+  data,
+  handleSelectAll,
+  isLoading
+}) {
+  if (isBackendPagination) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: selectedIds.size === data.length,
+      onCheckedChange: handleSelectAll,
+      disabled: isLoading || !data.length,
+      "aria-label": "Select all rows"
+    }
+  );
+}
+
+export { DataTableSelectHeader };
+//# sourceMappingURL=DataTableSelectHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSelectHeader.js","sources":["../../../../src/components/DataTable/components/DataTableSelectHeader.tsx"],"sourcesContent":["import { Checkbox } from '@/components/Checkbox'\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}\n\nexport function DataTableSelectHeader<TData extends object>({\n  isBackendPagination,\n  selectedIds,\n  data,\n  handleSelectAll,\n  isLoading,\n}: SelectAllHeaderProps<TData>) {\n  if (isBackendPagination) {\n    return null\n  }\n\n  return (\n    <Checkbox\n      checked={selectedIds.size === data.length}\n      onCheckedChange={handleSelectAll}\n      disabled={isLoading || !data.length}\n      aria-label=\"Select all rows\"\n    />\n  )\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,qBAA4C,CAAA;AAAA,EAC1D,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAgC,EAAA;AAC9B,EAAA,IAAI,mBAAqB,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,WAAY,CAAA,IAAA,KAAS,IAAK,CAAA,MAAA;AAAA,MACnC,eAAiB,EAAA,eAAA;AAAA,MACjB,QAAA,EAAU,SAAa,IAAA,CAAC,IAAK,CAAA,MAAA;AAAA,MAC7B,YAAW,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}