@jmruthers/pace-core 0.2.5 → 0.2.7

package/src/components/DataTable/components/VirtualizedDataTable.tsx

@@ -30,12 +30,7 @@ const MemoizedCell = memo(({ cell, style }: { cell: any; style?: React.CSSProper
         "px-4 py-2 text-sm border-b border-gray-200 overflow-hidden",
         cell.column?.getCanSort && cell.column.getCanSort() && "cursor-pointer select-none"
       )}
-      style={{
-        ...style,
-        width: cell.column?.getSize ? cell.column.getSize() : 150,
-        minWidth: cell.column?.columnDef?.minSize,
-        maxWidth: cell.column?.columnDef?.maxSize,
-      }}
+      style={style}
     >
       {flexRender(cell.column?.columnDef?.cell, cell.getContext?.() || {})}
     </td>
@@ -47,10 +42,9 @@ MemoizedCell.displayName = 'MemoizedCell';
 /**
  * Memoized row component for performance
  */
-const MemoizedRow = memo(({ row, style, columnSizes }: { 
+const MemoizedRow = memo(({ row, style }: { 
   row: any; 
   style: React.CSSProperties;
-  columnSizes: Record<string, number>;
 }) => {
   return (
     <tr
@@ -63,13 +57,10 @@ const MemoizedRow = memo(({ row, style, columnSizes }: {
       data-testid={`data-table-row-${row.id}`}
     >
       {row.getVisibleCells && row.getVisibleCells().map((cell: any) => (
-        <MemoizedCell 
+        <MemoizedCell
           key={cell.id} 
           cell={cell}
-          style={{ 
-            width: columnSizes[cell.column?.id] || (cell.column?.getSize ? cell.column.getSize() : 150),
-            minWidth: columnSizes[cell.column?.id] || (cell.column?.getSize ? cell.column.getSize() : 150),
-          }}
+          style={{}}
         />
       ))}
     </tr>
@@ -92,7 +83,6 @@ export function VirtualizedDataTable<TData extends DataRecord>({
   const headerRef = useRef<HTMLTableElement>(null);
   const bodyRef = useRef<HTMLTableElement>(null);
   const rows = table.getRowModel().rows;
-  const [columnSizes, setColumnSizes] = useState<Record<string, number>>({});
 
   // Virtual scrolling setup
   const virtualizer = useVirtualizer({
@@ -107,31 +97,6 @@ export function VirtualizedDataTable<TData extends DataRecord>({
   // Get table headers
   const headerGroups = table.getHeaderGroups();
 
-  // Calculate column sizes and sync between header and body
-  useLayoutEffect(() => {
-    if (headerRef.current && bodyRef.current) {
-      const headerCells = headerRef.current.querySelectorAll('th');
-      const newColumnSizes: Record<string, number> = {};
-      
-      headerGroups[0]?.headers.forEach((header, index) => {
-        const headerCell = headerCells[index];
-        if (headerCell) {
-          const computedWidth = headerCell.getBoundingClientRect().width;
-          const columnSize = header.column?.getSize ? header.column.getSize() : 150;
-          newColumnSizes[header.id] = Math.max(computedWidth, columnSize);
-        }
-      });
-      
-      // Only update if sizes have actually changed
-      const hasChanged = Object.keys(newColumnSizes).some(
-        key => newColumnSizes[key] !== columnSizes[key]
-      ) || Object.keys(columnSizes).length !== Object.keys(newColumnSizes).length;
-      
-      if (hasChanged) {
-        setColumnSizes(newColumnSizes);
-      }
-    }
-  }, [headerGroups, rows.length, columnSizes]);
 
   // Notify parent of visibility changes
   const handleVisibilityChange = useCallback(() => {
@@ -167,11 +132,7 @@ export function VirtualizedDataTable<TData extends DataRecord>({
                                               "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
                       header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
                       )}
-                      style={{
-                        width: header.getSize ? header.getSize() : 150,
-                        minWidth: header.column?.columnDef?.minSize,
-                        maxWidth: header.column?.columnDef?.maxSize,
-                      }}
+                      style={{}}
                       onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
                     >
                       <div className="flex items-center space-x-1">
@@ -221,10 +182,7 @@ export function VirtualizedDataTable<TData extends DataRecord>({
                       "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
                       header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
                     )}
-                    style={{
-                      width: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-                      minWidth: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-                    }}
+                    style={{}}
                     onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
                   >
                     <div className="flex items-center space-x-1">
@@ -271,7 +229,6 @@ export function VirtualizedDataTable<TData extends DataRecord>({
                   <MemoizedRow
                     key={row.id}
                     row={row}
-                    columnSizes={columnSizes}
                     style={{
                       position: 'absolute',
                       top: 0,
@@ -353,7 +310,6 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
   const headerRef = useRef<HTMLTableElement>(null);
   const bodyRef = useRef<HTMLTableElement>(null);
   const rows = table.getRowModel().rows;
-  const [columnSizes, setColumnSizes] = useState<Record<string, number>>({});
 
   // Show loading skeleton if loading
   const displayRows = useMemo(() => {
@@ -377,31 +333,6 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
   const headerGroups = table.getHeaderGroups();
   const totalSize = virtualizer.getTotalSize();
 
-  // Calculate column sizes and sync between header and body
-  useLayoutEffect(() => {
-    if (headerRef.current && bodyRef.current && !isLoading) {
-      const headerCells = headerRef.current.querySelectorAll('th');
-      const newColumnSizes: Record<string, number> = {};
-      
-      headerGroups[0]?.headers.forEach((header, index) => {
-        const headerCell = headerCells[index];
-        if (headerCell) {
-          const computedWidth = headerCell.getBoundingClientRect().width;
-          const columnSize = header.column?.getSize ? header.column.getSize() : 150;
-          newColumnSizes[header.id] = Math.max(computedWidth, columnSize);
-        }
-      });
-      
-      // Only update if sizes have actually changed
-      const hasChanged = Object.keys(newColumnSizes).some(
-        key => newColumnSizes[key] !== columnSizes[key]
-      ) || Object.keys(columnSizes).length !== Object.keys(newColumnSizes).length;
-      
-      if (hasChanged) {
-        setColumnSizes(newColumnSizes);
-      }
-    }
-  }, [headerGroups, displayRows.length, isLoading, columnSizes]);
 
   // Handle visibility changes
   React.useEffect(() => {
@@ -419,10 +350,7 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
         <td 
           key={header.id} 
           className="px-4 py-2 border-b border-app-sec-200"
-          style={{
-            width: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-            minWidth: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-          }}
+          style={{}}
         >
           <div className="h-4 bg-app-sec-200 rounded"></div>
         </td>
@@ -445,11 +373,7 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
                     <th
                       key={header.id}
                       className="px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider"
-                      style={{
-                        width: header.getSize ? header.getSize() : 150,
-                        minWidth: header.column?.columnDef?.minSize,
-                        maxWidth: header.column?.columnDef?.maxSize,
-                      }}
+                      style={{}}
                     >
                       {header.isPlaceholder
                         ? null
@@ -486,10 +410,7 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
                       "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
                       header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
                     )}
-                    style={{
-                      width: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-                      minWidth: columnSizes[header.id] || (header.getSize ? header.getSize() : 150),
-                    }}
+                    style={{}}
                     onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
                   >
                     <div className="flex items-center space-x-1">
@@ -552,7 +473,6 @@ export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
                   <MemoizedRow
                     key={row.id}
                     row={row}
-                    columnSizes={columnSizes}
                     style={{
                       position: 'absolute',
                       top: 0,

package/src/components/DataTable/components/__tests__/DataTable.accessibility.test.tsx

@@ -29,7 +29,8 @@ vi.mock('../../DataTable', () => ({
     actions = [],
     toolbarButtons = [],
     isLoading = false,
-    variant = 'default'
+    variant = 'default',
+    sortable = false
   }: any) => {
     if (isLoading) {
       return (
@@ -107,7 +108,16 @@ vi.mock('../../DataTable', () => ({
                   scope="col"
                   aria-sort="none"
                 >
-                  {col.label || col.header}
+                  {sortable && col.sortable ? (
+                    <button
+                      aria-label={`Sort by ${col.label || col.header}`}
+                      tabIndex={0}
+                    >
+                      {col.label || col.header}
+                    </button>
+                  ) : (
+                    col.label || col.header
+                  )}
                 </th>
               ))}
               {(enableEditing || enableDeletion || actions.length > 0) && (
@@ -212,9 +222,9 @@ const createTestData = (count: number) => {
 };
 
 const createTestColumns = () => [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-  { key: 'role', label: 'Role' }
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'role', label: 'Role', sortable: false }
 ];
 
 const createTestActions = () => [];
@@ -520,4 +530,100 @@ describe('DataTable Accessibility Tests', () => {
       expect(table).toBeInTheDocument();
     });
   });
+
+  // ============================================================================
+  // SORTING ACCESSIBILITY TESTS
+  // ============================================================================
+  
+  describe('Sorting Accessibility', () => {
+    it('provides proper ARIA labels for sortable columns', () => {
+      const sortableColumns = [
+        { accessorKey: 'name', header: 'Name', sortable: true },
+        { accessorKey: 'email', header: 'Email', sortable: true }
+      ];
+      
+      renderWithProviders(
+        <DataTable 
+          columns={sortableColumns} 
+          data={createTestData(2)}
+          sortable={true}
+        />
+      );
+      
+      // Check for proper ARIA labels on sort buttons
+      const nameSortButton = screen.getByRole('button', { name: /sort by name/i });
+      const emailSortButton = screen.getByRole('button', { name: /sort by email/i });
+      
+      expect(nameSortButton).toHaveAttribute('aria-label', 'Sort by Name');
+      expect(emailSortButton).toHaveAttribute('aria-label', 'Sort by Email');
+    });
+
+    it('maintains keyboard navigation for sorting', () => {
+      const sortableColumns = [
+        { accessorKey: 'name', header: 'Name', sortable: true }
+      ];
+      
+      renderWithProviders(
+        <DataTable 
+          columns={sortableColumns} 
+          data={createTestData(2)}
+          sortable={true}
+        />
+      );
+      
+      const sortButton = screen.getByRole('button', { name: /sort by name/i });
+      
+      // Sort button should be keyboard accessible
+      expect(sortButton).toHaveAttribute('tabIndex', '0');
+      expect(sortButton).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('provides proper ARIA sort attributes', () => {
+      const sortableColumns = [
+        { accessorKey: 'name', header: 'Name', sortable: true }
+      ];
+      
+      renderWithProviders(
+        <DataTable 
+          columns={sortableColumns} 
+          data={createTestData(2)}
+          sortable={true}
+        />
+      );
+      
+      // Table headers should have proper ARIA sort attributes
+      const table = screen.getByRole('table');
+      const headers = table.querySelectorAll('th');
+      
+      // At least one header should have aria-sort attribute
+      const hasAriaSort = Array.from(headers).some(header => 
+        header.hasAttribute('aria-sort')
+      );
+      expect(hasAriaSort).toBe(true);
+    });
+
+    it('distinguishes between sortable and non-sortable columns', () => {
+      const mixedColumns = [
+        { accessorKey: 'name', header: 'Name', sortable: true },
+        { accessorKey: 'role', header: 'Role', sortable: false }
+      ];
+      
+      renderWithProviders(
+        <DataTable 
+          columns={mixedColumns} 
+          data={createTestData(2)}
+          sortable={true}
+        />
+      );
+      
+      // Sortable column should have button
+      const nameHeader = screen.getByRole('button', { name: /sort by name/i });
+      expect(nameHeader).toBeInTheDocument();
+      
+      // Non-sortable column should not have button
+      const roleHeader = screen.getByText('Role');
+      expect(roleHeader).toBeInTheDocument();
+      expect(roleHeader.closest('button')).toBeNull();
+    });
+  });
 }); 

package/src/components/DataTable/components/__tests__/DataTable.integration.test.tsx

@@ -16,27 +16,104 @@ vi.mock('@tanstack/react-table', () => ({
     getPaginationRowModel: () => (rows: any[]) => rows,
     getGroupedRowModel: () => (rows: any[]) => rows,
     getExpandedRowModel: () => (rows: any[]) => rows,
-    getAllColumns: () => [],
-    getVisibleFlatColumns: () => [],
+    getAllColumns: () => [
+      {
+        id: 'name',
+        columnDef: { header: 'Name' },
+        getCanSort: () => true,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      },
+      {
+        id: 'email',
+        columnDef: { header: 'Email' },
+        getCanSort: () => true,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      },
+      {
+        id: 'role',
+        columnDef: { header: 'Role' },
+        getCanSort: () => false,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      }
+    ],
+    getVisibleFlatColumns: () => [
+      {
+        id: 'name',
+        columnDef: { header: 'Name' },
+        getCanSort: () => true,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      },
+      {
+        id: 'email',
+        columnDef: { header: 'Email' },
+        getCanSort: () => true,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      },
+      {
+        id: 'role',
+        columnDef: { header: 'Role' },
+        getCanSort: () => false,
+        getIsSorted: () => false,
+        getToggleSortingHandler: () => () => {},
+        getIsVisible: () => true,
+        getCanFilter: () => true
+      }
+    ],
     getHeaderGroups: () => [{
       id: 'headerGroup',
       headers: [
         {
           id: 'name',
           isPlaceholder: false,
-          column: { columnDef: { header: 'Name' } },
+          column: { 
+            columnDef: { header: 'Name' },
+            getCanSort: () => true,
+            getIsSorted: () => false,
+            getToggleSortingHandler: () => () => {},
+            getIsVisible: () => true,
+            getCanFilter: () => true
+          },
           getContext: () => ({}),
         },
         {
           id: 'email', 
           isPlaceholder: false,
-          column: { columnDef: { header: 'Email' } },
+          column: { 
+            columnDef: { header: 'Email' },
+            getCanSort: () => true,
+            getIsSorted: () => false,
+            getToggleSortingHandler: () => () => {},
+            getIsVisible: () => true,
+            getCanFilter: () => true
+          },
           getContext: () => ({}),
         },
         {
           id: 'role',
           isPlaceholder: false,
-          column: { columnDef: { header: 'Role' } },
+          column: { 
+            columnDef: { header: 'Role' },
+            getCanSort: () => false,
+            getIsSorted: () => false,
+            getToggleSortingHandler: () => () => {},
+            getIsVisible: () => true,
+            getCanFilter: () => true
+          },
           getContext: () => ({}),
         },
       ],
@@ -155,14 +232,6 @@ vi.mock('../../core/DataTableContext', () => ({
 }));
 
 // Mock individual components
-vi.mock('../DataTableHeader', () => ({
-  DataTableHeader: ({ title, description }: any) => (
-    <div data-testid="data-table-header">
-      {title && <h2 data-testid="table-title">{title}</h2>}
-      {description && <p data-testid="table-description">{description}</p>}
-    </div>
-  ),
-}));
 
 vi.mock('../DataTableToolbar', () => ({
   DataTableToolbar: () => <div data-testid="data-table-toolbar">Toolbar</div>,

package/src/components/DataTable/components/__tests__/DataTable.performance.test.tsx

@@ -102,7 +102,6 @@ vi.mock('../../core/DataTableContext', () => ({
 }));
 
 // Mock components
-vi.mock('../DataTableHeader', () => ({ DataTableHeader: () => <div data-testid="header">Header</div> }));
 vi.mock('../DataTableToolbar', () => ({ DataTableToolbar: () => <div data-testid="toolbar">Toolbar</div> }));
 vi.mock('../DataTableBody', () => ({ DataTableBody: () => <div data-testid="body">Body</div> }));
 vi.mock('../DataTableModals', () => ({ DataTableModals: () => <div data-testid="modals">Modals</div> }));

package/src/components/DataTable/components/__tests__/DataTable.real.test.tsx

@@ -102,7 +102,6 @@ vi.mock('../../core/DataTableContext', () => ({
 }));
 
 // Mock components
-vi.mock('../DataTableHeader', () => ({ DataTableHeader: () => <div data-testid="header">Header</div> }));
 vi.mock('../DataTableToolbar', () => ({ DataTableToolbar: () => <div data-testid="toolbar">Toolbar</div> }));
 vi.mock('../DataTableBody', () => ({ 
   DataTableBody: ({ table }: any) => {
@@ -173,7 +172,8 @@ describe('DataTable Real Component Tests', () => {
         features={createDefaultFeatures()}
       />
     );
-    expect(screen.getByTestId('header')).toBeInTheDocument();
+    expect(screen.getByText('Test Table')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
   });
 
   it('renders with search enabled', () => {

package/src/components/DataTable/components/__tests__/DataTable.security.test.tsx

@@ -102,7 +102,6 @@ vi.mock('../../core/DataTableContext', () => ({
 }));
 
 // Mock components
-vi.mock('../DataTableHeader', () => ({ DataTableHeader: () => <div data-testid="header">Header</div> }));
 vi.mock('../DataTableToolbar', () => ({ DataTableToolbar: () => <div data-testid="toolbar">Toolbar</div> }));
 vi.mock('../DataTableBody', () => ({ DataTableBody: () => <div data-testid="body">Body</div> }));
 vi.mock('../DataTableModals', () => ({ DataTableModals: () => <div data-testid="modals">Modals</div> }));

package/src/components/DataTable/components/__tests__/DataTable.unit.test.tsx

@@ -102,7 +102,6 @@ vi.mock('../../core/DataTableContext', () => ({
 }));
 
 // Mock components
-vi.mock('../DataTableHeader', () => ({ DataTableHeader: () => <div data-testid="header">Header</div> }));
 vi.mock('../DataTableToolbar', () => ({ DataTableToolbar: () => <div data-testid="toolbar">Toolbar</div> }));
 vi.mock('../DataTableBody', () => ({ 
   DataTableBody: ({ table }: any) => {
@@ -173,7 +172,8 @@ describe('DataTable Component', () => {
         features={createDefaultFeatures()}
       />
     );
-    expect(screen.getByTestId('header')).toBeInTheDocument();
+    expect(screen.getByText('Test Table')).toBeInTheDocument();
+    expect(screen.getByText('This is a test table')).toBeInTheDocument();
   });
 
   it('renders with search enabled', () => {

package/src/components/DataTable/components/__tests__/FilteringToggle.unit.test.tsx

@@ -43,16 +43,19 @@ const columns = [
     accessorKey: 'name',
     header: 'Name',
     enableColumnFilter: true,
+    enableSorting: true,
   },
   {
     accessorKey: 'age',
     header: 'Age',
     enableColumnFilter: true,
+    enableSorting: true,
   },
   {
     accessorKey: 'status',
     header: 'Status',
     enableColumnFilter: true,
+    enableSorting: true,
   },
 ];
 

package/src/components/DataTable/components/index.ts

@@ -11,7 +11,6 @@ export { GroupHeader } from './GroupHeader';
 export { GroupingDropdown } from './GroupingDropdown';
 export { DataTableErrorBoundary } from './DataTableErrorBoundary';
 export { EditableRow } from './EditableRow';
-export { DataTableHeader } from './DataTableHeader';
 export { PaginationControls } from './PaginationControls';
 export { LoadingState } from './LoadingState';
 export { EmptyState } from './EmptyState';

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

@@ -11,7 +11,6 @@ import { ChevronDown, ChevronUp, ChevronsUpDown, Filter, MoreHorizontal, Plus, S
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Checkbox } from '../../Checkbox/Checkbox';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../Table/Table';
 // DropdownMenu components have been merged into Select components
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../../Dialog/Dialog';
 import type { DataTableContext as IDataTableContext, DataTableConfig, DataTableUtils } from './interfaces';

package/src/components/DataTable/index.ts

@@ -66,5 +66,3 @@ export * from './components';
 // Utility functions
 export * from './utils';
 
-// Column sizing utilities
-export { calculateColumnWidths, getColumnSizingConfig } from './utils/columnSizing';

package/src/components/DataTable/types.ts

@@ -389,8 +389,6 @@ export interface DataTableFeatureConfig {
   // Virtualization is now handled automatically based on data size
   
   // Layout
-  /** Enable automatic column width adjustment based on content */
-  autoColumnSizing?: boolean;
 }
 
 

package/src/components/Input/Input.tsx

@@ -119,8 +119,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           // Size styles
           {
             'h-8 px-2 py-1 text-xs': size === 'sm',
-            'h-10 px-3 py-2 text-sm': size === 'md',
-            'h-12 px-4 py-3 text-base': size === 'lg',
+            'h-9 px-3 py-2 text-sm': size === 'md',
+            'h-10 px-4 py-3 text-base': size === 'lg',
           },
           
           className

package/src/components/Input/__tests__/Input.unit.test.tsx

@@ -91,19 +91,19 @@ describe('Input Component', () => {
     it('applies medium size styling (default)', () => {
       renderWithProviders(<Input size="md" />);
       const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-10', 'px-3', 'py-2', 'text-sm');
+      expect(input).toHaveClass('h-9', 'px-3', 'py-2', 'text-sm');
     });
 
     it('applies large size styling', () => {
       renderWithProviders(<Input size="lg" />);
       const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-12', 'px-4', 'py-3', 'text-base');
+      expect(input).toHaveClass('h-10', 'px-4', 'py-3', 'text-base');
     });
 
     it('defaults to medium size when no size is specified', () => {
       renderWithProviders(<Input />);
       const input = screen.getByRole('textbox');
-      expect(input).toHaveClass('h-10', 'px-3', 'py-2', 'text-sm');
+      expect(input).toHaveClass('h-9', 'px-3', 'py-2', 'text-sm');
     });
   });
 
@@ -113,7 +113,7 @@ describe('Input Component', () => {
       const input = screen.getByRole('textbox');
       expect(input).toHaveClass(
         'flex',
-        'h-10',
+        'h-9',
         'w-full',
         'rounded-md',
         'border',

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.integration.test.tsx

@@ -100,7 +100,7 @@ vi.mock('../../../rbac/api', () => ({
   getPermissionMap: vi.fn().mockResolvedValue({}),
   getAccessLevel: vi.fn().mockResolvedValue('viewer'),
   isSuperAdmin: vi.fn().mockResolvedValue(false),
-  setupRBAC: vi.fn()
+  setupRBAC: vi.fn().mockResolvedValue(undefined)
 }));
 
 // Mock child components with more realistic behavior
@@ -224,10 +224,14 @@ describe('PaceAppLayout Integration', () => {
     mockUpdatePassword.mockResolvedValue({ error: null });
     
     // Get the mocked functions
-    const { isPermitted, isSuperAdmin } = await import('../../../rbac/api');
+    const { isPermitted, isSuperAdmin, setupRBAC } = await import('../../../rbac/api');
     mockIsPermitted = vi.mocked(isPermitted);
     const mockIsSuperAdmin = vi.mocked(isSuperAdmin);
     
+    // Setup RBAC system
+    vi.mocked(setupRBAC).mockResolvedValue(undefined);
+    await setupRBAC({} as any); // Call setupRBAC to initialize the system
+    
     // Set up isSuperAdmin mock
     mockIsSuperAdmin.mockResolvedValue(false);