From 8169dfd2c89b82ed39bb74be8063a715b467c184 Mon Sep 17 00:00:00 2001
From: Xinyu Liu <meteor.lxy@foxmail.com>
Date: Sat, 17 Aug 2024 05:51:32 +0800
Subject: [PATCH] CustomSelectControl: improve props type inferring (#64412)

* CustomSelectControl: improve props type inferring

* chore: update changelog

* chore: updates

Co-authored-by: meteorlxy <meteorlxy@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |   4 +
 .../src/custom-select-control/test/index.tsx  | 125 ++++++++++++++++++
 .../src/custom-select-control/types.ts        |   6 +-
 3 files changed, 132 insertions(+), 3 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f824bf8d2b2dd..f1b6ba3341de6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -67,6 +67,10 @@
 -   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
 -   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
 
+### Internal
+
+-   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
+
 ## 28.5.0 (2024-08-07)
 
 ### Bug Fixes
diff --git a/packages/components/src/custom-select-control/test/index.tsx b/packages/components/src/custom-select-control/test/index.tsx
index fdbe8d72a48de..b2ac5c19c6ab3 100644
--- a/packages/components/src/custom-select-control/test/index.tsx
+++ b/packages/components/src/custom-select-control/test/index.tsx
@@ -689,3 +689,128 @@ describe.each( [
 		} );
 	} );
 } );
+
+describe( 'Type checking', () => {
+	// eslint-disable-next-line jest/expect-expect
+	it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+		const options = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		];
+		const optionsReadOnly = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		] as const;
+
+		const onChange = (): void => {};
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'random string is also accepted for non-readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				// @ts-expect-error: random string is not accepted for immutable options
+				key: 'random string is not accepted for readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<UncontrolledCustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+	} );
+} );
diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts
index e37ba349a2b84..0cbc2388e7963 100644
--- a/packages/components/src/custom-select-control/types.ts
+++ b/packages/components/src/custom-select-control/types.ts
@@ -55,7 +55,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 * Function called with the control's internal state changes. The `selectedItem`
 	 * property contains the next selected item.
 	 */
-	onChange?: ( newValue: CustomSelectChangeObject< T > ) => void;
+	onChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;
 	/**
 	 * A handler for `blur` events on the trigger button.
 	 *
@@ -83,7 +83,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * The list of options that can be chosen from.
 	 */
-	options: Array< T >;
+	options: ReadonlyArray< T >;
 	/**
 	 * The size of the control.
 	 *
@@ -93,7 +93,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Can be used to externally control the value of the control.
 	 */
-	value?: T;
+	value?: NoInfer< T >;
 	/**
 	 * Use the `showSelectedHint` property instead.
 	 * @deprecated