periplo-ui 3.21.4 → 3.22.0

package/dist/components/DataTable/DataTable.js

@@ -161,7 +161,8 @@ function DataTable({
             isSelectable: selection !== undefined,
             pageSize,
             getRowId,
-            rowSelection
+            rowSelection,
+            isSelectionStarted: selection?.isSelectionStarted ?? false
           }
         )
       ] }) }) }),

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  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;;"}
+{"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                isSelectionStarted={selection?.isSelectionStarted ?? false}\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;AACqD;AAAA;AACvD;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}

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

@@ -7,6 +7,7 @@ type DataTableBodyProps<TData> = {
     readonly pageSize: number;
     readonly getRowId: RowIdentifierFn<TData>;
     readonly rowSelection: Record<string, boolean>;
+    readonly isSelectionStarted: boolean;
 };
-export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, isSelectionStarted, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,14 +6,15 @@ import { TableRow, TableCell, TableBody } from '../../Table/Table.js';
 import { Typography } from '../../Typography/Typography.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)) });
+}
 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
+  TableRowComponent,
+  (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected && prevProps.isSelectionStarted === nextProps.isSelectionStarted
 );
 function DataTableBody({
   table,
@@ -21,7 +22,8 @@ function DataTableBody({
   isSelectable,
   pageSize,
   getRowId,
-  rowSelection
+  rowSelection,
+  isSelectionStarted
 }) {
   if (isLoading) {
     return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
@@ -43,7 +45,7 @@ function DataTableBody({
   return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
     const rowId = getRowId(row.original);
     const isSelected = rowSelection[rowId] ?? false;
-    return /* @__PURE__ */ jsx(MemoizedTableRow, { row, isSelected }, rowId);
+    return /* @__PURE__ */ jsx(MemoizedTableRow, { row, isSelected, isSelectionStarted }, rowId);
   }) });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\nimport * 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":";;;;;;;;AA2BA,MAAM,mBAAmB,KAAM,CAAA,IAAA;AAAA,EAC7B,SAASA,iBAAwB,CAAA;AAAA,IAC/B,GAAA;AAAA,IACA;AAAA,GACsF,EAAA;AACtF,IAAA,2BACG,QAAS,EAAA,EAAA,eAAA,EAAe,UACtB,EAAA,QAAA,EAAA,GAAA,CAAI,iBAAkB,CAAA,GAAA,CAAI,CAAC,IAAA,yBACzB,SAAwB,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,IAAA,CAAK,OAAO,SAAU,CAAA,IAAA,EAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,cACE,QAAK,EAAA,IAAA,CAAA,MAAA,CAAO,UAAU,IAAQ,IAAA,UAAA,CAAW,KAAK,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA,IAAA,CAAK,YAAY,CAAA,EACzF,KAHc,IAAK,CAAA,EAIrB,CACD,CACH,EAAA,CAAA;AAAA,GAEJ;AAAA,EACA,CAAC,WAAW,SAAc,KAAA,SAAA,CAAU,QAAQ,SAAU,CAAA,GAAA,IAAO,SAAU,CAAA,UAAA,KAAe,SAAU,CAAA;AAClG,CAAA;AAIO,SAAS,aAAqB,CAAA;AAAA,EACnC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA8B,EAAA;AAC5B,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAM,EAAA,KAAA,CAAA,IAAA,CAAK,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAE,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,0BAC7C,QACE,EAAA,EAAA,QAAA,EAAA;AAAA,MACC,YAAA,oBAAA,GAAA,CAAC,aAAU,SAAU,EAAA,UAAA,EACnB,8BAAC,QAAS,EAAA,EAAA,SAAA,EAAU,WAAU,CAChC,EAAA,CAAA;AAAA,MAED,KAAA,CACE,aAAc,EAAA,CACd,MAAO,CAAA,CAAC,WAAW,MAAO,CAAA,YAAA,EAAc,CAAA,CACxC,GAAI,CAAA,CAAC,2BACH,GAAA,CAAA,SAAA,EAAA,EAA8D,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,UAAU,IAAK,EAAA,EACnG,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,oCAAoC,MAAO,CAAA,EAAA,KAAO,SAAa,IAAA,aAAa,CAC7F,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,EAAA,KAAO,SAAY,GAAA,SAAA,GAAY,iBAAiB,CAAG,EAAA,CAAA,EACpF,CAHc,EAAA,EAAA,CAAA,cAAA,EAAiB,MAAO,CAAA,KAAK,CAAC,CAAI,CAAA,EAAA,MAAA,CAAO,EAAE,CAAA,CAI3D,CACD;AAAA,KAAA,EAAA,EAfU,gBAAgB,MAAO,CAAA,KAAK,CAAC,CAAA,CAgB5C,CACD,CACH,EAAA,CAAA;AAAA;AAIJ,EAAM,MAAA,IAAA,GAAO,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA;AAEjC,EAAI,IAAA,CAAC,KAAK,MAAQ,EAAA;AAChB,IACE,uBAAA,GAAA,CAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,eAAe,KAAM,CAAA,aAAA,GAAgB,MAAS,GAAA,CAAA,GAAI,KAAM,CAAA,aAAA,EAAgB,CAAA,MAAA;AAAA,QACjF,SAAU,EAAA,uBAAA;AAAA,QAEV,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,KAAM,EAAA,SAAA,EAAU,QAAiB,EAAA,mBAAA,EAAA;AAAA;AAAA,OAEjD,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACjB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,GAAA,CAAI,QAAQ,CAAA;AACnC,IAAM,MAAA,UAAA,GAAa,YAAa,CAAA,KAAK,CAAK,IAAA,KAAA;AAC1C,IAAA,uBAAQ,GAAA,CAAA,gBAAA,EAAA,EAA6B,GAAU,EAAA,UAAA,EAAA,EAAjB,KAAyC,CAAA;AAAA,GACxE,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"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  readonly isSelectionStarted: boolean\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\nconst MemoizedTableRow = React.memo(\n  TableRowComponent,\n  (prevProps, nextProps) =>\n    prevProps.row === nextProps.row &&\n    prevProps.isSelected === nextProps.isSelected &&\n    prevProps.isSelectionStarted === nextProps.isSelectionStarted,\n) as <TData>(props: Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>) => React.ReactElement\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  isSelectable,\n  pageSize,\n  getRowId,\n  rowSelection,\n  isSelectionStarted,\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 (\n          <MemoizedTableRow key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/DataTableToolbar.js

@@ -64,10 +64,17 @@ function DataTableToolbar({
           ),
           !primaryFilters || isMobile ? labels.filters : labels.moreFilters
         ] }) }),
-        /* @__PURE__ */ jsx(PopoverContent, { align: "center", className: "w-fit p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-          isMobile && primaryFilters && primaryFilters,
-          secondaryFilters
-        ] }) })
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            align: "center",
+            className: cn("w-fit p-4", isMobile && "max-h-[80vh] w-[95vw] overflow-y-auto"),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              isMobile && primaryFilters && primaryFilters,
+              secondaryFilters
+            ] })
+          }
+        )
       ] }),
       showColumnVisibilityControls && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", className: cn("whitespace-nowrap"), StartIcon: TextColumns, children: labels.columnVisibilityButton }) }),

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly showColumnVisibilityControls?: boolean\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    columnVisibilityButton?: string\n    columnVisibilitySelectAll?: string\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  columnVisibilityButton: 'Hide columns',\n  columnVisibilitySelectAll: 'Select all',\n  filters: 'Filters',\n  moreFilters: 'More filters',\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  showColumnVisibilityControls = true,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex flex-shrink-0 items-end justify-between p-1\">\n      <div className=\"flex flex-col items-start gap-2\">\n        {!isMobile && primaryFilters && <div className=\"flex items-center gap-2\">{primaryFilters}</div>}\n        {selection && (\n          <div className=\"flex items-center gap-2\">\n            {selection.isSelectionStarted ? (\n              <>\n                <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                  {selectionLabels.cancelSelection}\n                </Button>\n                {selection.selectionSummary && !isMobile && (\n                  <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                    {selection.selectionSummary}\n                  </Typography>\n                )}\n              </>\n            ) : (\n              <Button variant=\"text\" size=\"sm\" StartIcon={SelectionAll} onClick={selection.onSelectionStart}>\n                {selectionLabels.startSelection}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n      <div className={cn('flex items-center gap-2', isMobile ? 'w-full justify-end' : '')}>\n        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n        {(isMobile ? primaryFilters || secondaryFilters : secondaryFilters) && (\n          <PopoverRoot>\n            <PopoverTrigger asChild>\n              <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                {((isMobile && activePrimaryFiltersCount + activeSecondaryFiltersCount > 0) ||\n                  (!isMobile && activeSecondaryFiltersCount > 0)) && (\n                  <Badge\n                    count={\n                      isMobile ? activePrimaryFiltersCount + activeSecondaryFiltersCount : activeSecondaryFiltersCount\n                    }\n                    color=\"primary\"\n                    ping={false}\n                    className=\"absolute -right-1 -top-1\"\n                  />\n                )}\n                {!primaryFilters || isMobile ? labels.filters : labels.moreFilters}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"center\" className=\"w-fit p-4\">\n              <div className=\"flex flex-col gap-4\">\n                {isMobile && primaryFilters && primaryFilters}\n                {secondaryFilters}\n              </div>\n            </PopoverContent>\n          </PopoverRoot>\n        )}\n        {showColumnVisibilityControls && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                {labels.columnVisibilityButton}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuCheckboxItem\n                key={'all-columns'}\n                className=\"capitalize\"\n                checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                onSelect={(event) => event.preventDefault()}\n                onCheckedChange={(value) => table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))}\n              >\n                {labels.columnVisibilitySelectAll}\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuSeparator className=\"bg-neutral-100\" />\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide() && column.id !== 'select')\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onSelect={(event) => event.preventDefault()}\n                      onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                    >\n                      {column.columnDef.header?.toString()}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly showColumnVisibilityControls?: boolean\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    columnVisibilityButton?: string\n    columnVisibilitySelectAll?: string\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  columnVisibilityButton: 'Hide columns',\n  columnVisibilitySelectAll: 'Select all',\n  filters: 'Filters',\n  moreFilters: 'More filters',\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  showColumnVisibilityControls = true,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex flex-shrink-0 items-end justify-between p-1\">\n      <div className=\"flex flex-col items-start gap-2\">\n        {!isMobile && primaryFilters && <div className=\"flex items-center gap-2\">{primaryFilters}</div>}\n        {selection && (\n          <div className=\"flex items-center gap-2\">\n            {selection.isSelectionStarted ? (\n              <>\n                <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                  {selectionLabels.cancelSelection}\n                </Button>\n                {selection.selectionSummary && !isMobile && (\n                  <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                    {selection.selectionSummary}\n                  </Typography>\n                )}\n              </>\n            ) : (\n              <Button variant=\"text\" size=\"sm\" StartIcon={SelectionAll} onClick={selection.onSelectionStart}>\n                {selectionLabels.startSelection}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n      <div className={cn('flex items-center gap-2', isMobile ? 'w-full justify-end' : '')}>\n        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n        {(isMobile ? primaryFilters || secondaryFilters : secondaryFilters) && (\n          <PopoverRoot>\n            <PopoverTrigger asChild>\n              <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                {((isMobile && activePrimaryFiltersCount + activeSecondaryFiltersCount > 0) ||\n                  (!isMobile && activeSecondaryFiltersCount > 0)) && (\n                  <Badge\n                    count={\n                      isMobile ? activePrimaryFiltersCount + activeSecondaryFiltersCount : activeSecondaryFiltersCount\n                    }\n                    color=\"primary\"\n                    ping={false}\n                    className=\"absolute -right-1 -top-1\"\n                  />\n                )}\n                {!primaryFilters || isMobile ? labels.filters : labels.moreFilters}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              align=\"center\"\n              className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n            >\n              <div className=\"flex flex-col gap-4\">\n                {isMobile && primaryFilters && primaryFilters}\n                {secondaryFilters}\n              </div>\n            </PopoverContent>\n          </PopoverRoot>\n        )}\n        {showColumnVisibilityControls && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                {labels.columnVisibilityButton}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuCheckboxItem\n                key={'all-columns'}\n                className=\"capitalize\"\n                checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                onSelect={(event) => event.preventDefault()}\n                onCheckedChange={(value) => table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))}\n              >\n                {labels.columnVisibilitySelectAll}\n              </DropdownMenuCheckboxItem>\n              <DropdownMenuSeparator className=\"bg-neutral-100\" />\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide() && column.id !== 'select')\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onSelect={(event) => event.preventDefault()}\n                      onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                    >\n                      {column.columnDef.header?.toString()}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,7 @@ function useSelection({ data, getRowId, selection }) {
       if (!selection) return;
       const row = data.find((row2) => getRowId(row2) === id);
       if (row) {
-        selection.onSelect(row, selected);
+        selection.onSelect?.(row, selected);
       }
     },
     [data, getRowId, selection]

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

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { SelectionConfig } from '../types'\n\ntype UseSelectionProps<TData> = {\n  data: Array<TData>\n  getRowId: (row: TData) => string\n  selection?: SelectionConfig<TData>\n}\n\ntype UseSelectionReturn = {\n  selectedIds: Set<string>\n  isRowSelected: (id: string) => boolean\n  handleRowSelect: (id: string, selected: boolean) => void\n  handleSelectAll: (selected: boolean) => void\n  showHeaderCheckbox: boolean\n}\n\nexport function useSelection<TData>({ data, getRowId, selection }: UseSelectionProps<TData>): UseSelectionReturn {\n  const selectedIds = useMemo(() => {\n    if (!selection) return new Set<string>()\n    return new Set(data.filter(selection.isSelected).map(getRowId))\n  }, [data, getRowId, selection])\n\n  const handleRowSelect = useCallback(\n    (id: string, selected: boolean) => {\n      if (!selection) return\n      const row = data.find((row) => getRowId(row) === id)\n      if (row) {\n        selection.onSelect(row, selected)\n      }\n    },\n    [data, getRowId, selection],\n  )\n\n  const handleSelectAll = useCallback(\n    (selected: boolean) => {\n      if (!selection?.onSelectAll) return\n      selection.onSelectAll(selected)\n    },\n    [selection],\n  )\n\n  const isRowSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds])\n\n  const showHeaderCheckbox = !!selection\n\n  return {\n    selectedIds,\n    isRowSelected,\n    handleRowSelect,\n    handleSelectAll,\n    showHeaderCheckbox,\n  }\n}\n"],"names":["row"],"mappings":";;AAkBO,SAAS,YAAoB,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,WAA2D,EAAA;AAC/G,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,CAAC,SAAA,EAAkB,uBAAA,IAAI,GAAY,EAAA;AACvC,IAAO,OAAA,IAAI,IAAI,IAAK,CAAA,MAAA,CAAO,UAAU,UAAU,CAAA,CAAE,GAAI,CAAA,QAAQ,CAAC,CAAA;AAAA,GAC7D,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,SAAS,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAY,QAAsB,KAAA;AACjC,MAAA,IAAI,CAAC,SAAW,EAAA;AAChB,MAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAACA,SAAQ,QAASA,CAAAA,IAAG,MAAM,EAAE,CAAA;AACnD,MAAA,IAAI,GAAK,EAAA;AACP,QAAU,SAAA,CAAA,QAAA,CAAS,KAAK,QAAQ,CAAA;AAAA;AAClC,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,QAAsB,KAAA;AACrB,MAAI,IAAA,CAAC,WAAW,WAAa,EAAA;AAC7B,MAAA,SAAA,CAAU,YAAY,QAAQ,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,CAAC,EAAe,KAAA,WAAA,CAAY,IAAI,EAAE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEpF,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAAC,SAAA;AAE7B,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { SelectionConfig } from '../types'\n\ntype UseSelectionProps<TData> = {\n  data: Array<TData>\n  getRowId: (row: TData) => string\n  selection?: SelectionConfig<TData>\n}\n\ntype UseSelectionReturn = {\n  selectedIds: Set<string>\n  isRowSelected: (id: string) => boolean\n  handleRowSelect: (id: string, selected: boolean) => void\n  handleSelectAll: (selected: boolean) => void\n  showHeaderCheckbox: boolean\n}\n\nexport function useSelection<TData>({ data, getRowId, selection }: UseSelectionProps<TData>): UseSelectionReturn {\n  const selectedIds = useMemo(() => {\n    if (!selection) return new Set<string>()\n    return new Set(data.filter(selection.isSelected).map(getRowId))\n  }, [data, getRowId, selection])\n\n  const handleRowSelect = useCallback(\n    (id: string, selected: boolean) => {\n      if (!selection) return\n      const row = data.find((row) => getRowId(row) === id)\n      if (row) {\n        selection.onSelect?.(row, selected)\n      }\n    },\n    [data, getRowId, selection],\n  )\n\n  const handleSelectAll = useCallback(\n    (selected: boolean) => {\n      if (!selection?.onSelectAll) return\n      selection.onSelectAll(selected)\n    },\n    [selection],\n  )\n\n  const isRowSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds])\n\n  const showHeaderCheckbox = !!selection\n\n  return {\n    selectedIds,\n    isRowSelected,\n    handleRowSelect,\n    handleSelectAll,\n    showHeaderCheckbox,\n  }\n}\n"],"names":["row"],"mappings":";;AAkBO,SAAS,YAAoB,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,WAA2D,EAAA;AAC/G,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,CAAC,SAAA,EAAkB,uBAAA,IAAI,GAAY,EAAA;AACvC,IAAO,OAAA,IAAI,IAAI,IAAK,CAAA,MAAA,CAAO,UAAU,UAAU,CAAA,CAAE,GAAI,CAAA,QAAQ,CAAC,CAAA;AAAA,GAC7D,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,SAAS,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAY,QAAsB,KAAA;AACjC,MAAA,IAAI,CAAC,SAAW,EAAA;AAChB,MAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAACA,SAAQ,QAASA,CAAAA,IAAG,MAAM,EAAE,CAAA;AACnD,MAAA,IAAI,GAAK,EAAA;AACP,QAAU,SAAA,CAAA,QAAA,GAAW,KAAK,QAAQ,CAAA;AAAA;AACpC,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,QAAsB,KAAA;AACrB,MAAI,IAAA,CAAC,WAAW,WAAa,EAAA;AAC7B,MAAA,SAAA,CAAU,YAAY,QAAQ,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,CAAC,EAAe,KAAA,WAAA,CAAY,IAAI,EAAE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEpF,EAAM,MAAA,kBAAA,GAAqB,CAAC,CAAC,SAAA;AAE7B,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

@@ -39,9 +39,9 @@ export type SelectionConfig<TData> = {
   /** Whether the row is selected */
   isSelected: (row: TData) => boolean
   /** Callback when a row is selected */
-  onSelect: (row: TData, selected: boolean) => void
+  onSelect?: (row: TData, selected: boolean) => void
   /** Callback when all rows are selected */
-  onSelectAll: (selected: boolean) => void
+  onSelectAll?: (selected: boolean) => void
   /** Optional callback when selection has started (for backend pagination) */
   onSelectionStart?: () => void
   /** Optional callback when selection mode is cancelled (for backend pagination) */
@@ -131,7 +131,7 @@ export type DataTableProps<TData> = {
 } & (HasId<TData> extends true
   ? {
       /** Function to get unique identifier from a row. Not needed when data has 'id' property */
-      readonly getRowId?: never
+      readonly getRowId?: RowIdentifierFn<TData>
     }
   : {
       /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */

package/package.json

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