Merge PR #809: fix partial/undefined props under React 18 TypeScript

Fixes #807. Making the propTypes static optional keeps it out of the required public type surface. React <= 18's JSX LibraryManagedAttributes only consults propTypes when it is a required member; when it does, the index-signature propTypes cancels defaultProps optionality and consumers must pass every prop. React 19 ignores propTypes entirely, so v19 alone could not catch this.

Adds typings/tsconfig.react18.json, wired into make lint, which type-checks the public surface against @types/react@18 so the regression cannot return.

The PR's yarn.lock was dropped and regenerated on top of master: it had been rebuilt against a different registry and lost all 49 platform-optional esbuild/rollup binaries, which would break yarn install --frozen-lockfile on Linux CI.

Co-authored-by: Josh Kelley <joshkel@gmail.com>

Author: STRML

Makefile

@@ -15,6 +15,7 @@ lint:
 	@$(BIN)/eslint lib
 	@$(BIN)/tsc --noEmit
 	@$(BIN)/tsc -p typings
+	@$(BIN)/tsc -p typings/tsconfig.react18.json
 
 # tsup emits cjs + esm + dts into build/cjs (and rewrites build/cjs/cjs.js to the
 # legacy module.exports === Draggable shape). webpack emits the UMD global bundle.

lib/Draggable.tsx

@@ -51,12 +51,20 @@ class Draggable extends React.Component<Partial<DraggableProps>, DraggableState>
 
   static displayName?: string = 'Draggable';
 
-  // The index-signature annotation is load-bearing: without it tsc infers the
-  // PropTypes.Requireable<...> types and emits `import PropTypes from 'prop-types'`
-  // into the generated public .d.ts, forcing consumers to install
-  // @types/prop-types (the v4.5.0 hand-written typings had no prop-types dep).
+  // Both the annotation and the `?` are load-bearing:
+  //  - The index-signature annotation stops tsc from inferring the
+  //    PropTypes.Requireable<...> types and emitting `import PropTypes from
+  //    'prop-types'` into the generated public .d.ts, which would force consumers
+  //    to install @types/prop-types (the v4.5.0 hand-written typings had none).
+  //  - The `?` keeps `propTypes` from being a *required* member of the public
+  //    type. React <= 18's JSX LibraryManagedAttributes only consults a
+  //    component's `propTypes` when it is required (`C extends {propTypes: ...}`);
+  //    when it does, this index-signature `propTypes` makes `defaultProps` stop
+  //    marking props optional, so consumers are forced to pass every prop.
+  //    Optional dodges that branch; React 19 ignores `propTypes` entirely. The
+  //    typings/tsconfig.react18.json check guards against a regression here.
   // Do not remove. See lib/DraggableCore.tsx for the same guard.
-  static propTypes: {[key: string]: unknown} = {
+  static propTypes?: {[key: string]: unknown} = {
     // Accepts all props <DraggableCore> accepts.
     ...DraggableCore.propTypes,
 

lib/DraggableCore.tsx

@@ -74,12 +74,20 @@ export default class DraggableCore extends React.Component<Partial<DraggableCore
 
   static displayName: string | undefined = 'DraggableCore';
 
-  // The index-signature annotation is load-bearing: without it tsc infers the
-  // PropTypes.Requireable<...> types and emits `import PropTypes from 'prop-types'`
-  // into the generated public .d.ts, forcing consumers to install
-  // @types/prop-types (the v4.5.0 hand-written typings had no prop-types dep).
+  // Both the annotation and the `?` are load-bearing:
+  //  - The index-signature annotation stops tsc from inferring the
+  //    PropTypes.Requireable<...> types and emitting `import PropTypes from
+  //    'prop-types'` into the generated public .d.ts, which would force consumers
+  //    to install @types/prop-types (the v4.5.0 hand-written typings had none).
+  //  - The `?` keeps `propTypes` from being a *required* member of the public
+  //    type. React <= 18's JSX LibraryManagedAttributes only consults a
+  //    component's `propTypes` when it is required (`C extends {propTypes: ...}`);
+  //    when it does, this index-signature `propTypes` makes `defaultProps` stop
+  //    marking props optional, so consumers are forced to pass every prop.
+  //    Optional dodges that branch; React 19 ignores `propTypes` entirely. The
+  //    typings/tsconfig.react18.json check guards against a regression here.
   // Do not remove. See lib/Draggable.tsx for the same guard.
-  static propTypes: {[key: string]: unknown} = {
+  static propTypes?: {[key: string]: unknown} = {
     /**
      * `allowAnyClick` allows dragging using any mouse button.
      * By default, we only accept the left button.

package.json

@@ -57,6 +57,7 @@
     "@types/node": "^25.0.3",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.7",
+    "@types/react-18": "npm:@types/react@^18.3.27",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",

typings/tsconfig.react18.json

@@ -0,0 +1,23 @@
+{
+  "//": "Type-checks the public API against @types/react@18 as well as the default v19. React 18's JSX `LibraryManagedAttributes` consults a component's `propTypes`, unlike v19 which ignores it. A `propTypes` member leaking into the public types there makes `defaultProps` stop marking props optional, so React 18 consumers must pass every prop. v19 alone cannot catch that regression. Only `react` is redirected to the v18 types; `react-dom` stays on its installed v19 types (skipLibCheck ignores any v18/v19 mismatch inside its .d.ts). Aliasing react-dom too would pull in an `@types/react-dom-18` whose `@types/react@^18` peer cannot be satisfied under npm's strict resolution.",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "target": "ES2019",
+    "lib": ["ES2019", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "paths": {
+      "react-draggable": ["../lib/cjs.ts"],
+      "react": ["../node_modules/@types/react-18"],
+      "react/jsx-runtime": ["../node_modules/@types/react-18/jsx-runtime"]
+    }
+  },
+  "files": [
+    "test.tsx"
+  ]
+}

yarn.lock

@@ -1407,7 +1407,7 @@
   dependencies:
     undici-types ">=7.24.0 <7.24.7"
 
-"@types/prop-types@^15.7.15":
+"@types/prop-types@*", "@types/prop-types@^15.7.15":
   version "15.7.15"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
   integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
@@ -1422,6 +1422,14 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-18@npm:@types/react@^18.3.27":
+  version "18.3.31"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.31.tgz#b5e95e28ffcceab8d982f33f2eb076e17653c2a4"
+  integrity sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.2.2"
+
 "@types/react-dom@^19.2.3":
   version "19.2.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"