feat: change react-sortable-hoc with react-beautiful-dnd (#1159)

.storybook/preview.tsx

@@ -20,6 +20,16 @@ configure({
 });
 
 const withContextProvider: Decorator = (Story, context) => {
+    if (context.parameters?.disableStrictMode) {
+        return (
+            <ThemeProvider theme={context.globals.theme}>
+                <MobileProvider>
+                    <Story {...context} />
+                </MobileProvider>
+            </ThemeProvider>
+        );
+    }
+
     return (
         <React.StrictMode>
             <ThemeProvider theme={context.globals.theme}>

package.json

@@ -87,9 +87,9 @@
         "blueimp-md5": "^2.19.0",
         "focus-trap": "^7.5.2",
         "lodash": "^4.17.21",
+        "react-beautiful-dnd": "^13.1.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-popper": "^2.3.0",
-        "react-sortable-hoc": "2.0.0",
         "react-transition-group": "^4.4.5",
         "react-virtualized-auto-sizer": "^1.0.20",
         "react-window": "^1.8.9",
@@ -122,6 +122,7 @@
         "@types/jest": "^29.5.4",
         "@types/lodash": "^4.14.197",
         "@types/react": "^18.2.21",
+        "@types/react-beautiful-dnd": "^13.1.7",
         "@types/react-copy-to-clipboard": "^5.0.4",
         "@types/react-dom": "^18.2.7",
         "@types/react-transition-group": "^4.4.6",

src/components/List/List.scss

@@ -36,17 +36,6 @@ $block: '.#{variables.$ns}list';
     &__item {
         height: var(--yc-list-item-height);
 
-        &_sortable {
-            cursor: move;
-        }
-
-        &_sorting {
-            z-index: 100001;
-            background: var(--g-color-base-simple-hover-solid);
-            padding: 0 var(--yc-list-margin);
-            cursor: move;
-        }
-
         &_active {
             background: var(--g-color-base-simple-hover);
         }
@@ -67,6 +56,16 @@ $block: '.#{variables.$ns}list';
                 margin-right: 0;
             }
         }
+
+        // https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/preset-styles.md#phase-dragging-droppable-element
+        &_sortable[data-rbd-drag-handle-context-id]:active {
+            cursor: grabbing;
+        }
+
+        &_dragging {
+            background: var(--g-color-base-simple-hover-solid);
+            z-index: 100001;
+        }
     }
 
     &__empty-placeholder {