Replace "react-beautiful-dnd" with "dnd-kit"

"react-beautiful-dnd" has been deprecated for quite some time
2025-04-18 14:28:06 +02:00
parent 55c4a92b26
commit 213f561fe4
10 changed files with 252 additions and 216 deletions
--- a/package.json
+++ b/package.json
@@ -33,6 +33,9 @@
  },
  "dependencies": {
    "@apollo/client": "3.13.8",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
    "@emotion/cache": "11.14.0",
    "@emotion/react": "11.14.0",
    "@emotion/styled": "11.14.0",
@@ -65,7 +68,6 @@
    "notistack": "3.0.2",
    "p-limit": "6.2.0",
    "react": "18.3.1",
-    "react-beautiful-dnd": "13.1.1",
    "react-dom": "18.3.1",
    "react-hotkeys-hook": "5.0.1",
    "react-i18next": "15.4.1",
--- a/src/lib/dnd-kit/DndKitUtil.ts
+++ b/src/lib/dnd-kit/DndKitUtil.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import {
+    MouseSensor,
+    PointerSensorOptions,
+    Sensor,
+    SensorDescriptor,
+    TouchSensor,
+    useSensor,
+    SensorOptions,
+    useSensors,
+} from '@dnd-kit/core';
+import { AbstractPointerSensorOptions } from '@dnd-kit/core/dist/sensors';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+
+export class DndKitUtil {
+    static getSensorForDevice(): Sensor<PointerSensorOptions> {
+        if (MediaQuery.isTouchDevice()) {
+            return TouchSensor;
+        }
+
+        return MouseSensor;
+    }
+
+    static useSensorsForDevice(options?: AbstractPointerSensorOptions): SensorDescriptor<SensorOptions>[] {
+        return useSensors(
+            useSensor(DndKitUtil.getSensorForDevice(), {
+                ...options,
+                activationConstraint: { distance: 15, ...options?.activationConstraint },
+            }),
+        );
+    }
+}
--- a/src/lib/dnd-kit/DndOverlayItem.tsx
+++ b/src/lib/dnd-kit/DndOverlayItem.tsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { DragOverlay } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+
+export const DndOverlayItem = ({ isActive, children }: { isActive: boolean; children?: ReactNode }) => {
+    if (!isActive) {
+        return null;
+    }
+
+    return <DragOverlay style={{ cursor: 'grabbing' }}>{children}</DragOverlay>;
+};
--- a/src/lib/dnd-kit/DndSortableItem.tsx
+++ b/src/lib/dnd-kit/DndSortableItem.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Box from '@mui/material/Box';
+import { useSortable } from '@dnd-kit/sortable';
+import { ReactNode } from 'react';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+
+export const DndSortableItem = ({
+    id,
+    isDragging = false,
+    children,
+}: {
+    id: UniqueIdentifier;
+    isDragging?: boolean;
+    children: ReactNode;
+}) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+    return (
+        <Box
+            ref={setNodeRef}
+            sx={{
+                transform: CSS.Translate.toString(transform),
+                transition,
+                ...applyStyles(isDragging, {
+                    opacity: 0.25,
+                }),
+            }}
+            {...attributes}
+            {...listeners}
+        >
+            {children}
+        </Box>
+    );
+};
--- a/src/modules/category/components/CategorySettingsCard.tsx
+++ b/src/modules/category/components/CategorySettingsCard.tsx
@@ -7,7 +7,6 @@
 */

 import IconButton from '@mui/material/IconButton';
-import { DraggableProvided } from 'react-beautiful-dnd';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -23,11 +22,9 @@ import { CategoryType } from '@/lib/graphql/generated/graphql.ts';

 export const CategorySettingsCard = ({
    category,
-    provided,
    onEdit,
 }: {
    category: Pick<CategoryType, 'id' | 'name'>;
-    provided: DraggableProvided;
    onEdit: () => void;
 }) => {
    const { t } = useTranslation();
@@ -37,7 +34,7 @@ export const CategorySettingsCard = ({
    };

    return (
-        <Box sx={{ p: 1, pb: 0 }} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+        <Box sx={{ p: 1, pb: 0 }}>
            <Card>
                <CardContent
                    sx={{
--- a/src/modules/category/screens/CategorySettings.tsx
+++ b/src/modules/category/screens/CategorySettings.tsx
@@ -6,8 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useLayoutEffect, useMemo, useState } from 'react';
-import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';
+import { ComponentProps, useLayoutEffect, useMemo, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import Fab from '@mui/material/Fab';
 import AddIcon from '@mui/icons-material/Add';
@@ -21,8 +20,9 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
+import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/modules/core/components/buttons/StyledFab.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
@@ -31,9 +31,12 @@ import { GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables } from
 import { GET_CATEGORIES_SETTINGS } from '@/lib/graphql/queries/CategoryQuery.ts';
 import { CategorySettingsCard } from '@/modules/category/components/CategorySettingsCard.tsx';
 import { CategoryIdInfo } from '@/modules/category/Category.types.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { getErrorMessage, noOp } from '@/lib/HelperFunctions.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { DndSortableItem } from '@/lib/dnd-kit/DndSortableItem.tsx';
+import { DndKitUtil } from '@/lib/dnd-kit/DndKitUtil.ts';
+import { DndOverlayItem } from '@/lib/dnd-kit/DndOverlayItem.tsx';

 export function CategorySettings() {
    const { t } = useTranslation();
@@ -68,6 +71,11 @@ export function CategorySettings() {
    const [reorderCategory, { reset: revertReorder }] = requestManager.useReorderCategory();
    const theme = useTheme();

+    const dndSensors = DndKitUtil.useSensorsForDevice();
+    const [dndActiveCategory, setDndActiveCategory] = useState<
+        ComponentProps<typeof CategorySettingsCard>['category'] | null
+    >(null);
+
    const categoryReorder = (list: CategoryIdInfo[], from: number, to: number) => {
        const reorderedCategory = list[from];

@@ -76,13 +84,19 @@ export function CategorySettings() {
        );
    };

-    const onDragEnd = (result: DropResult) => {
-        // dropped outside the list?
-        if (!result.destination) {
+    const onDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        setDndActiveCategory(null);
+
+        if (!over || active.id === over.id) {
            return;
        }

-        categoryReorder(categories, result.source.index, result.destination.index);
+        const oldIndex = categories.findIndex((category) => category.id === active.id);
+        const newIndex = categories.findIndex((category) => category.id === over.id);
+
+        categoryReorder(categories, oldIndex, newIndex);
    };

    const resetDialog = () => {
@@ -142,26 +156,33 @@ export function CategorySettings() {

    return (
        <>
-            <DragDropContext onDragEnd={onDragEnd}>
-                <StrictModeDroppable droppableId="droppable">
-                    {(droppableProvided) => (
-                        <Box ref={droppableProvided.innerRef} sx={{ paddingBottom: DEFAULT_FULL_FAB_HEIGHT }}>
-                            {categories.map((category, index) => (
-                                <Draggable key={category.id} draggableId={category.id.toString()} index={index}>
-                                    {(draggableProvided) => (
-                                        <CategorySettingsCard
-                                            provided={draggableProvided}
-                                            category={category}
-                                            onEdit={() => handleEditDialogOpen(index)}
-                                        />
-                                    )}
-                                </Draggable>
-                            ))}
-                            {droppableProvided.placeholder}
-                        </Box>
-                    )}
-                </StrictModeDroppable>
-            </DragDropContext>
+            <DndContext
+                sensors={dndSensors}
+                collisionDetection={closestCenter}
+                onDragStart={(event) =>
+                    setDndActiveCategory(categories.find((category) => category.id === event.active.id) ?? null)
+                }
+                onDragEnd={onDragEnd}
+                onDragCancel={() => setDndActiveCategory(null)}
+                onDragAbort={() => setDndActiveCategory(null)}
+            >
+                <Box sx={{ paddingBottom: DEFAULT_FULL_FAB_HEIGHT }}>
+                    <SortableContext items={categories} strategy={verticalListSortingStrategy}>
+                        {categories.map((category, index) => (
+                            <DndSortableItem
+                                key={category.id}
+                                id={category.id}
+                                isDragging={category.id === dndActiveCategory?.id}
+                            >
+                                <CategorySettingsCard category={category} onEdit={() => handleEditDialogOpen(index)} />
+                            </DndSortableItem>
+                        ))}
+                    </SortableContext>
+                    <DndOverlayItem isActive={!!dndActiveCategory}>
+                        <CategorySettingsCard category={dndActiveCategory!} onEdit={noOp} />
+                    </DndOverlayItem>
+                </Box>
+            </DndContext>
            <Fab
                color="primary"
                aria-label="add"
--- a/src/modules/core/components/StrictModeDroppable.tsx
+++ b/src/modules/core/components/StrictModeDroppable.tsx
@@ -1,31 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import { useEffect, useState } from 'react';
-import { Droppable, DroppableProps } from 'react-beautiful-dnd';
-
-// issue: https://github.com/atlassian/react-beautiful-dnd/issues/2399
-// credit for fix: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
-export function StrictModeDroppable({ children, ...props }: DroppableProps) {
-    const [enabled, setEnabled] = useState(false);
-
-    useEffect(() => {
-        const animation = requestAnimationFrame(() => setEnabled(true));
-
-        return () => {
-            cancelAnimationFrame(animation);
-            setEnabled(false);
-        };
-    }, []);
-
-    if (!enabled) {
-        return null;
-    }
-
-    return <Droppable {...props}>{children}</Droppable>;
-}
--- a/src/modules/core/utils/MediaQuery.tsx
+++ b/src/modules/core/utils/MediaQuery.tsx
@@ -19,6 +19,10 @@ export class MediaQuery {

    static readonly TABLET_WIDTH: Breakpoint | number = 1025;

+    static isTouchDevice(): boolean {
+        return window.matchMedia('not (pointer: fine)').matches;
+    }
+
    static useIsTouchDevice(): boolean {
        return useMediaQuery('not (pointer: fine)');
    }
--- a/src/modules/downloads/screens/DownloadQueue.tsx
+++ b/src/modules/downloads/screens/DownloadQueue.tsx
@@ -13,10 +13,9 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from '@mui/material/Stack';
-import Box, { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import React, { memo, useCallback, useEffect, useLayoutEffect } from 'react';
-import { DragDropContext, Draggable, DraggableProvided, DropResult } from 'react-beautiful-dnd';
+import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -24,9 +23,10 @@ import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { Virtuoso } from 'react-virtuoso';
 import CardContent from '@mui/material/CardContent';
 import Refresh from '@mui/icons-material/Refresh';
+import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
@@ -35,25 +35,19 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { ChapterDownloadStatus, ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts';
 import { DownloaderState, DownloadState } from '@/lib/graphql/generated/graphql.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { getErrorMessage, noOp } from '@/lib/HelperFunctions.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
-
-const HeightPreservingItem = ({ children, ...props }: BoxProps) => (
-    // the height is necessary to prevent the item container from collapsing, which confuses Virtuoso measurements
-    <Box {...props} style={{ height: props['data-known-size' as keyof typeof props] || undefined }}>
-        {children}
-    </Box>
-);
+import { DndSortableItem } from '@/lib/dnd-kit/DndSortableItem.tsx';
+import { DndKitUtil } from '@/lib/dnd-kit/DndKitUtil.ts';
+import { DndOverlayItem } from '@/lib/dnd-kit/DndOverlayItem.tsx';

 const DownloadChapterItem = memo(
    ({
-        provided,
        item,
        handleDelete,
        handleRetry,
    }: {
-        provided: DraggableProvided;
        item: ChapterDownloadStatus;
        handleDelete: (chapter: ChapterIdInfo) => void;
        handleRetry: (chapter: ChapterIdInfo) => void;
@@ -61,12 +55,7 @@ const DownloadChapterItem = memo(
        const { t } = useTranslation();

        return (
-            <Box
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-                sx={{ p: 1, pb: 0 }}
-            >
+            <Box sx={{ p: 1, pb: 0 }}>
                <Card>
                    <CardActionArea component={Link} to={AppRoutes.manga.path(item.manga.id)}>
                        <CardContent
@@ -146,6 +135,10 @@ export const DownloadQueue: React.FC = () => {

    const { setTitle, setAction } = useNavBarContext();

+    const dndItems = useMemo(() => queue.map((download) => download.chapter), [queue]);
+    const dndSensors = DndKitUtil.useSensorsForDevice();
+    const [dndActiveDownload, setDndActiveDownload] = useState<ChapterDownloadStatus | null>(null);
+
    const clearQueue = async () => {
        try {
            await requestManager.clearDownloads().response;
@@ -216,12 +209,19 @@ export const DownloadQueue: React.FC = () => {
        });
    };

-    const onDragEnd = (result: DropResult) => {
-        if (!result.destination) {
+    const onDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        setDndActiveDownload(null);
+
+        if (!over || active.id === over.id) {
            return;
        }

-        categoryReorder(queue, result.source.index, result.destination.index);
+        const oldIndex = queue.findIndex((download) => download.chapter.id === active.id);
+        const newIndex = queue.findIndex((download) => download.chapter.id === over.id);
+
+        categoryReorder(queue, oldIndex, newIndex);
    };

    const handleRetry = useCallback(async (chapter: ChapterIdInfo) => {
@@ -278,45 +278,39 @@ export const DownloadQueue: React.FC = () => {
    }

    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <StrictModeDroppable
-                droppableId="droppable"
-                mode="virtual"
-                renderClone={(provided, snapshot, rubric) => (
-                    <DownloadChapterItem
-                        provided={provided}
-                        item={queue[rubric.source.index]}
-                        handleDelete={handleDelete}
-                        handleRetry={handleRetry}
-                    />
-                )}
-            >
-                {(droppableProvided) => (
-                    <Box ref={droppableProvided.innerRef}>
-                        <Virtuoso
-                            useWindowScroll
-                            overscan={window.innerHeight * 0.5}
-                            components={{
-                                Item: HeightPreservingItem,
-                            }}
-                            totalCount={queue.length}
-                            computeItemKey={(index) => queue[index].chapter.id}
-                            itemContent={(index) => (
-                                <Draggable draggableId={`${queue[index].chapter.id}`} index={index}>
-                                    {(draggableProvided) => (
-                                        <DownloadChapterItem
-                                            provided={draggableProvided}
-                                            item={queue[index]}
-                                            handleDelete={handleDelete}
-                                            handleRetry={handleRetry}
-                                        />
-                                    )}
-                                </Draggable>
-                            )}
-                        />
-                    </Box>
-                )}
-            </StrictModeDroppable>
-        </DragDropContext>
+        <DndContext
+            sensors={dndSensors}
+            collisionDetection={closestCenter}
+            onDragStart={(event) =>
+                setDndActiveDownload(queue.find((download) => download.chapter.id === event.active.id) ?? null)
+            }
+            onDragEnd={onDragEnd}
+            onDragCancel={() => setDndActiveDownload(null)}
+            onDragAbort={() => setDndActiveDownload(null)}
+        >
+            <SortableContext items={dndItems} strategy={verticalListSortingStrategy}>
+                <Virtuoso
+                    useWindowScroll
+                    overscan={window.innerHeight * 0.5}
+                    totalCount={queue.length}
+                    computeItemKey={(index) => queue[index].chapter.id}
+                    itemContent={(index) => (
+                        <DndSortableItem
+                            id={queue[index].chapter.id}
+                            isDragging={queue[index].chapter.id === dndActiveDownload?.chapter.id}
+                        >
+                            <DownloadChapterItem
+                                item={queue[index]}
+                                handleDelete={handleDelete}
+                                handleRetry={handleRetry}
+                            />
+                        </DndSortableItem>
+                    )}
+                />
+            </SortableContext>
+            <DndOverlayItem isActive={!!dndActiveDownload}>
+                <DownloadChapterItem item={dndActiveDownload!} handleDelete={noOp} handleRetry={noOp} />
+            </DndOverlayItem>
+        </DndContext>
    );
 };
--- a/yarn.lock
+++ b/yarn.lock
@@ -1324,7 +1324,7 @@
  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==

-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
  version "7.24.1"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
@@ -1483,6 +1483,37 @@
    "@babel/helper-string-parser" "^7.25.9"
    "@babel/helper-validator-identifier" "^7.25.9"

+"@dnd-kit/accessibility@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz#3b4202bd6bb370a0730f6734867785919beac6af"
+  integrity sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==
+  dependencies:
+    tslib "^2.0.0"
+
+"@dnd-kit/core@6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.3.1.tgz#4c36406a62c7baac499726f899935f93f0e6d003"
+  integrity sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==
+  dependencies:
+    "@dnd-kit/accessibility" "^3.1.1"
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/sortable@10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/sortable/-/sortable-10.0.0.tgz#1f9382b90d835cd5c65d92824fa9dafb78c4c3e8"
+  integrity sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==
+  dependencies:
+    "@dnd-kit/utilities" "^3.2.2"
+    tslib "^2.0.0"
+
+"@dnd-kit/utilities@3.2.2", "@dnd-kit/utilities@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b"
+  integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==
+  dependencies:
+    tslib "^2.0.0"
+
 "@emotion/babel-plugin@^11.13.5":
  version "11.13.5"
  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
@@ -2889,14 +2920,6 @@
  resolved "https://registry.yarnpkg.com/@types/extract-files/-/extract-files-13.0.1.tgz#3ec057a3fa25f778245a76a17271d23b71ee31d7"
  integrity sha512-/fRbzc2lAd7jDJSSnxWiUyXWjdUZZ4HbISLJzVgt1AvrdOa7U49YRPcvuCUywkmURZ7uwJOheDjx19itbQ5KvA==

-"@types/hoist-non-react-statics@^3.3.0":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
-  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/js-yaml@^4.0.0":
  version "4.0.9"
  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
@@ -2967,16 +2990,6 @@
  dependencies:
    "@types/react" "*"

-"@types/react-redux@^7.1.20":
-  version "7.1.33"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.33.tgz#53c5564f03f1ded90904e3c90f77e4bd4dc20b15"
-  integrity sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react-transition-group@^4.4.12":
  version "4.4.12"
  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
@@ -4146,13 +4159,6 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
    shebang-command "^2.0.0"
    which "^2.0.1"

-css-box-model@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
-  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
-  dependencies:
-    tiny-invariant "^1.0.6"
-
 cssjanus@^2.0.1:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.1.0.tgz#6f99070e0b7cc79f826ea48c63c03cb250713af1"
@@ -5513,7 +5519,7 @@ header-case@^2.0.4:
    capital-case "^1.0.4"
    tslib "^2.0.3"

-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6451,11 +6457,6 @@ math-intrinsics@^1.0.0, math-intrinsics@^1.1.0:
  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==

-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 meow@^13.0.0:
  version "13.2.0"
  resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
@@ -7073,24 +7074,6 @@ queue-microtask@^1.2.2:
  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

-raf-schd@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
-  integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
-
-react-beautiful-dnd@13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-dom@18.3.1:
  version "18.3.1"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -7117,11 +7100,6 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

-react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-is@^19.1.0:
  version "19.1.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b"
@@ -7137,18 +7115,6 @@ react-property@2.0.2:
  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6"
  integrity sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==

-react-redux@^7.2.0:
-  version "7.2.9"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
-  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
-    hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
 react-router-dom@6.26.1:
  version "6.26.1"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.1.tgz#a408892b41767a49dc94b3564b0e7d8e3959f623"
@@ -7202,13 +7168,6 @@ readable-web-to-node-stream@^3.0.0:
  dependencies:
    readable-stream "^3.6.0"

-redux@^4.0.0, redux@^4.0.4:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
-  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-
 reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.8, reflect.getprototypeof@^1.0.9:
  version "1.0.9"
  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.9.tgz#c905f3386008de95a62315f3ea8630404be19e2f"
@@ -8052,11 +8011,6 @@ timm@^1.6.1:
  resolved "https://registry.yarnpkg.com/timm/-/timm-1.7.1.tgz#96bab60c7d45b5a10a8a4d0f0117c6b7e5aff76f"
  integrity sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==

-tiny-invariant@^1.0.6:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
-  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
-
 tinycolor2@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
@@ -8141,16 +8095,16 @@ tsconfig-paths@^3.15.0:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

+tslib@^2.0.0, tslib@^2.6.3, tslib@^2.7.0, tslib@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@~2.6.0:
  version "2.6.2"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==

-tslib@^2.6.3, tslib@^2.7.0, tslib@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
-  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
-
 tslib@~2.4.0:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
@@ -8394,11 +8348,6 @@ use-long-press@3.3.0:
  resolved "https://registry.yarnpkg.com/use-long-press/-/use-long-press-3.3.0.tgz#dc661c281722f5816b61c6cb337a6a9d0b105d2c"
  integrity sha512-Yedz46ILxsb1BTS6kUzpV/wyEZPUlJDq+8Oat0LP1eOZQHbS887baJHJbIGENqCo8wTKNxmoTHLdY8lU/e+wvw==

-use-memo-one@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
-  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
-
 use-query-params@2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.1.tgz#c558ab70706f319112fbccabf6867b9f904e947d"