@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/hooks/useTableColumns.ts

@@ -101,9 +101,47 @@ export function useTableColumns<TData extends DataRecord>({
       header: ({ table }: HeaderContext<TData, unknown>) => {
         const isAllSelected = table.getIsAllPageRowsSelected();
         const isSomeSelected = table.getIsSomePageRowsSelected();
+        const pageRows = table.getRowModel().rows;
+        const selectedCount = Object.values(table.getState().rowSelection || {}).filter(Boolean).length;
+        
+        // Always log - remove NODE_ENV check for debugging
+        console.log('[DataTable Selection] Header checkbox state:', {
+          isAllSelected,
+          isSomeSelected,
+          pageRowCount: pageRows.length,
+          totalSelectedCount: selectedCount,
+          rowSelection: table.getState().rowSelection,
+          pageRowIds: pageRows.map(row => row.id),
+        });
+        
         return React.createElement(Checkbox, {
-          checked: isAllSelected ? true : isSomeSelected ? 'indeterminate' : false,
-          onCheckedChange: (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
+          checked: isAllSelected,
+          'aria-checked': isAllSelected ? 'true' : isSomeSelected ? 'mixed' : 'false',
+          onCheckedChange: (checked: boolean | 'indeterminate') => {
+            // Ensure we pass a boolean value
+            const shouldSelect = checked === true || checked === 'indeterminate';
+            
+            // Always log - remove NODE_ENV check for debugging
+            console.log('[DataTable Selection] Header checkbox clicked:', {
+              checked,
+              shouldSelect,
+              pageRowCount: pageRows.length,
+              pageRowIds: pageRows.map(row => row.id),
+              currentSelection: table.getState().rowSelection,
+            });
+            
+            table.toggleAllPageRowsSelected(shouldSelect);
+            
+            // Log after toggle to see what changed
+            setTimeout(() => {
+              console.log('[DataTable Selection] After toggleAllPageRowsSelected:', {
+                newSelection: table.getState().rowSelection,
+                isAllSelected: table.getIsAllPageRowsSelected(),
+                isSomeSelected: table.getIsSomePageRowsSelected(),
+                pageRowIds: table.getRowModel().rows.map(row => row.id),
+              });
+            }, 0);
+          },
           'aria-label': "Select all"
         });
       },

package/src/components/DataTable/hooks/useTableHandlers.ts

@@ -120,6 +120,17 @@ export function useTableHandlers<TData extends DataRecord>({
       ? (updaterOrValue as (prev: Record<string, boolean>) => Record<string, boolean>)(currentSelection)
       : updaterOrValue as Record<string, boolean>;
 
+    // Always log - remove NODE_ENV check for debugging
+    console.log('[DataTable Selection] handleRowSelectionChange called:', {
+      isControlled: selection !== undefined,
+      currentSelectionCount: Object.values(currentSelection).filter(Boolean).length,
+      nextSelectionCount: Object.values(nextSelection).filter(Boolean).length,
+      currentSelectionKeys: Object.keys(currentSelection).filter(key => currentSelection[key]),
+      nextSelectionKeys: Object.keys(nextSelection).filter(key => nextSelection[key]),
+      added: Object.keys(nextSelection).filter(key => nextSelection[key] && !currentSelection[key]),
+      removed: Object.keys(currentSelection).filter(key => currentSelection[key] && !nextSelection[key]),
+    });
+
     if (selection === undefined) {
       // Uncontrolled mode - update internal state
       actions.setRowSelection(nextSelection);

package/src/components/DataTable/types.ts

@@ -25,6 +25,11 @@ declare module '@tanstack/react-table' {
     /** Column type for styling purposes */
     type?: 'text' | 'number' | 'date' | 'boolean' | 'custom';
   }
+
+  interface ColumnDefBase<TData, TValue> {
+    /** Alternative accessor key used while editing */
+    editAccessorKey?: string;
+  }
 }
 
 // ============================================================================
@@ -81,8 +86,6 @@ export interface HierarchicalConfig {
   defaultExpanded?: boolean | string[];
   /** Callback when expanded state changes */
   onExpandedChange?: (expandedIds: string[]) => void;
-  /** Custom expand/collapse button component */
-  expandButton?: React.ComponentType<ExpandButtonProps>;
   /** Visual indentation for child rows (in pixels) */
   indentSize?: number;
   /** Custom styling for parent rows */
@@ -91,22 +94,6 @@ export interface HierarchicalConfig {
   childRowClassName?: string;
 }
 
-/**
- * Props for the expand/collapse button component
- */
-export interface ExpandButtonProps {
-  /** Row ID */
-  rowId: string;
-  /** Whether the row is currently expanded */
-  isExpanded: boolean;
-  /** Whether this row has children */
-  hasChildren: boolean;
-  /** Click handler */
-  onClick: () => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
 // ============================================================================
 // PERFORMANCE & PAGINATION TYPES
 // ============================================================================

package/src/components/DataTable/utils/a11yUtils.ts

@@ -224,6 +224,23 @@ export function getAriaSortValue(sortDirection: 'asc' | 'desc' | false): 'ascend
   return 'none';
 }
 
+/**
+ * Get ARIA sort state for a column header.
+ * Returns the appropriate aria-sort value or undefined if column is not sortable.
+ * 
+ * @param column - TanStack Table column instance
+ * @returns ARIA sort value ('ascending', 'descending', 'none') or undefined if not sortable
+ */
+export function getAriaSortState<TData>(column: { getCanSort?: () => boolean; getIsSorted?: () => 'asc' | 'desc' | false }): 'ascending' | 'descending' | 'none' | undefined {
+  const isSortable = column.getCanSort ? column.getCanSort() : false;
+  if (!isSortable) {
+    return undefined;
+  }
+  
+  const sortState = column.getIsSorted ? column.getIsSorted() : false;
+  return getAriaSortValue(sortState);
+}
+
 /**
  * Get accessible row description for screen readers
  * @param rowIndex - The row index (0-based)

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.test.tsx

@@ -306,7 +306,8 @@ describe('DatePickerWithTimezone Component', () => {
       expect(callArgs.captionLayout).toBe('dropdown');
       expect(callArgs.startMonth).toEqual(new Date(1900, 0));
       expect(callArgs.endMonth).toEqual(new Date(2100, 11));
-      expect(callArgs.className).toBe('p-0');
+      // Calendar component may add additional classes like 'col-span-full'
+      expect(callArgs.className).toContain('p-0');
     });
   });
 });

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.tsx

@@ -8,11 +8,12 @@
  * Provides a calendar interface with timezone context for date selection.
  *
  * Features:
- * - Calendar date selection
+ * - Calendar date selection with dropdown month/year navigation
  * - Timezone display (shows "Local" when matches user timezone)
  * - Optional "Done" button
  * - Accessible date selection
  * - Keyboard navigation support
+ * - Wide date range support (1900-2100) via dropdown selectors
  *
  * @example
  * ```tsx
@@ -93,8 +94,7 @@ export function DatePickerWithTimezone({
   const timezoneDisplay = displayTimezone === userTimezone ? 'Local' : displayTimezone;
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="p-3">
+  <form className={cn('grid grid-cols-[1fr_auto] gap-2', className)}>
         <Calendar
           mode="single"
           selected={selected}
@@ -103,24 +103,20 @@ export function DatePickerWithTimezone({
           captionLayout="dropdown"
           startMonth={new Date(1900, 0)}
           endMonth={new Date(2100, 11)}
-          className="p-0"
+          className="p-0 col-span-full"
         />
-      </div>
-
-      <div className="flex items-center justify-between border-t border-border px-3 py-2">
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Clock className="size-4" aria-hidden="true" />
-          <span>
+    
+      <label htmlFor="timezone">
+          <Clock className="size-4 inline-block mr-2" aria-hidden="true" />
             Timezone: <span aria-label={`Timezone ${timezoneDisplay}`}>{timezoneDisplay}</span>
-          </span>
-        </div>
+            </label>
         {onDone && (
-          <Button onClick={onDone} size="sm" className="h-8">
+          <Button onClick={onDone} size="sm" className="ml-auto h-8">
             Done
           </Button>
         )}
-      </div>
-    </div>
+      
+    </form>
   );
 }
 

package/src/components/DateTimeField/DateTimeField.tsx

@@ -115,9 +115,11 @@ export function DateTimeField({
   helperText,
   error
 }: DateTimeFieldProps) {
+  // Call all hooks unconditionally at the top level
   const [isEditing, setIsEditing] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const fieldId = id || `datetime-field-${React.useId()}`;
+  const generatedId = React.useId();
+  const fieldId = id || `datetime-field-${generatedId}`;
 
   // Convert UTC value to timezone for display
   const getDisplayValue = React.useCallback((): string => {
@@ -204,10 +206,9 @@ export function DateTimeField({
   const timezoneDisplay = getTimezoneDisplay();
 
   return (
-    <div className={cn('space-y-2', className)}>
-      <Label htmlFor={fieldId} required={required} helperText={helperText} error={error}>
-        {label}
-      </Label>
+
+    <Label className={cn('space-y-2', className)} htmlFor={fieldId} required={required} helperText={helperText} error={error}>
+      {label}
       <Input
         ref={inputRef}
         id={fieldId}
@@ -219,12 +220,12 @@ export function DateTimeField({
         error={!!error}
         className="w-full"
       />
-      {timezoneDisplay && !error && (
-        <p className="text-sm text-muted-foreground">
+      {timezoneDisplay && (
+        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none">
           {timezoneDisplay}
-        </p>
+        </span>
       )}
-    </div>
+    </Label>
   );
 }