Added onClick prop to NavTab

apps/website/screens/components/link/code/LinkCodePage.tsx

@@ -186,20 +186,21 @@ const sections = [
             ),
           },
           {
-            title: "React router v6",
+            title: "React router v6+",
             content: (
               <>
                 <DxcParagraph>
                   In{" "}
                   <DxcLink
-                    href="https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#remove-link-component-prop"
+                    href="https://github.com/remix-run/react-router/blob/v6.0.0/docs/upgrading/v5.md#remove-link-component-prop"
                     newWindow
                   >
                     React Router v6
                   </DxcLink>{" "}
-                  the prop <Code>component</Code> is no longer available so it is necessary to use hooks provided by{" "}
-                  <DxcLink href="https://reactrouter.com/en/main/hooks/use-href" newWindow>
-                    React Router v6
+                  and higher, the prop <Code>component</Code> is no longer available so it is necessary to use hooks provided by the
+                  newer versions of{" "}
+                  <DxcLink href="https://reactrouter.com/api/hooks/useNavigate" newWindow>
+                    React Router
                   </DxcLink>
                   .
                 </DxcParagraph>

apps/website/screens/components/link/code/examples/routerLink6.tsx

@@ -1,58 +1,48 @@
 import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+import { forwardRef } from "react";
 
 const useHref = (to: string) => {
   console.log(to);
 };
 
-type routerProps = {
-  replace: string;
-  state: string;
-  target: string;
+const useNavigate = () => {
+  return (to: string, options?: { replace?: boolean; state?: any }) => {
+    console.log(`Use navigate mock function called "${to}"`, options);
+  };
 };
-
-const useLinkClickHandler = (to: string, { replace, state, target }: routerProps) => {
-  console.log("useClickHandler");
-};
-
 const code = `() => {
-  const CustomLink = React.forwardRef(
-    ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
-      let href = useHref(to);
-      let handleClick = () => (useLinkClickHandler(to, {
-        replace,
-        state,
-        target,
-      }));
+  const CustomLink = forwardRef(
+    ({ children, to, replace = false, state, ...rest }, ref) => {
+      const navigate = useNavigate();
+
+      const handleClick = () => {
+        navigate(to, { replace, state });
+      };
 
       return (
-        <DxcLink
-          {...rest}
-          href={href}
-          onClick={(event) => {
-            handleClick(event);
-          }}
-          ref={ref}
-          target={target}
-        />
+        <DxcLink {...rest} onClick={handleClick} ref={ref}>
+          {children}
+        </DxcLink>
       );
     }
   );
   return (
     <DxcInset space="var(--spacing-padding-xl)">
       This is a text with a
       <CustomLink to="/components/link" component={DxcLink}>
-        React Router v6
+        React Router v6+
       </CustomLink>{" "}
       link.
     </DxcInset>
   );
 }`;
 
 const scope = {
+  DxcInset,
   DxcLink,
+  forwardRef,
   useHref,
-  useLinkClickHandler,
-  DxcInset,
+  useNavigate,
 };
 
 export default { code, scope };

apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx

@@ -5,7 +5,7 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import Example from "@/common/example/Example";
 import basicUsage from "./examples/basicUsage";
 import routerLink from "./examples/routerLink";
-import routerLinkV6 from "./examples/routerLinkV6";
+import routerLink6 from "./examples/routerLink6";
 import nextLink from "./examples/nextLink";
 import icons from "./examples/icons";
 import Code, { TableCode } from "@/common/Code";
@@ -139,6 +139,19 @@ const sections = [
                 </td>
                 <td>-</td>
               </tr>
+              <tr>
+                <td>
+                  <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                    <StatusBadge status="new" />
+                    onClick
+                  </DxcFlex>
+                </td>
+                <td>
+                  <TableCode>{"() => void"}</TableCode>
+                </td>
+                <td>This function will be called when the user clicks on this tab.</td>
+                <td>-</td>
+              </tr>
               <tr>
                 <td>notificationNumber</td>
                 <td>
@@ -209,24 +222,25 @@ const sections = [
             ),
           },
           {
-            title: "React router v6",
+            title: "React router v6+",
             content: (
               <>
                 <DxcParagraph>
                   In{" "}
                   <DxcLink
-                    href="https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#remove-link-component-prop"
+                    href="https://github.com/remix-run/react-router/blob/v6.0.0/docs/upgrading/v5.md#remove-link-component-prop"
                     newWindow
                   >
                     React Router v6
                   </DxcLink>{" "}
-                  the prop <Code>component</Code> is no longer available so it is necessary to use hooks provided by{" "}
-                  <DxcLink href="https://reactrouter.com/en/main/hooks/use-href" newWindow>
-                    React Router v6
+                  and higher, the prop <Code>component</Code> is no longer available so it is necessary to use hooks provided by the
+                  newer versions of{" "}
+                  <DxcLink href="https://reactrouter.com/api/hooks/useNavigate" newWindow>
+                    React Router
                   </DxcLink>
                   .
                 </DxcParagraph>
-                <Example example={routerLinkV6} defaultIsVisible />
+                <Example example={routerLink6} defaultIsVisible />
               </>
             ),
           },

apps/website/screens/components/nav-tabs/code/examples/routerLink6.tsx

@@ -0,0 +1,50 @@
+import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react";
+import { forwardRef } from "react";
+
+const useNavigate = () => {
+  return (to: string, options?: { replace?: boolean; state?: any }) => {
+    console.log(`Use navigate mock function called "${to}"`, options);
+  };
+};
+
+const code = `() => {
+  const CustomTab = forwardRef(
+    ({ children, to, replace = false, state, ...rest }, ref) => {
+      const navigate = useNavigate();
+
+      const handleClick = () => {
+        navigate(to, { replace, state });
+      };
+
+      return (
+        <DxcNavTabs.Tab
+          {...rest}
+          onClick={handleClick}
+          ref={ref}
+        >
+          {children}
+        </DxcNavTabs.Tab>
+      );
+    }
+  );
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcNavTabs>
+        <CustomTab active to="/components/nav-tabs/">
+          Tab 1
+        </CustomTab>
+        <CustomTab to="/components/nav-tabs/">Tab 2</CustomTab>
+        <CustomTab to="/components/nav-tabs/">Tab 3</CustomTab>
+      </DxcNavTabs>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcInset,
+  DxcNavTabs,
+  forwardRef,
+  useNavigate,
+};
+
+export default { code, scope };

apps/website/screens/components/tabs/code/TabsCodePage.tsx

@@ -182,7 +182,7 @@ const sections = [
                 <td>
                   <TableCode>{"() => void"}</TableCode>
                 </td>
-                <td>This function will be called when the user clicks on this tab. </td>
+                <td>This function will be called when the user clicks on this tab. This feature is mostly recommended for compatibility with third-party routing APIs.</td>
                 <td>-</td>
               </tr>
               <tr>

packages/lib/src/nav-tabs/Tab.tsx

@@ -86,7 +86,16 @@ const Underline = styled.span<{ active: TabProps["active"] }>`
 
 const Tab = forwardRef(
   (
-    { href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }: TabProps,
+    {
+      active = false,
+      children,
+      disabled = false,
+      href,
+      icon,
+      onClick,
+      notificationNumber = false,
+      ...otherProps
+    }: TabProps,
     ref: Ref<HTMLAnchorElement>
   ) => {
     const { iconPosition, tabIndex, focusedLabel } = useContext(NavTabsContext) ?? {};
@@ -95,7 +104,7 @@ const Tab = forwardRef(
     useImperativeHandle(ref, () => innerRef.current!, []);
 
     useEffect(() => {
-      if (focusedLabel === children.toString()) {
+      if (focusedLabel === children?.toString()) {
         tabRef?.current?.focus();
       }
     }, [children, focusedLabel]);
@@ -116,21 +125,22 @@ const Tab = forwardRef(
       <TabContainer>
         <DxcInset space="var(--spacing-padding-xs)">
           <TabLink
-            href={!disabled ? href : undefined}
+            aria-disabled={disabled}
+            aria-selected={active}
             disabled={disabled}
+            href={!disabled ? href : undefined}
             iconPosition={iconPosition}
+            onClick={onClick}
+            onKeyDown={handleOnKeyDown}
             ref={(anchorRef: HTMLAnchorElement) => {
               tabRef.current = anchorRef;
               if (ref) {
                 if (typeof ref === "function") ref(anchorRef);
                 else innerRef.current = anchorRef;
               }
             }}
-            onKeyDown={handleOnKeyDown}
-            tabIndex={active ? tabIndex : -1}
             role="tab"
-            aria-selected={active}
-            aria-disabled={disabled}
+            tabIndex={active ? tabIndex : -1}
             {...otherProps}
           >
             {icon && (