From d342d75c4ac544f6acf571601970b983948c9769 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 13 Nov 2025 13:06:25 +0100
Subject: [PATCH 1/4] Fixed problem with routing due to wrong ref

---
 packages/lib/src/base-menu/ItemAction.tsx | 72 ++++++++++++++++++-----
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx
index 9dd1faf25..fc97735c8 100644
--- a/packages/lib/src/base-menu/ItemAction.tsx
+++ b/packages/lib/src/base-menu/ItemAction.tsx
@@ -92,19 +92,19 @@ const ItemAction = memo(
     const { depthLevel, selected, href, label, icon, collapseIcon, "aria-pressed": ariaPressed, ...rest } = props;
 
     return getWrapper(
-      <TooltipWrapper condition={hasTooltip} label={label}>
-        <Action
-          ref={ref}
-          as={href ? "a" : "button"}
-          role={href ? "link" : "button"}
-          depthLevel={depthLevel}
-          selected={selected}
-          displayGroupLines={!!displayGroupLines}
-          responsiveView={responsiveView}
-          {...(href && { href })}
-          {...rest}
-          aria-pressed={!href ? ariaPressed : undefined}
-        >
+      <Action
+        ref={ref}
+        as={href ? "a" : "button"}
+        role={href ? "link" : "button"}
+        depthLevel={depthLevel}
+        selected={selected}
+        displayGroupLines={!!displayGroupLines}
+        responsiveView={responsiveView}
+        {...(href && { href })}
+        {...rest}
+        aria-pressed={!href ? ariaPressed : undefined}
+      >
+        <TooltipWrapper condition={hasTooltip} label={label}>
           <Label aria-label={responsiveView ? label : undefined}>
             {!displayControlsAfter && collapseIcon && (
               <Control>
@@ -130,9 +130,51 @@ const ItemAction = memo(
               {displayControlsAfter && collapseIcon && <Icon>{collapseIcon}</Icon>}
             </Control>
           )}
-        </Action>
-      </TooltipWrapper>
+        </TooltipWrapper>
+      </Action>
     );
+    // return getWrapper(
+    //   <TooltipWrapper condition={hasTooltip} label={label}>
+    //     <Action
+    //       ref={ref}
+    //       as={href ? "a" : "button"}
+    //       role={href ? "link" : "button"}
+    //       depthLevel={depthLevel}
+    //       selected={selected}
+    //       displayGroupLines={!!displayGroupLines}
+    //       responsiveView={responsiveView}
+    //       {...(href && { href })}
+    //       {...rest}
+    //       aria-pressed={!href ? ariaPressed : undefined}
+    //     >
+    //       <Label aria-label={responsiveView ? label : undefined}>
+    //         {!displayControlsAfter && collapseIcon && (
+    //           <Control>
+    //             <Icon>{collapseIcon}</Icon>
+    //           </Control>
+    //         )}
+    //         {(icon || responsiveView) && (
+    //           <TooltipWrapper condition={responsiveView} label={label}>
+    //             <Icon>
+    //               {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon ? icon : <DxcIcon icon="topic" />}
+    //             </Icon>
+    //           </TooltipWrapper>
+    //         )}
+    //         {!responsiveView && (
+    //           <Text selected={props.selected} onMouseEnter={handleTextMouseEnter}>
+    //             {label}
+    //           </Text>
+    //         )}
+    //       </Label>
+    //       {!responsiveView && (modifiedBadge || (displayControlsAfter && collapseIcon)) && (
+    //         <Control>
+    //           {modifiedBadge}
+    //           {displayControlsAfter && collapseIcon && <Icon>{collapseIcon}</Icon>}
+    //         </Control>
+    //       )}
+    //     </Action>
+    //   </TooltipWrapper>
+    // );
   })
 );
 

From 6a1e15aca692bae6775832e2930bbd75c958a5ba Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 13 Nov 2025 14:19:14 +0100
Subject: [PATCH 2/4] Fixed accessibility and styles problems

---
 packages/lib/src/base-menu/ItemAction.tsx | 72 +++++----------------
 packages/lib/src/tooltip/Tooltip.tsx      | 76 +++++++++++++----------
 2 files changed, 57 insertions(+), 91 deletions(-)

diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx
index fc97735c8..c402126de 100644
--- a/packages/lib/src/base-menu/ItemAction.tsx
+++ b/packages/lib/src/base-menu/ItemAction.tsx
@@ -92,19 +92,19 @@ const ItemAction = memo(
     const { depthLevel, selected, href, label, icon, collapseIcon, "aria-pressed": ariaPressed, ...rest } = props;
 
     return getWrapper(
-      <Action
-        ref={ref}
-        as={href ? "a" : "button"}
-        role={href ? "link" : "button"}
-        depthLevel={depthLevel}
-        selected={selected}
-        displayGroupLines={!!displayGroupLines}
-        responsiveView={responsiveView}
-        {...(href && { href })}
-        {...rest}
-        aria-pressed={!href ? ariaPressed : undefined}
-      >
-        <TooltipWrapper condition={hasTooltip} label={label}>
+      <TooltipWrapper condition={hasTooltip} label={label} {...rest}>
+        <Action
+          ref={ref}
+          as={href ? "a" : "button"}
+          role={href ? "link" : "button"}
+          depthLevel={depthLevel}
+          selected={selected}
+          displayGroupLines={!!displayGroupLines}
+          responsiveView={responsiveView}
+          {...(href && { href })}
+          {...rest}
+          aria-pressed={!href ? ariaPressed : undefined}
+        >
           <Label aria-label={responsiveView ? label : undefined}>
             {!displayControlsAfter && collapseIcon && (
               <Control>
@@ -130,51 +130,9 @@ const ItemAction = memo(
               {displayControlsAfter && collapseIcon && <Icon>{collapseIcon}</Icon>}
             </Control>
           )}
-        </TooltipWrapper>
-      </Action>
+        </Action>
+      </TooltipWrapper>
     );
-    // return getWrapper(
-    //   <TooltipWrapper condition={hasTooltip} label={label}>
-    //     <Action
-    //       ref={ref}
-    //       as={href ? "a" : "button"}
-    //       role={href ? "link" : "button"}
-    //       depthLevel={depthLevel}
-    //       selected={selected}
-    //       displayGroupLines={!!displayGroupLines}
-    //       responsiveView={responsiveView}
-    //       {...(href && { href })}
-    //       {...rest}
-    //       aria-pressed={!href ? ariaPressed : undefined}
-    //     >
-    //       <Label aria-label={responsiveView ? label : undefined}>
-    //         {!displayControlsAfter && collapseIcon && (
-    //           <Control>
-    //             <Icon>{collapseIcon}</Icon>
-    //           </Control>
-    //         )}
-    //         {(icon || responsiveView) && (
-    //           <TooltipWrapper condition={responsiveView} label={label}>
-    //             <Icon>
-    //               {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon ? icon : <DxcIcon icon="topic" />}
-    //             </Icon>
-    //           </TooltipWrapper>
-    //         )}
-    //         {!responsiveView && (
-    //           <Text selected={props.selected} onMouseEnter={handleTextMouseEnter}>
-    //             {label}
-    //           </Text>
-    //         )}
-    //       </Label>
-    //       {!responsiveView && (modifiedBadge || (displayControlsAfter && collapseIcon)) && (
-    //         <Control>
-    //           {modifiedBadge}
-    //           {displayControlsAfter && collapseIcon && <Icon>{collapseIcon}</Icon>}
-    //         </Control>
-    //       )}
-    //     </Action>
-    //   </TooltipWrapper>
-    // );
   })
 );
 
diff --git a/packages/lib/src/tooltip/Tooltip.tsx b/packages/lib/src/tooltip/Tooltip.tsx
index 9f976b2b1..8df21183f 100644
--- a/packages/lib/src/tooltip/Tooltip.tsx
+++ b/packages/lib/src/tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useContext } from "react";
+import { cloneElement, forwardRef, isValidElement, useContext } from "react";
 import { Root, Trigger, Portal, Arrow, Content, Provider } from "@radix-ui/react-tooltip";
 import TooltipPropsType, { TooltipWrapperProps } from "./types";
 import TooltipContext from "./TooltipContext";
@@ -102,41 +102,49 @@ const triangleIcon = (
   </svg>
 );
 
-export const Tooltip = ({
-  children,
-  hasAdditionalContainer,
-  label,
-  position = "bottom",
-}: { hasAdditionalContainer?: boolean } & TooltipPropsType) => {
-  const hasTooltip = useContext(TooltipContext);
+export const Tooltip = forwardRef<HTMLButtonElement, TooltipPropsType & { hasAdditionalContainer?: boolean }>(
+  ({ children, hasAdditionalContainer, label, position = "bottom", ...rest }, ref) => {
+    const hasTooltip = useContext(TooltipContext);
 
-  return (
-    <TooltipContext.Provider value>
-      {label && !hasTooltip ? (
-        <Provider delayDuration={300}>
-          <Root>
-            <Trigger asChild>
-              {hasAdditionalContainer ? <TooltipTriggerContainer>{children}</TooltipTriggerContainer> : children}
-            </Trigger>
-            <Portal>
-              <StyledTooltipContent side={position} sideOffset={8}>
-                <TooltipContainer>{label}</TooltipContainer>
-                <Arrow asChild aria-hidden>
-                  {triangleIcon}
-                </Arrow>
-              </StyledTooltipContent>
-            </Portal>
-          </Root>
-        </Provider>
-      ) : (
-        children
-      )}
-    </TooltipContext.Provider>
-  );
-};
+    return (
+      <TooltipContext.Provider value>
+        {label && !hasTooltip ? (
+          <Provider delayDuration={300}>
+            <Root>
+              <Trigger asChild ref={ref} {...rest}>
+                {hasAdditionalContainer ? <TooltipTriggerContainer>{children}</TooltipTriggerContainer> : children}
+              </Trigger>
+              <Portal>
+                <StyledTooltipContent side={position} sideOffset={8}>
+                  <TooltipContainer>{label}</TooltipContainer>
+                  <Arrow asChild aria-hidden>
+                    {triangleIcon}
+                  </Arrow>
+                </StyledTooltipContent>
+              </Portal>
+            </Root>
+          </Provider>
+        ) : (
+          children
+        )}
+      </TooltipContext.Provider>
+    );
+  }
+);
 
-export const TooltipWrapper = ({ condition, children, label }: TooltipWrapperProps) =>
-  condition ? <Tooltip label={label}>{children}</Tooltip> : <>{children}</>;
+export const TooltipWrapper = forwardRef<HTMLButtonElement, TooltipWrapperProps>(
+  ({ condition, children, label, ...rest }, ref) => {
+    return condition ? (
+      <Tooltip ref={ref} label={label} {...rest}>
+        {children}
+      </Tooltip>
+    ) : isValidElement(children) ? (
+      cloneElement(children, { ref, ...rest })
+    ) : (
+      children
+    );
+  }
+);
 
 const DxcTooltip = (props: TooltipPropsType) => <Tooltip {...props} hasAdditionalContainer />;
 

From 55e1e4ebfc4cbab1dd831aaa54c0fbaca7b07bac Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 13 Nov 2025 14:21:11 +0100
Subject: [PATCH 3/4] Added support to ref in Tooltip

---
 packages/lib/src/tooltip/Tooltip.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/lib/src/tooltip/Tooltip.tsx b/packages/lib/src/tooltip/Tooltip.tsx
index 8df21183f..c43efb30c 100644
--- a/packages/lib/src/tooltip/Tooltip.tsx
+++ b/packages/lib/src/tooltip/Tooltip.tsx
@@ -124,6 +124,8 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipPropsType & { hasAdd
               </Portal>
             </Root>
           </Provider>
+        ) : isValidElement(children) ? (
+          cloneElement(children, { ref, ...rest })
         ) : (
           children
         )}

From 32d7ac9343a59087c904850f02f0dfa275bf20c5 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 13 Nov 2025 14:56:35 +0100
Subject: [PATCH 4/4] Fixed collapsing logics for ref managing in Tabs/Tooltip

---
 packages/lib/src/tooltip/Tooltip.tsx | 90 ++++++++++++++--------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/packages/lib/src/tooltip/Tooltip.tsx b/packages/lib/src/tooltip/Tooltip.tsx
index c43efb30c..f5a11b3d0 100644
--- a/packages/lib/src/tooltip/Tooltip.tsx
+++ b/packages/lib/src/tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { cloneElement, forwardRef, isValidElement, useContext } from "react";
+import { cloneElement, isValidElement, useContext } from "react";
 import { Root, Trigger, Portal, Arrow, Content, Provider } from "@radix-ui/react-tooltip";
 import TooltipPropsType, { TooltipWrapperProps } from "./types";
 import TooltipContext from "./TooltipContext";
@@ -102,51 +102,51 @@ const triangleIcon = (
   </svg>
 );
 
-export const Tooltip = forwardRef<HTMLButtonElement, TooltipPropsType & { hasAdditionalContainer?: boolean }>(
-  ({ children, hasAdditionalContainer, label, position = "bottom", ...rest }, ref) => {
-    const hasTooltip = useContext(TooltipContext);
+export const Tooltip = ({
+  children,
+  hasAdditionalContainer,
+  label,
+  position = "bottom",
+  ...rest
+}: { hasAdditionalContainer?: boolean } & TooltipPropsType) => {
+  const hasTooltip = useContext(TooltipContext);
+  return (
+    <TooltipContext.Provider value>
+      {label && !hasTooltip ? (
+        <Provider delayDuration={300}>
+          <Root>
+            <Trigger asChild {...rest}>
+              {hasAdditionalContainer ? <TooltipTriggerContainer>{children}</TooltipTriggerContainer> : children}
+            </Trigger>
+            <Portal>
+              <StyledTooltipContent side={position} sideOffset={8}>
+                <TooltipContainer>{label}</TooltipContainer>
+                <Arrow asChild aria-hidden>
+                  {triangleIcon}
+                </Arrow>
+              </StyledTooltipContent>
+            </Portal>
+          </Root>
+        </Provider>
+      ) : isValidElement(children) ? (
+        cloneElement(children, { ...rest })
+      ) : (
+        children
+      )}
+    </TooltipContext.Provider>
+  );
+};
 
-    return (
-      <TooltipContext.Provider value>
-        {label && !hasTooltip ? (
-          <Provider delayDuration={300}>
-            <Root>
-              <Trigger asChild ref={ref} {...rest}>
-                {hasAdditionalContainer ? <TooltipTriggerContainer>{children}</TooltipTriggerContainer> : children}
-              </Trigger>
-              <Portal>
-                <StyledTooltipContent side={position} sideOffset={8}>
-                  <TooltipContainer>{label}</TooltipContainer>
-                  <Arrow asChild aria-hidden>
-                    {triangleIcon}
-                  </Arrow>
-                </StyledTooltipContent>
-              </Portal>
-            </Root>
-          </Provider>
-        ) : isValidElement(children) ? (
-          cloneElement(children, { ref, ...rest })
-        ) : (
-          children
-        )}
-      </TooltipContext.Provider>
-    );
-  }
-);
-
-export const TooltipWrapper = forwardRef<HTMLButtonElement, TooltipWrapperProps>(
-  ({ condition, children, label, ...rest }, ref) => {
-    return condition ? (
-      <Tooltip ref={ref} label={label} {...rest}>
-        {children}
-      </Tooltip>
-    ) : isValidElement(children) ? (
-      cloneElement(children, { ref, ...rest })
-    ) : (
-      children
-    );
-  }
-);
+export const TooltipWrapper = ({ condition, children, label, ...rest }: TooltipWrapperProps) =>
+  condition ? (
+    <Tooltip label={label} {...rest}>
+      {children}
+    </Tooltip>
+  ) : isValidElement(children) ? (
+    cloneElement(children, { ...rest })
+  ) : (
+    children
+  );
 
 const DxcTooltip = (props: TooltipPropsType) => <Tooltip {...props} hasAdditionalContainer />;