@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/{components/__tests__ → ui/table}/EditableRow.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file Editable Row Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for EditableRow component following testing guidelines.
@@ -13,7 +13,7 @@ import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { useReactTable, getCoreRowModel, type ColumnDef } from '@tanstack/react-table';
-import { EditableRow } from '../EditableRow';
+import { EditableRow } from './EditableRow';
 import type { DataRecord } from '../../types';
 
 // Mock Button component
@@ -44,31 +44,40 @@ vi.mock('../../Input/Input', () => ({
   )),
 }));
 
-// Mock Select components
-vi.mock('../../Select/Select', () => ({
-  Select: ({ children, value, onValueChange, onOpenChange }: any) => (
-    <div data-testid="select" data-value={value}>
-      {children}
-      <button onClick={() => onOpenChange(true)} data-testid="select-open">Open</button>
-      <button onClick={() => onValueChange('option1')} data-testid="select-change">Change</button>
-    </div>
-  ),
-  SelectTrigger: ({ children, className }: any) => (
-    <div data-testid="select-trigger" className={className}>{children}</div>
-  ),
-  SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
-  SelectContent: ({ children, searchable, searchPlaceholder }: any) => (
-    <div data-testid="select-content" data-searchable={searchable} data-placeholder={searchPlaceholder}>
-      {children}
-    </div>
-  ),
-  SelectItem: ({ children, value }: any) => (
-    <div data-testid="select-item" data-value={value}>{children}</div>
-  ),
-  SelectGroup: ({ children }: any) => <div data-testid="select-group">{children}</div>,
-  SelectLabel: ({ children }: any) => <div data-testid="select-label">{children}</div>,
-  SelectSeparator: () => <div data-testid="select-separator" />,
-}));
+// Mock Select components - pass value via context so SelectTrigger can show data-value
+vi.mock('../../Select/Select', async () => {
+  const React = await import('react');
+  const Ctx = React.createContext<string>('');
+  return {
+    Select: ({ children, value, onValueChange, onOpenChange }: any) => (
+      <Ctx.Provider value={value ?? ''}>
+        <div data-testid="select" data-value={value}>
+          {children}
+          <button onClick={() => onOpenChange?.(true)} data-testid="select-open">Open</button>
+          <button onClick={() => onValueChange?.('option1')} data-testid="select-change">Change</button>
+        </div>
+      </Ctx.Provider>
+    ),
+    SelectTrigger: ({ children, className }: any) => {
+      const value = React.useContext(Ctx);
+      return (
+        <div data-testid="select-trigger" data-value={value} className={className}>{children}</div>
+      );
+    },
+    SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
+    SelectContent: ({ children, searchable, searchPlaceholder }: any) => (
+      <div data-testid="select-content" data-searchable={searchable} data-placeholder={searchPlaceholder}>
+        {children}
+      </div>
+    ),
+    SelectItem: ({ children, value }: any) => (
+      <div data-testid="select-item" data-value={value}>{children}</div>
+    ),
+    SelectGroup: ({ children }: any) => <div data-testid="select-group">{children}</div>,
+    SelectLabel: ({ children }: any) => <div data-testid="select-label">{children}</div>,
+    SelectSeparator: () => <div data-testid="select-separator" />,
+  };
+});
 
 // Mock lucide-react icons - need to include ChevronDown for Select
 vi.mock('lucide-react', async () => {

package/src/components/DataTable/{components → ui/table}/EditableRow.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { flexRender, type Row, type Column } from '@tanstack/react-table';
 import { X, Check } from 'lucide-react';
 
-import { Button } from '../../Button/Button';
-import { Input } from '../../Input/Input';
+import { Button } from '../../../Button/Button';
+import { Input } from '../../../Input/Input';
+import { Checkbox } from '../../../Checkbox/Checkbox';
 import {
   Select,
   SelectContent,
@@ -13,9 +14,10 @@ import {
   SelectGroup,
   SelectLabel,
   SelectSeparator,
-} from '../../Select/Select';
-import { createLogger } from '../../../utils/core/logger';
-import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
+} from '../../../Select/Select';
+import { createLogger } from '../../../../utils/core/logger';
+import { optionMatchesSearch } from '../../utils/selectFieldUtils';
+import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../../types';
 
 interface EditableRowProps<TData extends DataRecord> {
   row: Row<TData>;
@@ -29,52 +31,28 @@ interface EditableRowProps<TData extends DataRecord> {
   hierarchical?: boolean;
 }
 
-// Component for select fields with searchable and creatable support
-function SelectEditField<TData extends DataRecord>({
-  columnDef,
-  accessorKey: _accessorKey,
-  currentValue,
-  placeholder,
-  onChange,
-  className,
-}: {
+/** Syncs search input DOM value with search term and show-create state. No return value. */
+function useSelectSearchInput<TData extends DataRecord>(params: {
+  isOpen: boolean;
+  isSearchable: boolean;
+  isCreatable: boolean;
   columnDef: EditableColumnDef<TData>;
-  accessorKey: string;
-  currentValue: CellValue;
-  placeholder?: string;
-  onChange: (value: CellValue) => void;
-  className?: string;
-}) {
-  const logger = createLogger('SelectEditField');
-  // Determine if searchable - explicitly check for true to ensure visible search input appears
-  // When selectSearchable is true or undefined, show the visible search input box
-  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
-  const isSearchable = columnDef.selectSearchable !== false;
-  const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFieldSetElement>(null);
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [showCreateOption, setShowCreateOption] = React.useState(false);
+  selectRef: React.RefObject<HTMLFieldSetElement | null>;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+  setShowCreateOption: React.Dispatch<React.SetStateAction<boolean>>;
+}): void {
+  const { isOpen, isSearchable, isCreatable, columnDef, selectRef, setSearchTerm, setShowCreateOption } = params;
 
-  // Monitor search input value via DOM events to detect when user types
   React.useEffect(() => {
     if (!isOpen || !isSearchable || !isCreatable) return;
-    
-    // Function to find and attach listener to search input
+
     const findAndAttachSearchInput = (): (() => void) | null => {
-      // Try to find search input - check both within selectRef and document
-      // SelectContent might be rendered outside the form element
       let searchInput: HTMLInputElement | null = null;
-      
       if (selectRef.current) {
         searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
       }
-      
-      // If not found in selectRef, try document (in case SelectContent is in a portal)
       if (!searchInput) {
-        // Find the most recently opened select's search input
         const allSearchInputs = document.querySelectorAll<HTMLInputElement>('[data-testid="select-search-input"]');
-        // Get the one that's visible (not hidden)
         for (const input of Array.from(allSearchInputs)) {
           const content = input.closest('[data-testid="select-content"]');
           if (content && content.getAttribute('aria-hidden') !== 'true') {
@@ -83,71 +61,27 @@ function SelectEditField<TData extends DataRecord>({
           }
         }
       }
-      
       if (!searchInput) return null;
 
       const handleInput = (e: Event) => {
         const target = e.target as HTMLInputElement;
         const currentSearch = target.value;
         setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
         if (currentSearch.trim()) {
           const searchLower = currentSearch.toLowerCase().trim();
-          
-          // Helper to check if an option matches
-          // Use explicit union type instead of typeof to avoid Babel parsing issues
-          type FieldOption = 
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-          
-          const checkMatch = (opt: FieldOption): boolean => {
-            // Simple option
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            // Group - check items within the group
-            if ('type' in opt && opt.type === 'group') {
-              return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
-            }
-            // Separator - doesn't match
-            return false;
-          };
-          
-          const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
+          const hasMatch = (columnDef.fieldOptions || []).some((opt) => optionMatchesSearch(opt, searchLower));
           setShowCreateOption(!hasMatch);
         } else {
           setShowCreateOption(false);
         }
       };
 
-      // Check initial value in case user has already typed
       const initialValue = searchInput.value;
       if (initialValue) {
-        const currentSearch = initialValue;
-        setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
-        if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-          
-          type FieldOption = 
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-          
-          const checkMatch = (opt: FieldOption): boolean => {
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            if ('type' in opt && opt.type === 'group') {
-              return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
-            }
-            return false;
-          };
-          
-          const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
+        setSearchTerm(initialValue);
+        if (initialValue.trim()) {
+          const searchLower = initialValue.toLowerCase().trim();
+          const hasMatch = (columnDef.fieldOptions || []).some((opt) => optionMatchesSearch(opt, searchLower));
           setShowCreateOption(!hasMatch);
         } else {
           setShowCreateOption(false);
@@ -155,30 +89,57 @@ function SelectEditField<TData extends DataRecord>({
       }
 
       searchInput.addEventListener('input', handleInput);
-      
-      return () => {
-        searchInput?.removeEventListener('input', handleInput);
-      };
+      return () => searchInput?.removeEventListener('input', handleInput);
     };
 
-    // Try to find immediately
-    const cleanup: (() => void) | null = findAndAttachSearchInput();
-    
-    // If not found, try again after a short delay (SelectContent might render asynchronously)
+    const cleanup = findAndAttachSearchInput();
     if (!cleanup) {
       let timeoutCleanup: (() => void) | null = null;
       const timeoutId = setTimeout(() => {
         timeoutCleanup = findAndAttachSearchInput();
       }, 50);
-      
       return () => {
         clearTimeout(timeoutId);
         timeoutCleanup?.();
       };
     }
-    
     return cleanup;
-  }, [isOpen, isSearchable, isCreatable, columnDef]);
+  }, [isOpen, isSearchable, isCreatable, columnDef, selectRef, setSearchTerm, setShowCreateOption]);
+}
+
+// Component for select fields with searchable and creatable support
+function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey: _accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+  className,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+  className?: string;
+}) {
+  const logger = createLogger('SelectEditField');
+  const isSearchable = columnDef.selectSearchable !== false;
+  const isCreatable = columnDef.creatable === true;
+  const selectRef = React.useRef<HTMLFieldSetElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showCreateOption, setShowCreateOption] = React.useState(false);
+
+  useSelectSearchInput({
+    isOpen,
+    isSearchable,
+    isCreatable,
+    columnDef,
+    selectRef,
+    setSearchTerm,
+    setShowCreateOption,
+  });
 
   const handleCreateNew = React.useCallback(async () => {
     if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
@@ -258,7 +219,7 @@ function SelectEditField<TData extends DataRecord>({
           <SelectItem 
             key="__create_new__" 
             value={`__create_new__${searchTerm}`}
-            className="bg-main-100 font-medium border-t border-main-200"
+            className="bg-main-100 border-t border-main-200"
           >
             Create "{searchTerm}"
           </SelectItem>
@@ -279,7 +240,7 @@ const renderEditField = <TData extends DataRecord>(
   const columnDef = column.columnDef as EditableColumnDef<TData>;
 
   if (columnDef.editable === false) {
-    return <span className="text-sm text-sec-600">{String(value ?? '')}</span>;
+    return <span>{String(value ?? '')}</span>;
   }
 
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
@@ -325,6 +286,27 @@ const renderEditField = <TData extends DataRecord>(
     );
   }
 
+  if (columnDef.fieldType === 'checkbox') {
+    const accessorKey = columnDef.editAccessorKey || column.id;
+    // Convert value to boolean - handle string "true"/"false", boolean, null, undefined
+    const rawValue = editingData[accessorKey] !== undefined && editingData[accessorKey] !== null
+      ? editingData[accessorKey]
+      : (value !== undefined && value !== null ? value : false);
+    const checked = rawValue === true || rawValue === 'true' || rawValue === 1 || rawValue === '1';
+
+    return (
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(checkedValue) => {
+          // onCheckedChange can return boolean | 'indeterminate', convert to boolean
+          const booleanValue = checkedValue === true;
+          onChange({ [accessorKey]: booleanValue });
+        }}
+        aria-label={columnDef.header ? `Toggle ${columnDef.header}` : `Toggle ${column.id}`}
+      />
+    );
+  }
+
   return (
     <Input
       ref={inputRef}
@@ -379,7 +361,7 @@ export function EditableRow<TData extends DataRecord>({
         const isSystemColumn = cell.column.id === 'select' || cell.column.id === 'actions';
         
         return (
-          <td key={cell.id} role="cell" className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
+          <td key={cell.id} role="cell" className={`${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''} ${isSystemColumn ? 'print:hidden' : ''}`}>
             {isSystemColumn ? (
                 // System columns: render their normal cell content (checkbox for select, buttons for actions)
                 cell.column.id === 'actions' ? (
@@ -421,7 +403,7 @@ export function EditableRow<TData extends DataRecord>({
                         }
                       })
                     ) : (
-                      <span className="text-sm text-sec-600">{String(cell.getValue() ?? '')}</span>
+                      <span>{String(cell.getValue() ?? '')}</span>
                     );
                   }
                   

package/src/components/DataTable/{components/__tests__ → ui/table}/EmptyState.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file EmptyState Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for EmptyState component following testing guidelines.
@@ -12,22 +12,16 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { EmptyState } from '../EmptyState';
+import { EmptyState } from './EmptyState';
 
 // Mock lucide-react icons
 vi.mock('lucide-react', () => ({
-  Database: ({ className }: { className?: string }) => (
-    <div data-testid="lucide-database" className={className}>Database</div>
-  ),
   Search: ({ className }: { className?: string }) => (
     <div data-testid="lucide-search" className={className}>Search</div>
   ),
   Plus: ({ className }: { className?: string }) => (
     <div data-testid="lucide-plus" className={className}>Plus</div>
   ),
-  User: ({ className }: { className?: string }) => (
-    <div data-testid="lucide-user" className={className}>User</div>
-  ),
 }));
 
 // Mock Button component
@@ -54,7 +48,6 @@ describe('[component] EmptyState', () => {
 
       expect(screen.getByText('No data available')).toBeInTheDocument();
       expect(screen.getByText('Get started by adding your first entry')).toBeInTheDocument();
-      expect(screen.getByTestId('lucide-database')).toBeInTheDocument();
     });
 
     it('renders with custom title', () => {
@@ -70,23 +63,6 @@ describe('[component] EmptyState', () => {
       expect(screen.getByText('Custom description')).toBeInTheDocument();
       expect(screen.queryByText('Get started by adding your first entry')).not.toBeInTheDocument();
     });
-
-    it('renders with custom icon component', () => {
-      const CustomIcon = ({ className }: { className?: string }) => (
-        <div data-testid="custom-icon" className={className}>Custom</div>
-      );
-
-      render(<EmptyState icon={CustomIcon} />);
-
-      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-      expect(screen.queryByTestId('lucide-database')).not.toBeInTheDocument();
-    });
-
-    it('uses default Database icon when no icon provided', () => {
-      render(<EmptyState />);
-
-      expect(screen.getByTestId('lucide-database')).toBeInTheDocument();
-    });
   });
 
   describe('Filtered State', () => {
@@ -294,15 +270,6 @@ describe('[component] EmptyState', () => {
       expect(container).toHaveAttribute('aria-live', 'polite');
     });
 
-    it('marks icon as decorative with aria-hidden', () => {
-      render(<EmptyState />);
-
-      const icon = screen.getByTestId('lucide-database');
-      // Icon is wrapped in a component that may not have aria-hidden directly
-      // Check that it exists and is accessible
-      expect(icon).toBeInTheDocument();
-    });
-
     it('uses semantic heading for title', () => {
       render(<EmptyState title="Custom Title" />);
 
@@ -328,33 +295,6 @@ describe('[component] EmptyState', () => {
     });
   });
 
-  describe('Icon Detection', () => {
-    it('identifies default Database icon correctly', () => {
-      render(<EmptyState />);
-
-      const icon = screen.getByTestId('lucide-database');
-      expect(icon).toBeInTheDocument();
-    });
-
-    it('identifies User icon correctly when provided', () => {
-      const UserIcon = () => <div data-testid="lucide-user">User</div>;
-      
-      render(<EmptyState icon={UserIcon} />);
-
-      const icon = screen.getByTestId('lucide-user');
-      expect(icon).toBeInTheDocument();
-    });
-
-    it('handles custom icons gracefully', () => {
-      const CustomIcon = () => <div data-testid="custom-icon">Custom</div>;
-      
-      render(<EmptyState icon={CustomIcon} />);
-
-      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-      expect(screen.queryByTestId('lucide-database')).not.toBeInTheDocument();
-    });
-  });
-
   describe('Edge Cases', () => {
     it('handles empty title string', () => {
       render(<EmptyState title="" />);

package/src/components/DataTable/{components → ui/table}/EmptyState.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Database, Search, Plus, User } from 'lucide-react';
-import { Button } from '../../Button/Button';
-import { Alert, AlertTitle, AlertDescription } from '../../Alert/Alert';
+import { Search, Plus } from 'lucide-react';
+import { Button } from '../../../Button/Button';
+import { Alert, AlertTitle, AlertDescription } from '../../../Alert/Alert';
 
 /**
  * Props for the EmptyState component.
@@ -9,7 +9,7 @@ import { Alert, AlertTitle, AlertDescription } from '../../Alert/Alert';
 interface EmptyStateProps {
   title?: string;
   description?: string;
-  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  icon?: React.ComponentType<{ className?: string }>;
   action?: {
     label: string;
     onClick: () => void;
@@ -38,25 +38,17 @@ export function EmptyState({
     ? "Try adjusting your search or filter criteria"
     : "Get started by adding your first entry";
 
-  // Use default icon only if no icon is provided
-  const DisplayIcon = Icon || Database;
-
   return (
     <Alert 
       role="status"
       aria-live="polite"
       className="grid place-items-center text-center max-w-lg mx-auto"
     >
-      <DisplayIcon 
-        role="img" 
-        aria-hidden="true" 
-        className="size-12 text-muted-foreground mb-4"
-        data-testid={DisplayIcon === Database ? 'lucide-database' : DisplayIcon === User ? 'lucide-user' : 'custom-icon'}
-      />
-      <AlertTitle className="text-lg font-semibold mb-2">
+      {Icon && <Icon className="size-8 mx-auto" aria-hidden />}
+      <AlertTitle>
         {title || defaultTitle}
       </AlertTitle>
-      <AlertDescription className="text-sm text-muted-foreground mb-4 max-w-sm">
+      <AlertDescription>
         {description || defaultDescription}
       </AlertDescription>
       

package/src/components/DataTable/{components/__tests__ → ui/table}/FilterRow.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file Filter Row Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for FilterRow component following testing guidelines.
@@ -12,11 +12,12 @@ import React from 'react';
 import { render, screen, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { createColumnHelper, useReactTable, getCoreRowModel, getFilteredRowModel } from '@tanstack/react-table';
-import { FilterRow } from '../FilterRow';
+import { FilterRow } from './FilterRow';
 import type { DataRecord } from '../../types';
 
-// Mock ColumnFilter component
-vi.mock('../ColumnFilter', () => ({
+// Mock ColumnFilter so tests get predictable DOM (data-testid="column-filter").
+// Path must match FilterRow's import; use same-dir path so Vite resolves the same module.
+vi.mock('../shared/ColumnFilter', () => ({
   ColumnFilter: ({ column, filterType, options, placeholder }: any) => (
     <div
       data-testid="column-filter"

package/src/components/DataTable/{components → ui/table}/FilterRow.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ColumnFilter } from './ColumnFilter';
+import { ColumnFilter } from '../shared/ColumnFilter';
 import type { Column, Header, Table } from '@tanstack/react-table';
-import { getColumnHeaderText } from '../utils/columnUtils';
-import type { DataRecord, DataTableColumn } from '../types';
+import { getColumnHeaderText } from '../../utils/columnUtils';
+import type { DataRecord, DataTableColumn } from '../../types';
 
 /**
  * Props for the FilterRow component.

package/src/components/DataTable/{components/__tests__ → ui/table}/LoadingState.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file LoadingState Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for LoadingState component following testing guidelines.
@@ -11,7 +11,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
-import { LoadingState } from '../LoadingState';
+import { LoadingState } from './LoadingState';
 
 describe('[component] LoadingState', () => {
   describe('Rendering', () => {
@@ -63,18 +63,14 @@ describe('[component] LoadingState', () => {
 
   describe('Visual Presentation', () => {
     it('centers content visually', () => {
-      const { container } = render(<LoadingState />);
-      
-      // Component uses grid place-items-center for centering (changed from p to div for semantic HTML)
-      const containerElement = container.querySelector('div');
+      render(<LoadingState />);
+      const containerElement = screen.getByRole('region', { name: 'Loading' });
       expect(containerElement).toHaveClass('grid', 'place-items-center');
     });
 
     it('applies appropriate spacing', () => {
-      const { container } = render(<LoadingState />);
-      
-      // Component uses div for layout (changed from p for semantic HTML)
-      const containerElement = container.querySelector('div');
+      render(<LoadingState />);
+      const containerElement = screen.getByRole('region', { name: 'Loading' });
       expect(containerElement).toHaveClass('p-8');
     });
   });

package/src/components/DataTable/{components → ui/table}/LoadingState.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner';
+import { LoadingSpinner } from '../../../LoadingSpinner/LoadingSpinner';
 
 /**
  * Loading state component for DataTable.
@@ -9,9 +9,9 @@ import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner';
  */
 export function LoadingState() {
   return (
-    <div className="grid place-items-center text-center p-8">
+    <section aria-label="Loading" className="grid place-items-center text-center p-8">
         <LoadingSpinner />
-        <strong>Loading...</strong>     
-    </div>
+        <strong>Loading...</strong>
+    </section>
   );
 }