feat(@clayui/language-picker): LPD-45714 Replace selectedLocale with selectedLocaleId to be consistent with the design of the onSelectedLocaleChange API

Author: veroglez

packages/clay-core/src/language-picker/__tests__/index.tsx

@@ -50,7 +50,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -64,7 +64,7 @@ describe('ClayLanguagePicker', () => {
 				classNamesTrigger="trigger-class"
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -78,7 +78,7 @@ describe('ClayLanguagePicker', () => {
 				id="pickerId"
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -99,7 +99,7 @@ describe('ClayLanguagePicker', () => {
 					untranslated: 'Untranslated Label',
 				}}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -112,7 +112,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				small
 				spritemap="/path/to/svg"
 			/>
@@ -126,7 +126,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 				translations={{
 					'es-ES': {total: 4, translated: 2},
@@ -144,7 +144,7 @@ describe('ClayLanguagePicker', () => {
 				hideTriggerText
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -157,7 +157,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 				translations={{
 					'es-ES': {total: 4, translated: 2},
@@ -184,7 +184,7 @@ describe('ClayLanguagePicker', () => {
 			<ClayLanguagePicker
 				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);
@@ -204,7 +204,7 @@ describe('ClayLanguagePicker', () => {
 				locales={locales}
 				onActiveChange={onActiveChange}
 				onSelectedLocaleChange={onSelectedLocaleChange}
-				selectedLocale={locales[0]!}
+				selectedLocaleId={locales[0]!.id}
 				spritemap="/path/to/svg"
 			/>
 		);

packages/clay-core/src/language-picker/index.tsx

@@ -83,12 +83,12 @@ type Props = {
 	/**
 	 * Callback that gets called when a selected locale gets changed
 	 */
-	onSelectedLocaleChange: (val: React.Key) => void;
+	onSelectedLocaleChange?: InternalDispatch<React.Key>;
 
 	/**
-	 * Exposes the currently selected locale
+	 * Exposes the currently selected locale id
 	 */
-	selectedLocale: Item;
+	selectedLocaleId: string;
 
 	/**
 	 * Flag to show the picker in small size.
@@ -216,13 +216,15 @@ const ClayLanguagePicker = ({
 	locales,
 	onActiveChange,
 	onSelectedLocaleChange,
-	selectedLocale,
+	selectedLocaleId,
 	small,
 	spritemap,
 	translations = {},
 }: Props) => {
 	const defaultLanguage = locales[0];
 	const hasTranslations = Object.keys(translations).length;
+	const selectedLocale =
+		locales.find(({id}) => id === selectedLocaleId) || locales[0]!;
 
 	return (
 		<Picker
@@ -237,10 +239,8 @@ const ClayLanguagePicker = ({
 			id={id}
 			items={locales}
 			onActiveChange={onActiveChange}
-			onSelectionChange={(id: React.Key) => {
-				onSelectedLocaleChange(id);
-			}}
-			selectedKey={selectedLocale.id}
+			onSelectionChange={onSelectedLocaleChange}
+			selectedKey={selectedLocaleId}
 			selectedLocale={selectedLocale}
 			small={small}
 			spritemap={spritemap}

packages/clay-core/stories/LanguagePicker.stories.tsx

@@ -40,21 +40,17 @@ const locales = [
 ];
 
 export const Default = (args: any) => {
-	const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
+	const [selectedLocaleId, setSelectedLocaleId] = useState<any>(
+		locales[0]!.id
+	);
 
 	return (
 		<ClayLanguagePicker
 			hideTriggerText={args.hideTriggerText}
 			id="languagePicker"
 			locales={locales}
-			onSelectedLocaleChange={(id) => {
-				const locale = locales.find((locale) => locale.id === id);
-
-				if (locale) {
-					setSelectedLocale(locale);
-				}
-			}}
-			selectedLocale={selectedLocale}
+			onSelectedLocaleChange={setSelectedLocaleId}
+			selectedLocaleId={selectedLocaleId}
 			small={args.small}
 		/>
 	);
@@ -66,7 +62,9 @@ Default.args = {
 };
 
 export const LanguagePickerWithTranslations = (args: any) => {
-	const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
+	const [selectedLocaleId, setSelectedLocaleId] = useState<any>(
+		locales[0]!.id
+	);
 	const translations = {
 		'ca-ES': {total: 4, translated: 2},
 		'nl-NL': {total: 4, translated: 4},
@@ -77,14 +75,8 @@ export const LanguagePickerWithTranslations = (args: any) => {
 			hideTriggerText={args.hideTriggerText}
 			id="languagePicker"
 			locales={locales}
-			onSelectedLocaleChange={(id) => {
-				const locale = locales.find((locale) => locale.id === id);
-
-				if (locale) {
-					setSelectedLocale(locale);
-				}
-			}}
-			selectedLocale={selectedLocale}
+			onSelectedLocaleChange={setSelectedLocaleId}
+			selectedLocaleId={selectedLocaleId}
 			small={args.small}
 			translations={translations}
 		/>