playbook_ui 15.6.0.pre.alpha.draggableask12898 → 15.6.0.pre.alpha.play2552collapsibleiconrefactor12903

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1dcc4b2b7843d520c80b11f73c74e196883d2bd1a3ecf55d92c16be884d0099
-  data.tar.gz: f071a4758c69143994205e7f230baa51f860f304d27887211d39eb910480b080
+  metadata.gz: b56117c9b815041948a7dc894ebad0caebf095ff1da7801e06ed7fec18da7eeb
+  data.tar.gz: 8e9f82470ea23ae8863567c8df94451dd927cdcbbaa7cf9d174a5fcd2ee627b7
 SHA512:
-  metadata.gz: eab9a32c8a93c485adea409dca924d0d6947d00433ed2f2b347a820b102e71de3a015b2f00a09d11a6928eda21f68cb95131463946346ae2b86e8f941dc1cd96
-  data.tar.gz: 3e2dc18bf9ad106c8dd35ce73ef90498e79eecfc1de411c4889c235d80e5aa0220013f49fcf12fdd9d09dd4738ba74f5410ade65eb4d913f764fc349dcce01d7
+  metadata.gz: 58c7104cca8322ba83b49875a68bc2a0a49ed6334337bf4a0e00bfa6d8c062bc45b8aadbe2644592a9dc358348cd972b47fef79efb89fbf32135c2f345f6bbd0
+  data.tar.gz: 1c1933805f799e9aeca540a29d3ac0861de4c8c8900ecfb62c7e1ea5eb1800e0df5d7dd4164afffb92788d84d19ed486921d7a572afcf4cf5823c5eeb64d5784

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle; color: rgb(193, 205, 214);"
+              style="vertical-align: middle;"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
+  default:"text_lt_default",
+  light: "text_lt_light",
+  lighter: "text_lt_lighter",
+  link: "primary",
+  error: "error",
+  success: "text_dk_success_sm",
 };
 
 const CollapsibleIcon = ({
@@ -68,9 +68,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle"}}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -80,9 +81,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle" }}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,7 +7,6 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
-      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,7 +22,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -41,7 +40,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -60,7 +58,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -92,19 +92,6 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       return { ...state, items: newItems };
     }
 
-    // Reset item back to its original container (e.g., when drag ends without valid drop)
-    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;
   }
@@ -132,27 +119,6 @@ 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;
-    currentContainer: string;
-    dropOccurred: boolean;
-  }>({
-    isDragging: false,
-    draggedItemId: '',
-    originalContainer: '',
-    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';
@@ -182,224 +148,7 @@ 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();
-      
-      const currentContainer = dragStateRef.current.currentContainer;
-      
-      // If item is in a different container than original, treat it as a successful drop
-      if (currentContainer && currentContainer !== dragStateRef.current.originalContainer) {
-        
-        // Mark as dropped so other handlers know
-        dragStateRef.current.dropOccurred = true;
-        
-        // 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
-          );
-        }
-        
-        // Trigger onDragEnd callback
-        if (onDragEnd) {
-          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;
-          
-          onDragEnd(
-            dragStateRef.current.draggedItemId,
-            currentContainer,
-            dragStateRef.current.originalContainer,
-            itemAbove,
-            itemBelow
-          );
-        }
-        
-        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-      } else {
-        // Reset to original container (item didn't move or dropped in invalid zone)
-        const originalContainer = dragStateRef.current.originalContainer;
-        
-        dispatch({
-          type: 'RESET_DRAG_CONTAINER',
-          payload: {
-            itemId: dragStateRef.current.draggedItemId,
-            originalContainer: originalContainer,
-          },
-        });
-        
-        // Call onDrop with original container info
-        if (onDrop) {
-          const draggedItem = stateRef.current.items.find(item => item && item.id === dragStateRef.current.draggedItemId);
-          const updatedItem = draggedItem ? { ...draggedItem, container: originalContainer } : null;
-          const itemsInContainer = stateRef.current.items.filter(item => item && item.container === originalContainer);
-          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,
-            originalContainer,
-            originalContainer,
-            updatedItem,
-            itemAbove,
-            itemBelow
-          );
-        }
-        
-        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-      }
-    };
-
-    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,
-                },
-              });
-            }
-            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: '',
-              currentContainer: '',
-              dropOccurred: false,
-            };
-          }
-        }, 50); // Small delay to let drop event fire if it's going to
-      }
-    };
-
-    document.addEventListener('dragover', handleGlobalDragOver);
-    document.addEventListener('drop', handleGlobalDrop);
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-    document.addEventListener('pointerup', handleGlobalMouseUp);
-    
-    return () => {
-      document.removeEventListener('dragover', handleGlobalDragOver);
-      document.removeEventListener('drop', handleGlobalDrop);
-      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,
-          },
-        });
-      }
-      
-      // Clear drag state
-      dragStateRef.current = {
-        isDragging: false,
-        draggedItemId: '',
-        originalContainer: '',
-        currentContainer: '',
-        dropOccurred: false,
-      };
-    }
-    
-    prevIsDraggingRef.current = isNowDragging;
-  }, [state.isDragging, enableCrossContainerPreview]);
-
   const handleDragStart = (id: string, container: string) => {
-    // Track drag in ref for global listener
-    if (enableCrossContainerPreview) {
-      dragStateRef.current = {
-        isDragging: true,
-        draggedItemId: id,
-        originalContainer: container,
-        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);
@@ -432,10 +181,6 @@ export const DraggableProvider = ({
               newContainer: container,
             },
           });
-          // Update current container in ref
-          if (enableCrossContainerPreview) {
-            dragStateRef.current.currentContainer = container;
-          }
         } else {
           // Same container: keep original behavior
           dispatch({
@@ -448,10 +193,7 @@ export const DraggableProvider = ({
         dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
       }
 
-      // 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}});
+      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -460,29 +202,17 @@ 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 } });
-    }
-    
     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 = stateRef.current.items.find(item => item && item.id === draggedItemId);
+        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
         const finalContainer = draggedItem ? draggedItem.container : originalContainer;
         
-        const itemsInContainer = stateRef.current.items.filter(item => item && item.container === 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;
@@ -507,58 +237,32 @@ 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,
-          callbackData.updatedItem,
-          callbackData.itemAbove,
-          callbackData.itemBelow
+          updatedItem,
+          itemAbove,
+          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) => {
@@ -577,8 +281,6 @@ 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/tokens/_colors.scss

@@ -139,7 +139,8 @@ $text_colors: (
   text_lt_lighter:    $text_lt_lighter,
   text_dk_default:    $text_dk_default,
   text_dk_light:      $text_dk_light,
-  text_dk_lighter:    $text_dk_lighter
+  text_dk_lighter:    $text_dk_lighter,
+  text_dk_success_sm:  $text_dk_success_sm
 );
 
 /* Data colors ------------------------*/