@jmruthers/pace-core 0.6.4 → 0.6.6

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;
+  }
 }
 
 // ============================================================================

package/src/components/DateTimeField/DateTimeField.tsx

@@ -10,7 +10,7 @@
  * Features:
  * - Automatic UTC ↔ timezone conversion
  * - Prevents unwanted conversions during user editing
- * - Shows timezone information when not UTC
+ * - Shows timezone information below the input field when not UTC
  * - Supports both ISO string and Date object values
  * - Uses native datetime-local input type
  * - Accessible form field with proper labels
@@ -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 => {
@@ -208,24 +210,22 @@ export function DateTimeField({
       <Label htmlFor={fieldId} required={required} helperText={helperText} error={error}>
         {label}
       </Label>
-      <div className="relative">
-        <Input
-          ref={inputRef}
-          id={fieldId}
-          type="datetime-local"
-          value={displayValue}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          required={required}
-          error={!!error}
-          className="w-full"
-        />
-        {timezoneDisplay && (
-          <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none">
-            {timezoneDisplay}
-          </span>
-        )}
-      </div>
+      <Input
+        ref={inputRef}
+        id={fieldId}
+        type="datetime-local"
+        value={displayValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        required={required}
+        error={!!error}
+        className="w-full"
+      />
+      {timezoneDisplay && !error && (
+        <p className="text-sm text-muted-foreground">
+          {timezoneDisplay}
+        </p>
+      )}
     </div>
   );
 }

package/src/components/DateTimeField/README.md

@@ -120,9 +120,12 @@ The component tracks editing state to prevent unwanted conversions while the use
 
 ### Timezone Display
 
+The timezone information is displayed below the input field as helper text to avoid overlapping with the calendar icon:
+
 - When `timezone` is `'UTC'`: No timezone indicator is shown
-- When `timezone` matches the user's browser timezone: Shows "Local"
-- When `timezone` is different: Shows the timezone name (e.g., "America/New_York")
+- When `timezone` matches the user's browser timezone: Shows "Local" below the input
+- When `timezone` is different: Shows the timezone name (e.g., "America/New_York") below the input
+- The timezone display is hidden when an error message is present (to avoid clutter)
 
 ## Accessibility