feat: simplify Segment and SegmentedControl components by removing unused refs and props

Author: AbhishekA1509

src/Common/SegmentedControl/Segment.tsx

@@ -16,16 +16,7 @@ const wrapWithTooltip = (tooltipProps: SegmentType['tooltipProps']) => (children
     </Tooltip>
 )
 
-const Segment = ({
-    segment,
-    isSelected,
-    name,
-    selectedSegmentRef,
-    onChange,
-    fullWidth,
-    size,
-    disabled,
-}: SegmentProps) => {
+const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disabled }: SegmentProps) => {
     const inputId = useMemo(getUniqueId, [])
 
     const { value, icon, isError, label, tooltipProps, ariaLabel } = segment
@@ -35,10 +26,7 @@ const Segment = ({
 
     return (
         <ConditionalWrap key={value} condition={!!tooltipProps?.content} wrap={wrapWithTooltip(tooltipProps)}>
-            <div
-                className={`dc__position-rel dc__text-center dc__no-shrink ${fullWidth ? 'flex-grow-1' : ''}`}
-                ref={selectedSegmentRef}
-            >
+            <div className={`dc__position-rel dc__text-center dc__no-shrink ${fullWidth ? 'flex-grow-1' : ''}`}>
                 <input
                     type="radio"
                     value={value}

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 
 import { ComponentSizeType } from '@Shared/constants'
 
@@ -17,12 +17,6 @@ const SegmentedControl = ({
     disabled,
 }: SegmentedControlProps) => {
     const isUnControlledComponent = controlledValue === undefined
-
-    const segmentedControlRefContainer = useRef<HTMLDivElement>(null)
-    /**
-     * Using this ref to show the selected segment highlight with transition
-     */
-    const selectedSegmentRef = useRef<HTMLDivElement>(null)
     const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType['value'] | null>(segments[0].value)
     const segmentValue = isUnControlledComponent ? selectedSegmentValue : controlledValue
 
@@ -37,16 +31,12 @@ const SegmentedControl = ({
         <div
             className={`segmented-control ${!fullWidth ? 'dc__inline-flex' : ''} ${disabled ? 'dc__disabled' : ''} br-6 ${size === ComponentSizeType.xs ? 'p-1' : 'p-2'}`}
         >
-            <div
-                className="segmented-control__container flex left dc__position-rel dc__align-items-center dc__gap-2"
-                ref={segmentedControlRefContainer}
-            >
+            <div className="segmented-control__container flex left dc__position-rel dc__align-items-center dc__gap-2">
                 {segments.map((segment) => {
                     const isSelected = segment.value === segmentValue
 
                     return (
                         <Segment
-                            selectedSegmentRef={isSelected ? selectedSegmentRef : undefined}
                             segment={segment}
                             key={segment.value}
                             name={name}

src/Common/SegmentedControl/types.ts

@@ -1,5 +1,3 @@
-import { RefObject } from 'react'
-
 import { TooltipProps } from '@Common/Tooltip'
 import { IconsProps, SelectPickerOptionType } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
@@ -84,5 +82,4 @@ export interface SegmentProps
     extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
     isSelected: boolean
     segment: SegmentType
-    selectedSegmentRef: RefObject<HTMLDivElement> | undefined
 }