playbook_ui 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -9,12 +9,182 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
+  updateTableSelectedRowsAttribute() {
+    const mainTable = this.element.closest(".pb_advanced_table");
+    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
+  }
+
+  // Check if the row is expanded or collapsed
+  // This is used to determine the background color of the row
+  // when the checkbox is checked or unchecked
+  isRowExpanded(rowEl) {
+    const closeIcon = rowEl.querySelector(UP_ARROW_SELECTOR);
+    return closeIcon?.style.display === "none" || !closeIcon;
+  }
+
+  updateParentCheckboxes(checkbox) {
+    const rowEl = checkbox.closest("tr");
+    if (!rowEl) return;
+
+    const table = rowEl.closest("table");
+    if (!table) return;
+
+    const contentTrail = rowEl.dataset.advancedTableContent;
+    if (!contentTrail) return;
+
+    const ancestorIds = contentTrail.split("-").slice(0, -1);
+
+    ancestorIds.reverse();
+    ancestorIds.forEach((ancestorId) => {
+      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
+      const parentRow = table.querySelector(parentRowSelector);
+      if (!parentRow) return;
+
+      const parentLabel = parentRow.querySelector("label[data-row-id]");
+      if (!parentLabel) return;
+
+      const parentCheckbox = parentLabel.querySelector(
+        "input[type='checkbox']"
+      );
+      if (!parentCheckbox) return;
+
+      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
+      const children = Array.from(
+        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
+      ).filter((child) => {
+        const content = child.dataset.advancedTableContent;
+        return !(content && content.endsWith("sr"));
+      });
+
+      const allChildrenChecked = Array.from(children).every((child) => {
+        const childLabel = child.querySelector("label[data-row-id]");
+        if (!childLabel) return false;
+        const childCheckbox = childLabel.querySelector(
+          "input[type='checkbox']"
+        );
+        if (!childCheckbox) return false;
+        return childCheckbox.checked;
+      });
+
+      // Update parent checkbox
+      parentCheckbox.checked = allChildrenChecked;
+
+      const parentCheckboxId = parentCheckbox.id;
+      if (allChildrenChecked) {
+        PbAdvancedTable.selectedRows.add(parentCheckboxId);
+        parentRow.classList.add("bg-row-selection");
+        parentRow.classList.remove("bg-white", "bg-silver");
+      } else {
+        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
+      }
+      if (!allChildrenChecked) {
+        parentRow.classList.remove("bg-row-selection");
+  
+        if (this.isRowExpanded(parentRow)) {
+          parentRow.classList.remove("bg-silver");
+          parentRow.classList.add("bg-white");
+        } else {
+          parentRow.classList.remove("bg-white");
+          parentRow.classList.add("bg-silver");
+        }
+      }
+    });
+  }
+
+  handleCheckboxClick(event) {
+    const checkbox = event.currentTarget;
+    const rowId = checkbox.id;
+    const isChecked = checkbox.checked;
+    const rowEl = checkbox.closest("tr");
+
+    if (isChecked) {
+      PbAdvancedTable.selectedRows.add(rowId);
+      rowEl.classList.add("bg-row-selection");
+      rowEl.classList.remove("bg-white", "bg-silver");
+    } else {
+      PbAdvancedTable.selectedRows.delete(rowId);
+    }
+     // Update background color on row
+    if (!isChecked) {
+      rowEl.classList.remove("bg-row-selection");
+
+      if (this.isRowExpanded(rowEl)) {
+        rowEl.classList.remove("bg-silver");
+        rowEl.classList.add("bg-white");
+      } else {
+        rowEl.classList.remove("bg-white");
+        rowEl.classList.add("bg-silver");
+      }
+    }
+    if (rowEl) {
+      const table = rowEl.closest("table");
+      const rowContent = rowEl.dataset.advancedTableContent;
+
+      if (rowContent) {
+        const childRows = table.querySelectorAll(
+          `[data-advanced-table-content^="${rowContent}-"]`
+        );
+
+        childRows.forEach((childRow) => {
+          const label = childRow.querySelector("label[data-row-id]");
+          if (!label) return;
+
+          const childCheckbox = label.querySelector("input[type='checkbox']");
+          if (!childCheckbox) return;
+
+          childCheckbox.checked = isChecked;
+
+          const childRowId = childCheckbox.id;
+          const childRowEl = childCheckbox.closest("tr");
+          if (isChecked) {
+            PbAdvancedTable.selectedRows.add(childRowId);
+            childRowEl?.classList.add("bg-row-selection");
+            childRowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(childRowId);
+          }
+          if (!isChecked) {
+            childRowEl?.classList.remove("bg-row-selection");
+
+            if (this.isRowExpanded(childRowEl)) {
+              childRowEl?.classList.remove("bg-silver");
+              childRowEl?.classList.add("bg-white");
+            } else {
+              childRowEl?.classList.remove("bg-white");
+              childRowEl?.classList.add("bg-silver");
+            }
+          }
+        });
+      }
+    }
+
+    this.updateParentCheckboxes(checkbox);
+
+    this.updateTableSelectedRowsAttribute();
+
+    const table = checkbox.closest("table");
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+
+    if (selectAllCheckbox) {
+      const allCheckboxes = table.querySelectorAll(
+        "label[data-row-id] input[type='checkbox']"
+      );
+      const allChecked = Array.from(allCheckboxes).every((cb) => cb.checked);
+
+      const selectAllInput = selectAllCheckbox.querySelector(
+        'input[type="checkbox"]'
+      );
+      selectAllInput.checked = allChecked;
+    }
+  }
+
   get target() {
     const table = this.element.closest("table");
     return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
 
   static expandedRows = new Set();
+  static selectedRows = new Set();
   static isCollapsing = false;
 
   connect() {
@@ -31,17 +201,31 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
-    
-    this.hideCloseIcon()
-
-    const nestedButtons = this.element
-      .closest("table")
-      .querySelectorAll("[data-advanced-table]");
+  
+    this.hideCloseIcon();
+  
+    const table = this.element.closest("table");
+  
+    // Prevent duplicate initialization
+    if (table.dataset.pbAdvancedTableInitialized) return;
+    table.dataset.pbAdvancedTableInitialized = "true";
+  
+    // Bind checkbox change handlers for all row checkboxes
+    const checkboxLabels = table.querySelectorAll("label[data-row-id]");
+    checkboxLabels.forEach((label) => {
+      const checkbox = label.querySelector("input[type='checkbox']");
+      if (!checkbox) return;
+      checkbox.addEventListener("change", (event) => {
+        this.handleCheckboxClick(event);
+      });
+    });
+  
+    // Bind nested row expansion logic
+    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
     nestedButtons.forEach((button) => {
       button.addEventListener("click", () => {
         const isExpanded =
-          button.querySelector(UP_ARROW_SELECTOR).style.display ===
-          "inline-block";
+          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
         if (isExpanded) {
           PbAdvancedTable.expandedRows.add(button.id);
         } else {
@@ -49,12 +233,46 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         }
       });
     });
+  
+    // Bind select-all logic for this table
+    const selectAllCheckbox = table.querySelector("#select-all-rows");
+    if (selectAllCheckbox) {
+      selectAllCheckbox.addEventListener("change", () => {
+        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
+        const checkAll = checkboxInput.checked;
+  
+        const checkboxes = Array.from(
+          table.querySelectorAll("label[data-row-id] input[type='checkbox']")
+        );
+  
+        checkboxes.forEach((cb) => {
+          cb.checked = checkAll;
+          const rowId = cb.id;
+          const rowEl = cb.closest("tr");
+
+          if (checkAll) {
+            PbAdvancedTable.selectedRows.add(rowId);
+            rowEl?.classList.add("bg-row-selection");
+            rowEl?.classList.remove("bg-white", "bg-silver");
+          } else {
+            PbAdvancedTable.selectedRows.delete(rowId);
+            rowEl?.classList.remove("bg-row-selection");
+            rowEl?.classList.add("bg-white");
+          }
+        });
+  
+        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
+  
+        this.updateTableSelectedRowsAttribute();
+      });
+    }
   }
+  
 
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
-}
+  }
 
   showElement(elements) {
     elements.forEach((elem) => {
@@ -151,7 +369,6 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     }
   }
 
-
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";
@@ -238,4 +455,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,6 +77,7 @@
     top: 0;
     left: 0;
     border-radius: unset;
+    z-index: 5;
   }
 
   .checkbox-cell {

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -55,7 +55,15 @@ module Playbook
         # Subrow header if applicable
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
+        current_data_attributes = if current_depth.zero?
+                                    {
+                                      row_depth: 0,
+                                      advanced_table_content: row.object_id.to_s,
+                                      row_parent: nil,
+                                    }
+                                  else
+                                    table_data_attributes
+                                  end
 
         # Additional class and data attributes needed for toggle logic
         output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -54,9 +54,6 @@ module Playbook
             pb_rails("checkbox", props: {
                        id: "select-all-rows",
                        name: "select-all-rows",
-                       data: {
-                         action: "click->pb-advanced-table#toggleAllRowSelection",
-                       },
                      })
           end
         end

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -60,7 +60,7 @@ module Playbook
                        name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
-                         action: "click->pb-advanced-table#toggleRowSelection",
+                         flat_advanced_table_select: true,
                        },
                      })
           end
@@ -75,7 +75,6 @@ module Playbook
                      name: "select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
-                       action: "click->pb-advanced-table#toggleRowSelection",
                      },
                    })
         end

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -82,6 +82,10 @@ $avatar-sizes: (
           object-fit: cover;
           display: block;
         }
+
+        .grayscale {
+          filter: grayscale(1);
+        }
       }
     }
   }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -25,6 +25,7 @@ export type AvatarProps = {
   },
   dark?: boolean,
   data?: {[key: string]: string},
+  grayscale?:  boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -47,6 +48,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     htmlOptions = {},
     name = undefined,
     componentOverlay,
+    grayscale = false,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -155,6 +157,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             {canShowImage && (
               <Image
                   alt={imageAlt ? imageAlt : name}
+                  className={grayscale ? "grayscale" : ""}
                   onError={handleError}
                   url={imageUrl}
               />

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -3,7 +3,7 @@
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
     <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-        <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+        <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error, classname: object.grayscale ? "grayscale" : "" }) if object.image_url.present? %>
       <% end %>
       <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
@@ -13,7 +13,7 @@
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
   <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error, classname: object.grayscale ? "grayscale" : "" }) if object.image_url.present? %>
     <% end %>
     <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
     <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
@@ -21,7 +21,7 @@
     <% end %>
   <% else %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error, classname: object.grayscale ? "grayscale" : "" }) if object.image_url.present? %>
     <% end %>
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -15,6 +15,8 @@ module Playbook
                   values: %w[xxs xs sm md base lg xl],
                   default: "md"
       prop :status
+      prop :grayscale, type: Playbook::Props::Boolean,
+                       default: false
 
       def initials
         name.split.map(&:first).join.downcase

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -106,3 +106,21 @@ test('renders with online status', () => {
   const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
   expect(onlineStatus).toBeInTheDocument();
 });
+
+test('renders with grayscale filter', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        grayscale
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  );
+
+  const grayscaleAvatar = screen.getByTestId(testId);
+  expect(grayscaleAvatar).toBeInTheDocument();
+
+  const grayscaleImage = grayscaleAvatar.querySelector('.grayscale')
+  expect(grayscaleImage).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    grayscale: true
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Avatar from '../../pb_avatar/_avatar'
+
+const AvatarGrayscale = (props) => {
+  return (
+    <Avatar
+        grayscale
+        imageAlt="Terry Johnson Standing"
+        imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+        name="Terry Johnson"
+        {...props}
+    />
+  )
+}
+
+export default AvatarGrayscale

data/app/pb_kits/playbook/pb_avatar/docs/example.yml

@@ -6,6 +6,7 @@ examples:
     - avatar_status: Status
     - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
+    - avatar_grayscale: Grayscale
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
@@ -13,6 +14,7 @@ examples:
     - avatar_status: Status
     - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
+    - avatar_grayscale: Grayscale
   swift:
     - avatar_default_swift: Default
     - avatar_monogram_swift: Monogram

data/app/pb_kits/playbook/pb_avatar/docs/index.js

@@ -4,3 +4,4 @@ export { default as AvatarStatus } from './_avatar_status.jsx'
 export { default as AvatarNoImage } from './_avatar_no_image.jsx'
 export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
 export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'
+export { default as AvatarGrayscale } from './_avatar_grayscale.jsx'

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,5 +1,5 @@
 <% if object.draggable_item %>
-    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+    <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id, classname: drop_zone_line_color ? line_color_class : nil}) do %>
         <%= pb_content_tag(object.tag) do %>
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -24,6 +24,9 @@ module Playbook
                          default: true
       prop :items, type: Playbook::Props::Array,
                    default: []
+      prop :drop_zone_line_color, type: Playbook::Props::Enum,
+                                  values: ["primary", "purple", nil],
+                                  default: nil
 
       def classname
         generate_classname("pb_card_kit",
@@ -60,6 +63,15 @@ module Playbook
       def border_radius_class
         border_radius != "md" ? "border_radius_#{border_radius}" : nil
       end
+
+      def line_color_class
+        case drop_zone_line_color
+        when "primary"
+          "drop_zone_color_primary"
+        when "purple"
+          "drop_zone_color_purple"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("date_picker", props: { 
-  error: "Invalid date. Please pick a valid date.",
+<%= pb_rails("date_picker", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

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

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } 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,23 +31,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      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 draggedIndex = newItems.indexOf(draggedItem);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
-      if (draggedIndex === -1 || targetIndex === -1) {
-        return state;
-      }
-
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -62,11 +48,7 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('DraggableContext must be used within a DraggableProvider');
-  }
-  return context;
+  return useContext(DragContext);
 };
 
 export const DraggableProvider = ({
@@ -81,11 +63,7 @@ export const DraggableProvider = ({
   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';
@@ -108,64 +86,45 @@ export const DraggableProvider = ({
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
-    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    if (onReorder) {
-      onReorder(state.items);
-    }
-  }, [state.items, onReorder]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setIsDragging(true);
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: 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 (!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;
+    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: '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 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 } });
-    }
+  const changeCategory = (itemId: string, container: string) => {
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
+  };
 
+  const handleDrop = (container: string) => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-
-    setIsDragging(false);
+    changeCategory(state.dragData.id, container);
     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);
   };
@@ -185,7 +144,7 @@ export const DraggableProvider = ({
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>