playbook_ui 15.6.0.pre.alpha.PLAY2611selectinputoptions12951 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -275,6 +275,80 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const { setMinDate, setMaxDate } = getMinMaxDates()
 
+  // Default Date + Min/Max Date Initialization Helper Functions section ----/
+  const toDateObject = (dateValue: any): Date | null => {
+    if (!dateValue) return null
+    if (dateValue instanceof Date) return dateValue
+    if (typeof dateValue === 'string') {
+      const parsed = new Date(dateValue)
+      return isNaN(parsed.getTime()) ? null : parsed
+    }
+    if (typeof dateValue === 'number') {
+      return new Date(dateValue)
+    }
+    return null
+  }
+
+  // Formatting Date for Flatpickr
+  const formatDateForFlatpickr = (dateValue: any): string | null => {
+    const dateObj = toDateObject(dateValue)
+    if (!dateObj) return null
+    
+    const year = dateObj.getFullYear()
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0')
+    const day = String(dateObj.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+
+  // Helper to check if defaultDate is earlier than minDate
+  const isDefaultDateBeforeMinDate = (defaultDateValue: any, minDateValue: any): boolean => {
+    if (!defaultDateValue || !minDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const minDateObj = toDateObject(minDateValue)
+    
+    if (!defaultDateObj || !minDateObj) return false
+
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const minDateOnly = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate())
+    
+    return defaultDateOnly < minDateOnly
+  }
+
+  // Helper to check if defaultDate is later than maxDate
+  const isDefaultDateAfterMaxDate = (defaultDateValue: any, maxDateValue: any): boolean => {
+    if (!defaultDateValue || !maxDateValue) return false
+    
+    const defaultDateObj = toDateObject(defaultDateValue)
+    const maxDateObj = toDateObject(maxDateValue)
+    
+    if (!defaultDateObj || !maxDateObj) return false
+    
+    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
+    const maxDateOnly = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate())
+    
+    return defaultDateOnly > maxDateOnly
+  }
+
+  const defaultDateValue: any = defaultDateGetter()
+  // Only check for and out-of-range if user actually provided minDate/maxDate constraints
+  const isBeforeMin = minDate && isDefaultDateBeforeMinDate(defaultDateValue, setMinDate)
+  const isAfterMax = maxDate && isDefaultDateAfterMaxDate(defaultDateValue, setMaxDate)
+  
+  // Store these values for use in onClose handler
+  const hasOutOfRangeDefault = (isBeforeMin || isAfterMax) && defaultDateValue
+  
+  // Temporarily adjust minDate/maxDate to allow defaultDate to render if it's out of range via user provided minDate/maxDate constraints
+  const effectiveMinDate = isBeforeMin && defaultDateValue && minDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMinDate
+    : setMinDate
+  
+  const effectiveMaxDate = isAfterMax && defaultDateValue && maxDate
+    ? formatDateForFlatpickr(defaultDateValue) || setMaxDate
+    : setMaxDate
+  
+  // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
+  
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -286,11 +360,32 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: setMaxDate,
-    minDate: setMinDate,
+    maxDate: effectiveMaxDate,
+    minDate: effectiveMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [(_selectedDates, _dateStr, fp) => {
+      // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
+      if (hasOutOfRangeDefault) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj) {
+          const inputIsBlank = !fp.input.value || fp.input.value.trim() === ''
+          const noSelection = !fp.selectedDates || fp.selectedDates.length === 0
+          
+          if (inputIsBlank || noSelection) {
+            const formattedDate = fp.formatDate(dateObj, getDateFormat())
+            if (formattedDate) {
+              fp.input.value = formattedDate
+            }
+            fp.selectedDates = [dateObj]
+            fp.jumpToDate(dateObj)
+            setTimeout(() => {
+              yearChangeHook(fp)
+            }, 0)
+          }
+        }
+      }
+      
       calendarResizer()
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
@@ -303,12 +398,30 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr) => {
+    onClose: [(selectedDates, dateStr, fp) => {
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      
+      // If defaultDate was out of range and no date was selected, preserve the default date
+      if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
+        const dateObj = toDateObject(defaultDateValue)
+        if (dateObj && fp.input) {
+          const formattedDate = fp.formatDate(dateObj, getDateFormat())
+          if (formattedDate) {
+            setTimeout(() => {
+              if (fp.input && (!fp.selectedDates || fp.selectedDates.length === 0)) {
+                fp.input.value = formattedDate
+                fp.selectedDates = [dateObj]
+                fp.jumpToDate(dateObj)
+              }
+            }, 0)
+          }
+        }
+      }
+      
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
@@ -330,6 +443,71 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
+  if ((isBeforeMin || isAfterMax) && defaultDateValue) {
+    const dateObj = toDateObject(defaultDateValue)
+    const formattedDate = dateObj ? picker.formatDate(dateObj, getDateFormat()) : null
+    
+    setTimeout(() => {
+      if (!dateObj || !picker.input || !formattedDate) return
+
+      picker.setDate(dateObj, false)
+
+      if (isBeforeMin && setMinDate && minDate) {
+        picker.set('minDate', setMinDate)
+      }
+      if (isAfterMax && setMaxDate && maxDate) {
+        picker.set('maxDate', setMaxDate)
+      }
+      picker.input.value = formattedDate
+
+      picker.selectedDates = [dateObj]
+      
+      setTimeout(() => {
+        yearChangeHook(picker)
+      }, 0)
+      
+      // Restore function for out-of-range default dates
+      const restoreOutOfRangeValue = () => {
+        if (!picker.input) return
+        
+        const inputIsBlank = !picker.input.value || picker.input.value.trim() === ''
+        const noSelection = !picker.selectedDates || picker.selectedDates.length === 0
+        
+        if (inputIsBlank || noSelection) {
+          setTimeout(() => {
+            if (picker.input && (!picker.input.value || picker.input.value.trim() === '')) {
+              picker.input.value = formattedDate
+            }
+            if (!picker.selectedDates || picker.selectedDates.length === 0) {
+              picker.selectedDates = [dateObj]
+              if (picker.isOpen) {
+                picker.jumpToDate(dateObj)
+                picker.redraw()
+                setTimeout(() => {
+                  yearChangeHook(picker)
+                }, 0)
+              }
+            }
+          }, 0)
+        }
+      }
+      
+      const originalClear = picker.clear.bind(picker)
+      picker.clear = function(...args: any[]) {
+        const result = originalClear(...args)
+        setTimeout(() => restoreOutOfRangeValue(), 0)
+        return result
+      }
+
+      picker.input.addEventListener('input', restoreOutOfRangeValue)
+      
+      picker.config.onClose.push(() => {
+        restoreOutOfRangeValue()
+      })
+    }, 10)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -92,6 +92,35 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       return { ...state, items: newItems };
     }
 
+    // Reset item back to its original container and position (e.g., when drag ends without valid drop)
+    case "RESET_DRAG_CONTAINER": {
+      const { itemId, originalContainer, originalIndex } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find(item => item && item.id === itemId);
+      
+      if (!draggedItem) return state;
+      
+      const currentIndex = newItems.indexOf(draggedItem);
+      
+      // Remove from current position
+      newItems.splice(currentIndex, 1);
+      
+      // Restore container property and insert at original index
+      const restoredItem = { ...draggedItem, container: originalContainer };
+      
+      // Insert at original index, or at end if index is invalid
+      if (originalIndex !== undefined && originalIndex >= 0) {
+        newItems.splice(originalIndex, 0, restoredItem);
+      } else {
+        newItems.push(restoredItem);
+      }
+      
+      return {
+        ...state,
+        items: newItems
+      };
+    }
+
     default:
       return state;
   }
@@ -119,6 +148,29 @@ export const DraggableProvider = ({
   enableCrossContainerPreview = false,
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  
+  // Track drag state for global listener
+  const dragStateRef = useRef<{
+    isDragging: boolean;
+    draggedItemId: string;
+    originalContainer: string;
+    originalIndex: number;
+    currentContainer: string;
+    dropOccurred: boolean;
+  }>({
+    isDragging: false,
+    draggedItemId: '',
+    originalContainer: '',
+    originalIndex: -1,
+    currentContainer: '',
+    dropOccurred: false,
+  });
+
+  // Track current state for use in gated event listeners (avoid stale closures)
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
 
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
@@ -148,7 +200,209 @@ export const DraggableProvider = ({
     onReorder(state.items);
   }, [state.items]);
 
+  // Monitor for failed drops by detecting mouse/pointer release during drag (this is needed for cross container preview)
+  useEffect(() => {
+    if (!enableCrossContainerPreview) return;
+
+    // Allow drops anywhere on the document by preventing default dragover
+    const handleGlobalDragOver = (e: DragEvent) => {
+      if (dragStateRef.current.isDragging) {
+        e.preventDefault();
+      }
+    };
+
+    // Handle drops anywhere on the document (including non-container areas)
+    const handleGlobalDrop = (e: DragEvent) => {
+      if (!dragStateRef.current.isDragging) return;
+      
+      // If a container already handled the drop, don't process again
+      if (dragStateRef.current.dropOccurred) return;
+      
+      e.preventDefault();
+      
+      // If we reach here, it means the drop was NOT on a valid container
+      // (otherwise the container's handleDrop would have set dropOccurred = true)
+      // So we should ALWAYS reset to original container for invalid drops
+      const originalContainer = dragStateRef.current.originalContainer;
+      
+      dispatch({
+        type: 'RESET_DRAG_CONTAINER',
+        payload: {
+          itemId: dragStateRef.current.draggedItemId,
+          originalContainer: originalContainer,
+          originalIndex: dragStateRef.current.originalIndex,
+        },
+      });
+      
+      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      
+      // Clear drag state
+      dragStateRef.current = {
+        isDragging: false,
+        draggedItemId: '',
+        originalContainer: '',
+        originalIndex: -1,
+        currentContainer: '',
+        dropOccurred: false,
+      };
+    };
+
+    const handleGlobalMouseUp = () => {
+      // If we're dragging and mouse is released, wait a bit to see if drop occurs
+      if (dragStateRef.current.isDragging) {
+        setTimeout(() => {
+          const currentContainer = dragStateRef.current.currentContainer;
+          
+          // If drop still hasn't occurred, check if item is in a different container
+          if (dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
+            // If item is in a different container than original, treat it as a successful drop
+            if (currentContainer && currentContainer !== dragStateRef.current.originalContainer) {
+              // Trigger onDrop callback with the current container
+              if (onDrop) {
+                const draggedItem = stateRef.current.items.find(item => item && item.id === dragStateRef.current.draggedItemId);
+                const updatedItem = draggedItem ? { ...draggedItem, container: currentContainer } : null;
+                const itemsInContainer = stateRef.current.items.filter(item => item && item.container === currentContainer);
+                const indexInContainer = itemsInContainer.findIndex(item => item && item.id === dragStateRef.current.draggedItemId);
+                const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+                const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+                
+                onDrop(
+                  dragStateRef.current.draggedItemId,
+                  currentContainer,
+                  dragStateRef.current.originalContainer,
+                  updatedItem,
+                  itemAbove,
+                  itemBelow
+                );
+              }
+            } else {
+              dispatch({
+                type: 'RESET_DRAG_CONTAINER',
+                payload: {
+                  itemId: dragStateRef.current.draggedItemId,
+                  originalContainer: dragStateRef.current.originalContainer,
+                  originalIndex: dragStateRef.current.originalIndex,
+                },
+              });
+            }
+            dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+            dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+            dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+            
+            // Clear drag state
+            dragStateRef.current = {
+              isDragging: false,
+              draggedItemId: '',
+              originalContainer: '',
+              originalIndex: -1,
+              currentContainer: '',
+              dropOccurred: false,
+            };
+          }
+        }, 50); // Small delay to let drop event fire if it's going to
+      }
+    };
+
+    // Detect when drag leaves document boundaries
+    const handleDragLeave = (e: DragEvent) => {
+      // Check if we're leaving the document (relatedTarget will be null)
+      if (!e.relatedTarget && dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
+        // Drag left the document: reset to original container immediately
+        dispatch({
+          type: 'RESET_DRAG_CONTAINER',
+          payload: {
+            itemId: dragStateRef.current.draggedItemId,
+            originalContainer: dragStateRef.current.originalContainer,
+            originalIndex: dragStateRef.current.originalIndex,
+          },
+        });
+        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+        
+        // Clear drag state
+        dragStateRef.current = {
+          isDragging: false,
+          draggedItemId: '',
+          originalContainer: '',
+          originalIndex: -1,
+          currentContainer: '',
+          dropOccurred: false,
+        };
+      }
+    };
+
+    document.addEventListener('dragover', handleGlobalDragOver);
+    document.addEventListener('drop', handleGlobalDrop);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+    document.addEventListener('pointerup', handleGlobalMouseUp);
+    
+    return () => {
+      document.removeEventListener('dragover', handleGlobalDragOver);
+      document.removeEventListener('drop', handleGlobalDrop);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('mouseup', handleGlobalMouseUp);
+      document.removeEventListener('pointerup', handleGlobalMouseUp);
+    };
+  }, [enableCrossContainerPreview]);
+
+  // Detect when dragging stops (isDragging goes from truthy to empty)
+  const prevIsDraggingRef = useRef(state.isDragging);
+  
+  useEffect(() => {
+    if (!enableCrossContainerPreview) return;
+
+    const wasDragging = prevIsDraggingRef.current;
+    const isNowDragging = state.isDragging;
+
+    // Drag just ended (was dragging, now not)
+    if (wasDragging && !isNowDragging) {
+      
+      // If drop didn't occur, reset to original container
+      if (!dragStateRef.current.dropOccurred && dragStateRef.current.draggedItemId) {
+        dispatch({
+          type: 'RESET_DRAG_CONTAINER',
+          payload: {
+            itemId: dragStateRef.current.draggedItemId,
+            originalContainer: dragStateRef.current.originalContainer,
+            originalIndex: dragStateRef.current.originalIndex,
+          },
+        });
+      }
+      
+      // Clear drag state
+      dragStateRef.current = {
+        isDragging: false,
+        draggedItemId: '',
+        originalContainer: '',
+        originalIndex: -1,
+        currentContainer: '',
+        dropOccurred: false,
+      };
+    }
+    
+    prevIsDraggingRef.current = isNowDragging;
+  }, [state.isDragging, enableCrossContainerPreview]);
+
   const handleDragStart = (id: string, container: string) => {
+    // Track drag in ref for global listener
+    if (enableCrossContainerPreview) {
+      // Find the original index of the item
+      const originalIndex = state.items.findIndex(item => item && item.id === id);
+      
+      dragStateRef.current = {
+        isDragging: true,
+        draggedItemId: id,
+        originalContainer: container,
+        originalIndex: originalIndex,
+        currentContainer: container,
+        dropOccurred: false,
+      };
+    }
+    
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
@@ -181,6 +435,10 @@ export const DraggableProvider = ({
               newContainer: container,
             },
           });
+          // Update current container in ref
+          if (enableCrossContainerPreview) {
+            dragStateRef.current.currentContainer = container;
+          }
         } else {
           // Same container: keep original behavior
           dispatch({
@@ -193,7 +451,10 @@ export const DraggableProvider = ({
         dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
       }
 
-      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
+      // When enableCrossContainerPreview is true, preserve the original initialGroup
+      // Otherwise, update it to track the current container
+      const newInitialGroup = enableCrossContainerPreview ? state.dragData.initialGroup : container;
+      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: newInitialGroup, originId: providerId}});
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -202,17 +463,29 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
+    // If enableCrossContainerPreview is true and no drop occurred, reset item to original container
+    if (enableCrossContainerPreview && !dragStateRef.current.dropOccurred && draggedItemId && originalContainer) {
+      dispatch({ type: 'RESET_DRAG_CONTAINER', payload: { itemId: draggedItemId, originalContainer, originalIndex: dragStateRef.current.originalIndex } });
+    }
+    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+    
+    // Only call onDragEnd if drop didn't already occur (for enableCrossContainerPreview)
+    // If drop occurred, handleDrop or global drop handler already called onDragEnd
+    if (enableCrossContainerPreview && dragStateRef.current.dropOccurred) {
+      return;
+    }
+    
     if (onDragEnd) {
       if (!enableCrossContainerPreview) {
         onDragEnd();
       } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
+        const draggedItem = stateRef.current.items.find(item => item && item.id === draggedItemId);
         const finalContainer = draggedItem ? draggedItem.container : originalContainer;
         
-        const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
+        const itemsInContainer = stateRef.current.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;
@@ -237,32 +510,58 @@ export const DraggableProvider = ({
 
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
+    
+    // Mark drop as successful in ref for global listener
+    if (enableCrossContainerPreview) {
+      dragStateRef.current.dropOccurred = true;
+    }
+
+    // Gather data for callbacks BEFORE clearing state
+    const isCrossContainer = container !== originalContainer;
+    let callbackData = null;
+    
+    if (enableCrossContainerPreview) {
+      const draggedItem = stateRef.current.items.find(item => item && item.id === draggedItemId);
+      const updatedItem = draggedItem ? { ...draggedItem, container } : null;
+      const itemsInContainer = stateRef.current.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;
+      
+      callbackData = { updatedItem, itemAbove, itemBelow };
+    }
 
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     changeCategory(state.dragData.id, container);
+    
     if (onDrop) {
       if (!enableCrossContainerPreview) {
         onDrop(container);
       } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-        const updatedItem = draggedItem ? { ...draggedItem, container } : null;
-        
-        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;
-        
         onDrop(
           draggedItemId,
           container,
           originalContainer,
-          updatedItem,
-          itemAbove,
-          itemBelow
+          callbackData.updatedItem,
+          callbackData.itemAbove,
+          callbackData.itemBelow
         );
       }
     }
+    
+    // Trigger onDragEnd ONLY for cross-container drops (dragend doesn't fire reliably in that case)
+    // For same-container drops, handleDragEnd will be called normally
+    if (enableCrossContainerPreview && isCrossContainer && onDragEnd && callbackData) {
+      onDragEnd(
+        draggedItemId,
+        container,
+        originalContainer,
+        callbackData.itemAbove,
+        callbackData.itemBelow
+      );
+    }
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -281,6 +580,8 @@ export const DraggableProvider = ({
           type: "MOVE_TO_CONTAINER_END",
           payload: { dragId: state.dragData.id, newContainer: container },
         });
+        // Update current container in ref
+        dragStateRef.current.currentContainer = container;
       }
     }
 

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -23,7 +23,7 @@ export type ActionType =
   | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
   | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
   | { type: 'MOVE_TO_CONTAINER_END'; payload: { dragId: string; newContainer: string } }
-  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string } };
+  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string, originalIndex: number } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {