use forked dnd library

README.md

@@ -1,4 +1,4 @@
-![Version](https://img.shields.io/badge/version-4.1-blue)
+![Version](https://img.shields.io/badge/version-4.1.1-blue)
 ![Run Tests](https://github.com/jekrch/eurovision-ranker/actions/workflows/test_on_push.yml/badge.svg)
 
 # Eurovision Ranker :yellow_heart:

package.json

@@ -8,16 +8,15 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.1.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@reduxjs/toolkit": "^2.2.6",
     "@types/react": "^18.3.3",
-    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "classnames": "^2.5.1",
     "npm": "^10.8.1",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.0",
     "react-fontawesome": "^1.7.1",
     "react-hot-toast": "^2.4.1",

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { DragDropContext, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, DropResult } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { CountryContestant } from './data/CountryContestant';
 import MainModal from './components/modals/MainModal';

src/components/modals/MainModal.tsx

@@ -88,7 +88,7 @@ const MainModal: React.FC<MainModalProps> = (props: MainModalProps) => {
                         target="_blank"
                         rel="noopener noreferrer"
                         href="https://github.com/jekrch/eurovision-ranker/releases"
-                    >v4.1</a>
+                    >v4.1.1</a>
                 </span>
                 <span className="text-right">
                     {`Copyright (c) 2023${new Date().getFullYear()?.toString() !== '2023' ? '-' + new Date().getFullYear() : ''} `}

src/components/ranking/RankedCountriesList.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { StrictModeDroppable } from './StrictModeDroppable';
 import classNames from 'classnames';
 import { CountryContestant } from '../../data/CountryContestant';
@@ -16,6 +15,7 @@ import { updateUrlFromRankedItems } from '../../utilities/UrlUtil';
 import { IntroColumnWrapper } from './IntroColumnWrapper';
 import { useAppDispatch, useAppSelector } from '../../utilities/hooks';
 import { deleteRankedCountry } from '../../redux/rankingActions';
+import { Draggable } from '@hello-pangea/dnd';
 
 interface RankedCountriesListProps {
     openSongModal: (countryContestant: CountryContestant) => void;
@@ -82,7 +82,7 @@ const RankedCountriesList: React.FC<RankedCountriesListProps> = ({
     return (
         <div className="tour-step-5 z-20">
             <StrictModeDroppable droppableId="rankedItems">
-                {(provided) => (
+                {(provided: any) => (
                     <div
                         className={classNames(
                             "grid h-full max-h-full min-h-full grid-rows-[auto_1fr]"
@@ -144,7 +144,7 @@ const RankedCountriesList: React.FC<RankedCountriesListProps> = ({
                                         index={index}
                                         isDragDisabled={showTotalRank}
                                     >
-                                        {(provided, snapshot) => (
+                                        {(provided: any, snapshot: any) => (
                                             <li
                                                 key={`li-${countryContestant.id.toString()}`}
                                                 ref={provided.innerRef}

src/components/ranking/RankedHeaderMenu.tsx

@@ -26,7 +26,7 @@ const RankedHeaderMenu: React.FC<RankedHeaderMenuProps> = (props: RankedHeaderMe
   const globalMenuOpenTrigger = useAppSelector((state: AppState) => state.headerMenuOpen);
   const dispatch: AppDispatch = useAppDispatch();
   const CLOSING_DURATION = 300;
-
+  const menuNodeRef = useRef(null);
   const toggleMenu = () => {
   const shouldClose = isMenuOpen;
   setIsMenuOpen(!isMenuOpen);
@@ -103,7 +103,13 @@ const RankedHeaderMenu: React.FC<RankedHeaderMenuProps> = (props: RankedHeaderMe
           icon={faEllipsisH} 
         />
       </button>
-      <CSSTransition in={isMenuOpen} timeout={200} classNames="menu" unmountOnExit>
+      <CSSTransition 
+        in={isMenuOpen} 
+        timeout={200} 
+        classNames="menu"
+        nodeRef={menuNodeRef} 
+        unmountOnExit
+      >
         <ul
           role="menu"
           className="absolute z-20 min-w-[180px] right-0 mt-1 shadow-lg shadow-blue-gray-500/10 rounded-sm border border-slate-500 overflow-auto flex flex-col"

src/components/ranking/StrictModeDroppable.tsx

@@ -1,5 +1,5 @@
+import { Droppable, DroppableProps } from "@hello-pangea/dnd";
 import { useEffect, useState } from "react";
-import { Droppable, DroppableProps } from "react-beautiful-dnd";
 
 export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
   const [enabled, setEnabled] = useState(false);

src/components/ranking/UnrankedCountriesList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
 import { StrictModeDroppable } from './StrictModeDroppable';
 import classNames from 'classnames';
 import { Card } from './Card';
 import { AppState } from '../../redux/store';
 import { useAppSelector } from '../../utilities/hooks';
+import { Draggable } from '@hello-pangea/dnd';
 
 /**
  * Displays all ranked countries in the left column list on the select view