Checkbox - fixed label click cases double click

Author: marcus-wishes

library/src/components/Checkbox.tsx

@@ -7,6 +7,7 @@ import {
 	type InputHTMLAttributes,
 	type ReactNode,
 	useEffect,
+	useId,
 	useImperativeHandle,
 	useRef,
 	useState,
@@ -139,6 +140,8 @@ const CheckboxI = (
 		}
 	}, [])
 
+	const bid = useId()
+
 	return (
 		<>
 			<div
@@ -151,7 +154,7 @@ const CheckboxI = (
 				<div className={"relative flex items-center justify-center"}>
 					<input
 						type="checkbox"
-						id={id}
+						id={id ?? bid}
 						data-testid={testId}
 						ref={inputRef}
 						disabled={disabled}
@@ -195,24 +198,12 @@ const CheckboxI = (
 				</div>
 
 				<label
-					htmlFor={id}
+					htmlFor={id ?? bid}
 					id={labelId}
 					aria-disabled={disabled}
 					aria-invalid={invalid}
 					className={twMerge(labelStyles, labelClassName)}
 					style={labelStyle}
-					onClick={(e) => {
-						if (disabled) {
-							e.preventDefault()
-							e.stopPropagation()
-						}
-						inputRef.current?.click()
-					}}
-					onKeyUp={(e) => {
-						if (e.key === "Enter" && !disabled) {
-							inputRef.current?.click()
-						}
-					}}
 				>
 					{label}
 				</label>

package.json

@@ -122,13 +122,13 @@
 		"lowlight": "^3.3.0",
 		"lucide-react": "^0.544.0",
 		"mime-types": "^3.0.1",
-		"motion": "^12.23.20",
+		"motion": "^12.23.21",
 		"postcss": "^8.5.6",
 		"react-awesome-slider": "^4.1.0",
 		"react-day-picker": "^9.11.0",
 		"react-intl": "^7.1.11",
 		"react-joyride": "^2.9.3",
-		"react-router-dom": "^7.9.1",
+		"react-router-dom": "^7.9.2",
 		"react-select": "^5.10.2",
 		"react-syntax-highlighter": "^15.6.6",
 		"react-transition-group": "^4.4.5",