Use useId hook where applicable

Author: wojtekmaj

test/LocaleOptions.tsx

@@ -1,11 +1,16 @@
-import { useRef } from 'react';
+import { useId, useRef } from 'react';
 
 type LocaleOptionsProps = {
   locale: string | undefined;
   setLocale: (locale: string | undefined) => void;
 };
 
 export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
+  const localeDefaultId = useId();
+  const localeEnUSId = useId();
+  const localeFrFRId = useId();
+  const localeArEGId = useId();
+  const customLocaleId = useId();
   const customLocale = useRef<HTMLInputElement>(null);
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -38,54 +43,54 @@ export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps)
       <div>
         <input
           checked={locale === undefined}
-          id="localeDefault"
+          id={localeDefaultId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="undefined"
         />
-        <label htmlFor="localeDefault">Auto</label>
+        <label htmlFor={localeDefaultId}>Auto</label>
       </div>
       <div>
         <input
           checked={locale === 'en-US'}
-          id="localeEnUS"
+          id={localeEnUSId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="en-US"
         />
-        <label htmlFor="localeEnUS">en-US</label>
+        <label htmlFor={localeEnUSId}>en-US</label>
       </div>
       <div>
         <input
           checked={locale === 'fr-FR'}
-          id="localeFrFR"
+          id={localeFrFRId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="fr-FR"
         />
-        <label htmlFor="localeFrFR">fr-FR</label>
+        <label htmlFor={localeFrFRId}>fr-FR</label>
       </div>
       <div>
         <input
           checked={locale === 'ar-EG'}
-          id="localeArEG"
+          id={localeArEGId}
           name="locale"
           onChange={onChange}
           type="radio"
           value="ar-EG"
         />
-        <label htmlFor="localeArEG">ar-EG</label>
+        <label htmlFor={localeArEGId}>ar-EG</label>
       </div>
       <form onSubmit={onCustomChange}>
-        <label htmlFor="customLocale">Custom locale:</label>
+        <label htmlFor={customLocaleId}>Custom locale:</label>
         &nbsp;
         <input
           key={locale}
           defaultValue={locale}
-          id="customLocale"
+          id={customLocaleId}
           name="customLocale"
           pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$"
           ref={customLocale}

test/ValidityOptions.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 type ValidityOptionsProps = {
   maxTime?: string;
   minTime?: string;
@@ -15,6 +17,10 @@ export default function ValidityOptions({
   setMinTime,
   setRequired,
 }: ValidityOptionsProps) {
+  const minTimeId = useId();
+  const maxTimeId = useId();
+  const requiredId = useId();
+
   function onMinChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { value } = event.target;
 
@@ -32,17 +38,17 @@ export default function ValidityOptions({
       <legend>Minimum and maximum time</legend>
 
       <div>
-        <label htmlFor="minTime">Minimum time</label>
-        <input id="minTime" onChange={onMinChange} step="1" type="time" value={minTime || ''} />
+        <label htmlFor={minTimeId}>Minimum time</label>
+        <input id={minTimeId} onChange={onMinChange} step="1" type="time" value={minTime || ''} />
         &nbsp;
         <button onClick={() => setMinTime(undefined)} type="button">
           Clear
         </button>
       </div>
 
       <div>
-        <label htmlFor="maxTime">Maximum time</label>
-        <input id="maxTime" onChange={onMaxChange} step="1" type="time" value={maxTime || ''} />
+        <label htmlFor={maxTimeId}>Maximum time</label>
+        <input id={maxTimeId} onChange={onMaxChange} step="1" type="time" value={maxTime || ''} />
         &nbsp;
         <button onClick={() => setMaxTime(undefined)} type="button">
           Clear
@@ -52,11 +58,11 @@ export default function ValidityOptions({
       <div>
         <input
           checked={required}
-          id="required"
+          id={requiredId}
           onChange={(event) => setRequired(event.target.checked)}
           type="checkbox"
         />
-        <label htmlFor="required">Required</label>
+        <label htmlFor={requiredId}>Required</label>
       </div>
     </fieldset>
   );

test/ValueOptions.tsx

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { getHoursMinutesSeconds } from '@wojtekmaj/date-utils';
 
 import type { LooseValue } from './shared/types.js';
@@ -8,6 +9,8 @@ type ValueOptionsProps = {
 };
 
 export default function ValueOptions({ setValue, value }: ValueOptionsProps) {
+  const timeId = useId();
+
   const [time] = Array.isArray(value) ? value : [value];
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -21,9 +24,9 @@ export default function ValueOptions({ setValue, value }: ValueOptionsProps) {
       <legend>Set time externally</legend>
 
       <div>
-        <label htmlFor="time">Time</label>
+        <label htmlFor={timeId}>Time</label>
         <input
-          id="time"
+          id={timeId}
           onChange={onChange}
           step="1"
           type="time"

test/ViewOptions.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react';
+
 type ViewOptionsProps = {
   disabled: boolean;
   renderInPortal: boolean;
@@ -11,6 +13,9 @@ export default function ViewOptions({
   setDisabled,
   setRenderInPortal,
 }: ViewOptionsProps) {
+  const disabledId = useId();
+  const renderInPortalId = useId();
+
   function onDisabledChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { checked } = event.target;
 
@@ -28,18 +33,18 @@ export default function ViewOptions({
       <legend>View options</legend>
 
       <div>
-        <input checked={disabled} id="disabled" onChange={onDisabledChange} type="checkbox" />
-        <label htmlFor="disabled">Disabled</label>
+        <input checked={disabled} id={disabledId} onChange={onDisabledChange} type="checkbox" />
+        <label htmlFor={disabledId}>Disabled</label>
       </div>
 
       <div>
         <input
           checked={renderInPortal}
-          id="renderInPortal"
+          id={renderInPortalId}
           onChange={onRenderInPortalChange}
           type="checkbox"
         />
-        <label htmlFor="renderInPortal">Render in portal</label>
+        <label htmlFor={renderInPortalId}>Render in portal</label>
       </div>
     </fieldset>
   );