Added ref support in Radio.Item

Author: josephmathew900

src/components/Radio/Item.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import classnames from "classnames";
 import PropTypes from "prop-types";
@@ -7,37 +7,42 @@ import Label from "components/Label";
 import { useId } from "hooks";
 import { hyphenize } from "utils";
 
-const Item = ({
-  name = "",
-  label = "",
-  className = "",
-  labelProps,
-  dataCy = "",
-  ...otherProps
-}) => {
-  const id = useId(otherProps.id);
+const Item = forwardRef(
+  (
+    {
+      name = "",
+      label = "",
+      className = "",
+      labelProps,
+      dataCy = "",
+      ...otherProps
+    },
+    ref
+  ) => {
+    const id = useId(otherProps.id);
 
-  return (
-    <div className={classnames(["neeto-ui-radio__item", className])}>
-      <input
-        {...{ id, name }}
-        className="neeto-ui-radio"
-        data-cy={dataCy || `${hyphenize(label)}-radio-input`}
-        type="radio"
-        {...otherProps}
-      />
-      {label && (
-        <Label
-          data-cy={dataCy || `${hyphenize(label)}-radio-label`}
-          htmlFor={id}
-          {...labelProps}
-        >
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-};
+    return (
+      <div className={classnames(["neeto-ui-radio__item", className])}>
+        <input
+          {...{ id, name, ref }}
+          className="neeto-ui-radio"
+          data-cy={dataCy || `${hyphenize(label)}-radio-input`}
+          type="radio"
+          {...otherProps}
+        />
+        {label && (
+          <Label
+            data-cy={dataCy || `${hyphenize(label)}-radio-label`}
+            htmlFor={id}
+            {...labelProps}
+          >
+            {label}
+          </Label>
+        )}
+      </div>
+    );
+  }
+);
 
 Item.displayName = "Radio.Item";
 

stories/Components/Radio.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { Formik, Form } from "formik";
 
@@ -24,12 +24,20 @@ const metadata = {
   },
 };
 
-const Options = args => (
-  <Radio {...args}>
-    <Radio.Item label="Option 1" name="options" value="Option1" />
-    <Radio.Item label="Option 2" name="options" value="Option2" />
-  </Radio>
-);
+const Options = args => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    ref.current?.focus();
+  }, [ref.current]);
+
+  return (
+    <Radio {...{ ...args, ref }}>
+      <Radio.Item label="Option 1" name="options" value="Option1" />
+      <Radio.Item label="Option 2" name="options" value="Option2" />
+    </Radio>
+  );
+};
 
 Options.args = { label: "Radio options" };