[PB-3458]: fix/drag and drop issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
@@ -18,7 +18,9 @@
   ],
   "peerDependencies": {
     "react": "^18.2.0",
-    "@phosphor-icons/react": "^2.1.5"
+    "@phosphor-icons/react": "^2.1.5",
+    "react-dnd": "14.0.5",
+    "react-dnd-html5-backend": "^14.0.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -2,8 +2,8 @@ import { CaretRight, DotsThree } from '@phosphor-icons/react';
 import { forwardRef, FunctionComponent, ReactNode, SVGProps } from 'react';
 import { Dispatch } from 'redux';
 import Dropdown from '../dropdown/Dropdown';
-import { DropTargetMonitor } from 'react-dnd';
 import BreadcrumbsItem, { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';
+import { useDrop } from 'react-dnd';
 
 export interface BreadcrumbsProps<T extends Dispatch> {
   items: BreadcrumbItemData[];
@@ -24,13 +24,12 @@ export interface BreadcrumbsProps<T extends Dispatch> {
     isSomeItemSelected: boolean,
     selectedItems: [],
     dispatch: T,
-  ) => (draggedItem: unknown, monitor: DropTargetMonitor) => Promise<void>;
-  canItemDrop: (
-    item: BreadcrumbItemData,
-  ) => (draggedItem: unknown, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
+  ) => (draggedItem: unknown, monitor: unknown) => Promise<void>;
+  canItemDrop: (item: BreadcrumbItemData) => (draggedItem: unknown, monitor: unknown) => boolean;
   itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
   acceptedTypes: string[];
   dispatch: T;
+  useDrop: typeof useDrop;
 }
 
 /**
@@ -70,6 +69,9 @@ export interface BreadcrumbsProps<T extends Dispatch> {
  *
  * @property {Dispatch} dispatch
  * - The Redux dispatch function for dispatching actions related to the breadcrumb items.
+ *
+ * @property {Functiodn} useDrop
+ * - Hook for dnd.
  */
 
 const Breadcrumbs = <T extends Dispatch>(props: Readonly<BreadcrumbsProps<T>>): JSX.Element => {
@@ -120,6 +122,7 @@ const Breadcrumbs = <T extends Dispatch>(props: Readonly<BreadcrumbsProps<T>>):
               itemComponent={props.itemComponent}
               acceptedTypes={props.acceptedTypes}
               dispatch={props.dispatch}
+              useDrop={props.useDrop}
             />
           </MenuItem>,
         );
@@ -139,6 +142,7 @@ const Breadcrumbs = <T extends Dispatch>(props: Readonly<BreadcrumbsProps<T>>):
             canItemDrop={props.canItemDrop}
             acceptedTypes={props.acceptedTypes}
             dispatch={props.dispatch}
+            useDrop={props.useDrop}
           />,
         );
         if (i < items.length - 1) {

src/components/breadcrumbs/BreadcrumbsItem.tsx

@@ -63,6 +63,8 @@ export interface BreadcrumbsMenuProps {
  *
  * @property {Dispatch} dispatch
  * - The Redux dispatch function for dispatching actions related to the breadcrumb item.
+ * @property {Functiodn} useDrop
+ * - Hook for dnd.
  */
 
 export interface BreadcrumbsItemProps<T extends Dispatch> {
@@ -94,10 +96,11 @@ export interface BreadcrumbsItemProps<T extends Dispatch> {
   itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
   acceptedTypes: string[];
   dispatch: T;
+  useDrop: typeof useDrop;
 }
 
 const BreadcrumbsItem = <T extends Dispatch>(props: BreadcrumbsItemProps<T>): JSX.Element => {
-  const [{ isOver, canDrop }, drop] = useDrop(
+  const [{ isOver, canDrop }, drop] = props.useDrop(
     () => ({
       accept: props.acceptedTypes,
       collect: (monitor) => ({

src/components/breadcrumbs/__test__/Breadcrumbs.test.tsx

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Breadcrumbs, BreadcrumbsProps } from '../';
 import { Dispatch, AnyAction } from 'redux';
-import { DndProvider } from 'react-dnd';
+import { DndProvider, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 describe('Breadcrumbs Component', () => {
@@ -48,6 +48,7 @@ describe('Breadcrumbs Component', () => {
     itemComponent: undefined,
     acceptedTypes: ['type1', 'type2'],
     dispatch: vi.fn(),
+    useDrop,
   };
 
   afterEach(() => {

src/components/breadcrumbs/__test__/BreadcrumbsItem.test.tsx

@@ -35,6 +35,7 @@ describe('BreadcrumbsItem Component', () => {
     onItemDropped: onItemDroppedMock,
     dispatch: dispatchMock,
     acceptedTypes: ['ITEM_TYPE'],
+    useDrop: mockedUseDrop,
   };
 
   const renderBreadcrumbsItem = (props = {}) => render(<BreadcrumbsItem {...defaultProps} {...props} />);

src/components/breadcrumbs/index.ts

@@ -1,2 +1,3 @@
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
+export type { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';

src/stories/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Breadcrumbs, BreadcrumbsProps } from '@/components/breadcrumbs';
 import { BreadcrumbItemData, BreadcrumbsMenuProps } from '@/components/breadcrumbs/BreadcrumbsItem';
 import { Dispatch } from 'redux';
-import { DndProvider } from 'react-dnd';
+import { DndProvider, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import React, { useEffect, useRef, useState } from 'react';
 import { CaretDown } from '@phosphor-icons/react';
@@ -97,6 +97,7 @@ const defaultBreadcrumbsProps: BreadcrumbsProps<Dispatch> = {
   acceptedTypes: ['breadcrumb'],
   dispatch: {} as Dispatch,
   itemComponent: () => <ExampleIconBlue />,
+  useDrop: useDrop,
 };
 
 const meta: Meta<typeof Breadcrumbs> = {