@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/components/PaginationControls.tsx

@@ -13,6 +13,7 @@ import {
 } from 'lucide-react';
 import { cn } from '../../../utils/cn';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import { getPaginationBinding, getPageSizeOptions } from '../utils/paginationUtils';
 import type { PaginationMode, ServerSideResponse, DataRecord } from '../types';
 
 interface PaginationControlsProps<TData extends DataRecord> {
@@ -39,30 +40,15 @@ export function PaginationControls<TData extends DataRecord>({
   totalCount
 }: PaginationControlsProps<TData>) {
 
-  // Get pagination state based on mode
-  const getPaginationState = () => {
-    if (paginationMode === 'server' && serverData) {
-      return {
-        currentPageSize: serverData.pageSize,
-        currentPageIndex: serverData.pageIndex,
-        pageCount: serverData.pageCount,
-        totalRows: serverData.totalCount,
-        canPreviousPage: serverData.hasPreviousPage,
-        canNextPage: serverData.hasNextPage,
-      };
-    }
-
-    // Client or hybrid mode
-    const state = table.getState().pagination;
-    return {
-      currentPageSize: state.pageSize,
-      currentPageIndex: state.pageIndex,
-      pageCount: table.getPageCount(),
-      totalRows: totalCount ?? table.getRowCount(),
-      canPreviousPage: table.getCanPreviousPage(),
-      canNextPage: table.getCanNextPage(),
-    };
-  };
+  // Use unified pagination binding for consistent behavior across modes
+  const pagination = getPaginationBinding({
+    mode: paginationMode,
+    table,
+    serverData,
+    totalCount,
+    onPageChange,
+    onPageSizeChange,
+  });
 
   const {
     currentPageSize,
@@ -71,67 +57,20 @@ export function PaginationControls<TData extends DataRecord>({
     totalRows,
     canPreviousPage,
     canNextPage,
-  } = getPaginationState();
-
-  // Handle page size changes
-  const handlePageSizeChange = (newPageSize: number) => {
-    if (paginationMode === 'server') {
-      onPageSizeChange?.(newPageSize);
-    } else {
-      table.setPageSize(newPageSize);
-    }
-  };
-
-  // Handle page navigation
-  const handleFirstPage = () => {
-    if (paginationMode === 'server') {
-      onPageChange?.(0);
-    } else {
-      table.setPageIndex(0);
-    }
-  };
-
-  const handlePreviousPage = () => {
-    if (paginationMode === 'server') {
-      onPageChange?.(Math.max(0, currentPageIndex - 1));
-    } else {
-      table.previousPage();
-    }
-  };
-
-  const handleNextPage = () => {
-    if (paginationMode === 'server') {
-      onPageChange?.(Math.min(pageCount - 1, currentPageIndex + 1));
-    } else {
-      table.nextPage();
-    }
-  };
+    startRow,
+    endRow,
+  } = pagination.state;
 
-  const handleLastPage = () => {
-    if (paginationMode === 'server') {
-      onPageChange?.(pageCount - 1);
-    } else {
-      table.setPageIndex(pageCount - 1);
-    }
-  };
-
-  // Calculate display range
-  const startRow = currentPageIndex * currentPageSize + 1;
-  const endRow = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
+  const {
+    goToFirstPage,
+    goToPreviousPage,
+    goToNextPage,
+    goToLastPage,
+    setPageSize,
+  } = pagination.actions;
 
   // Get mode-specific page size options
-  const getPageSizeOptions = () => {
-    switch (paginationMode) {
-      case 'server':
-        return pageSizeOptions.filter(size => size <= 250); // Limit server-side page sizes
-      case 'hybrid':
-        return pageSizeOptions.filter(size => size >= 50); // Hybrid mode prefers larger pages
-      default:
-        return pageSizeOptions;
-    }
-  };
-
-  const availablePageSizes = getPageSizeOptions();
+  const availablePageSizes = getPageSizeOptions(paginationMode, pageSizeOptions);
 
   // Performance mode indicator
   const getModeIcon = () => {
@@ -168,7 +107,7 @@ export function PaginationControls<TData extends DataRecord>({
         <Select
           value={currentPageSize?.toString() || '10'}
           selectedText={currentPageSize?.toString() || '10'}
-          onValueChange={(value) => handlePageSizeChange(Number(value))}
+          onValueChange={(value) => setPageSize(Number(value))}
           disabled={isLoading}
           className="w-36 h-8"
         >
@@ -182,7 +121,7 @@ export function PaginationControls<TData extends DataRecord>({
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {pageSizeOptions.map((pageSize) => (
+            {availablePageSizes.map((pageSize) => (
               <SelectItem key={pageSize} value={pageSize?.toString() || '10'}>
                 {pageSize}
               </SelectItem>
@@ -217,7 +156,7 @@ export function PaginationControls<TData extends DataRecord>({
           variant="outline"
           size="sm"
           className="h-8 w-8 p-0"
-          onClick={handleFirstPage}
+          onClick={goToFirstPage}
           disabled={!canPreviousPage || isLoading}
           aria-label="Go to first page"
           tabIndex={0}
@@ -229,7 +168,7 @@ export function PaginationControls<TData extends DataRecord>({
           variant="outline"
           size="sm"
           className="h-8 w-8 p-0"
-          onClick={handlePreviousPage}
+          onClick={goToPreviousPage}
           disabled={!canPreviousPage || isLoading}
           aria-label="Go to previous page"
           tabIndex={0}
@@ -241,7 +180,7 @@ export function PaginationControls<TData extends DataRecord>({
           variant="outline"
           size="sm"
           className="h-8 w-8 p-0"
-          onClick={handleNextPage}
+          onClick={goToNextPage}
           disabled={!canNextPage || isLoading}
           aria-label="Go to next page"
           tabIndex={0}
@@ -253,7 +192,7 @@ export function PaginationControls<TData extends DataRecord>({
           variant="outline"
           size="sm"
           className="h-8 w-8 p-0"
-          onClick={handleLastPage}
+          onClick={goToLastPage}
           disabled={!canNextPage || isLoading}
           aria-label="Go to last page"
           tabIndex={0}
@@ -279,25 +218,26 @@ export function EnhancedPaginationControls<TData extends DataRecord>({
 }: EnhancedPaginationControlsProps<TData>) {
   const [jumpToPage, setJumpToPage] = React.useState('');
 
-  const { table, paginationMode = 'client', serverData, onPageChange } = props;
+  const { table, paginationMode = 'client', serverData, onPageChange, totalCount } = props;
 
-  const { pageCount } = (() => {
-    if (paginationMode === 'server' && serverData) {
-      return { pageCount: serverData.pageCount };
-    }
-    return { pageCount: table.getPageCount() };
-  })();
+  // Use unified pagination binding for consistent behavior
+  const pagination = getPaginationBinding({
+    mode: paginationMode,
+    table,
+    serverData,
+    totalCount,
+    onPageChange,
+    onPageSizeChange: props.onPageSizeChange,
+  });
+
+  const { pageCount } = pagination.state;
 
   const handleJumpToPage = (e: React.FormEvent) => {
     e.preventDefault();
     const pageNumber = parseInt(jumpToPage, 10);
     if (pageNumber >= 1 && pageNumber <= pageCount) {
       const pageIndex = pageNumber - 1;
-      if (paginationMode === 'server') {
-        onPageChange?.(pageIndex);
-      } else {
-        table.setPageIndex(pageIndex);
-      }
+      pagination.actions.goToPage(pageIndex);
       setJumpToPage('');
     }
   };

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -22,7 +22,16 @@ import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
-import type { AggregateConfig, HierarchicalConfig, HierarchicalDataRow } from '../types';
+import type {
+  AggregateConfig,
+  DataRecord,
+  DataTableAction,
+  EditableColumnDef,
+  EmptyStateConfig,
+  HierarchicalConfig,
+  HierarchicalDataRow,
+  CellValue
+} from '../types';
 import { calculateIndentation } from '../utils/hierarchicalUtils';
 import { getRowIdSafe } from '../utils/rowUtils';
 
@@ -34,15 +43,15 @@ const MEMORY_OPTIMIZATION_THRESHOLD = 100000;
 /**
  * Props for the unified table body component
  */
-interface UnifiedTableBodyProps<TData extends Record<string, any>> {
+interface UnifiedTableBodyProps<TData extends DataRecord> {
   /** TanStack table instance */
   table: Table<TData>;
   /** Whether a new row is being created */
   isCreating: boolean;
   /** Data for the row being created */
-  creationData: Record<string, any>;
+  creationData: Record<string, CellValue>;
   /** Callback when creation data changes */
-  onCreationDataChange: (data: Record<string, any>) => void;
+  onCreationDataChange: (data: Record<string, CellValue>) => void;
   /** Callback to save the new row */
   onSaveCreation: () => void;
   /** Callback to cancel row creation */
@@ -50,9 +59,9 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   /** ID of the row currently being edited */
   editingRowId: string | null;
   /** Data for the row being edited */
-  editingData: Record<string, any>;
+  editingData: Record<string, CellValue>;
   /** Callback when editing data changes */
-  onEditingDataChange: (data: Record<string, any>) => void;
+  onEditingDataChange: (data: Record<string, CellValue>) => void;
   /** Callback to save the edited row */
   onSaveEditing?: () => void;
   /** Callback to cancel row editing */
@@ -64,15 +73,7 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   /** Function to get unique row ID */
   getRowId?: (row: TData, index: number) => string;
   /** Custom empty state configuration */
-  emptyState?: {
-    title?: string;
-    description?: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    action?: {
-      label: string;
-      onClick: () => void;
-    };
-  };
+  emptyState?: EmptyStateConfig;
   /** Whether the table is currently filtered */
   isFiltered?: boolean;
   /** Callback to clear all filters */
@@ -103,25 +104,7 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
     hasAnyChildren?: boolean;
   };
   /** Actions for action buttons */
-  actions?: Array<{
-    label: string;
-    onClick: (row: any) => void;
-    icon?: any;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
-    disabled?: boolean | ((row?: any) => boolean);
-    visible?: boolean | ((row?: any) => boolean);
-    testId?: string;
-    showInEditMode?: boolean;
-    hideInViewMode?: boolean;
-    showInViewMode?: boolean;
-    hidden?: boolean;
-    showForParent?: boolean;
-    showForChild?: boolean;
-    parentIcon?: any;
-    childIcon?: any;
-    parentLabel?: string;
-    childLabel?: string;
-  }>;
+  actions?: DataTableAction<TData>[];
   // MANDATORY RBAC
   rbac?: {
     pageId?: string;
@@ -138,38 +121,37 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
 }
 
 // Helper function to render the appropriate input type based on column configuration
-const renderEditField = <TData extends Record<string, any>>(
+const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
-  value: unknown,
-  onChange: (value: unknown) => void,
-  editingData: Record<string, unknown> = {},
+  value: CellValue,
+  onChange: (value: CellValue | Record<string, CellValue>) => void,
+  editingData: Record<string, CellValue> = {},
   placeholder?: string
 ) => {
-  // Cast to DataTableColumn to access extended properties
-  const columnDef = column.columnDef as any;
-  
+  const columnDef = column.columnDef as EditableColumnDef<TData>;
+
   // Check if column is editable (default: true)
   if (columnDef.editable === false) {
     // Return the original value as text if column is not editable
-    return <span className="text-sm text-gray-600">{String(value || '')}</span>;
+    return <span className="text-sm text-gray-600">{String(value ?? '')}</span>;
   }
-  
+
   // Check for custom field type
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
     // Use editAccessorKey if specified, otherwise use the column id
     const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] || value || '';
-    
+    const currentValue = editingData[accessorKey] ?? value ?? '';
+
     return (
       <Select
         value={String(currentValue)}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue })}
+        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
       >
         <SelectTrigger className="h-8">
           <SelectValue placeholder={placeholder || `Select ${columnDef.header || column.id}...`} />
         </SelectTrigger>
         <SelectContent>
-          {columnDef.fieldOptions.map((option: any) => (
+          {columnDef.fieldOptions.map(option => (
             <SelectItem key={option.value} value={String(option.value)}>
               {option.label}
             </SelectItem>
@@ -184,32 +166,32 @@ const renderEditField = <TData extends Record<string, any>>(
     return (
       <Input
         type="number"
-        value={String(value || '')}
-        onChange={(e) => onChange(e.target.value)}
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
         className="h-8"
       />
     );
   }
-  
+
   // Check for date type
   if (columnDef.fieldType === 'date') {
     return (
       <Input
         type="date"
-        value={String(value || '')}
-        onChange={(e) => onChange(e.target.value)}
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         className="h-8"
       />
     );
   }
-  
+
   // Default to text input
   return (
     <Input
       type="text"
-      value={String(value || '')}
-      onChange={(e) => onChange(e.target.value)}
+      value={String(value ?? '')}
+      onChange={(e) => onChange(e.target.value as unknown as CellValue)}
       placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
       className="h-8"
     />
@@ -378,52 +360,12 @@ const RowComponent = React.memo(({
                   key={cell.id} 
                   className={getTableCellClasses({
                     isCompact: true,
-                    className: "px-3 py-2 pl-8 whitespace-normal break-words"
+                    className: `px-3 py-2 pl-8 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
                   })}
                 >
-                  <div className={`${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
-                    {isSubRowEditing && cell.column.id !== 'actions' ? (
-                      // Check if column has a custom cell renderer - if so, use it in edit mode
-                      cell.column.columnDef.cell ? (
-                        flexRender(cell.column.columnDef.cell, {
-                          ...cell.getContext(),
-                          hierarchical: hierarchical,
-                          isParent: false,
-                          isChild: true,
-                          isHierarchical: false,
-                          rowId: subRowId,
-                          isExpanded: false,
-                          hasChildren: false,
-                          getIsEditing: () => true, // Always true in edit mode
-                          setValue: (value: any) => {
-                            if (typeof value === 'object' && value !== null) {
-                              onEditingDataChange?.({ ...editingData, ...value });
-                            } else {
-                              onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                            }
-                          }
-                        })
-                      ) : (
-                        // Fall back to default edit field rendering when no custom cell renderer
-                        renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                          if (typeof value === 'object' && value !== null) {
-                            onEditingDataChange?.({ ...editingData, ...value });
-                          } else {
-                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                          }
-                        }, editingData)
-                      )
-                    ) : cell.column.id === 'actions' ? (
-                      <ActionButtons 
-                        row={row} 
-                        actions={actions}
-                        isEditing={isEditing}
-                        isParent={isParent}
-                        hierarchical={!!hierarchical}
-                        rbac={rbac}
-                        permissions={permissions}
-                      />
-                    ) : (
+                  {isSubRowEditing && cell.column.id !== 'actions' ? (
+                    // Check if column has a custom cell renderer - if so, use it in edit mode
+                    cell.column.columnDef.cell ? (
                       flexRender(cell.column.columnDef.cell, {
                         ...cell.getContext(),
                         hierarchical: hierarchical,
@@ -432,10 +374,48 @@ const RowComponent = React.memo(({
                         isHierarchical: false,
                         rowId: subRowId,
                         isExpanded: false,
-                        hasChildren: false
+                        hasChildren: false,
+                        getIsEditing: () => true, // Always true in edit mode
+                        setValue: (value: any) => {
+                          if (typeof value === 'object' && value !== null) {
+                            onEditingDataChange?.({ ...editingData, ...value });
+                          } else {
+                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                          }
+                        }
                       })
-                    )}
-                  </div>
+                    ) : (
+                      // Fall back to default edit field rendering when no custom cell renderer
+                      renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
+                        if (typeof value === 'object' && value !== null) {
+                          onEditingDataChange?.({ ...editingData, ...value });
+                        } else {
+                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                        }
+                      }, editingData)
+                    )
+                  ) : cell.column.id === 'actions' ? (
+                    <ActionButtons 
+                      row={row} 
+                      actions={actions}
+                      isEditing={isEditing}
+                      isParent={isParent}
+                      hierarchical={!!hierarchical}
+                      rbac={rbac}
+                      permissions={permissions}
+                    />
+                  ) : (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      hierarchical: hierarchical,
+                      isParent: false,
+                      isChild: true,
+                      isHierarchical: false,
+                      rowId: subRowId,
+                      isExpanded: false,
+                      hasChildren: false
+                    })
+                  )}
                 </td>
               ))}
             </tr>
@@ -459,7 +439,7 @@ const RowComponent = React.memo(({
         onEditingDataChange={onEditingDataChange}
         onSave={onSaveEditing}
         onCancel={onCancelEditing}
-        actions={((actions || []) as any[]).filter((a: any) => !a.disabled) as any}
+        actions={actions ?? []}
         getRowId={getRowId}
         isParent={isParent}
         hierarchical={!!hierarchical}
@@ -487,11 +467,13 @@ const RowComponent = React.memo(({
     <tr 
       ref={rowRef}
       key={row.id} 
+      role="row"
       style={{
         ...style,
         ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {})
       }}
       className={rowClassName}
+      aria-selected={typeof row.getIsSelected === 'function' ? (row.getIsSelected() ? 'true' : 'false') : 'false'}
     >
       {visibleCells.map((cell: any, cellIndex: number) => {
         const isFirstCell = cellIndex === 0;
@@ -504,52 +486,47 @@ const RowComponent = React.memo(({
             key={cell.id} 
             className={getTableCellClasses({
               isCompact: true,
-              className: "px-3 py-2 whitespace-normal break-words"
+              className: `px-3 py-2 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
             })}
           >
-            <div className="flex items-center gap-2">
-              {shouldShowExpansionButton && hasChildren && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => hierarchical?.state?.toggleRow(rowId)}
-                  className="h-6 w-6 p-0 flex-shrink-0"
-                  aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-                  title={isExpanded ? 'Collapse row' : 'Expand row'}
-                >
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
-                </Button>
-              )}
-              
-              <div className={`flex-1 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
-                {cell.column.id === 'actions' ? (
-                  <ActionButtons 
-                    row={row} 
-                    actions={actions}
-                    isEditing={isEditing}
-                    isParent={isParent}
-                    hierarchical={!!hierarchical}
-                    rbac={rbac}
-                    permissions={permissions}
-                  />
+            {shouldShowExpansionButton && hasChildren && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => hierarchical?.state?.toggleRow(rowId)}
+                className="h-6 w-6 p-0 flex-shrink-0"
+                aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+                title={isExpanded ? 'Collapse row' : 'Expand row'}
+              >
+                {isExpanded ? (
+                  <ChevronDown className="h-4 w-4" />
                 ) : (
-                  flexRender(cell.column.columnDef.cell, {
-                    ...cell.getContext(),
-                    hierarchical: hierarchical,
-                    isParent: isParent,
-                    isChild: isChild,
-                    isHierarchical: isHierarchical,
-                    rowId: rowId,
-                    isExpanded: isExpanded,
-                    hasChildren: hasChildren,
-                  })
+                  <ChevronRight className="h-4 w-4" />
                 )}
-              </div>
-            </div>
+              </Button>
+            )}
+            {cell.column.id === 'actions' ? (
+              <ActionButtons 
+                row={row} 
+                actions={actions}
+                isEditing={isEditing}
+                isParent={isParent}
+                hierarchical={!!hierarchical}
+                rbac={rbac}
+                permissions={permissions}
+              />
+            ) : (
+              flexRender(cell.column.columnDef.cell, {
+                ...cell.getContext(),
+                hierarchical: hierarchical,
+                isParent: isParent,
+                isChild: isChild,
+                isHierarchical: isHierarchical,
+                rowId: rowId,
+                isExpanded: isExpanded,
+                hasChildren: hasChildren,
+              })
+            )}
           </td>
         );
       })}
@@ -728,10 +705,10 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                 })}
               >
                 {renderEditField(header.column, creationData[header.column.id], (value) => {
-                  if (typeof value === 'object' && value !== null) {
-                    onCreationDataChange({ ...creationData, ...value });
+                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                    onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
                   } else {
-                    onCreationDataChange({ ...creationData, [header.column.id]: value });
+                    onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
                   }
                 }, creationData)}
               </td>

package/src/components/DataTable/context/DataTableContext.tsx

@@ -31,7 +31,7 @@ export interface DataTableContextValue<TData extends DataRecord> {
 // CONTEXT CREATION
 // ============================================================================
 
-const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
+const DataTableContext = createContext<DataTableContextValue<DataRecord> | null>(null);
 
 // ============================================================================
 // PROVIDER COMPONENT

package/src/components/DataTable/core/ColumnFactory.ts

@@ -45,6 +45,10 @@ export interface ActionColumnOptions {
   size?: number;
   minSize?: number;
   maxSize?: number;
+  meta?: {
+    align?: 'left' | 'right' | 'center';
+    [key: string]: any;
+  };
 }
 
 export interface CustomColumnOptions<TData extends DataRecord> {
@@ -220,6 +224,7 @@ export class ColumnFactory<TData extends DataRecord = DataRecord> {
       size: options.size || 150,
       minSize: options.minSize || 100,
       maxSize: options.maxSize || 200,
+      meta: options.meta,
     } as ColumnDef<TData>;
   }