Introduce Thumb Feature in PillSelector Component and Refactor PillUnControlled

This commit introduces a new feature in the PillSelector component and refactors the PillUnControlled component.

Changes include:

PillUnControlled now uses the useImperativeHandle hook to propagate the ref to the parent.
A new measuredRef and a function updateMeasurements have been added to PillSelectorControlled to update the measurements of the thumb. The useImperativeHandle and useEffect hooks were updated to use measuredRef.
A new thumb property has been added to the PillSelectorStyles type in pillSelectorTheme.ts.
These changes introduce a visual representation of the selected pill in the PillSelector component, enhancing the user experience.

Author: Hector Arce De Las Heras

src/components/pillSelector/__tests__/pillSelector.test.tsx

@@ -6,6 +6,7 @@ import { axe } from 'jest-axe';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { ROLES } from '@/types';
 
+import * as stylesHook from '../../../hooks/useStyles/useStyles';
 import { PillSelectorUnControlled } from '../pillSelectorUnControlled';
 import { IPillSelectorUnControlled } from '../types';
 
@@ -26,6 +27,28 @@ const mockProps: IPillSelectorUnControlled = {
   dataTestId: 'dataTestId',
 };
 
+const mockStyles = {
+  container: {
+    display: 'flex',
+    flex_direction: 'row',
+    max_width: 'fit-content',
+  },
+  pill: {
+    border_left: '0',
+    border_right: '0',
+  },
+  firstPill: {
+    border_right: '0',
+  },
+  lastPill: {
+    border_left: '0',
+  },
+  thumb: {
+    background_color: 'red',
+  },
+  ['DEFAULT']: {},
+};
+
 describe('PillSelector component', () => {
   it('Render', async () => {
     const { container } = renderProvider(
@@ -97,4 +120,18 @@ describe('PillSelector component', () => {
     fireEvent.focus(secondtPillInput);
     expect(secondPill).toHaveFocus();
   });
+
+  it('Render thumb', () => {
+    jest.spyOn(stylesHook, 'useStyles').mockImplementation(() => mockStyles);
+    renderProvider(<PillSelectorUnControlled {...mockProps} />);
+
+    const thumb = screen.getByTestId(`${mockProps.dataTestId}Thumb`);
+
+    expect(thumb).toBeInTheDocument();
+
+    const firstPillInput = screen.getByDisplayValue(mockProps.pills[0].value.toString());
+    fireEvent.click(firstPillInput);
+
+    expect(firstPillInput).toBeChecked();
+  });
 });

src/components/pillSelector/pillSelector.styled.tsx

@@ -25,3 +25,7 @@ export const PillSelectorWrapper = styled.div<PillSelectorStylesProp>`
     ${({ isSelected, styles }) => isSelected && getStyles(styles?.pill?.selected)}
   }
 `;
+
+export const ThumbStyled = styled.div<PillSelectorStylesProp>`
+  ${({ styles }) => getStyles(styles?.thumb)};
+`;

src/components/pillSelector/pillSelectorControlled.tsx

@@ -17,8 +17,48 @@ const PillSelectorControlledComponent = React.forwardRef(
   ): JSX.Element => {
     const styles = useStyles<PillSelectorStyles, V>(PILL_SELECTOR_STYLES, props.variant, ctv);
     const id = useId('name');
+    const measuredRef = React.useRef<HTMLDivElement | null>(null);
+
+    // update measurements of the thumb
+    const updateMeasurements = () => {
+      // get the index of the selected pill
+      const index =
+        props.pills.findIndex(
+          pill => pill.value.toString() === props.pillSelected?.[0].toString()
+        ) + 1;
+
+      // get the size and the position of the thumb from the selected pill
+      if (measuredRef.current) {
+        const thumb = measuredRef.current.childNodes[0] as HTMLElement;
+        const selectedPill = measuredRef.current.childNodes[index] as HTMLElement;
+
+        thumb.style.width = `${selectedPill?.clientWidth}px`;
+        thumb.style.height = `${selectedPill?.getBoundingClientRect().height}px`;
+        thumb.style.left = `calc(${selectedPill?.getBoundingClientRect().left}px - ${window?.getComputedStyle(selectedPill)?.paddingLeft})`;
+      }
+    };
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return measuredRef.current as HTMLDivElement;
+      },
+      []
+    );
+
+    React.useEffect(() => {
+      if (!props.multiSelect && measuredRef?.current && props.pillSelected?.[0] && styles?.thumb) {
+        updateMeasurements();
+      }
+    }, [props.multiSelect, measuredRef, props.pills, props.pillSelected?.[0]]);
+
     return (
-      <PillSelectorStandAlone ref={ref} name={`pillSelector${id}`} styles={styles} {...props} />
+      <PillSelectorStandAlone
+        ref={measuredRef}
+        name={`pillSelector${id}`}
+        styles={styles}
+        {...props}
+      />
     );
   }
 );

src/components/pillSelector/pillSelectorStandAlone.tsx

@@ -4,7 +4,7 @@ import { Pill } from '@/components/pill';
 import { useRoveFocus } from '@/hooks';
 import { ROLES } from '@/types';
 
-import { PillSelectorWrapper } from './pillSelector.styled';
+import { PillSelectorWrapper, ThumbStyled } from './pillSelector.styled';
 import type { IPillSelectorStandAlone } from './types';
 import { keyLeftMove, keyRightMove } from './utils';
 
@@ -46,8 +46,12 @@ const PillSelectorStandAloneComponent = (
       role={ROLES.RADIOGROUP}
       styles={props.styles}
     >
+      {!props.multiSelect && props.styles?.thumb && (
+        <ThumbStyled data-testid={`${dataTestId}Thumb`} styles={props.styles} />
+      )}
       {props.pills.length > 1 && props.pills.length <= maxPills
         ? props.pills.map((pill, index) => {
+            const pillSelected = props.pillSelected?.includes(pill.value.toString());
             return (
               (props.pillSize || pill?.size) && (
                 <Pill
@@ -56,14 +60,9 @@ const PillSelectorStandAloneComponent = (
                   focus={focus === index}
                   multiSelect={props.multiSelect}
                   name={props.name}
-                  selected={props.pillSelected?.includes(pill.value.toString())}
+                  selected={pillSelected}
                   size={props.pillSize || ''}
-                  tabIndex={
-                    props.pillSelected?.includes(pill.value.toString()) ||
-                    (!isPillSelected && index === 0)
-                      ? 0
-                      : -1
-                  }
+                  tabIndex={pillSelected || (!isPillSelected && index === 0) ? 0 : -1}
                   {...pill}
                   value={pill.value.toString()}
                   variant={props.pillVariant}

src/components/pillSelector/types/pillSelectorTheme.ts

@@ -9,6 +9,7 @@ export type PillSelectorStyles = {
   pill?: PillStyleType;
   firstPill?: PillStyleType;
   lastPill?: PillStyleType;
+  thumb?: CommonStyleType;
 };
 
 export type PillSelectorThemeType<V extends string | number | symbol> = {