Render only needed sortable items

cypress/integration/draggable_spec.ts

@@ -416,4 +416,26 @@ describe('Draggable', () => {
         });
     });
   });
+
+  describe('Multiple Draggables', () => {
+    it('should render only dragging element', () => {
+      cy.visitStory('core-draggable-draggablerenders--basic-setup')
+        .findFirstDraggableItem()
+
+        .mouseMoveBy(0, 100);
+
+      cy.get('[data-testid="draggable-status-1"]').should(
+        'have.text',
+        'updated'
+      );
+      cy.get('[data-testid="draggable-status-2"]').should(
+        'have.text',
+        'mounted'
+      );
+      cy.get('[data-testid="draggable-status-3"]').should(
+        'have.text',
+        'mounted'
+      );
+    });
+  });
 });

cypress/integration/droppable_spec.ts

@@ -0,0 +1,100 @@
+/// <reference path="../support/index.d.ts" />
+
+describe('Droppable', () => {
+  describe('Droppable Renders', () => {
+    it('should re-render only the dragged item and the container dragged over - no drop', () => {
+      cy.visitStory('core-droppablerenders-usedroppable--multiple-droppables');
+
+      cy.get('[data-cypress="droppable-container-A"]').then((droppable) => {
+        const coords = droppable[0].getBoundingClientRect();
+        return cy
+          .get('[data-cypress="draggable-item"]')
+          .first()
+          .then((draggable) => {
+            const initialCoords = draggable[0].getBoundingClientRect();
+            return cy
+              .wrap(draggable, {log: false})
+              .mouseMoveBy(
+                coords.x - initialCoords.x + 10,
+                coords.y - initialCoords.y + 10,
+                {
+                  delay: 1000,
+                  noDrop: true,
+                }
+              );
+          });
+      });
+
+      cy.get('[data-testid="draggable-status-1"]').should(
+        'have.text',
+        'updated'
+      );
+      cy.get('[data-testid="draggable-status-2"]').should(
+        'have.text',
+        'mounted'
+      );
+      cy.get('[data-testid="draggable-status-3"]').should(
+        'have.text',
+        'mounted'
+      );
+
+      cy.get('[data-testid="droppable-status-A"]').should(
+        'have.text',
+        'updated'
+      );
+      cy.get('[data-testid="droppable-status-B"]').should(
+        'have.text',
+        'mounted'
+      );
+      cy.get('[data-testid="droppable-status-C"]').should(
+        'have.text',
+        'mounted'
+      );
+    });
+
+    it('should re-render only the dragged item and the container dragged over - with drop', () => {
+      cy.visitStory('core-droppablerenders-usedroppable--multiple-droppables');
+
+      cy.get('[data-cypress="droppable-container-A"]').then((droppable) => {
+        const coords = droppable[0].getBoundingClientRect();
+        return cy
+          .get('[data-cypress="draggable-item"]')
+          .last()
+          .then((draggable) => {
+            const initialCoords = draggable[0].getBoundingClientRect();
+            return cy
+              .wrap(draggable, {log: false})
+              .mouseMoveBy(
+                coords.x - initialCoords.x + 10,
+                coords.y - initialCoords.y + 10,
+                {
+                  delay: 1000,
+                  noDrop: false,
+                }
+              );
+          });
+      });
+
+      //the dropped item is mounted because it moves to a different container
+      for (let i = 1; i <= 3; i++) {
+        cy.get(`[data-testid="draggable-status-${i}"]`).should(
+          'have.text',
+          'mounted'
+        );
+      }
+
+      cy.get('[data-testid="droppable-status-A"]').should(
+        'have.text',
+        'updated'
+      );
+      cy.get('[data-testid="droppable-status-B"]').should(
+        'have.text',
+        'mounted'
+      );
+      cy.get('[data-testid="droppable-status-C"]').should(
+        'have.text',
+        'mounted'
+      );
+    });
+  });
+});

cypress/integration/sortable_spec.ts

@@ -543,3 +543,52 @@ describe('Sortable Virtualized List', () => {
     });
   });
 });
+
+describe('Sortable Renders only what is necessary ', () => {
+  it('should render active and items between active and over - no drop', () => {
+    cy.visitStory('presets-sortable-renders--basic-setup');
+
+    cy.get('[data-cypress="draggable-item"]').then((droppables) => {
+      const coords = droppables[1].getBoundingClientRect(); //drop after item id - 3
+      return cy
+        .findFirstDraggableItem()
+        .mouseMoveBy(coords.x + 10, coords.y + 10, {delay: 1, noDrop: true});
+    });
+
+    for (let id = 1; id <= 3; id++) {
+      cy.get(`[data-testid="sortable-status-${id}"]`).should(
+        'have.text',
+        `updated ${id}`
+      );
+    }
+
+    for (let id = 4; id <= 10; id++) {
+      cy.get(`[data-testid="sortable-status-${id}"]`).should(
+        'have.text',
+        `mounted ${id}`
+      );
+    }
+  });
+
+  //we test for drop in place, because otherwise items change and cause a real re-render to all items
+  //probably possible to fix that too but I didn't get there
+  it('should render active only on d&d in place - with drop', () => {
+    cy.visitStory('presets-sortable-renders--basic-setup');
+
+    cy.findFirstDraggableItem().mouseMoveBy(10, 10, {
+      delay: 1,
+      noDrop: false,
+    });
+
+    cy.get(`[data-testid="sortable-status-1"]`).should(
+      'have.text',
+      `updated 1`
+    );
+    for (let id = 2; id <= 10; id++) {
+      cy.get(`[data-testid="sortable-status-${id}"]`).should(
+        'have.text',
+        `mounted ${id}`
+      );
+    }
+  });
+});

cypress/support/commands.ts

@@ -27,7 +27,7 @@ function getDocumentScroll() {
 }
 
 Cypress.Commands.add('findFirstDraggableItem', () => {
-  return cy.get(`[data-cypress="draggable-item"`);
+  return cy.get(`[data-cypress="draggable-item"]`).first();
 });
 
 Cypress.Commands.add(
@@ -47,7 +47,12 @@ Cypress.Commands.add(
   {
     prevSubject: 'element',
   },
-  (subject, x: number, y: number, options?: {delay: number}) => {
+  (
+    subject,
+    x: number,
+    y: number,
+    options?: {delay: number; noDrop?: boolean}
+  ) => {
     cy.wrap(subject, {log: false})
       .then((subject) => {
         const initialRect = subject.get(0).getBoundingClientRect();
@@ -56,7 +61,8 @@ Cypress.Commands.add(
         return [subject, initialRect, windowScroll] as const;
       })
       .then(([subject, initialRect, initialWindowScroll]) => {
-        cy.wrap(subject)
+        let resultOps = cy
+          .wrap(subject)
           .trigger('mousedown', {force: true})
           .wait(options?.delay || 0, {log: Boolean(options?.delay)})
           .trigger('mousemove', {
@@ -72,29 +78,31 @@ Cypress.Commands.add(
             force: true,
             clientX: Math.floor(initialRect.left + initialRect.width / 2 + x),
             clientY: Math.floor(initialRect.top + initialRect.height / 2 + y),
-          })
-          .wait(100)
-          .trigger('mouseup', {force: true})
-          .wait(250)
-          .then((subject: any) => {
-            const finalRect = subject.get(0).getBoundingClientRect();
-            const windowScroll = getDocumentScroll();
-            const windowScrollDelta = {
-              x: windowScroll.x - initialWindowScroll.x,
-              y: windowScroll.y - initialWindowScroll.y,
-            };
-
-            const delta = {
-              x: Math.round(
-                finalRect.left - initialRect.left - windowScrollDelta.x
-              ),
-              y: Math.round(
-                finalRect.top - initialRect.top - windowScrollDelta.y
-              ),
-            };
-
-            return [subject, {initialRect, finalRect, delta}] as const;
           });
+
+        if (!options?.noDrop) {
+          resultOps = resultOps.wait(100).trigger('mouseup', {force: true});
+        }
+
+        resultOps.wait(250).then((subject: any) => {
+          const finalRect = subject.get(0).getBoundingClientRect();
+          const windowScroll = getDocumentScroll();
+          const windowScrollDelta = {
+            x: windowScroll.x - initialWindowScroll.x,
+            y: windowScroll.y - initialWindowScroll.y,
+          };
+
+          const delta = {
+            x: Math.round(
+              finalRect.left - initialRect.left - windowScrollDelta.x
+            ),
+            y: Math.round(
+              finalRect.top - initialRect.top - windowScrollDelta.y
+            ),
+          };
+
+          return [subject, {initialRect, finalRect, delta}] as const;
+        });
       });
   }
 );

cypress/support/index.d.ts

@@ -23,7 +23,7 @@ declare namespace Cypress {
     mouseMoveBy(
       x: number,
       y: number,
-      options?: {delay: number}
+      options?: {delay: number; noDrop?: boolean}
     ): Chainable<
       [
         Element,

package.json

@@ -35,6 +35,7 @@
     "@types/classnames": "^2.2.11",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@types/use-sync-external-store": "^0.0.3",
     "babel-jest": "^27.0.2",
     "babel-loader": "^8.2.1",
     "chromatic": "^5.4.0",

packages/core/package.json

@@ -30,9 +30,10 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "tslib": "^2.0.0",
     "@dnd-kit/accessibility": "^3.0.0",
-    "@dnd-kit/utilities": "^3.2.1"
+    "@dnd-kit/utilities": "^3.2.1",
+    "tslib": "^2.0.0",
+    "use-sync-external-store": "^1.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/core/src/components/Accessibility/components/RestoreFocus.tsx

@@ -12,7 +12,11 @@ interface Props {
 }
 
 export function RestoreFocus({disabled}: Props) {
-  const {active, activatorEvent, draggableNodes} = useContext(InternalContext);
+  const {useGloablActive, useGlobalActivatorEvent, draggableNodes} =
+    useContext(InternalContext);
+  const active = useGloablActive();
+  const activatorEvent = useGlobalActivatorEvent();
+
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active?.id);