Cannot address both string or number

Fix #10

package.json

@@ -31,13 +31,15 @@
 		"yarn": "^1.22.19"
 	},
 	"dependencies": {
+		"@types/lodash": "^4",
 		"@wordpress/api-fetch": "~6.21.0",
 		"@wordpress/components": "~23.1.0",
 		"@wordpress/compose": "^6.23.0",
 		"@wordpress/core-data": "~6.12.0",
 		"@wordpress/hooks": "^3.49.0",
 		"@wordpress/i18n": "~4.24.0",
 		"classnames": "^2.3.2",
+		"lodash": "^4.17.21",
 		"react": "~18.2.0"
 	},
 	"scripts": {

sources/client/src/utils/convert-entities-to-control-options.ts

@@ -14,7 +14,7 @@ export function convertEntitiesToControlOptions<
 		const label = entity[labelKey];
 		const value = entity[valueKey];
 		labelKeyIsString(label);
-		return makeControlOption(label, String(value));
+		return makeControlOption(label, value);
 	});
 }
 

sources/client/src/vo/set.ts

@@ -1,3 +1,5 @@
+import { isEqual } from 'lodash';
+
 export class Set<T> {
 	readonly #data: ReadonlyArray<T>;
 
@@ -18,11 +20,11 @@ export class Set<T> {
 			return this;
 		}
 
-		return new Set(this.#data.filter((item) => item !== value));
+		return new Set(this.#data.filter((item) => !this.isEqual(item, value)));
 	}
 
 	public has(value: T): boolean {
-		return this.#data.includes(value);
+		return this.#data.some((current) => this.isEqual(current, value));
 	}
 
 	public map<R = T>(fn: (value: T) => R): Set<R> {
@@ -84,4 +86,20 @@ export class Set<T> {
 			yield value;
 		}
 	}
+
+	private isEqual(a: unknown, b: unknown): boolean {
+		if (typeof a === typeof b) {
+			return isEqual(a, b);
+		}
+
+		if (typeof a === 'number' && typeof b === 'string') {
+			return a.toString() === b;
+		}
+
+		if (typeof a === 'string' && typeof b === 'number') {
+			return a === b.toString();
+		}
+
+		return false;
+	}
 }

tests/client/unit/vo/set.test.ts

@@ -44,12 +44,26 @@ describe('Set', () => {
 		expect(set.add(obj).add(obj).length()).toBe(1);
 	});
 
-	it('Should add the same object again if it is a different reference', () => {
+	it('Should not add the same object again if it is a different reference', () => {
 		const obj = { a: 1 };
 		const obj2 = { a: 1 };
 		const set = new Set<any>();
-		expect(set.add(obj).add(obj2).length()).toBe(2);
-	});
+		expect(set.add(obj).add(obj2).length()).toBe(1);
+	});
+
+	it.each([
+		[[1, 2, 3, 4, 5], 3, true],
+		[[1, 2, 3, 4, 5], '4', true],
+		[['3', '4', '5'], 4, true],
+		[[{ a: 1 }, { b: 2 }, { c: 3 }], { b: 2 }, true],
+		[[{ a: 1 }, { b: 2 }, { c: 3 }], 'b', false],
+	])(
+		'Should return true if a given value is the same in shape of an existing one',
+		(collection, given, expected) => {
+			const set = new Set<any>(collection);
+			expect(set.has(given)).toBe(expected);
+		}
+	);
 
 	it('Return the first element', () => {
 		const set = new Set<number>();

yarn.lock

@@ -3672,6 +3672,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: 6064d43c8f454170841bd67c8266cc9069d9e570a72ca63f06bceb484cb4a3ee60c9c1f305c1b9e3a87826049fd41124b8ef265c4dd08b00f6766609c7fe9973
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:*":
   version: 3.0.1
   resolution: "@types/mime@npm:3.0.1"
@@ -16434,6 +16441,7 @@ __metadata:
     "@testing-library/user-event": "npm:^14.5.1"
     "@total-typescript/shoehorn": "npm:^0.1.0"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.0.0"
+    "@types/lodash": "npm:^4"
     "@wordpress/api-fetch": "npm:~6.21.0"
     "@wordpress/components": "npm:~23.1.0"
     "@wordpress/compose": "npm:^6.23.0"
@@ -16448,6 +16456,7 @@ __metadata:
     eslint-import-resolver-typescript: "npm:^3.5.5"
     jest: "npm:^29.4.3"
     jest-environment-jsdom: "npm:^29.5.0"
+    lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.1"
     react: "npm:~18.2.0"
     ts-jest: "npm:^29.0.5"