Update generated id with react useId as it does not change when the c…

…omponent is re-rendered.
guardian · May 15, 2024 · b801801 · b801801
1 parent 2abbb97
commit b801801
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 19 deletions.
diff --git a/.changeset/happy-toes-explain.md b/.changeset/happy-toes-explain.md
@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': patch
+---
+
+Updated generated id to use react useId as it does not change when the component is re-rendered.
diff --git a/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx b/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
-import { generateSourceId } from '@guardian/source-foundations';
 import type { InputHTMLAttributes, ReactNode } from 'react';
+import { useId } from 'react';
 import type { Props } from '../@types/Props';
 import type { Theme } from '../@types/Theme';
 import { mergeThemes } from '../utils/themes';
@@ -98,7 +98,7 @@ export const Checkbox = ({
 	theme,
 	...props
 }: CheckboxProps) => {
-	const checkboxId = id ?? generateSourceId();
+	const checkboxId = id ?? useId();
 	const isChecked = (): boolean => {
 		if (checked != null) {
 			return checked;

diff --git a/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx b/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx
@@ -1,6 +1,6 @@
 import type { JSX } from '@emotion/react/jsx-runtime';
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
-import { Children, cloneElement } from 'react';
+import { descriptionId } from '@guardian/source-foundations';
+import { Children, cloneElement, useId } from 'react';
 import type { Props } from '../@types/Props';
 import { Legend } from '../label/Legend';
 import { InlineError } from '../user-feedback/InlineError';
@@ -74,7 +74,7 @@ export const CheckboxGroup = ({
 	theme,
 	...props
 }: CheckboxGroupProps) => {
-	const groupId = id ?? generateSourceId();
+	const groupId = id ?? useId();
 	const legend = label ? (
 		<Legend
 			text={label}

diff --git a/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx b/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx
@@ -1,7 +1,7 @@
 import type { JSX } from '@emotion/react/jsx-runtime';
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
+import { descriptionId } from '@guardian/source-foundations';
 import type { FieldsetHTMLAttributes } from 'react';
-import { Children, cloneElement } from 'react';
+import { Children, cloneElement, useId } from 'react';
 import type { Props } from '../@types/Props';
 import { Legend } from '../label/Legend';
 import { InlineError } from '../user-feedback/InlineError';
@@ -88,7 +88,7 @@ export const ChoiceCardGroup = ({
 	theme,
 	...props
 }: ChoiceCardGroupProps) => {
-	const groupId = id ?? generateSourceId();
+	const groupId = id ?? useId();
 	const showLabel = !!(label && !hideLabel);
 	const topMargin =
 		(showLabel || supporting) ?? error ? containerTopMargin : '';

diff --git a/libs/@guardian/source-react-components/src/radio/Radio.tsx b/libs/@guardian/source-react-components/src/radio/Radio.tsx
@@ -1,5 +1,5 @@
-import { generateSourceId } from '@guardian/source-foundations';
 import type { InputHTMLAttributes, ReactNode } from 'react';
+import { useId } from 'react';
 import type { Props } from '../@types/Props';
 import type { Theme } from '../@types/Theme';
 import { mergeThemes } from '../utils/themes';
@@ -82,7 +82,7 @@ export const Radio = ({
 	theme,
 	...props
 }: RadioProps) => {
-	const radioId = id ?? generateSourceId();
+	const radioId = id ?? useId();
 	const isChecked = (): boolean => {
 		if (checked != null) {
 			return checked;

diff --git a/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx b/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx
@@ -1,7 +1,7 @@
 import type { JSX } from '@emotion/react/jsx-runtime';
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
+import { descriptionId } from '@guardian/source-foundations';
 import type { FieldsetHTMLAttributes } from 'react';
-import { Children, cloneElement } from 'react';
+import { Children, cloneElement, useId } from 'react';
 import type { Props } from '../@types/Props';
 import type { Theme } from '../@types/Theme';
 import { Inline } from '../inline/Inline';
@@ -78,7 +78,7 @@ export const RadioGroup = ({
 	theme,
 	...props
 }: RadioGroupProps) => {
-	const groupId = id ?? generateSourceId();
+	const groupId = id ?? useId();
 	const legend = label ? (
 		<Legend
 			text={label}

diff --git a/libs/@guardian/source-react-components/src/select/Select.tsx b/libs/@guardian/source-react-components/src/select/Select.tsx
@@ -1,5 +1,6 @@
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
+import { descriptionId } from '@guardian/source-foundations';
 import type { ReactNode, SelectHTMLAttributes } from 'react';
+import { useId } from 'react';
 import type { Props } from '../@types/Props';
 import type { Theme } from '../@types/Theme';
 import { SvgChevronDownSingle } from '../__generated__/icons/SvgChevronDownSingle';
@@ -94,7 +95,7 @@ export const Select = ({
 	theme,
 	...props
 }: SelectProps) => {
-	const selectId = id ?? generateSourceId();
+	const selectId = id ?? useId();
 	const mergedTheme = (providerTheme: Theme['select']) =>
 		mergeThemes<ThemeSelect, Theme['select']>(
 			defaultTheme,

diff --git a/libs/@guardian/source-react-components/src/text-area/TextArea.tsx b/libs/@guardian/source-react-components/src/text-area/TextArea.tsx
@@ -1,5 +1,6 @@
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
+import { descriptionId } from '@guardian/source-foundations';
 import type { InputHTMLAttributes } from 'react';
+import { useId } from 'react';
 import type { InputSize } from '../@types/InputSize';
 import type { Props } from '../@types/Props';
 import { Label } from '../label/Label';
@@ -104,7 +105,7 @@ export const TextArea = ({
 	theme,
 	...props
 }: TextAreaProps) => {
-	const textAreaId = id ?? generateSourceId();
+	const textAreaId = id ?? useId();
 	const getClassName = () => {
 		const HAS_VALUE_CLASS = 'src-has-value';
 

diff --git a/libs/@guardian/source-react-components/src/text-input/TextInput.tsx b/libs/@guardian/source-react-components/src/text-input/TextInput.tsx
@@ -1,6 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
-import { descriptionId, generateSourceId } from '@guardian/source-foundations';
+import { descriptionId } from '@guardian/source-foundations';
 import type { InputHTMLAttributes } from 'react';
+import { useId } from 'react';
 import type { InputSize } from '../@types/InputSize';
 import type { Props } from '../@types/Props';
 import type { Theme } from '../@types/Theme';
@@ -121,7 +122,7 @@ export const TextInput = ({
 	cssOverrides,
 	...props
 }: TextInputProps) => {
-	const textInputId = id ?? generateSourceId();
+	const textInputId = id ?? useId();
 	const mergedTheme = (providerTheme: Theme) =>
 		mergeThemes<ThemeTextInput, Theme['textInput']>(
 			themeTextInput,