feat(modifiers): add restrictToSpecificParent modifier

Author: mmestiyak

.changeset/tricky-camels-talk.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/modifiers": minor
+---
+
+Added new `restrictToSpecificParent` modifier that allows restricting dragging within a specific parent element's boundaries using React refs. This is useful when you need to constrain movement to a container that isn't the immediate parent element.

packages/modifiers/README.md

@@ -54,6 +54,29 @@ Restrict movement to only the vertical axis.
 
 ### Restrict motion to a container's bounding rectangle
 
+#### `restrictToSpecificParent`
+
+Restrict movement to a specified parent element's bounding rectangle. This modifier can be useful when you need to constrain movement to a specific container rather than the immediate parent.
+
+```jsx
+import {DndContext} from '@dnd-kit/core';
+import {restrictToSpecificParent} from '@dnd-kit/modifiers';
+
+function App() {
+  const containerRef = useRef(null);
+  
+  return (
+    <div ref={containerRef}>
+      <DndContext modifiers={[restrictToSpecificParent({
+        parentElement: containerRef.current
+      })]}>
+        {/* ... */}
+      </DndContext>
+    </div>
+  );
+}
+```
+
 #### `restrictToWindowEdges`
 
 Restrict movement to the edges of the window. This modifier can be useful to prevent the `DragOverlay` from being moved outside of the bounds of the window.

packages/modifiers/src/index.ts

@@ -1,6 +1,7 @@
 export {createSnapModifier} from './createSnapModifier';
 export {restrictToHorizontalAxis} from './restrictToHorizontalAxis';
 export {restrictToParentElement} from './restrictToParentElement';
+export {restrictToSpecificParent} from './restrictToSpecificParent';
 export {restrictToFirstScrollableAncestor} from './restrictToFirstScrollableAncestor';
 export {restrictToVerticalAxis} from './restrictToVerticalAxis';
 export {restrictToWindowEdges} from './restrictToWindowEdges';

packages/modifiers/src/restrictToSpecificParent.ts

@@ -0,0 +1,20 @@
+import type {Modifier} from '@dnd-kit/core';
+import type {RefObject} from 'react';
+import {restrictToBoundingRect} from './utilities';
+
+export interface RestrictToSpecificParentOptions {
+  parentRef: RefObject<HTMLElement>;
+}
+
+export const restrictToSpecificParent = (
+  options: RestrictToSpecificParentOptions
+): Modifier => {
+  return ({transform, draggingNodeRect}) => {
+    if (!draggingNodeRect || !options.parentRef.current) {
+      return transform;
+    }
+
+    const parentRect = options.parentRef.current.getBoundingClientRect();
+    return restrictToBoundingRect(transform, draggingNodeRect, parentRect);
+  };
+};