v16 Release

packages/backend-html5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd-html5-backend",
-  "version": "15.1.3",
+  "version": "16.0.0",
   "description": "HTML5 backend for React DnD",
   "type": "module",
   "main": "dist/index.js",

packages/backend-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd-test-backend",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "description": "A mock backend for testing React DnD apps",
   "type": "module",
   "main": "dist/index.js",

packages/backend-touch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd-touch-backend",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "description": "Touch backend for react-dnd",
   "type": "module",
   "main": "dist/index.js",

packages/dnd-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dnd-core",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "description": "Drag and drop sans the GUI",
   "license": "MIT",
   "type": "module",

packages/docsite/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "dependencies": {
     "debug": "^4.3.4",
-    "gatsby": "~4.11.1",
+    "gatsby": "~4.11.2",
     "gatsby-plugin-manifest": "^4.11.1",
     "gatsby-plugin-react-helmet": "^5.11.0",
     "gatsby-plugin-sharp": "^4.11.1",
@@ -20,7 +20,7 @@
     "gatsby-transformer-remark": "^5.11.1",
     "gatsby-transformer-sharp": "^4.11.0",
     "lodash": "^4.17.21",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "query-string": "^6.14.1",
     "react": "^18.0.0",
     "react-dnd": "workspace:^",

packages/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd-examples",
-  "version": "15.1.3",
+  "version": "16.0.0",
   "private": true,
   "description": "Drag and Drop for React",
   "type": "module",

packages/examples/src/04-sortable/stress-test/Container.tsx

@@ -9,14 +9,19 @@ const style: CSSProperties = {
 	width: 400,
 }
 
-export interface ContainerState {
-	cardsById: { [key: string]: any }
-	cardsByIndex: any[]
+interface CardItem {
+	id: number
+	text: string
+}
+
+export interface CardState {
+	cardsById: Record<string, CardItem>
+	cardsByIndex: CardItem[]
 }
 
 function buildCardData() {
-	const cardsById: { [key: string]: any } = {}
-	const cardsByIndex = []
+	const cardsById: Record<string, CardItem> = {}
+	const cardsByIndex: CardItem[] = []
 
 	for (let i = 0; i < 1000; i += 1) {
 		const card = { id: i, text: Faker.name.findName() }
@@ -33,13 +38,16 @@ function buildCardData() {
 /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
 export interface ContainerProps {}
 
-export class Container extends Component<ContainerProps, ContainerState> {
-	private pendingUpdateFn: any
+export class Container extends Component<
+	ContainerProps,
+	Record<string, unknown>
+> {
 	private requestedFrame: number | undefined
+	private cardState: CardState = buildCardData()
 
 	public constructor(props: ContainerProps) {
 		super(props)
-		this.state = buildCardData()
+		this.state = STATE
 	}
 
 	public override componentWillUnmount(): void {
@@ -49,7 +57,7 @@ export class Container extends Component<ContainerProps, ContainerState> {
 	}
 
 	public override render(): JSX.Element {
-		const { cardsByIndex } = this.state
+		const { cardsByIndex } = this.cardState
 
 		return (
 			<>
@@ -67,38 +75,34 @@ export class Container extends Component<ContainerProps, ContainerState> {
 		)
 	}
 
-	private scheduleUpdate(updateFn: any) {
-		this.pendingUpdateFn = updateFn
-
-		if (!this.requestedFrame) {
-			this.requestedFrame = requestAnimationFrame(this.drawFrame)
-		}
-	}
-
-	private drawFrame = (): void => {
-		const nextState = update(this.state, this.pendingUpdateFn)
-		this.setState(nextState)
-
-		this.pendingUpdateFn = undefined
-		this.requestedFrame = undefined
-	}
-
 	private moveCard = (id: string, afterId: string): void => {
-		const { cardsById, cardsByIndex } = this.state
-
-		const card = cardsById[id]
-		const afterCard = cardsById[afterId]
+		const { cardsById, cardsByIndex } = this.cardState
 
+		const card = cardsById[id] as CardItem
+		const afterCard = cardsById[afterId] as CardItem
 		const cardIndex = cardsByIndex.indexOf(card)
 		const afterIndex = cardsByIndex.indexOf(afterCard)
-
-		this.scheduleUpdate({
+		this.cardState = update(this.cardState, {
 			cardsByIndex: {
 				$splice: [
 					[cardIndex, 1],
 					[afterIndex, 0, card],
 				],
 			},
 		})
+		this.scheduleUpdate()
+	}
+
+	private scheduleUpdate() {
+		if (!this.requestedFrame) {
+			this.requestedFrame = requestAnimationFrame(this.drawFrame)
+		}
+	}
+
+	private drawFrame = (): void => {
+		this.setState(STATE)
+		this.requestedFrame = undefined
 	}
 }
+
+const STATE = {}

packages/react-dnd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "description": "Drag and Drop for React",
   "type": "module",
   "main": "dist/index.js",

packages/test-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dnd-test-utils",
-  "version": "15.1.2",
+  "version": "16.0.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

packages/util-asap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-dnd/asap",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "High-priority task queue for Node.js and browsers",
   "keywords": [
     "event",

packages/util-invariant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-dnd/invariant",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "invariantx",
   "keywords": [
     "test",

packages/util-shallowequal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-dnd/shallowequal",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "Like lodash isEqualWith but for shallow equal.",
   "keywords": [
     "shallowequal",

yarn.lock

@@ -8222,14 +8222,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"create-gatsby@npm:^2.11.1":
-  version: 2.11.1
-  resolution: "create-gatsby@npm:2.11.1"
+"create-gatsby@npm:^2.11.2":
+  version: 2.11.2
+  resolution: "create-gatsby@npm:2.11.2"
   dependencies:
     "@babel/runtime": ^7.15.4
   bin:
     create-gatsby: cli.js
-  checksum: 8ff3c758bb9af6dc9cb8ee5aeac716bb98f08e49f86c19cbbe1df51a437046a563573645c5285276ada93dd3a2d0dd886ec75be11430c335d6281f451880d562
+  checksum: 672840735b59033ea3133b4f5b0a07ad2efb55e89103b2b6b2a887704a4a572c702ec7828b1be590b713bdb37829a4400e178e9078c9e97af29a49096cae85f0
   languageName: node
   linkType: hard
 
@@ -11280,9 +11280,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby-cli@npm:^4.11.1":
-  version: 4.11.1
-  resolution: "gatsby-cli@npm:4.11.1"
+"gatsby-cli@npm:^4.11.2":
+  version: 4.11.2
+  resolution: "gatsby-cli@npm:4.11.2"
   dependencies:
     "@babel/code-frame": ^7.14.0
     "@babel/core": ^7.15.5
@@ -11300,7 +11300,7 @@ __metadata:
     common-tags: ^1.8.2
     configstore: ^5.0.1
     convert-hrtime: ^3.0.0
-    create-gatsby: ^2.11.1
+    create-gatsby: ^2.11.2
     envinfo: ^7.8.1
     execa: ^5.1.1
     fs-exists-cached: ^1.0.0
@@ -11331,7 +11331,7 @@ __metadata:
     yurnalist: ^2.1.0
   bin:
     gatsby: cli.js
-  checksum: e0e8be47e22309c187afa79bc85758e6a8692a330ddde2cdbc4a8edc018acb60a6776fc6a07d7e65087af6261f63d0671d5dd0e4cefa5dd59857b385ae6f2b6c
+  checksum: e892fa85ef71ed421e1a6154a95074c0e8b3b0b8167b26a1e879b73c4e289a1c1afbb9365c4c7a9bb1bbc313d5c859b5aaa04b2ba520d1f32e414f8377d9f508
   languageName: node
   linkType: hard
 
@@ -11777,9 +11777,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby@npm:~4.11.1":
-  version: 4.11.1
-  resolution: "gatsby@npm:4.11.1"
+"gatsby@npm:~4.11.2":
+  version: 4.11.2
+  resolution: "gatsby@npm:4.11.2"
   dependencies:
     "@babel/code-frame": ^7.14.0
     "@babel/core": ^7.15.5
@@ -11849,7 +11849,7 @@ __metadata:
     find-cache-dir: ^3.3.2
     fs-exists-cached: 1.0.0
     fs-extra: ^10.0.0
-    gatsby-cli: ^4.11.1
+    gatsby-cli: ^4.11.2
     gatsby-core-utils: ^3.11.1
     gatsby-graphiql-explorer: ^2.11.0
     gatsby-legacy-polyfills: ^2.11.0
@@ -11942,7 +11942,7 @@ __metadata:
       optional: true
   bin:
     gatsby: ./cli.js
-  checksum: 3b1ba33c8c4668ad4c7bf4c8e9663c6517f207aafbbd2a1897fa764766b64c5a1b8bcdb85c5b2eb1a701d98b083f42a2894db5bc57aef4764b5bd5e68f5eaf39
+  checksum: 2d2a14e17385f19c47114425347b86d392849c078415582c9beb66aa7fa08b7223dcd649c33f732d559cbbb91aa2192af5575b696657caf4d5d557f29c457b5c
   languageName: node
   linkType: hard
 
@@ -18791,7 +18791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prismjs@npm:^1.25.0":
+"prismjs@npm:^1.27.0":
   version: 1.27.0
   resolution: "prismjs@npm:1.27.0"
   checksum: 85c7f4a3e999073502cc9e1882af01e3709706369ec254b60bff1149eda701f40d02512acab956012dc7e61cfd61743a3a34c1bd0737e8dbacd79141e5698bbc
@@ -19205,7 +19205,7 @@ __metadata:
     "@types/styled-components": ^5.1.24
     babel-plugin-styled-components: ^1.13.2
     debug: ^4.3.4
-    gatsby: ~4.11.1
+    gatsby: ~4.11.2
     gatsby-plugin-manifest: ^4.11.1
     gatsby-plugin-react-helmet: ^5.11.0
     gatsby-plugin-sharp: ^4.11.1
@@ -19221,7 +19221,7 @@ __metadata:
     lodash: ^4.17.21
     npm-run-all: ^4.1.5
     prettier: ^2.6.2
-    prismjs: ^1.25.0
+    prismjs: ^1.27.0
     prop-types: ^15.8.1
     query-string: ^6.14.1
     react: ^18.0.0