Fix: Fixed some errors in the console (#13317)

### What problem does this PR solve?

Fix: Fixed some errors in the console
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/ui/radio-group.tsx

@@ -6,25 +6,29 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentProps<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
+      ref={ref}
       data-slot="radio-group"
       className={cn('grid gap-3', className)}
       {...props}
     />
   );
-}
+});
 
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+RadioGroup.displayName = 'RadioGroup';
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentProps<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
+      ref={ref}
       data-slot="radio-group-item"
       className={cn(
         'text-primary aspect-square size-4 shrink-0 rounded-full',
@@ -45,6 +49,8 @@ function RadioGroupItem({
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
-}
+});
+
+RadioGroupItem.displayName = 'RadioGroupItem';
 
 export { RadioGroup, RadioGroupItem };

web/src/components/ui/radio.tsx

@@ -74,59 +74,66 @@ type RadioGroupProps = {
   direction?: 'horizontal' | 'vertical';
 };
 
-function Group({
-  value,
-  defaultValue,
-  onChange,
-  disabled,
-  children,
-  className,
-  direction = 'horizontal',
-}: RadioGroupProps) {
-  const [internalValue, setInternalValue] = useState(defaultValue || '');
+const Group = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      children,
+      className,
+      direction = 'horizontal',
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
 
-  const isControlled = value !== undefined;
-  const mergedValue = isControlled ? value : internalValue;
+    const isControlled = value !== undefined;
+    const mergedValue = isControlled ? value : internalValue;
 
-  const handleChange = (val: string | number) => {
-    if (disabled) return;
+    const handleChange = (val: string | number) => {
+      if (disabled) return;
 
-    if (!isControlled) {
-      setInternalValue(val);
-    }
+      if (!isControlled) {
+        setInternalValue(val);
+      }
 
-    if (onChange) {
-      onChange(val);
-    }
-  };
+      if (onChange) {
+        onChange(val);
+      }
+    };
 
-  return (
-    <RadioGroupContext.Provider
-      value={{
-        value: mergedValue,
-        onChange: handleChange,
-        disabled,
-      }}
-    >
-      <div
-        className={cn(
-          'flex gap-4',
-          direction === 'vertical' ? 'flex-col' : 'flex-row',
-          className,
-        )}
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          value: mergedValue,
+          onChange: handleChange,
+          disabled,
+        }}
       >
-        {React.Children.map(children, (child) =>
-          React.cloneElement(child as React.ReactElement, {
-            disabled: disabled || child?.props?.disabled,
-          }),
-        )}
-      </div>
-    </RadioGroupContext.Provider>
-  );
-}
+        <div
+          ref={ref}
+          className={cn(
+            'flex gap-4',
+            direction === 'vertical' ? 'flex-col' : 'flex-row',
+            className,
+          )}
+        >
+          {React.Children.map(children, (child) =>
+            React.cloneElement(child as React.ReactElement, {
+              disabled: disabled || child?.props?.disabled,
+            }),
+          )}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
 
 const RadioComponent = Object.assign(Radio, {
   Group,
 });
 
+Group.displayName = 'RadioGroup';
 export { RadioComponent as Radio };

web/src/components/ui/segmented.tsx

@@ -59,63 +59,71 @@ export interface SegmentedProps extends Omit<
   buttonSize?: keyof typeof segmentedVariants.buttonSize;
 }
 
-export function Segmented({
-  options,
-  value,
-  onChange,
-  className,
-  activeClassName,
-  itemClassName,
-  rounded = 'default',
-  sizeType = 'default',
-  buttonSize = 'default',
-}: SegmentedProps) {
-  const [selectedValue, setSelectedValue] = React.useState<
-    SegmentedValue | undefined
-  >(value);
-  React.useEffect(() => {
-    setSelectedValue(value);
-  }, [value]);
-  const handleOnChange = (e: SegmentedValue) => {
-    if (onChange) {
-      onChange(e);
-    }
-    setSelectedValue(e);
-  };
-  return (
-    <div
-      className={cn(
-        'flex items-center p-1 gap-2 bg-bg-card',
-        segmentedVariants.round[rounded],
-        segmentedVariants.size[sizeType],
-        className,
-      )}
-    >
-      {options.map((option) => {
-        const isObject = typeof option === 'object';
-        const actualValue = isObject ? option.value : option;
+export const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      className,
+      activeClassName,
+      itemClassName,
+      rounded = 'default',
+      sizeType = 'default',
+      buttonSize = 'default',
+    },
+    ref,
+  ) => {
+    const [selectedValue, setSelectedValue] = React.useState<
+      SegmentedValue | undefined
+    >(value);
+    React.useEffect(() => {
+      setSelectedValue(value);
+    }, [value]);
+    const handleOnChange = (e: SegmentedValue) => {
+      if (onChange) {
+        onChange(e);
+      }
+      setSelectedValue(e);
+    };
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex items-center p-1 gap-2 bg-bg-card',
+          segmentedVariants.round[rounded],
+          segmentedVariants.size[sizeType],
+          className,
+        )}
+      >
+        {options.map((option) => {
+          const isObject = typeof option === 'object';
+          const actualValue = isObject ? option.value : option;
 
-        return (
-          <div
-            key={actualValue}
-            className={cn(
-              'inline-flex items-center text-base font-normal cursor-pointer',
-              segmentedVariants.round[rounded],
-              segmentedVariants.buttonSize[buttonSize],
-              {
-                'text-text-primary bg-bg-base': selectedValue === actualValue,
-              },
-              itemClassName,
-              activeClassName && selectedValue === actualValue
-                ? activeClassName
-                : '',
-            )}
-            onClick={() => handleOnChange(actualValue)}
-          >
-            {isObject ? option.label : option}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+          return (
+            <div
+              key={actualValue}
+              className={cn(
+                'inline-flex items-center text-base font-normal cursor-pointer',
+                segmentedVariants.round[rounded],
+                segmentedVariants.buttonSize[buttonSize],
+                {
+                  'text-text-primary bg-bg-base': selectedValue === actualValue,
+                },
+                itemClassName,
+                activeClassName && selectedValue === actualValue
+                  ? activeClassName
+                  : '',
+              )}
+              onClick={() => handleOnChange(actualValue)}
+            >
+              {isObject ? option.label : option}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Segmented.displayName = 'Segmented';