Merge branch 'main' into fix/selection_table_checkbox_expand

.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}>

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [5.21.0](https://github.com/gravity-ui/uikit/compare/v5.20.0...v5.21.0) (2023-11-24)
+
+
+### Features
+
+* change react-sortable-hoc with react-beautiful-dnd ([#1159](https://github.com/gravity-ui/uikit/issues/1159)) ([1f7ab68](https://github.com/gravity-ui/uikit/commit/1f7ab68a74deedcd6dd091c8a9bc7d5a5b913006))
+* lazy loading for userAvatar ([#1124](https://github.com/gravity-ui/uikit/issues/1124)) ([e76fd7c](https://github.com/gravity-ui/uikit/commit/e76fd7ce9ab4a6adff05f5e816f385e1b5afc316))
+
 ## [5.20.0](https://github.com/gravity-ui/uikit/compare/v5.19.1...v5.20.0) (2023-11-14)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "5.20.0",
+    "version": "5.21.0",
     "description": "Gravity UI base styling and components",
     "license": "MIT",
     "repository": {
@@ -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 {