@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/components/LoadingState.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner';
-
-/**
- * Loading state component for DataTable.
- * Displays a loading spinner and message while data is being fetched.
- * 
- * @returns The rendered loading state UI
- */
-export function LoadingState() {
-  return (
-    <p className="grid place-items-center text-center p-8">
-        <LoadingSpinner />
-        <strong>Loading...</strong>     
-    </p>
-  );
-}

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

@@ -1,289 +0,0 @@
-import React from 'react';
-import { Table } from '@tanstack/react-table';
-import { Button } from '../../Button/Button';
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  Loader2,
-  Server,
-  Database,
-  Zap
-} from 'lucide-react';
-import { cn } from '../../../utils/core/cn';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
-import { getPaginationBinding, getPageSizeOptions } from '../utils/paginationUtils';
-import type { PaginationMode, ServerSideResponse, DataRecord } from '../types';
-
-/**
- * Props for the PaginationControls component.
- * @template TData - The type of data records in the table
- */
-interface PaginationControlsProps<TData extends DataRecord> {
-  table: Table<TData>;
-  pageSizeOptions?: number[];
-  paginationMode?: PaginationMode;
-  serverData?: ServerSideResponse<TData> | null;
-  isLoading?: boolean;
-  onPageChange?: (pageIndex: number) => void;
-  onPageSizeChange?: (pageSize: number) => void;
-  showPerformanceInfo?: boolean;
-  totalCount?: number;
-}
-
-/**
- * Pagination controls component for DataTable.
- * Provides page navigation, page size selection, and performance information.
- * 
- * @template TData - The type of data records in the table
- * @param props - Pagination configuration
- * @returns The rendered pagination controls
- */
-export function PaginationControls<TData extends DataRecord>({
-  table,
-  pageSizeOptions = [10, 20, 30, 40, 50],
-  paginationMode = 'client',
-  serverData,
-  isLoading = false,
-  onPageChange,
-  onPageSizeChange,
-  showPerformanceInfo = false,
-  totalCount
-}: PaginationControlsProps<TData>) {
-
-  // Use unified pagination binding for consistent behavior across modes
-  const pagination = getPaginationBinding({
-    mode: paginationMode,
-    table,
-    serverData,
-    totalCount,
-    onPageChange,
-    onPageSizeChange,
-  });
-
-  const {
-    currentPageSize,
-    currentPageIndex,
-    pageCount,
-    totalRows,
-    canPreviousPage,
-    canNextPage,
-    startRow,
-    endRow,
-  } = pagination.state;
-
-  const {
-    goToFirstPage,
-    goToPreviousPage,
-    goToNextPage,
-    goToLastPage,
-    setPageSize,
-  } = pagination.actions;
-
-  // Get mode-specific page size options
-  const availablePageSizes = getPageSizeOptions(paginationMode, pageSizeOptions);
-
-  // Performance mode indicator
-  const getModeIcon = () => {
-    switch (paginationMode) {
-      case 'server':
-        return <Server className="size-3" />;
-      case 'hybrid':
-        return <Database className="size-3" />;
-      default:
-        return <Zap className="size-3" />;
-    }
-  };
-
-  const getModeLabel = () => {
-    switch (paginationMode) {
-      case 'server':
-        return 'Server-side';
-      case 'hybrid':
-        return 'Hybrid';
-      default:
-        return 'Client-side';
-    }
-  };
-
-  return (
-    <footer
-      aria-label="pagination"
-      className="mx-auto grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] gap-4 items-center my-2"
-    >
-      {/* Left side - Page Size Selector */}
-
-      <label className="text-sec-600">Rows per page</label>
-      <Select
-        value={currentPageSize?.toString() || '10'}
-        selectedText={currentPageSize?.toString() || '10'}
-        onValueChange={(value) => setPageSize(Number(value))}
-        disabled={isLoading}
-        direction="up"
-        className="w-36 h-8"
-      >
-       
-        <SelectTrigger
-          className={cn(
-
-            isLoading && "opacity-50 cursor-not-allowed"
-          )}
-          aria-label="Rows per page"
-        >
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {availablePageSizes.map((pageSize) => (
-            <SelectItem key={pageSize} value={pageSize?.toString() || '10'}>
-              {pageSize}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-
-
-      {/* Performance Mode Indicator */}
-      {showPerformanceInfo && (
-        <>
-          {getModeIcon()}
-          <span>{getModeLabel()}</span>
-        </>
-      )}
-
-
-      {/* Row Count Display - Removed as per user request, keeping only "Page X of Y" */}
-
-
-      {/* Center - Page Navigation */}
-
-      <p className="justify-self-center text-sm text-sec-600 my-0 py-0">
-        Page {currentPageIndex + 1} of {pageCount || 1}
-      </p>
-
-
-      {/* Right side - Navigation Buttons */}
-
-
-      <Button
-        variant="outline"
-        size="sm"
-        className="size-8 p-0"
-        onClick={goToFirstPage}
-        disabled={!canPreviousPage || isLoading}
-        aria-label="Go to first page"
-        tabIndex={0}
-      >
-        <ChevronsLeft className="size-4" />
-      </Button>
-
-      <Button
-        variant="outline"
-        size="sm"
-        className="size-8 p-0"
-        onClick={goToPreviousPage}
-        disabled={!canPreviousPage || isLoading}
-        aria-label="Go to previous page"
-        tabIndex={0}
-      >
-        <ChevronLeft className="size-4" />
-      </Button>
-
-      <Button
-        variant="outline"
-        size="sm"
-        className="size-8 p-0"
-        onClick={goToNextPage}
-        disabled={!canNextPage || isLoading}
-        aria-label="Go to next page"
-        tabIndex={0}
-      >
-        <ChevronRight className="size-4" />
-      </Button>
-
-      <Button
-        variant="outline"
-        size="sm"
-        className="size-8 p-0"
-        onClick={goToLastPage}
-        disabled={!canNextPage || isLoading}
-        aria-label="Go to last page"
-        tabIndex={0}
-      >
-        <ChevronsRight className="size-4" />
-      </Button>
-    </footer>
-  );
-}
-
-/**
- * Enhanced pagination controls with additional features
- * Provides jump-to-page functionality for improved navigation
- */
-interface EnhancedPaginationControlsProps<TData extends DataRecord>
-  extends PaginationControlsProps<TData> {
-  showJumpToPage?: boolean;
-}
-
-export function EnhancedPaginationControls<TData extends DataRecord>({
-  showJumpToPage = false,
-  ...props
-}: EnhancedPaginationControlsProps<TData>) {
-  const [jumpToPage, setJumpToPage] = React.useState('');
-
-  const { table, paginationMode = 'client', serverData, onPageChange, totalCount } = props;
-
-  // 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;
-      pagination.actions.goToPage(pageIndex);
-      setJumpToPage('');
-    }
-  };
-
-  return (
-    <>
-      <PaginationControls {...props} />
-
-      {/* Additional Controls */}
-      {showJumpToPage && (
-        <>
-          {/* Jump to Page */}
-          <form onSubmit={handleJumpToPage} className="flex items-center space-x-2">
-            <label htmlFor="jump-to-page-input" className="sr-only">Jump to page</label>
-            <span aria-hidden="true">Jump to page:</span>
-            <input
-              id="jump-to-page-input"
-              type="number"
-              min="1"
-              max={pageCount}
-              value={jumpToPage}
-              onChange={(e) => setJumpToPage(e.target.value)}
-              className="w-16 h-6 px-2 border rounded text-xs datatable-number-no-spinners"
-              placeholder="1"
-              aria-label="Page number"
-            />
-            <Button type="submit" size="sm" variant="outline" className="h-6 px-2 text-xs">
-              Go
-            </Button>
-          </form>
-        </>
-      )}
-    </>
-  );
-}

package/src/components/DataTable/components/RowComponent.tsx

@@ -1,403 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { flexRender } from '@tanstack/react-table';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { Button } from '../../Button/Button';
-import { ActionButtons } from './ActionButtons';
-import { EditableRow } from './EditableRow';
-import { cn } from '../../../utils/core/cn';
-import { createLogger } from '../../../utils/core/logger';
-import { getTableCellClasses, getTableRowClasses } from '../styles';
-import type {
-  DataRecord,
-  DataTableAction,
-  DataTableColumn,
-  HierarchicalConfig,
-  HierarchicalDataRow,
-} from '../types';
-import { calculateIndentation } from '../utils/hierarchicalUtils';
-import { getRowIdSafe } from '../utils/rowUtils';
-
-/**
- * Props for the Row component.
- * Defines the configuration for rendering a single table row.
- */
-export interface RowProps {
-  row: any;
-  style?: React.CSSProperties;
-  isEditing?: boolean;
-  editingData?: Record<string, any>;
-  onEditingDataChange?: (data: Record<string, any>) => void;
-  onSaveEditing?: () => void;
-  onCancelEditing?: () => void;
-  getRowId?: (row: any, index: number) => string;
-  grouping: string[];
-  editingRowId?: string | null;
-  hierarchical?:
-    | (HierarchicalConfig & {
-        state?: {
-          isExpanded: (rowId: string) => boolean;
-          hasChildren: (rowId: string) => boolean;
-          getChildrenCount: (rowId: string) => number;
-          toggleRow: (rowId: string) => void;
-        };
-      })
-    | undefined;
-  actions?: DataTableAction<DataRecord>[] | 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;
-  }>;
-  rbac?: {
-    pageId?: string;
-    pageName?: string;
-  };
-  permissions?: {
-    canRead: { can: boolean; isLoading: boolean };
-    canCreate: { can: boolean; isLoading: boolean };
-    canUpdate: { can: boolean; isLoading: boolean };
-    canDelete: { can: boolean; isLoading: boolean };
-    canExport: { can: boolean; isLoading: boolean };
-    canImport: { can: boolean; isLoading: boolean };
-  };
-}
-
-const RowComponent = ({
-    row,
-    style,
-    isEditing,
-    editingData,
-    onEditingDataChange,
-    onSaveEditing,
-    onCancelEditing,
-    getRowId,
-    grouping,
-    editingRowId,
-    hierarchical,
-    actions,
-    rbac,
-    permissions,
-  }: RowProps) => {
-    const rowRef = useRef<HTMLTableRowElement>(null);
-    const firstInputRef = useRef<HTMLInputElement>(null);
-    const logger = createLogger('RowComponent');
-
-    const rowId = getRowIdSafe(row.original, row.index, getRowId);
-
-    const hierarchicalRow = row.original as HierarchicalDataRow;
-    const isHierarchical = hierarchical?.enabled && hierarchicalRow?.isParent !== undefined;
-    const isParent = isHierarchical && hierarchicalRow.isParent;
-    const isChild = isHierarchical && !hierarchicalRow.isParent;
-
-    const visibleCells = row.getVisibleCells();
-    const isSelected = typeof row.getIsSelected === 'function' ? row.getIsSelected() : false;
-
-    useEffect(() => {
-      if (isEditing && firstInputRef.current) {
-        firstInputRef.current.focus();
-        firstInputRef.current.select();
-      }
-    }, [isEditing]);
-
-    useEffect(() => {
-      if (!isEditing) return;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        const target = event.target as HTMLElement;
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-          if (event.key === 'Enter' && !event.shiftKey && target.tagName === 'INPUT') {
-            event.preventDefault();
-            onSaveEditing?.();
-          } else if (event.key === 'Escape') {
-            event.preventDefault();
-            onCancelEditing?.();
-          }
-        }
-      };
-
-      const currentRow = rowRef.current;
-      if (currentRow) {
-        currentRow.addEventListener('keydown', handleKeyDown);
-        return () => {
-          currentRow.removeEventListener('keydown', handleKeyDown);
-        };
-      }
-    }, [isEditing, onSaveEditing, onCancelEditing]);
-
-    // CRITICAL: All hooks must be called before any early returns to avoid React hooks violations
-    // Move useMemo hooks here so they're always called, regardless of early returns below
-    const indentSize = hierarchical?.indentSize || 24;
-    const indentation = useMemo(() => {
-      return isChild && hierarchical?.state ? calculateIndentation(hierarchicalRow, [], indentSize) : 0;
-    }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
-
-    const rowClassName = useMemo(() => {
-      if (isHierarchical) {
-        const hierarchicalClass = isParent
-          ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
-          : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
-        return cn(getTableRowClasses({ isSelected, isVirtualized: false }), hierarchicalClass);
-      }
-      return getTableRowClasses({ isSelected, isVirtualized: false });
-    }, [isHierarchical, isParent, isSelected, hierarchical]);
-
-    if (row.getIsGrouped && row.getIsGrouped()) {
-      const groupValue = row.getValue(grouping[0]);
-      const subRowsCount = row.subRows?.length || 0;
-      const isExpanded = row.getIsExpanded();
-
-      const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
-
-      return (
-        <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-          {visibleCells.map((cell: any, cellIndex: number) => {
-            const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
-            const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
-
-            if (isGroupingColumn && cellIndex === 0) {
-              return (
-                <td
-                  key={cell.id}
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: 'px-3 py-2 flex items-center font-medium',
-                  })}
-                >
-                  <Button variant="ghost" size="sm" onClick={() => row.toggleExpanded()} className="p-0 h-auto mr-2">
-                    {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-                  </Button>
-                  <span className="text-sm">
-                    {String(groupValue)} ({subRowsCount} items)
-                  </span>
-                </td>
-              );
-            }
-
-            if (columnDef.aggregateFn && childRows.length > 0) {
-              try {
-                const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
-
-                let cellContent: React.ReactNode;
-                if (columnDef.aggregateCell) {
-                  cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
-                } else if (columnDef.cell) {
-                  const mockCell = {
-                    ...cell,
-                    getValue: () => aggregatedValue,
-                    renderValue: () => aggregatedValue,
-                  };
-                  cellContent = flexRender(columnDef.cell, {
-                    ...mockCell,
-                    row: row,
-                    column: cell.column,
-                    cell: mockCell,
-                    getValue: () => aggregatedValue,
-                    renderValue: () => aggregatedValue,
-                  });
-                } else {
-                  cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
-                }
-
-                return (
-                  <td
-                    key={cell.id}
-                    className={getTableCellClasses({
-                      isCompact: true,
-                      className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
-                    })}
-                  >
-                    {cellContent}
-                  </td>
-                );
-              } catch (error) {
-                logger.warn('Error in aggregation function:', error);
-                return (
-                  <td
-                    key={cell.id}
-                    className={getTableCellClasses({
-                      isCompact: true,
-                      className: 'px-3 py-2',
-                    })}
-                  />
-                );
-              }
-            }
-
-            return (
-              <td
-                key={cell.id}
-                className={getTableCellClasses({
-                  isCompact: true,
-                  className: 'px-3 py-2',
-                })}
-              />
-            );
-          })}
-        </tr>
-      );
-    }
-
-    if (isEditing && editingData && onEditingDataChange && onSaveEditing && onCancelEditing) {
-      return (
-        <EditableRow
-          row={row}
-          editingData={editingData}
-          onEditingDataChange={onEditingDataChange}
-          onSave={onSaveEditing}
-          onCancel={onCancelEditing}
-          actions={actions ?? []}
-          getRowId={getRowId}
-          isParent={isParent}
-          hierarchical={!!hierarchical}
-        />
-      );
-    }
-
-    return (
-      <tr
-        ref={rowRef}
-        key={row.id}
-        role="row"
-        style={{
-          ...style,
-          ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {}),
-        }}
-        className={rowClassName}
-        aria-selected={isSelected ? 'true' : 'false'}
-      >
-        {visibleCells.map((cell: any, cellIndex: number) => {
-          const isFirstCell = cellIndex === 0;
-          const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
-          const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
-          const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
-
-          return (
-            <td
-              key={cell.id}
-              className={getTableCellClasses({
-                isCompact: true,
-                className: `px-3 py-2 ${
-                  cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'
-                } ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`,
-              })}
-            >
-              {shouldShowExpansionButton && hasChildren && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => hierarchical?.state?.toggleRow(rowId)}
-                  className="size-6 p-0 flex-shrink-0"
-                  aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-                  title={isExpanded ? 'Collapse row' : 'Expand row'}
-                >
-                  {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-                </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>
-          );
-        })}
-      </tr>
-    );
-  };
-
-RowComponent.displayName = 'RowComponent';
-
-const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean => {
-  if (prevProps.row.id !== nextProps.row.id || prevProps.row.index !== nextProps.row.index) {
-    return false;
-  }
-
-  if (prevProps.isEditing !== nextProps.isEditing) {
-    return false;
-  }
-
-  if (prevProps.editingRowId !== nextProps.editingRowId) {
-    return false;
-  }
-
-  if (prevProps.style !== nextProps.style) {
-    if (!prevProps.style || !nextProps.style) {
-      return false;
-    }
-    const prevStyle = prevProps.style as Record<string, unknown>;
-    const nextStyle = nextProps.style as Record<string, unknown>;
-    const styleKeys = new Set([...Object.keys(prevStyle), ...Object.keys(nextStyle)]);
-    for (const key of styleKeys) {
-      if (prevStyle[key] !== nextStyle[key]) {
-        return false;
-      }
-    }
-  }
-
-  if (
-    prevProps.grouping.length !== nextProps.grouping.length ||
-    prevProps.grouping.some((id, i) => id !== nextProps.grouping[i])
-  ) {
-    return false;
-  }
-
-  if (prevProps.hierarchical?.enabled !== nextProps.hierarchical?.enabled) {
-    return false;
-  }
-
-  const prevSelected = typeof prevProps.row.getIsSelected === 'function' ? prevProps.row.getIsSelected() : false;
-  const nextSelected = typeof nextProps.row.getIsSelected === 'function' ? nextProps.row.getIsSelected() : false;
-  if (prevSelected !== nextSelected) {
-    return false;
-  }
-
-  // CRITICAL FIX: Check if editingData has changed
-  // This ensures EditableRow re-renders when editingData updates (e.g., when dropdown value changes)
-  // For React 19: Manual memoization is still beneficial for table rows to prevent unnecessary re-renders
-  // of hundreds/thousands of rows when only one row's editingData changes
-  if (prevProps.isEditing && nextProps.isEditing) {
-    // Simple reference equality check - if editingData object reference changed, it's different
-    // This works because setEditingRow creates a new object, so reference equality is sufficient
-    if (prevProps.editingData !== nextProps.editingData) {
-      return false;
-    }
-  }
-
-  return true;
-};
-
-/**
- * Memoized row component for performance optimization.
- * Prevents unnecessary re-renders when row props haven't changed.
- */
-export const MemoizedRow = React.memo(RowComponent, areRowPropsEqual);