playbook_ui 15.5.0.pre.alpha.draggablefix12570 → 15.5.0.pre.alpha.draggablefix12577

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -42,9 +42,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
     case 'REORDER_ITEMS_CROSS_CONTAINER': {
       const { dragId, targetId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item.id === dragId);
+      const draggedItem = newItems.find(item => item && item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => item.id === targetId);
+      const targetIndex = newItems.findIndex(item => item && item.id === targetId);
 
       // Update container temporarily so dropzone preview works correctly
       const updatedItem = { ...draggedItem, container: newContainer };
@@ -57,7 +57,7 @@ const reducer = (state: InitialStateType, action: ActionType) => {
     case 'MOVE_TO_CONTAINER_END': {
       const { dragId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item.id === dragId);
+      const draggedItem = newItems.find(item => item && item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
 
       // Update container temporarily so dropzone preview works correctly
@@ -144,6 +144,7 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
+    console.log('[Draggable] handleDragStart:', { id, container, providerId });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
@@ -155,6 +156,7 @@ export const DraggableProvider = ({
     if (state.dragData.id !== id) {
       // Check if this is a cross-container drag
       const isCrossContainer = state.dragData.initialGroup !== container;
+      console.log('[Draggable] handleDragEnter:', { id, container, isCrossContainer, draggedId: state.dragData.id });
       
       if (isCrossContainer) {
         // Use cross-container reorder to update container temporarily for dropzone preview
@@ -172,19 +174,24 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
+    console.log('[Draggable] handleDragEnd:', { draggedItemId, originalContainer });
+    
     if (!draggedItemId) {
+      console.warn('[Draggable] handleDragEnd: No draggedItemId found');
       dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
       dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
       return;
     }
     
-    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    const draggedItem = state.items.find(item => item && item.id === draggedItemId);
     const finalContainer = draggedItem ? draggedItem.container : originalContainer;
     
+    console.log('[Draggable] handleDragEnd item found:', { draggedItem: !!draggedItem, finalContainer });
+    
     // Find items above and below in the same container
-    const itemsInContainer = state.items.filter(item => item.container === finalContainer);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
+    const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
     const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
     const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
@@ -206,21 +213,33 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
-    if (!draggedItemId) return; // Guard against missing drag data when dropping too quickly
+    console.log('[Draggable] handleDrop:', { draggedItemId, container, originalContainer });
     
-    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    if (!draggedItemId) {
+      console.warn('[Draggable] handleDrop: No draggedItemId found');
+      return; // Guard against missing drag data when dropping too quickly
+    }
+    
+    const draggedItem = state.items.find(item => item && item.id === draggedItemId);
     
     if (!draggedItem) {
-      // Item not found in state - clear drag state and exit
+      console.error('[Draggable] handleDrop: Item not found in state', { draggedItemId, itemsCount: state.items.length });
+      // Item not found in state: clear drag state and exit
       dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
       dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
       return;
     }
     
-    // Find items above and below in the same container (before changeCategory updates it)
-    const itemsInContainer = state.items.filter(item => item.container === container);
-    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    // If dropping in a different container and item hasn't been moved there yet, move to end
+    if (container !== originalContainer && draggedItem.container !== container) {
+      console.log('[Draggable] handleDrop: Moving to container end');
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: draggedItemId, newContainer: container } });
+    }
+    
+    // Find items above and below in the same container
+    const itemsInContainer = state.items.filter(item => item && item.container === container);
+    const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
     const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
     const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
@@ -230,7 +249,7 @@ export const DraggableProvider = ({
     changeCategory(draggedItemId, container);
     
     // Pass enhanced info to onDrop callback so devs have more context
-    if (onDrop) {
+    if (onDrop && draggedItem) {
       const updatedItem = { ...draggedItem, container };
       onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
     }
@@ -240,25 +259,22 @@ export const DraggableProvider = ({
      if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
 
     e.preventDefault();
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     
-    // Check if we're dragging over a different container than where the item currently is
-    if (!state.dragData.id) return; // Guard against missing drag ID when dragging too quickly
+    // Guard against missing drag ID
+    if (!state.dragData.id) return;
     
-    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    // Find the dragged item
+    const draggedItem = state.items.find(item => item && item.id === state.dragData.id);
     
-    // Only update if item exists and needs to move to a different container
+    // Only move to container end if item exists and is in a different container
     if (draggedItem && draggedItem.container !== container) {
-      // Only dispatch if we're not already in the process of updating to this container
-      // This is needed to prevent multiple rapid MOVE_TO_CONTAINER_END actions that can cause race conditions + errors (Not seen in PB, errors show up in Nitro console)
-      if (state.activeContainer !== container) {
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-        // This handles the case when dragging to empty space at bottom of container OR in empty container
-        dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
-      }
-    } else if (state.activeContainer !== container) {
-      // Just update active container if item is already in correct container
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+      console.log('[Draggable] handleDragOver: Moving to container end', { dragId: state.dragData.id, fromContainer: draggedItem.container, toContainer: container });
+      // Move item to end of target container for preview
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+    } else if (!draggedItem) {
+      console.error('[Draggable] handleDragOver: Item not found', { dragId: state.dragData.id, itemsCount: state.items.length });
     }
     
     if (onDragOver) onDragOver(e, container);

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -8,6 +8,25 @@
       border-right: 1px solid $border_light !important;
     }
 
+    // **Advanced Table** specific rules to eliminate double borders when vertical-border is active
+    .pb_advanced_table &,
+    &[data-vertical-border="true"] {
+      // Remove first column box-shadow (preserve border-right in Chrome and use CSS var to respect column group border colors)
+      .table-header-cells:first-child,
+      .table-header-cells-custom:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child {
+        box-shadow: none !important;
+        border-right: 1px solid var(--column-border-color, #{$border_light}) !important;
+      }
+
+      .pb_table_td:nth-child(2) {
+        box-shadow: none !important;
+      }
+    }
+    // --- End Advanced Table First Column Code Section ---
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -63,5 +82,35 @@
         }
       }
     }
+
+    // Dark mode support for advanced tables
+    .pb_advanced_table.dark & {
+      td, th, .pb_table_td, .pb_table_th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      thead tr th {
+        border-right: 1px solid $border_dark !important;
+      }
+
+      &[data-vertical-border="true"] {
+        .table-header-cells:first-child,
+        .table-header-cells-custom:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child {
+          border-right: 1px solid var(--column-border-color, #{$border_dark}) !important;
+        }
+      }
+
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            border-right-color: darken($border_dark, 10%) !important;
+          }
+        }
+      }
+    }
+    // --- End Advanced Table Dark Mode Code Section ---
   }
 }