feat(Touchable): newTab support in to links

src/__tests__/touchable-test.tsx

@@ -498,3 +498,27 @@ test('Touchable has the appropiate role', async () => {
     expect(screen.getByRole('tab', {name: 'href'})).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'onPress'})).toBeInTheDocument();
 });
+
+test('target="_blank" is set with newTab', async () => {
+    const url = 'https://example.org';
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Touchable to={url} newTab>
+                to link
+            </Touchable>
+            <Touchable href={url} newTab>
+                href link
+            </Touchable>
+        </ThemeContextProvider>
+    );
+
+    const toLink = screen.getByRole('link', {name: /to link/});
+    const hrefLink = screen.getByRole('link', {name: /href link/});
+
+    expect(toLink).toHaveAttribute('href', url);
+    expect(hrefLink).toHaveAttribute('href', url);
+
+    expect(toLink).toHaveAttribute('target', '_blank');
+    expect(hrefLink).toHaveAttribute('target', '_blank');
+});

src/__type_tests__/highlighted-card-type-test.tsx

@@ -17,6 +17,7 @@ const s = 'maybe string' as string | undefined;
 
 <HighlightedCard title="title" onPress={() => {}} />;
 <HighlightedCard title="title" to="#" fullPageOnWebView />;
+<HighlightedCard title="title" to="#" newTab />;
 <HighlightedCard title="title" href="#" newTab />;
 <HighlightedCard title="title" button={<ButtonPrimary onPress={() => {}}>button</ButtonPrimary>} />;
 
@@ -29,9 +30,6 @@ const s = 'maybe string' as string | undefined;
 // @ts-expect-error incompatible touchable props
 <HighlightedCard title="title" onPress={() => {}} newTab />;
 
-// @ts-expect-error incompatible touchable props
-<HighlightedCard title="title" to="#" newTab />;
-
 // @ts-expect-error incompatible touchable props
 <HighlightedCard title="title" onPress={() => {}} fullPageOnWebView />;
 

src/__type_tests__/icon-button-type-test.tsx

@@ -46,6 +46,7 @@ import {Icon2GRegular, IconButton} from '..';
     trackingEvent={{name: 'something'}}
     to="/somewhere"
 />;
+<IconButton Icon={Icon2GRegular} aria-label="something" to="/somewhere" newTab />;
 
 // @ts-expect-error - onPress doesn't support href
 <IconButton Icon={Icon2GRegular} aria-label="something" onPress={() => {}} href="/somewhere" />;
@@ -55,8 +56,7 @@ import {Icon2GRegular, IconButton} from '..';
 <IconButton Icon={Icon2GRegular} aria-label="something" href="/somewhere" to="/somewhere" />;
 
 <IconButton Icon={Icon2GRegular} aria-label="something" href="/somewhere" newTab />;
-// @ts-expect-error - to doesn't support newTab
-<IconButton Icon={Icon2GRegular} aria-label="something" to="/somewhere" newTab />;
+
 // @ts-expect-error - onPress doesn't support newTab
 <IconButton Icon={Icon2GRegular} aria-label="something" onPress={() => {}} newTab />;
 

src/__type_tests__/list-type-test.tsx

@@ -34,7 +34,6 @@ const v = true as boolean;
     <Row title="to" to="/to" />
     <Row title="to" to="/to" trackingEvent={{name: 'something'}} />
     <Row title="to" to="/to" fullPageOnWebView />
-    {/* @ts-expect-error - newTab not allowed in to */}
     <Row title="to" to="/to" newTab />
     {/* OK - href */}
     <Row title="href" href="/href" />

src/__type_tests__/touchable-type-test.tsx

@@ -33,7 +33,6 @@ import type {TouchableComponentProps} from '../touchable';
     text
 </Touchable>;
 
-// @ts-expect-error - to doesn't support newTab
 <Touchable to="/" newTab>
     text
 </Touchable>;

src/button.tsx

@@ -24,6 +24,7 @@ import type {
     TrackingEvent,
 } from './utils/types';
 import type {Location} from 'history';
+import type {ExclusifyUnion} from './utils/utility-types';
 
 const renderButtonElement = ({
     content,
@@ -261,54 +262,31 @@ interface CommonProps {
 
 export interface ToButtonProps extends CommonProps {
     to: string | Location;
+    newTab?: boolean;
+    /** @deprecated use newTab */
     fullPageOnWebView?: boolean;
-    submit?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    href?: undefined;
     onNavigate?: () => void | Promise<void>;
 }
 export interface OnPressButtonProps extends CommonProps {
     onPress: (event: React.MouseEvent<HTMLElement>) => void | undefined | Promise<void>;
-    submit?: undefined;
-    fake?: undefined;
-    to?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
 export interface HrefButtonProps extends CommonProps {
     href: string;
     newTab?: boolean;
     loadOnTop?: boolean;
-    submit?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    to?: undefined;
+
     onNavigate?: () => void | Promise<void>;
 }
 export interface FakeButtonProps extends CommonProps {
     fake: true;
-    submit?: undefined;
-    onPress?: undefined;
-    to?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
 export interface SubmitButtonProps extends CommonProps {
     submit: true;
-    to?: undefined;
-    fake?: undefined;
-    onPress?: undefined;
-    href?: undefined;
-    onNavigate?: undefined;
 }
 
-export type ButtonProps =
-    | FakeButtonProps
-    | SubmitButtonProps
-    | ToButtonProps
-    | OnPressButtonProps
-    | HrefButtonProps;
+export type ButtonProps = ExclusifyUnion<
+    FakeButtonProps | SubmitButtonProps | ToButtonProps | OnPressButtonProps | HrefButtonProps
+>;
 
 const Button = React.forwardRef<TouchableElement, ButtonProps & {type: ButtonType}>((props, ref) => {
     const {textPresets} = useTheme();
@@ -437,6 +415,7 @@ const Button = React.forwardRef<TouchableElement, ButtonProps & {type: ButtonTyp
             <BaseTouchable
                 {...commonProps}
                 to={props.to}
+                newTab={props.newTab}
                 fullPageOnWebView={props.fullPageOnWebView}
                 onNavigate={props.onNavigate}
             />
@@ -504,6 +483,8 @@ interface ButtonLinkHrefProps extends ButtonLinkCommonProps {
 
 interface ButtonLinkToProps extends ButtonLinkCommonProps {
     to: string;
+    newTab?: boolean;
+    /** @deprecated use newTab */
     fullPageOnWebView?: boolean;
     onPress?: undefined;
     href?: undefined;
@@ -634,6 +615,7 @@ const BaseButtonLink = React.forwardRef<
                 ref={ref}
                 {...commonProps}
                 to={props.to}
+                newTab={props.newTab}
                 fullPageOnWebView={props.fullPageOnWebView}
                 onNavigate={props.onNavigate}
             />

src/card.tsx

@@ -61,7 +61,13 @@ type BaseIconButtonAction = {
 type IconButtonAction = BaseIconButtonAction &
     ExclusifyUnion<
         | {href: string; newTab?: boolean}
-        | {to: string; fullPageOnWebView?: boolean; replace?: boolean}
+        | {
+              to: string;
+              newTab?: boolean;
+              /** @deprecated use newTab */
+              fullPageOnWebView?: boolean;
+              replace?: boolean;
+          }
         | {onPress: () => void}
     >;
 
@@ -474,6 +480,8 @@ type TouchableProps = {
       }
     | {
           to: string | undefined;
+          newTab?: boolean;
+          /** @deprecated use newTab */
           fullPageOnWebView?: boolean;
           replace?: boolean;
           onNavigate?: () => void | Promise<void>;

src/community/advanced-data-card.tsx

@@ -40,9 +40,19 @@ import type {
 type TouchableProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 } & ExclusifyUnion<
-    | {href: string | undefined; newTab?: boolean}
-    | {to: string | undefined; fullPageOnWebView?: boolean}
-    | {onPress: PressHandler | undefined}
+    | {
+          href: string | undefined;
+          newTab?: boolean;
+      }
+    | {
+          to: string | undefined;
+          newTab?: boolean;
+          /** @deprecated use newTab */
+          fullPageOnWebView?: boolean;
+      }
+    | {
+          onPress: PressHandler | undefined;
+      }
 >;
 type TouchableCard<T> = T & TouchableProps;
 type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;

src/icon-button.tsx

@@ -17,6 +17,8 @@ interface HrefProps {
 
 interface ToProps {
     to: string;
+    newTab?: boolean;
+    /** @deprecated use newTab */
     fullPageOnWebView?: boolean;
     replace?: boolean;
 }

src/list.tsx

@@ -282,6 +282,8 @@ interface HrefRowContentProps extends CommonProps {
 interface ToRowContentProps extends CommonProps {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     to: string | undefined;
+    newTab?: boolean;
+    /** @deprecated use newTab */
     fullPageOnWebView?: boolean;
     replace?: boolean;
     onNavigate?: () => void | Promise<void>;

src/theme.tsx

@@ -288,6 +288,10 @@ export const dimensions = {
     headerDesktopHeight: NAVBAR_HEIGHT_DESKTOP,
 };
 
+/**
+ * https://reactrouter.com/en/main/components/link
+ * https://nextjs.org/docs/app/api-reference/components/link
+ */
 type LinkComponent = React.ComponentType<{
     style?: React.CSSProperties;
     className?: string;
@@ -315,6 +319,7 @@ type LinkComponent = React.ComponentType<{
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>;
     children: React.ReactNode;
+    target?: string;
 }>;
 
 const AnchorLink: LinkComponent = ({to, innerRef, ...props}) => (

src/touchable.tsx

@@ -53,6 +53,8 @@ type HrefProps = {
 
 type ToProps = {
     to: string | Location;
+    newTab?: boolean;
+    /** @deprecated set the newTab */
     fullPageOnWebView?: boolean;
     replace?: boolean;
     onNavigate?: () => void | Promise<void>;
@@ -121,7 +123,7 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
 
     const type = props.type ? props.type : 'button';
 
-    const openNewTab = !!props.href && !!props.newTab;
+    const openNewTab = !!props.newTab;
     const openInCurrentPage = props.href?.startsWith('#');
     const loadOnTop = !openNewTab && !!props.href && !!props.loadOnTop;
 
@@ -203,6 +205,18 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
         }
     };
 
+    const renderScreenReaderOnlyHint = () => {
+        return openNewTab ? (
+            <ScreenReaderOnly>
+                <span>{texts.linkOpensInNewTab}</span>
+            </ScreenReaderOnly>
+        ) : openInCurrentPage ? (
+            <ScreenReaderOnly>
+                <span>{texts.linkOpensInCurrentPage}</span>
+            </ScreenReaderOnly>
+        ) : null;
+    };
+
     if (!!props.href || (props.to && props.fullPageOnWebView && isInsideNovumNativeApp(platformOverrides))) {
         return (
             <a
@@ -221,15 +235,7 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
                 ref={ref as React.RefObject<HTMLAnchorElement>}
             >
                 {children}
-                {openNewTab ? (
-                    <ScreenReaderOnly>
-                        <span>{texts.linkOpensInNewTab}</span>
-                    </ScreenReaderOnly>
-                ) : openInCurrentPage ? (
-                    <ScreenReaderOnly>
-                        <span>{texts.linkOpensInCurrentPage}</span>
-                    </ScreenReaderOnly>
-                ) : null}
+                {renderScreenReaderOnlyHint()}
             </a>
         );
     }
@@ -238,6 +244,7 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
         return (
             <Link
                 {...commonProps}
+                target={props.newTab ? '_blank' : undefined}
                 aria-label={props['aria-label']}
                 aria-labelledby={props['aria-labelledby']}
                 innerRef={ref as React.RefObject<HTMLAnchorElement>}
@@ -247,6 +254,7 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
                 onKeyDown={handleKeyDown}
             >
                 {children}
+                {renderScreenReaderOnlyHint()}
             </Link>
         );
     }