Improve animations pillSelector

Author: Hector Arce De Las Heras

src/components/pillSelector/pillSelectorControlled.tsx

@@ -47,9 +47,18 @@ const PillSelectorControlledComponent = React.forwardRef(
     );
 
     React.useEffect(() => {
+      let resizeObserver: ResizeObserver;
       if (!props.multiSelect && measuredRef?.current && props.pillSelected?.[0] && styles?.thumb) {
         updateMeasurements();
+        resizeObserver = new ResizeObserver(() => {
+          updateMeasurements();
+        });
+        // Start observing the element
+        resizeObserver.observe(measuredRef.current);
       }
+      return () => {
+        resizeObserver?.disconnect();
+      };
     }, [props.multiSelect, measuredRef, props.pills, props.pillSelected?.[0]]);
 
     return (

src/components/pillSelector/pillSelectorStandAlone.tsx

@@ -42,6 +42,7 @@ const PillSelectorStandAloneComponent = (
     <PillSelectorWrapper
       ref={listEl as React.RefObject<HTMLDivElement>}
       data-testid={`${dataTestId}PillSelector`}
+      hasThumb={!!(!props.multiSelect && props.styles?.thumb)}
       isSelected={isPillSelected}
       role={ROLES.RADIOGROUP}
       styles={props.styles}