chore: port SnapCentertoCursor to experimental branch

[khuezy]

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 5c53afb8d2d635c4e061ad3dc358331535a62975

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.