chordia-ui 4.0.2 → 4.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/data/DataTable2.jsx

@@ -1602,6 +1602,10 @@ export default function DataTable2({
   const [columnDropdownPosition, setColumnDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
   const [pendingSelection, setPendingSelection] = useState(new Set());
   const [pendingDeselection, setPendingDeselection] = useState(new Set());
+  // Per-column timers that delay the reorder after a checkbox toggle, so the row
+  // is first shown checked/unchecked in place before it moves between the
+  // selected/unselected groups (avoids the confusing instant jump).
+  const columnToggleTimersRef = useRef({});
   // Snapshot of the columns visible on first mount; used as the Reset target
   const initialVisibleColumnsRef = useRef(null);
   if (initialVisibleColumnsRef.current === null) {
@@ -1920,23 +1924,85 @@ export default function DataTable2({
 
   // Toggle column selection — writes to staged state only. The actual table updates
   // when the user clicks Apply (or Reset).
+  // How long a toggled row stays put (showing its new checked state) before it
+  // animates up/down into the correct group.
+  const COLUMN_TOGGLE_MOVE_DELAY = 250;
+
+  const clearColumnToggleTimers = () => {
+    Object.values(columnToggleTimersRef.current).forEach((t) => clearTimeout(t));
+    columnToggleTimersRef.current = {};
+  };
+
+  // Effective staged list accounting for any in-flight (pending) toggles that
+  // haven't committed their reorder yet. Used when committing on Apply.
+  const resolveStagedColumns = () => {
+    const cols = stagedVisibleColumns.filter((id) => !pendingDeselection.has(id));
+    pendingSelection.forEach((id) => {
+      if (!cols.includes(id)) cols.push(id);
+    });
+    return enforceActionPosition(cols);
+  };
+
   const toggleColumnSelection = (columnId) => {
     // Prevent toggling the action column visibility; it should always be shown
     if (columnId === ACTION_COLUMN_ID) {
       return;
     }
-    setStagedVisibleColumns(prev => {
-      if (prev.includes(columnId)) {
-        // Don't allow deselecting all columns
-        if (prev.length === 1) return prev;
-        return prev.filter(id => id !== columnId);
-      }
-      if (prev.length >= MAX_COLUMNS) {
+
+    // A commit is already scheduled for this column → the user is toggling back
+    // before it moved. Cancel it and revert the pending visual state in place.
+    if (columnToggleTimersRef.current[columnId]) {
+      clearTimeout(columnToggleTimersRef.current[columnId]);
+      delete columnToggleTimersRef.current[columnId];
+      setPendingSelection((prev) => {
+        const next = new Set(prev);
+        next.delete(columnId);
+        return next;
+      });
+      setPendingDeselection((prev) => {
+        const next = new Set(prev);
+        next.delete(columnId);
+        return next;
+      });
+      return;
+    }
+
+    const isSelected = stagedVisibleColumns.includes(columnId);
+
+    if (isSelected) {
+      // Deselecting: keep the row in the selected group but render it unchecked
+      // (via pendingDeselection), then drop it after a short delay.
+      const effectiveVisible = stagedVisibleColumns.length - pendingDeselection.size;
+      if (effectiveVisible <= 1) return; // never hide the last visible column
+      setPendingDeselection((prev) => new Set(prev).add(columnId));
+      columnToggleTimersRef.current[columnId] = setTimeout(() => {
+        setStagedVisibleColumns((prev) => prev.filter((id) => id !== columnId));
+        setPendingDeselection((prev) => {
+          const next = new Set(prev);
+          next.delete(columnId);
+          return next;
+        });
+        delete columnToggleTimersRef.current[columnId];
+      }, COLUMN_TOGGLE_MOVE_DELAY);
+    } else {
+      // Selecting: show the row checked in place (via pendingSelection), then
+      // move it up into the selected group after a short delay.
+      const effectiveVisible = stagedVisibleColumns.length + pendingSelection.size;
+      if (effectiveVisible >= MAX_COLUMNS) {
         showMaxColumnsError("Maximum 9 column selection allowed");
-        return prev;
+        return;
       }
-      return enforceActionPosition([...prev, columnId]);
-    });
+      setPendingSelection((prev) => new Set(prev).add(columnId));
+      columnToggleTimersRef.current[columnId] = setTimeout(() => {
+        setStagedVisibleColumns((prev) => enforceActionPosition([...prev, columnId]));
+        setPendingSelection((prev) => {
+          const next = new Set(prev);
+          next.delete(columnId);
+          return next;
+        });
+        delete columnToggleTimersRef.current[columnId];
+      }, COLUMN_TOGGLE_MOVE_DELAY);
+    }
   };
 
   // Column drag handlers for reordering in dropdown
@@ -2126,12 +2192,16 @@ export default function DataTable2({
   // last applied state.
   useEffect(() => {
     if (isColumnDropdownOpen) {
+      clearColumnToggleTimers();
       setStagedVisibleColumns(visibleColumns);
       setPendingSelection(new Set());
       setPendingDeselection(new Set());
     }
   }, [isColumnDropdownOpen, visibleColumns]);
 
+  // Clear any pending reorder timers on unmount.
+  useEffect(() => () => clearColumnToggleTimers(), []);
+
   // Display text for dropdown button
   const displayText = visibleColumns.length === 1 
     ? columns.find(col => (col.id || col.key) === visibleColumns[0])?.label || "1 selected"
@@ -2616,6 +2686,7 @@ export default function DataTable2({
               : columns.map(getColumnId).slice(0, MAX_COLUMNS);
             const constrained = enforceActionPosition(snapshot);
             userHasManuallyChangedColumns.current = false;
+            clearColumnToggleTimers();
             setStagedVisibleColumns(constrained);
             setVisibleColumns(constrained);
             setPendingSelection(new Set());
@@ -2642,8 +2713,13 @@ export default function DataTable2({
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            // Commit staged selection to the table.
-            const constrained = enforceActionPosition(stagedVisibleColumns);
+            // Commit staged selection to the table, flushing any in-flight
+            // (pending) toggles that haven't finished their reorder delay.
+            clearColumnToggleTimers();
+            const constrained = resolveStagedColumns();
+            setStagedVisibleColumns(constrained);
+            setPendingSelection(new Set());
+            setPendingDeselection(new Set());
             userHasManuallyChangedColumns.current = true;
             setVisibleColumns(constrained);
             saveColumnsToStorage(constrained);