Position observer refactor

apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx

@@ -2,7 +2,7 @@ import React, {memo, useCallback, useMemo, useRef, useState} from 'react';
 import type {PropsWithChildren} from 'react';
 import {flushSync} from 'react-dom';
 import {CollisionPriority} from '@dnd-kit/abstract';
-import {DragDropProvider} from '@dnd-kit/react';
+import {DragDropProvider, useDragOperation} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {move} from '@dnd-kit/helpers';
 import {defaultPreset, PointerSensor, KeyboardSensor} from '@dnd-kit/dom';
@@ -204,7 +204,8 @@ const SortableColumn = memo(function SortableColumn({
   style,
   onRemove,
 }: PropsWithChildren<SortableColumnProps>) {
-  const {handleRef, isDragging, ref} = useSortable({
+  const {source} = useDragOperation();
+  const {handleRef, isDragging, isColliding, ref} = useSortable({
     id,
     accept: ['column', 'item'],
     collisionPriority: CollisionPriority.Low,
@@ -232,6 +233,7 @@ const SortableColumn = memo(function SortableColumn({
       actions={actions}
       columns={columns}
       shadow={isDragging}
+      highlight={isColliding && source?.type === 'item'}
       scrollable={scrollable}
       transitionId={`sortable-column-${id}`}
       style={style}

packages/dom/package.json

@@ -78,6 +78,7 @@
     "@dnd-kit/collision": "^0.1.21",
     "@dnd-kit/geometry": "^0.1.21",
     "@dnd-kit/state": "^0.1.21",
+    "position-observer": "^1.0.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/dom/src/core/entities/droppable/droppable.ts

@@ -6,8 +6,8 @@ import type {
 import {defaultCollisionDetection} from '@dnd-kit/collision';
 import type {CollisionDetector} from '@dnd-kit/collision';
 import {reactive, signal, untracked} from '@dnd-kit/state';
-import type {BoundingRectangle, Shape} from '@dnd-kit/geometry';
-import {DOMRectangle, PositionObserver} from '@dnd-kit/dom/utilities';
+import type {Shape} from '@dnd-kit/geometry';
+import {DOMRectangle, observePosition, throttle} from '@dnd-kit/dom/utilities';
 
 import type {DragDropManager} from '../../manager/manager.ts';
 
@@ -28,19 +28,19 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
     manager: DragDropManager | undefined
   ) {
     const {collisionDetector = defaultCollisionDetection} = input;
-    const updateShape = (boundingClientRect?: BoundingRectangle | null) => {
+    const updateShape = (visible: boolean) => {
       const {manager, element} = this;
 
-      if (!element || boundingClientRect === null) {
+      if (!element || !visible) {
         this.shape = undefined;
         return undefined;
       }
 
       if (!manager) return;
 
       const updatedShape = new DOMRectangle(element);
-
       const shape = untracked(() => this.shape);
+
       if (updatedShape && shape?.equals(updatedShape)) {
         return shape;
       }
@@ -50,7 +50,7 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
       return updatedShape;
     };
 
-    const observePosition = signal(false);
+    const shouldObservePosition = signal(false);
 
     super(
       {
@@ -65,7 +65,7 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
             const {dragOperation} = manager;
             const {source} = dragOperation;
 
-            observePosition.value = Boolean(
+            shouldObservePosition.value = Boolean(
               source &&
                 dragOperation.status.initialized &&
                 element &&
@@ -76,14 +76,14 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
           () => {
             const {element} = this;
 
-            if (observePosition.value && element) {
-              const positionObserver = new PositionObserver(
-                element,
-                updateShape
+            if (shouldObservePosition.value && element) {
+              updateShape(true);
+              const unobserve = observePosition(element, () =>
+                updateShape(true)
               );
 
               return () => {
-                positionObserver.disconnect();
+                unobserve();
                 this.shape = undefined;
               };
             }
@@ -101,7 +101,7 @@ export class Droppable<T extends Data = Data> extends AbstractDroppable<
     );
 
     this.element = element;
-    this.refreshShape = () => updateShape();
+    this.refreshShape = () => updateShape(true);
   }
 
   @reactive

packages/dom/src/utilities/index.ts

@@ -21,8 +21,7 @@ export {
 } from './element/index.ts';
 
 export {Listeners} from './event-listeners/index.ts';
-export {PositionObserver} from './observers/index.ts';
-export {ResizeNotifier} from './observers/ResizeNotifier.ts';
+export {observePosition} from './observers/PositionObserver.ts';
 
 export {showPopover, hidePopover, supportsPopover} from './popover/index.ts';
 
@@ -36,7 +35,9 @@ export {
   scrollIntoViewIfNeeded,
 } from './scroll/index.ts';
 
-export {scheduler, Scheduler, timeout} from './scheduling/index.ts';
+export {scheduler, Scheduler} from './scheduling/scheduler.ts';
+export {timeout} from './scheduling/timeout.ts';
+export {throttle} from './scheduling/throttle.ts';
 
 export {DOMRectangle, type DOMRectangleOptions} from './shapes/index.ts';