chore: port SnapCentertoCursor to experimental branch

[khuezy]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5c53afb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[khuezy]

@clauderic Does the DragOverlay respect the modifier? When I add the DragOverlay, it doesn't get centered on cursor.

[clauderic]

You should be able to add a story here: apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx

Something like:

export const SnapToCursor: Story = {
  name: 'Snap to cursor',
  args: {
    modifiers: [SnapCenterToCursor],
  },
};

[khuezy]

There is an issue w/ the typing when I apply the modifier to the DragDropProvider:

Type 'typeof SnapCenterToCursor' is not assignable to type 'ModifierConstructor<DragDropManager<Draggable<Data>, Droppable<Data>>> | ModifierDescriptor<DragDropManager<Draggable<Data>, Droppable<...>>>'.
  Type 'typeof SnapCenterToCursor' is not assignable to type 'ModifierConstructor<DragDropManager<Draggable<Data>, Droppable<Data>>>'.
    Types of parameters 'manager' and 'manager' are incompatible.
      Type 'DragDropManager<Draggable<Data>, Droppable<Data>>' is not assignable to type 'DragDropManager<Draggable<Data, DragDropManager<any, any>>, Droppable<Data, DragDropManager<any, any>>>'.
        Types of property 'collisionObserver' are incompatible.
          Type 'CollisionObserver<Draggable<Data>, Droppable<Data>, DragDropManager<Draggable<Data>, Droppable<Data>>>' is not assignable to type 'CollisionObserver<Draggable<Data, DragDropManager<any, any>>, Droppable<Data, DragDropManager<any, any>>, DragDropManager<Draggable<Data,

The code runs correctly but typescript complains. I'm using DragDropProvider from @dnd-kit/react

[yf-yang]

@khuezy There are two DragDropManager, one is from @dnd-kit/abstract and the other is from @dnd-kit/dom. That should be the cause

You can refer to RestrictToWindow's signature

[khuezy]

The snap.ts in the abstract package includes the DragDropManage<Draggable, Droppable>, whereas the RestrictToWindow from the dom package doesn't. I'm not sure if omitting those two will lose types.

[clauderic]

I'm not sure why your editor isn't respecting the prettier settings, it should be:

{
  "bracketSpacing": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

[khuezy]

Yea that's really strange. I see the prettier loading .prettierrc but it's not applying those settings.
When I run bun format, it picks up 28 file changes... Should I include that or just leave everything as it is for you to format.

[clauderic]

Summary

This PR adds a SnapCenterToCursor modifier to @dnd-kit/abstract that offsets the drag transform so the element's center snaps to the cursor position. The implementation is straightforward and extends Modifier correctly.

Feedback

Blocking issues

• Missing changeset: packages/abstract/src/modifiers/snap.ts and packages/abstract/src/modifiers/index.ts were modified with a new exported class, but there is no .changeset/*.md file in the diff. Since SnapCenterToCursor is a new public export, a minor-level changeset for @dnd-kit/abstract is needed before this can be released:

  ---
  "@dnd-kit/abstract": minor
  ---
  
  Added SnapCenterToCursor modifier.
  

• Incorrect import path in story (apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx:3): The story imports SnapCenterToCursor from @dnd-kit/dom/modifiers, but the class is only exported from @dnd-kit/abstract/modifiers. The packages/dom/src/modifiers/index.ts was not updated to re-export it, so this import would fail at build time. Either:

  • Change the import to @dnd-kit/abstract/modifiers, or
  • Add SnapCenterToCursor to packages/dom/src/modifiers/index.ts (which would also need a changeset for @dnd-kit/dom)

Suggestions

• The story file is missing a newline at the end of file (minor).
• SnapCenterToCursor does not implement static configure = configurator(SnapCenterToCursor). This is fine since this modifier takes no options, but it's worth confirming that's intentional.

Changeset

• Status: missing — a changeset for @dnd-kit/abstract with bump type minor is required.

Overall

The SnapCenterToCursor modifier is a useful and requested feature. The core implementation looks correct. Once the changeset is added and the import path issue is fixed, this should be good to go. Thanks for contributing this, @khuezy!

---

[claude-review]