playbook_ui 15.5.0.pre.alpha.draggablefix12577 → 15.5.0.pre.alpha.play250612607

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

@@ -39,56 +39,59 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
-    case 'REORDER_ITEMS_CROSS_CONTAINER': {
+
+    // Used only when enableCrossContainerPreview is true
+    case "REORDER_ITEMS_CROSS_CONTAINER": {
       const { dragId, targetId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(item => 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 };
+      if (draggedIndex === -1 || targetIndex === -1) return state;
 
+      const updatedItem = { ...draggedItem, container: newContainer };
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, updatedItem);
 
       return { ...state, items: newItems };
     }
-    case 'MOVE_TO_CONTAINER_END': {
+
+    // Used only when enableCrossContainerPreview is true
+    case "MOVE_TO_CONTAINER_END": {
       const { dragId, newContainer } = action.payload;
       const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === dragId);
+      const draggedItem = newItems.find((item) => item && item.id === dragId);
+
+      if (!draggedItem) return state;
+
       const draggedIndex = newItems.indexOf(draggedItem);
+      if (draggedIndex === -1) return state;
 
-      // Update container temporarily so dropzone preview works correctly
       const updatedItem = { ...draggedItem, container: newContainer };
 
       // Remove from current position
       newItems.splice(draggedIndex, 1);
 
-      // Find the last item in the target container and insert after it
-      const lastIndexInContainer = newItems.map(item => item.container).lastIndexOf(newContainer);
+      // Insert at end of target container
+      const lastIndexInContainer = newItems
+        .map((item) => item && item.container)
+        .lastIndexOf(newContainer);
+
       if (lastIndexInContainer === -1) {
-        // Container is empty, add to end
         newItems.push(updatedItem);
       } else {
-        // Insert after last item in container
         newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
       }
 
       return { ...state, items: newItems };
     }
-    case 'RESET_DRAG_CONTAINER': {
-      const { itemId, originalContainer } = action.payload;
-      return {
-        ...state,
-        items: state.items.map(item =>
-          item.id === itemId
-            ? { ...item, container: originalContainer }
-            : item
-        )
-      };
-    }
+
     default:
       return state;
   }
@@ -111,7 +114,9 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  providerId = 'default', // fallback provided for backward compatibility
+  // Opt-in flag for cross-container preview
+  enableCrossContainerPreview = false,
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -144,7 +149,6 @@ 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);
@@ -154,18 +158,42 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     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
-        dispatch({ type: 'REORDER_ITEMS_CROSS_CONTAINER', payload: { dragId: state.dragData.id, targetId: id, newContainer: container } });
+      if (enableCrossContainerPreview) {
+        // Used only when enableCrossContainerPreview is true
+        const draggedItem = state.items.find(
+          (item) => item && item.id === state.dragData.id
+        );
+        const currentContainer =
+          draggedItem && draggedItem.container
+            ? draggedItem.container
+            : state.dragData.initialGroup;
+
+        const isCrossContainer =
+          currentContainer !== container &&
+          (currentContainer !== undefined || container !== undefined);
+
+        if (isCrossContainer) {
+          dispatch({
+            type: "REORDER_ITEMS_CROSS_CONTAINER",
+            payload: {
+              dragId: state.dragData.id,
+              targetId: id,
+              newContainer: container,
+            },
+          });
+        } else {
+          // Same container: keep original behavior
+          dispatch({
+            type: "REORDER_ITEMS",
+            payload: { dragId: state.dragData.id, targetId: id },
+          });
+        }
       } else {
-        // Same container: use normal reorder no need to be fancy nancy
-        dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+        // Original behavior (no preview across containers)
+        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 } });
+
+      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -174,33 +202,30 @@ 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 && 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 && 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;
-    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    
-    // Pass enhanced info to onDragEnd callback to give dev more context
-    if (onDragEnd) onDragEnd(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow);
+    if (onDragEnd) {
+      if (!enableCrossContainerPreview) {
+        onDragEnd();
+      } else {
+        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
+        const finalContainer = draggedItem ? draggedItem.container : originalContainer;
+        
+        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;
+        
+        onDragEnd(
+          draggedItemId,
+          finalContainer,
+          originalContainer,
+          itemAbove,
+          itemBelow
+        );
+      }
+    }
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -212,46 +237,31 @@ export const DraggableProvider = ({
 
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
-    
-    console.log('[Draggable] handleDrop:', { draggedItemId, container, originalContainer });
-    
-    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) {
-      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;
-    }
-    
-    // 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;
-    
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    // changeCategory will ensure the container is set correctly on drop for cross container and same container drops
-    changeCategory(draggedItemId, container);
-    
-    // Pass enhanced info to onDrop callback so devs have more context
-    if (onDrop && draggedItem) {
-      const updatedItem = { ...draggedItem, container };
-      onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
+    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
+        );
+      }
     }
   };
 
@@ -260,23 +270,20 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-    
-    // Guard against missing drag ID
-    if (!state.dragData.id) return;
-    
-    // Find the dragged item
-    const draggedItem = state.items.find(item => item && item.id === state.dragData.id);
-    
-    // Only move to container end if item exists and is in a different container
-    if (draggedItem && draggedItem.container !== 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 (enableCrossContainerPreview && state.dragData.id) {
+      // Only when enableCrossContainerPreview is true: when hovering over a different container, move item to end
+      const draggedItem = state.items.find(
+        (item) => item && item.id === state.dragData.id
+      );
+      if (draggedItem && draggedItem.container !== container) {
+        dispatch({
+          type: "MOVE_TO_CONTAINER_END",
+          payload: { dragId: state.dragData.id, newContainer: container },
+        });
+      }
     }
-    
+
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -300,4 +307,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -18,6 +18,7 @@ export type ActionType =
 } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'SET_CROSS_CONTAINER_PREVIEW'; payload: boolean }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
   | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
   | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
@@ -36,9 +37,10 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: (draggedItemId: string, finalContainer: string, originalContainer: string, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
-    onDrop?: (draggedItemId: string, droppedContainer: string, originalContainer: string, item: ItemType, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
+    onDragEnd?: (...args: any[]) => void;
+    onDrop?: (...args: any[]) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;
+    enableCrossContainerPreview?: boolean;
   }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -83,6 +83,7 @@ const DraggableMultipleContainersDropzone = (props) => {
   return (
     <DraggableProvider 
         dropZone={{type: "outline"}}
+        enableCrossContainerPreview
         initialItems={data}
         onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
           console.log(`Dragged Item ID: ${draggedItemId}`);

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -1,6 +1,8 @@
 The multiple container functionality also supports customized dropzone styling as shown here. 
 
-In addition to this, the `onDrop` and `onDragEnd` event listeners provide several arguments to allow developers more context from the drag event.
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
 
 The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
 

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error_dark;
     }
   }

data/dist/chunks/{_typeahead-CdVpaHUH.js → _typeahead-DUmTKJUc.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{c as getDefaultExportFromCjs,S as filter,T as omit,n as noop$2,u as useCollapsible,U as createPopper,V as uniqueId,W as get,X as flip$2,Y as offset$2,Z as shift$2,$ as arrow$3,a0 as computePosition$1,a1 as createCoords$1,a2 as round$1,a3 as max$1,a4 as min$1,a5 as rectToClientRect$1,g as getAllIcons,h as colors$1,k as highchartsTheme,a6 as merge,l as highchartsDarkTheme,N as typography,a7 as cloneDeep,i as isEmpty$1,a8 as isString}from"./lib-CgpqUb6l.js";import{TrixEditor}from"react-trix";import Trix from"trix";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:"",originId:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}case"REORDER_ITEMS_CROSS_CONTAINER":{const{dragId:dragId,targetId:targetId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item&&item.id===targetId));const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,updatedItem);return{...state,items:newItems}}case"MOVE_TO_CONTAINER_END":{const{dragId:dragId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);const lastIndexInContainer=newItems.map((item=>item.container)).lastIndexOf(newContainer);if(lastIndexInContainer===-1){newItems.push(updatedItem)}else{newItems.splice(lastIndexInContainer+1,0,updatedItem)}return{...state,items:newItems}}case"RESET_DRAG_CONTAINER":{const{itemId:itemId,originalContainer:originalContainer}=action.payload;return{...state,items:state.items.map((item=>item.id===itemId?{...item,container:originalContainer}:item))}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"},providerId:providerId="default"})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{console.log("[Draggable] handleDragStart:",{id:id,container:container,providerId: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)};const handleDragEnter=(id,container)=>{if(state.dragData.originId!==providerId)return;if(state.dragData.id!==id){const isCrossContainer=state.dragData.initialGroup!==container;console.log("[Draggable] handleDragEnter:",{id:id,container:container,isCrossContainer:isCrossContainer,draggedId:state.dragData.id});if(isCrossContainer){dispatch({type:"REORDER_ITEMS_CROSS_CONTAINER",payload:{dragId:state.dragData.id,targetId:id,newContainer:container}})}else{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}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;console.log("[Draggable] handleDragEnd:",{draggedItemId:draggedItemId,originalContainer: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&&item.id===draggedItemId));const finalContainer=draggedItem?draggedItem.container:originalContainer;console.log("[Draggable] handleDragEnd item found:",{draggedItem:!!draggedItem,finalContainer:finalContainer});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;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(onDragEnd)onDragEnd(draggedItemId,finalContainer,originalContainer,itemAbove,itemBelow)};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;console.log("[Draggable] handleDrop:",{draggedItemId:draggedItemId,container:container,originalContainer:originalContainer});if(!draggedItemId){console.warn("[Draggable] handleDrop: No draggedItemId found");return}const draggedItem=state.items.find((item=>item&&item.id===draggedItemId));if(!draggedItem){console.error("[Draggable] handleDrop: Item not found in state",{draggedItemId:draggedItemId,itemsCount:state.items.length});dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});return}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}})}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;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(draggedItemId,container);if(onDrop&&draggedItem){const updatedItem={...draggedItem,container:container};onDrop(draggedItemId,container,originalContainer,updatedItem,itemAbove,itemBelow)}};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(!state.dragData.id)return;const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){console.log("[Draggable] handleDragOver: Moving to container end",{dragId:state.dragData.id,fromContainer:draggedItem.container,toContainer: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(!draggedItem){console.error("[Draggable] handleDragOver: Item not found",{dragId:state.dragData.id,itemsCount:state.items.length})}if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{c as getDefaultExportFromCjs,S as filter,T as omit,n as noop$2,u as useCollapsible,U as createPopper,V as uniqueId,W as get,X as flip$2,Y as offset$2,Z as shift$2,$ as arrow$3,a0 as computePosition$1,a1 as createCoords$1,a2 as round$1,a3 as max$1,a4 as min$1,a5 as rectToClientRect$1,g as getAllIcons,h as colors$1,k as highchartsTheme,a6 as merge,l as highchartsDarkTheme,N as typography,a7 as cloneDeep,i as isEmpty$1,a8 as isString}from"./lib-CgpqUb6l.js";import{TrixEditor}from"react-trix";import Trix from"trix";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:"",originId:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}case"REORDER_ITEMS_CROSS_CONTAINER":{const{dragId:dragId,targetId:targetId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item&&item.id===targetId));if(draggedIndex===-1||targetIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,updatedItem);return{...state,items:newItems}}case"MOVE_TO_CONTAINER_END":{const{dragId:dragId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);if(draggedIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);const lastIndexInContainer=newItems.map((item=>item&&item.container)).lastIndexOf(newContainer);if(lastIndexInContainer===-1){newItems.push(updatedItem)}else{newItems.splice(lastIndexInContainer+1,0,updatedItem)}return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"},providerId:providerId="default",enableCrossContainerPreview:enableCrossContainerPreview=false})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container,originId:providerId}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.originId!==providerId)return;if(state.dragData.id!==id){if(enableCrossContainerPreview){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));const currentContainer=draggedItem&&draggedItem.container?draggedItem.container:state.dragData.initialGroup;const isCrossContainer=currentContainer!==container&&(currentContainer!==void 0||container!==void 0);if(isCrossContainer){dispatch({type:"REORDER_ITEMS_CROSS_CONTAINER",payload:{dragId:state.dragData.id,targetId:id,newContainer:container}})}else{dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}})}}else{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}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(onDragEnd){if(!enableCrossContainerPreview){onDragEnd()}else{const draggedItem=state.items.find((item=>item&&item.id===draggedItemId));const finalContainer=draggedItem?draggedItem.container:originalContainer;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;onDragEnd(draggedItemId,finalContainer,originalContainer,itemAbove,itemBelow)}}};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});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: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)}}};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(enableCrossContainerPreview&&state.dragData.id){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"MOVE_TO_CONTAINER_END",payload:{dragId:state.dragData.id,newContainer:container}})}}if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see