Enhance Tooltip Functionality for Mobile Devices

This commit enhances the Tooltip component's functionality on mobile devices. Key changes include:

Updated Tooltip test (tooltip.test.tsx) to reflect new behavior where the tooltip does not act as a modal on mobile devices.
Modified handleClick method in TooltipUnControlledComponent to handle different scenarios based on the tooltip's state and the event target's location.
Adjusted useTooltip function (useTooltip.ts) to update the tooltip position when the window is resized, improving responsiveness and ensuring accurate positioning.
Altered the logic for showing and hiding the tooltip in TooltipUnControlledComponent (tooltipUnControlled.tsx). The tooltip is now only shown if it is not already open.
These changes improve the user interaction with the tooltip on mobile and tablet devices, and ensure that the tooltip position is accurate even when the window is resized.

Author: Hector Arce De Las Heras

src/components/inputSearch/types/inputSearch.ts

@@ -211,7 +211,7 @@ export interface IInputSearch<V = undefined extends string ? unknown : string>
   error?: boolean;
   searchFilterConfig?: SearchFilterConfig;
   disableErrorInvalidOption?: boolean;
-  regex?: string;
+  regex?: string | RegExp;
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
   clearTextInputPopoverIconClick?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;

src/components/screenReaderOnly/screenReaderOnly.tsx

@@ -10,12 +10,8 @@ export const ScreenReaderOnly = ({
   dataTestId,
 }: IScreenReaderOnly): JSX.Element => {
   return (
-    <>
-      {children && (
-        <ScreenReaderOnlyStyled aria-live={ariaLive} data-testid={dataTestId} id={id}>
-          {children}
-        </ScreenReaderOnlyStyled>
-      )}
-    </>
+    <ScreenReaderOnlyStyled aria-live={ariaLive} data-testid={dataTestId} id={id}>
+      {children}
+    </ScreenReaderOnlyStyled>
   );
 };

src/components/screenReaderOnly/types/screenReaderOnly.ts

@@ -1,7 +1,7 @@
 import { AriaLiveOptionType } from '@/types/ariaLiveOption';
 
 export interface IScreenReaderOnly {
-  children?: string | JSX.Element;
+  children?: React.ReactNode;
   id?: string;
   show?: boolean;
   ariaLive?: AriaLiveOptionType;

src/components/tooltip/__tests__/tooltip.test.tsx

@@ -323,7 +323,7 @@ describe('Tooltip', () => {
   it('Tooltip - mobile - it close the tooltip after clicking twice', () => {
     window.matchMedia = windowMatchMedia('onlyMobile');
     jest.spyOn(mediaHooks, 'useMediaDevice').mockImplementation(() => DeviceBreakpointsType.MOBILE);
-    renderProvider(<Tooltip {...mockProps} />);
+    renderProvider(<Tooltip {...mockProps} tooltipAsModal={false} />);
     const label = screen.getByText(mockProps.children as string);
 
     fireEvent.click(label);

src/components/tooltip/hooks/useTooltip.ts

@@ -48,9 +48,15 @@ export const useTooltip = <V>({
 
   // Avoid to show tooltip when scrolling
   React.useEffect(() => {
+    const handleResize = () => {
+      updateTooltipPosition();
+    };
+
     window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', handleResize);
     return () => {
       window.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);
 

src/components/tooltip/tooltipUnControlled.tsx

@@ -95,18 +95,21 @@ const TooltipUnControlledComponent = React.forwardRef(
       event.preventDefault();
     };
 
-    const handleClick: React.MouseEventHandler<HTMLElement> = () => {
+    const handleClick: React.MouseEventHandler<HTMLElement> = event => {
       if (mediaDevice === DeviceBreakpointsType.DESKTOP) {
         if (tooltipAsModalValue && !open) {
           //this condition is needed because tooltip would close if you clicked on tooltip container beeing tooltip a modal
           showTooltip();
         }
         return;
       }
-      if (open) {
-        hideTooltip();
-      } else {
+      // Mobile / tablet
+      if (!open) {
         showTooltip();
+        return;
+      }
+      if (!tooltipAsModalValue && !tooltipRef.current?.contains(event.target as Node)) {
+        hideTooltip();
       }
     };