EPMRPP-93028 || Use React 18th 'useId' hook

reportportal · Oct 8, 2024 · c121c74 · c121c74
1 parent 66101d6
commit c121c74
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
@@ -7,6 +7,7 @@ import {
   KeyboardEventHandler,
   ChangeEventHandler,
   HTMLAttributes,
+  useId,
 } from 'react';
 import { KeyCodes } from '@common/constants/keyCodes';
 import styles from './checkbox.module.scss';
@@ -35,6 +36,7 @@ export const Checkbox: FC<CheckboxProps> = ({
   ...rest
 }): ReactElement => {
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const checkboxLabelId = useId();
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     const { keyCode } = event;
@@ -53,7 +55,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 
   return (
     <label
-      id="rp-ui-kit-checkbox-label"
+      id={checkboxLabelId}
       className={cx('checkbox', className, {
         disabled,
       })}

diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx
@@ -6,6 +6,7 @@ import {
   FC,
   ReactElement,
   KeyboardEvent,
+  useId,
 } from 'react';
 import classNames from 'classnames/bind';
 import { KeyCodes } from '@common/constants/keyCodes';
@@ -40,6 +41,7 @@ export const Radio: FC<RadioProps> = ({
   ...rest
 }): ReactElement => {
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const radioLabelId = useId();
 
   const isChecked = String(option.value) === String(value);
 
@@ -62,7 +64,7 @@ export const Radio: FC<RadioProps> = ({
   return (
     // eslint-disable-next-line
     <label
-      id="rp-ui-kit-radio-label"
+      id={radioLabelId}
       className={cx(className, 'radio-button', {
         disabled: option.disabled,
       })}

diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
@@ -6,6 +6,7 @@ import {
   KeyboardEventHandler,
   ReactElement,
   ReactNode,
+  useId,
   useRef,
 } from 'react';
 import { KeyCodes } from '@common/constants/keyCodes';
@@ -32,6 +33,7 @@ export const Toggle: FC<ToggleProps> = ({
   ...rest
 }): ReactElement => {
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const toggleLabelId = useId();
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     const { keyCode } = event;
@@ -49,11 +51,7 @@ export const Toggle: FC<ToggleProps> = ({
   };
 
   return (
-    <label
-      id="rp-ui-kit-toggle-label"
-      title={title}
-      className={cx('toggle', className, { disabled })}
-    >
+    <label id={toggleLabelId} title={title} className={cx('toggle', className, { disabled })}>
       <input
         ref={inputRef}
         tabIndex={disabled ? -1 : 0}