playbook_ui 15.6.0.pre.rc.0 → 15.6.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2851c07d23768f59137cd7cb0ba34884e25960c1bc8700573a62c3aaa1004f83
-  data.tar.gz: 74e6d86e0807f31e01ece7b7f3d620cea86367dfee7150493273543fb1ed682d
+  metadata.gz: 4c8379c2539757c4db1dcf2ed5c4a7562899728174921420d2e937f35a03f87d
+  data.tar.gz: 8bb8fd5264d9773fb4acecf09edca3c439945444c4e77c17e5a1745723c56fab
 SHA512:
-  metadata.gz: a38283f21f3c2b2f2bb7132f27f6cf8fc161cd9f1fd3476f4521df857859c15960bd1e5b82857839d214b8c531adcf0082834eb6daf6a0fbc3df1ffb93b26d08
-  data.tar.gz: 3e9aff80d60e0f20a4ce59810a631d167798f0abe3a3d54962b0ba66c9d9267dfc1bbcddbb3d9b6a03c66d3467cf1c6f0be574254344773b04b47359fc90a564
+  metadata.gz: 4b72606b5b4b030ff3da899075efbb2215b864a6f9c8286de288ee86bc0084185aac17a7e12446c92f93899498c685df5876549e40f7be3b8210726479a656d6
+  data.tar.gz: ea1c0cee0bed7a7144fed0c139a754b2b8487b61e771d8b841f6d92723b7c1f2dff97a7e49177506c3cd55d9ef64aa2d8884f22481d002e518d954f0136c501b

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -29,167 +29,5 @@
       label: "Graduated Students",
     }
 ] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<% column_definitions_two = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        accessor: "newEnrollments",
-        label: "New Enrollments",
-      },
-      {
-        accessor: "scheduledMeetings",
-        label: "Scheduled Meetings",
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        accessor: "attendanceRate",
-        label: "Attendance Rate",
-      },
-      {
-        accessor: "completedClasses",
-        label: "Completed Classes",
-      },
-      {
-        accessor: "classCompletionRate",
-        label: "Class Completion Rate",
-      },
-      {
-        accessor: "graduatedStudents",
-        label: "Graduated Students",
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
-
-<% column_definitions_three = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
-<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
-
-<% column_definitions_four = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
-<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -41,203 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const columnDefinitionsTwo = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          accessor: "newEnrollments",
-          label: "New Enrollments",
-        },
-        {
-          accessor: "scheduledMeetings",
-          label: "Scheduled Meetings",
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          accessor: "attendanceRate",
-          label: "Attendance Rate",
-        },
-        {
-          accessor: "completedClasses",
-          label: "Completed Classes",
-        },
-        {
-          accessor: "classCompletionRate",
-          label: "Class Completion Rate",
-        },
-        {
-          accessor: "graduatedStudents",
-          label: "Graduated Students",
-        },
-      ],
-    },
-  ];
-
-  const tablePropsTwo = {
-    verticalBorder: true,
-  }
-
-  const columnDefinitionsThree = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  const tablePropsThree = {
-    verticalBorder: true
-  }
-
-  const columnDefinitionsFour = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
   return (
     <div>
-      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption text="Advanced Table Vertical Border Multi Header" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsTwo}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsTwo}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsThree}
-          columnGroupBorderColor="text_lt_default"
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={tablePropsThree}
-          {...props}
-      />
-      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitionsFour}
-          tableData={MOCK_DATA}
-          {...props}
-      />
     </div>
   )
 }

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

@@ -39,6 +39,59 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
+
+    // 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);
+
+      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 };
+    }
+
+    // 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);
+
+      if (!draggedItem) return state;
+
+      const draggedIndex = newItems.indexOf(draggedItem);
+      if (draggedIndex === -1) return state;
+
+      const updatedItem = { ...draggedItem, container: newContainer };
+
+      // Remove from current position
+      newItems.splice(draggedIndex, 1);
+
+      // Insert at end of target container
+      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;
   }
@@ -61,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);
 
@@ -103,17 +158,74 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     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, originId: providerId } });
+      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 {
+        // 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}});
     }
     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) onDragEnd();
+    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) => {
@@ -123,10 +235,34 @@ export const DraggableProvider = ({
   const handleDrop = (container: string) => {
     if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
 
+    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) onDrop(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
+        );
+      }
+    }
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -134,6 +270,20 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+
+    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);
   };
 
@@ -157,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,8 +18,12 @@ 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'; 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 } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -33,9 +37,10 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: () => void;
-    onDrop?: (container: string) => 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;
   }