playbook_ui 14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8633 → 14.22.0.pre.alpha.PLAY22578709

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50940c977e833de1ec35e25c6269e332057fc06778dd67d44d2e59ab4ddd799e
-  data.tar.gz: def4a38171d0f1a0a97bcf80ddb277491d34b5661bcdb2d83b5f7c53c7bc9497
+  metadata.gz: ee237263c36fb6a79f0ab854b478c11dd52c0c36d7656bc442ff647b27831c45
+  data.tar.gz: d957832e4ab49ccaafa61a17e6e850682d9c96ec164e32ca46b3266638ddd024
 SHA512:
-  metadata.gz: 492530c127fd34e4edaf65b5afea93df1c41ebe96fd62aaffc2d398ba788cd88d6703175c406c62c6e9bd024f0bdf45f7a2b5ade54e44691a86c63c01556562f
-  data.tar.gz: dba59d34834a6c95d44fa1253641a2d29eccc7762abe866903f30948a04260fce9bf4393e5c4f013cf4ac58252210ac40606c436be76208d2eef2db4e119573c
+  metadata.gz: 4e1f0a36db1c3fa7e9c136ed3e5f6bcd95e691e5617e4bc03a79fe96e3e6b356d64990396301cf87ebfcfef946515ed4e7e1336b970ee9d06f86a5fd490e50eb
+  data.tar.gz: bfd00edc136aa357808e6afc06022818c225deffaa1d912ebc1d1d98bb8d2064e937d950a3b7578c917889176dcd392be9877b666d48eaf7f3bfe1b2cac0d7a4

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -66,7 +66,7 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = loading ? { top: [] } : (pinnedRows?.value ?? localRowPinning);
+  const rowPinning = pinnedRows?.value ?? localRowPinning
   const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
 
   // Virtualized data handling (chunked loading)
@@ -180,89 +180,25 @@ export function useTableState({
     ...tableOptions,
   });
 
-  // Create a stable hash of the data to detect changes
-  const dataHash = useMemo(() => {
-    if (loading) return '';
-    const currentData = virtualizedRows ? dataChunk : tableData;
-    return currentData.map(row => row.id).join(',');
-  }, [tableData, dataChunk, virtualizedRows, loading]);
-  
-  const [prevDataHash, setPrevDataHash] = useState(dataHash);
-
-  // Synchronously clear pins when data changes to prevent table errors
-  if (!loading && dataHash !== prevDataHash) {
-    setPrevDataHash(dataHash);
-    
-    const currentPins = pinnedRows?.value?.top ?? [];
-    if (currentPins.length > 0) {
-      try {
-        const currentData = virtualizedRows ? dataChunk : tableData;
-        const validPins = currentPins.filter(id => 
-          currentData.some(row => row.id === id)
-        );
-        
-        if (validPins.length !== currentPins.length) {
-          onRowPinningChange({ top: validPins });
-        }
-      } catch (error) {
-        console.warn('Error validating pins on data change, clearing pins:', error);
-        onRowPinningChange({ top: [] });
-      }
-    }
-  }
-
   // Handle row pinning changes
-  useEffect(() => {
-    if (loading) return;
-    
+    useEffect(() => {
     const topPins = pinnedRows?.value?.top ?? [];
     if (topPins.length === 0) {
       onRowPinningChange({ top: [] });
       return;
     }
-
-    try {
-      const rows = table.getRowModel().rows;
-      
-      const validPinnedIds = topPins.filter(id => {
-        try {
-          return rows.some(row => row.id === id && row.depth === 0);
-        } catch (error) {
-          console.warn(`Pinned row with id ${id} not found in current dataset`);
-          return false;
-        }
-      });
-  
-      if (validPinnedIds.length === 0) {
-        onRowPinningChange({ top: [] });
-        return;
-      }
-
-      const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
-        subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-
-      const allPinned: string[] = [];
-
-      validPinnedIds.forEach(id => {
-        const parent = rows.find(r => r.id === id && r.depth === 0);
-        if (parent) {
-          allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-        }
-      });
-
-      const currentPins = pinnedRows?.value?.top ?? [];
-      const pinsChanged = allPinned.length !== currentPins.length || 
-                        !allPinned.every(id => currentPins.includes(id));
- 
-      if (pinsChanged) {
-        onRowPinningChange({ top: allPinned });
+    const rows = table.getRowModel().rows;
+    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
+      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
+    const allPinned: string[] = [];
+    topPins.forEach(id => {
+      const parent = rows.find(r => r.id === id && r.depth === 0);
+      if (parent) {
+        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
       }
-
-    } catch (error) {
-      console.error('Error in pinned rows logic:', error);
-      onRowPinningChange({ top: [] });
-    }
-  }, [table, pinnedRows?.value?.top?.join(','), loading]);
+    });
+    onRowPinningChange({ top: allPinned });
+  }, [table, pinnedRows?.value?.top?.join(',')]);
 
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);

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

@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
-  dragData: { id: "", initialGroup: "" },
+  dragData: { id: "", initialGroup: "", originId: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,7 +60,8 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -93,15 +94,17 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: 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: string, container: string) => {
+    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 } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -109,6 +112,7 @@ export const DraggableProvider = ({
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     if (onDragEnd) onDragEnd();
   };
 
@@ -117,6 +121,8 @@ export const DraggableProvider = ({
   };
 
   const handleDrop = (container: string) => {
+    if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
@@ -124,6 +130,8 @@ export const DraggableProvider = ({
   };
 
   const handleDragOver = (e: Event, container: string) => {
+     if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
+
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);

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

@@ -6,14 +6,16 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string };
+  dragData: { id: string; initialGroup: string, originId?: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_DRAG_DATA'; payload: {
+    originId: string; id: string; initialGroup: string 
+} }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -35,4 +37,5 @@ export type ActionType =
     onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
+    providerId?: string;
   }

data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-BZsshVoi.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{g as getDefaultExportFromCjs,v as filter,w as omit,s as noop$2,u as useCollapsible,x as createPopper,y as uniqueId,z as get,A as flip$2,B as offset$2,C as shift$2,E as arrow$3,F as computePosition$1,G as createCoords$1,H as round$1,I as max$1,J as min$1,K as rectToClientRect$1,k as getAllIcons,t as colors$1,L as highchartsTheme,M as merge,N as highchartsDarkTheme,O as getAugmentedNamespace,Q as typography,S as cloneDeep,n as isEmpty$1,T as isString}from"./lib-Carqm8Ip.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},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}}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"}})=>{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}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{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(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload: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:{}};
+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{g as getDefaultExportFromCjs,v as filter,w as omit,s as noop$2,u as useCollapsible,x as createPopper,y as uniqueId,z as get,A as flip$2,B as offset$2,C as shift$2,E as arrow$3,F as computePosition$1,G as createCoords$1,H as round$1,I as max$1,J as min$1,K as rectToClientRect$1,k as getAllIcons,t as colors$1,L as highchartsTheme,M as merge,N as highchartsDarkTheme,O as getAugmentedNamespace,Q as typography,S as cloneDeep,n as isEmpty$1,T as isString}from"./lib-Carqm8Ip.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";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}}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)=>{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){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=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload: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