playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

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

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
   dragData: { id: "", initialGroup: "" },
   isDragging: "",
-  activeContainer: ""
+  activeContainer: "",
 };
 
 const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,9 +31,23 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetItem = newItems.find(item => item.id === targetId);
+    
+      if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
+        return state;
+      }
+
+      if (dragId === targetId) {
+        return state;
+      }
+
+      const draggedIndex = newItems.findIndex(item => item.id === dragId);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
+      if (draggedIndex === -1 || targetIndex === -1) {
+        return state;
+      }
+
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -48,77 +62,130 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  return useContext(DragContext);
+  const context = useContext(DragContext);
+  if (context === undefined) {
+    throw new Error('DraggableContext must be used within a DraggableProvider');
+  }
+  return context;
 };
 
-export const DraggableProvider = ({ 
-  children, 
-  initialItems, 
+export const DraggableProvider = ({
+  children,
+  initialItems,
   onReorder,
-  onDragStart, 
-  onDragEnter, 
-  onDragEnd, 
-  onDrop, 
-  onDragOver 
+  onDragStart,
+  onDragEnter,
+  onDragEnd,
+  onDrop,
+  onDragOver,
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  
+  // Store initial items in a ref to use if needed (for consistency when needed in future updates)
+  const initialItemsRef = useRef(initialItems);
+  const [isDragging, setIsDragging] = useState(false);
+  
+  // Parse dropZone prop - handle both string format (backward compatibility) and object format
+  let dropZoneType = 'ghost';
+  let dropZoneColor = 'neutral';
+  let dropZoneDirection = 'vertical';
+
+  if (typeof dropZone === 'string') {
+    // Legacy format - just the type is provided as a string
+    dropZoneType = dropZone;
+  } else {
+    // New object format
+    dropZoneType = dropZone.type || 'ghost';
+    // Line default is set to primary. Other types default to neutral.
+    dropZoneColor = dropZone.type === 'line' ? (dropZone.color || 'primary') : (dropZone.color || 'neutral');
+
+    // Only use direction if the type is 'line'
+    if (dropZoneType === 'line') {
+      dropZoneDirection = dropZone.direction || 'vertical';
+    }
+  }
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
+    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(state.items);
-  }, [state.items]);
+    if (onReorder) {
+      onReorder(state.items);
+    }
+  }, [state.items, onReorder]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    setIsDragging(true);
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
+    if (!isDragging || container !== state.activeContainer) return;
+
+    if (state.dragData.id === id) return;
+
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    const targetItem = state.items.find(item => item.id === id);
+
+    if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
+      return;
     }
+
+    dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+    
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
+    setIsDragging(false);
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     if (onDragEnd) onDragEnd();
   };
 
-  const changeCategory = (itemId: string, container: string) => {
-    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
-  };
-
   const handleDrop = (container: string) => {
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    
+    if (draggedItem && draggedItem.container !== container) {
+      dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
+    }
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    changeCategory(state.dragData.id, container);
+
+    setIsDragging(false);
     if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
+    e.stopPropagation();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);
   };
 
+  // Include direction in contextValue only if type is 'line'
   const contextValue = useMemo(() => ({
     items: state.items,
     dragData: state.dragData,
     isDragging: state.isDragging,
     activeContainer: state.activeContainer,
+    dropZone: dropZoneType,
+    dropZoneColor,
+    // Only include direction when type is 'line'
+    ...(dropZoneType === 'line' ? { direction: dropZoneDirection } : {}),
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

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

@@ -1,31 +1,38 @@
 export interface ItemType {
-    id: string;
-    container: string;
-    [key: string]: any;
-  }
-  
-  export interface InitialStateType {
-    items: ItemType[];
-    dragData: { id: string; initialGroup: string };
-    isDragging: string;
-    activeContainer: string;
+  id: string;
+  container: string;
+  [key: string]: any;
+}
+
+export interface InitialStateType {
+  items: ItemType[];
+  dragData: { id: string; initialGroup: string };
+  isDragging: string;
+  activeContainer: string;
+}
+
+export type ActionType =
+  | { type: 'SET_ITEMS'; payload: ItemType[] }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_IS_DRAGGING'; payload: string }
+  | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+
+  export interface DropZoneConfig {
+    type?: 'ghost' | 'outline' | 'shadow' | 'line';
+    color?: 'primary' | 'neutral' | 'purple';
+    direction?: 'horizontal' | 'vertical';
   }
-  
-  export type ActionType =
-    | { type: 'SET_ITEMS'; payload: ItemType[] }
-    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
-    | { type: 'SET_IS_DRAGGING'; payload: string }
-    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
-    export interface DraggableProviderType {
-      children: React.ReactNode;
-      initialItems: ItemType[];
-      onReorder: (items: ItemType[]) => void;
-      onDragStart?: (id: string, container: string) => void; 
-      onDragEnter?: (id: string, container: string) => void;
-      onDragEnd?: () => void; 
-      onDrop?: (container: string) => void; 
-      onDragOver?: (e: Event, container: string) => void;
-    }
+  export interface DraggableProviderType {
+    children: React.ReactNode;
+    initialItems: ItemType[];
+    onReorder: (items: ItemType[]) => void;
+    onDragStart?: (id: string, container: string) => void;
+    onDragEnter?: (id: string, container: string) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => void;
+    onDragOver?: (e: Event, container: string) => void;
+    dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
+  }

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

@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+// Initial items to be dragged
+const dataShadow = [
+  {
+    id: "51",
+    text: "Task 1",
+  },
+  {
+    id: "52",
+    text: "Task 2",
+  },
+  {
+    id: "53",
+    text: "Task 3",
+  },
+];
+
+const dataOutline = [
+  {
+    id: "61",
+    text: "Task 1",
+  },
+  {
+    id: "62",
+    text: "Task 2",
+  },
+  {
+    id: "63",
+    text: "Task 3",
+  },
+];
+
+const dataLine = [
+  {
+    id: "71",
+    text: "Task 1",
+  },
+  {
+    id: "72",
+    text: "Task 2",
+  },
+  {
+    id: "73",
+    text: "Task 3",
+  },
+];
+
+const DraggableDropZones = (props) => {
+  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
+  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
+  const [initialLineState, setInitialLineState] = useState(dataLine);
+
+  return (
+    <>
+    <Flex justify="between"
+        {...props}
+    >
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "shadow"}}
+            initialItems={dataShadow}
+            onReorder={(items) => setInitialShadowState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Shadow"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialShadowState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "outline"}}
+            initialItems={dataOutline}
+            onReorder={(items) => setInitialOutlineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Outline"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialOutlineState.map(({ id, text }) => (
+              <Card
+                  dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem>
+        <DraggableProvider
+            dropZone={{type: "line"}}
+            initialItems={dataLine}
+            onReorder={(items) => setInitialLineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Line"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialLineState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
+    </>
+  );
+};
+
+export default DraggableDropZones;

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

@@ -0,0 +1,5 @@
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
+
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
+
+Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.

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

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+// Initial items to be dragged
+const dataPrimary = [
+  {
+    id: "81",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "82",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "83",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const dataPurple = [
+  {
+    id: "91",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "92",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "93",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+
+const DraggableDropZonesColors = (props) => {
+  const [initialPrimaryState, setInitialPrimaryState] = useState(dataPrimary);
+  const [initialPurpleState, setInitialPurpleState] = useState(dataPurple);
+
+  return (
+    <>
+    <Caption marginBottom="xs">
+      Primary
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "shadow", color: "primary"}}
+        initialItems={dataPrimary}
+        onReorder={(items) => setInitialPrimaryState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPrimaryState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    <Caption marginBottom="xs">
+      Purple
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "outline", color: "purple"}}
+        initialItems={dataPurple}
+        onReorder={(items) => setInitialPurpleState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPurpleState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+  );
+};
+
+export default DraggableDropZonesColors;

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

@@ -0,0 +1 @@
+By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -165,7 +165,7 @@ test("generated dragHandle with List", () => {
 
   const list = kit.querySelector(".pb_list_kit");
   expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = list.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -175,7 +175,7 @@ test("generated dragHandle with SelectableList", () => {
 
   const selectabellist = kit.querySelector(".pb_selectable_list_kit");
   expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = selectabellist.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -185,6 +185,6 @@ test("generated dragHandle with Card", () => {
 
   const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -22,18 +22,27 @@ type DraggableContainerProps = {
 
 const DraggableContainer = (props: DraggableContainerProps) => {
   const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
+  const contextValues = DraggableContext();
+  const {
+    handleDragOver,
+    handleDrop,
+    activeContainer,
+    dropZone
+  } = contextValues;
 
-  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+  // Only get direction if dropZone is 'line'
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
   const Tag: React.ReactElement | any = `${tag}`;
 
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
+    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
+    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );