ColorPalette: make more resilient against duplicate colors

packages/components/src/color-palette/index.js

@@ -2,7 +2,6 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -35,15 +34,22 @@ function SinglePalette( {
 	actions,
 } ) {
 	const colorOptions = useMemo( () => {
-		return map( colors, ( { color, name } ) => {
+		// In case the palette contains multiple entries with the same color value,
+		// only consider the first instance as the "selected" one.
+		const firstMatchedColorIndex = colors.findIndex(
+			( { color } ) => color === value
+		);
+
+		return colors.map( ( { color, name }, index ) => {
 			const colordColor = colord( color );
+			const isSelected = firstMatchedColorIndex === index;
 
 			return (
 				<CircularOptionPicker.Option
-					key={ color }
-					isSelected={ value === color }
+					key={ `${ color }-${ index }` }
+					isSelected={ isSelected }
 					selectedIconProps={
-						value === color
+						isSelected
 							? {
 									fill:
 										colordColor.contrast() >

packages/components/src/color-palette/stories/index.js

@@ -82,7 +82,7 @@ MultipleOrigins.args = {
 			],
 		},
 		{
-			name: 'Primary colors',
+			name: 'Secondary colors',
 			colors: [
 				{ name: 'Orange', color: '#f60' },
 				{ name: 'Green', color: '#0f0' },
@@ -112,3 +112,14 @@ CSSVariables.args = {
 		{ name: 'Blue', color: 'var(--blue)' },
 	],
 };
+
+export const DuplicatedColors = Template.bind( {} );
+DuplicatedColors.args = {
+	colors: [
+		{ name: 'Primary', color: '#f00' },
+		{ name: 'Secondary', color: '#ff0' },
+		{ name: 'Accent', color: '#00f' },
+		{ name: 'Primary', color: '#f00' },
+		{ name: 'Accent2', color: '#00f' },
+	],
+};