fix(PrismicLink): types for rel and internal/external component props

src/react-server/PrismicLink.tsx

@@ -46,33 +46,37 @@ export interface LinkProps {
 export type PrismicLinkProps<
 	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
 	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
-> = Omit<LinkProps, "href"> &
-	Omit<InternalComponentProps & ExternalComponentProps, keyof LinkProps> & {
-		rel?: string | AsLinkAttrsConfig["rel"];
-
-		/**
-		 * The Link Resolver used to resolve links.
-		 *
-		 * @remarks
-		 * If your app uses Route Resolvers when querying for your Prismic
-		 * repository's content, a Link Resolver does not need to be provided.
-		 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
-		 */
-		linkResolver?: LinkResolverFunction;
-
-		/**
-		 * The component rendered for internal URLs. Defaults to `<a>`.
-		 *
-		 * If your app uses a client-side router that requires a special Link
-		 * component, provide the Link component to this prop.
-		 */
-		internalComponent?: React.ElementType<InternalComponentProps>;
-
-		/**
-		 * The component rendered for external URLs. Defaults to `<a>`.
-		 */
-		externalComponent?: React.ComponentType<ExternalComponentProps>;
-	} & (
+> = Omit<InternalComponentProps & ExternalComponentProps, "rel" | "href"> & {
+	/**
+	 * The `rel` attribute for the link. By default, `"noreferrer"` is provided if
+	 * the link's URL is external. This prop can be provided a function to use the
+	 * link's metadata to determine the `rel` value.
+	 */
+	rel?: string | AsLinkAttrsConfig["rel"];
+
+	/**
+	 * The Link Resolver used to resolve links.
+	 *
+	 * @remarks
+	 * If your app uses Route Resolvers when querying for your Prismic
+	 * repository's content, a Link Resolver does not need to be provided.
+	 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
+	 */
+	linkResolver?: LinkResolverFunction;
+
+	/**
+	 * The component rendered for internal URLs. Defaults to `<a>`.
+	 *
+	 * If your app uses a client-side router that requires a special Link
+	 * component, provide the Link component to this prop.
+	 */
+	internalComponent?: React.ElementType<InternalComponentProps>;
+
+	/**
+	 * The component rendered for external URLs. Defaults to `<a>`.
+	 */
+	externalComponent?: React.ComponentType<ExternalComponentProps>;
+} & (
 		| {
 				document: PrismicDocument | null | undefined;
 				href?: never;
@@ -138,6 +142,7 @@ export const PrismicLink = React.forwardRef(function PrismicLink<
 			}
 		}
 	}
+
 	const {
 		href: computedHref,
 		rel: computedRel,

test/react-server/PrismicLink.test.tsx

@@ -134,6 +134,29 @@ it("allow overriding default rel", async (ctx) => {
 	expect(actual).toStrictEqual(expected);
 });
 
+it("allow overriding default rel with a function", async (ctx) => {
+	const field = ctx.mock.value.link({
+		type: "Web",
+		withTargetBlank: true,
+	});
+	field.url = "https://prismic.io";
+
+	const rel = vi.fn(() => "foo");
+
+	const actual = renderJSON(<PrismicLink field={field} rel={rel} />);
+	const expected = renderJSON(
+		// eslint-disable-next-line react/jsx-no-target-blank
+		<a href={field.url} rel="foo" target="_blank" />,
+	);
+
+	expect(actual).toStrictEqual(expected);
+	expect(rel).toHaveBeenCalledWith({
+		href: field.url,
+		target: field.target,
+		isExternal: true,
+	});
+});
+
 it("allow overriding default target", async (ctx) => {
 	const field = ctx.mock.value.link({
 		type: "Web",
@@ -226,7 +249,6 @@ it("forwards ref to internal component", async () => {
 				ref={(el) => (customComponentRef = el)}
 				internalComponent={CustomComponent}
 				href="/"
-				onClick={() => void 0}
 			/>
 		</>,
 		{