[experimental] Add SnapToPointer modifier

[dooohun]

Context

This is a follow-up to #1599, which has been inactive since the requested changes in March.
I've implemented the same feature with the blocking issues addressed - missing changeset and incorrect import path - and rebased on top of the experimental branch.

Summary

• Adds SnapCenterToCursor modifier to @dnd-kit/dom
• Fixes a DTS build error in experimental branch

Changes

Fix

• Add explicit CleanupFunction return types Plugin#registerEffect, KeyboardSensor#bind, and PointerSensor#bind to restore the DTS build

Feature

• Implement SnapCenterToCursor modifier
• Export from @dnd-kit/dom/modifiers
• Add changeset (@dnd-kit/dom: minor)
• Add Storybook story and docs

Docs

• Add SnapCenterToCursor to apps/docs/extend/modifiers.mdx

[changeset-bot]

🦋 Changeset detected

Latest commit: 247a82b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@dnd-kit/dom	Patch
@dnd-kit/abstract	Patch
@dnd-kit/collision	Patch
@dnd-kit/geometry	Patch
@dnd-kit/helpers	Patch
@dnd-kit/react	Patch
@dnd-kit/state	Patch
@dnd-kit/vue	Patch
@dnd-kit/solid	Patch
@dnd-kit/svelte	Patch

Not sure what this means? Click here to learn what changesets are.

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

[execto]

What version of dnd-kit/react i need install to have SnapToPointer modifier? Now i have 0.3.0, but SnapToPointer not exported

package.json of dnd-kit/react

{
  "name": "@dnd-kit/react",
  "version": "0.3.0",
  "main": "./index.cjs",
  "module": "./index.js",
  "type": "module",
  "types": "./index.d.ts",
  "sideEffects": false,
  "license": "MIT",
  "files": [
    "LICENSE",
    "README.md",
    "index.js",
    "index.d.ts",
    "index.cjs",
    "hooks.js",
    "hooks.d.ts",
    "hooks.cjs",
    "sortable.js",
    "sortable.d.ts",
    "sortable.cjs",
    "utilities.js",
    "utilities.d.ts",
    "utilities.cjs"
  ],
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./index.js",
      "require": "./index.cjs"
    },
    "./hooks": {
      "types": "./hooks.d.ts",
      "import": "./hooks.js",
      "require": "./hooks.cjs"
    },
    "./sortable": {
      "types": "./sortable.d.ts",
      "import": "./sortable.js",
      "require": "./sortable.cjs"
    },
    "./utilities": {
      "types": "./utilities.d.ts",
      "import": "./utilities.js",
      "require": "./utilities.cjs"
    }
  },
  "scripts": {
    "build": "bun build:utilities && bun build:hooks && bun build:core && bun build:sortable",
    "build:core": "tsup src/core/index.ts",
    "build:hooks": "tsup --entry.hooks src/hooks/index.ts",
    "build:sortable": "tsup --entry.sortable src/sortable/index.ts",
    "build:utilities": "tsup --entry.utilities src/utilities/index.ts",
    "dev": "bun build:utilities --watch & bun build:hooks --watch & bun build:core --watch & bun build:sortable --watch",
    "lint": "TIMING=1 eslint src/**/*.ts* --fix",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
  },
  "dependencies": {
    "@dnd-kit/abstract": "^0.3.0",
    "@dnd-kit/dom": "^0.3.0",
    "@dnd-kit/state": "^0.3.0",
    "tslib": "^2.6.2"
  },
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "eslint": "^8.38.0",
    "@dnd-kit/eslint-config": "*",
    "react": "^19.0.0",
    "tsup": "8.3.0",
    "typescript": "^5.5.2"
  },
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/clauderic/dnd-kit"
  }
}

modifiers.d.ts

import * as _dnd_kit_geometry from '@dnd-kit/geometry';
import { BoundingRectangle } from '@dnd-kit/geometry';
import * as _dnd_kit_abstract from '@dnd-kit/abstract';
import { Modifier, DragOperation } from '@dnd-kit/abstract';
import { DragDropManager } from '@dnd-kit/dom';

declare class RestrictToWindow extends Modifier<DragDropManager> {
    constructor(manager: DragDropManager);
    windowBoundingRectangle: BoundingRectangle | undefined;
    apply({ shape, transform }: DragOperation): _dnd_kit_geometry.Coordinates;
}

interface Options {
    element?: Element | null | ((operation: DragDropManager['dragOperation']) => Element | null);
}
declare class RestrictToElement extends Modifier<DragDropManager, Options> {
    private boundingRectangle;
    constructor(manager: DragDropManager, options?: Options);
    apply(operation: DragDropManager['dragOperation']): {
        x: number;
        y: number;
    };
    static configure: (options: Options) => _dnd_kit_abstract.PluginDescriptor<any, any, typeof RestrictToElement>;
}

export { RestrictToElement, RestrictToWindow };

[dooohun]

This PR is based on the experimental branch, so SnapToPointer will be included when it's officially released. You'll need to wait for the next release.

[clauderic]

Every commit to the main branch is released to npm under the @beta tag