@apify/ui-library 1.98.2 → 1.98.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.98.2",
+    "version": "1.98.3",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "5c3b5f64c4675e693452f6755aaf3d8b3c4552c6"
+    "gitHead": "11a60e90663e75d2de31c28a6e6b01c98d0b9d57"
 }

package/src/components/link.tsx

@@ -37,6 +37,40 @@ export const isUrlEmail = (url: To) => {
     if (!url || typeof (url) !== 'string') return false;
     return url.startsWith('mailto:');
 };
+/**
+ * Omits the domain and protocol from a given URL string.
+ * @param rawUrlString The input URL string which may include protocol and domain.
+ * @returns The URL string without the domain and protocol, or if it's invalid URL then it returns the input param — `rawUrlString`.
+ */
+export function omitDomainAndProtocol(rawUrlString: string): string {
+    try {
+        const { pathname, search, hash } = new URL(rawUrlString);
+        return pathname + search + hash;
+    } catch {
+        return rawUrlString;
+    }
+}
+
+export function hasUrlHttpProtocol(rawUrlString: string): boolean {
+    const httpProtocolRegex = /^https?:\/\//i;
+    return httpProtocolRegex.test(rawUrlString);
+}
+/**
+ * Returns pathname if the input param `to` is string and internal link or if it's a `To` object
+ */
+function getHref(to: To, isExternal?: boolean): string {
+    if (typeof to === 'string') {
+        // React Router ignores all urls contains origins and append it to current window url.
+        // This extracts the pathname from the URL if it's same as the current window url
+        if (!isExternal && hasUrlHttpProtocol(to)) {
+            return omitDomainAndProtocol(to);
+        }
+
+        return to;
+    }
+
+    return createPath(to);
+}
 
 const StyledLink = styled(Box)`
     /* Basic positioning */
@@ -78,8 +112,8 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
         trackClick,
         InternalLink,
     } = useSharedUiDependencies();
-    const href = typeof (to) === 'string' ? to : createPath(to);
     const isExternal = isUrlExternal(to, windowLocationHost);
+    const href = getHref(to, isExternal);
     const isEmail = isUrlEmail(to);
     const isTrusted = isHrefTrusted(href);
 
@@ -88,12 +122,13 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
         if (onClick) onClick(e);
     };
 
-    const effectiveRel = clsx(
-        rel,
+    const uniqRel = new Set([
+        ...(rel?.split(' ') || []),
         isExternal && 'external',
         (isExternal || target === '_blank') && 'noopener',
         (isExternal && !isTrusted) && 'nofollow',
-    );
+    ]);
+    const effectiveRel = clsx(Array.from(uniqRel));
 
     return (
         <StyledLink

package/src/components/to_consolidate/markdown.tsx

@@ -15,6 +15,7 @@ import type { UiThemeOption } from '../../design_system/theme.js';
 import { theme } from '../../design_system/theme.js';
 import { useCopyToClipboard } from '../../utils/index.js';
 import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code/index.js';
+import { Link as SharedLink, type LinkProps } from '../link.js';
 import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.js';
 
 interface StyledReadmeProps {
@@ -422,13 +423,12 @@ interface LinkRendererProps extends React.AnchorHTMLAttributes<HTMLAnchorElement
 
 interface LinkRendererOptions {
     hostname?: string,
-    Link?: React.ElementType;
 }
 
 // We want no-follow for external links
 // Also if link is a video from youtube or vimeo, we want to render it as iframe
 // Allowing to pass hostname to check if the link is an Apify link to the same hostname (is needed for SSR on the web)
-const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { hostname, Link }: LinkRendererOptions, isUserGeneratedContent?: boolean) => {
+const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { hostname }: LinkRendererOptions, isUserGeneratedContent?: boolean) => {
     const videoSrc = node.properties.enableEmbeddedVideo && getVideoSrc(href);
     if (videoSrc) return <Video src={videoSrc} />;
 
@@ -454,12 +454,7 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
         && APIFY_HOSTNAMES.includes(urlParsed.hostname.toLowerCase())
         && urlParsed.protocol === 'https:'; // we want to disqualify links that have http: protocol. It's a mistake on users' side that we are penalized for.
 
-    // Same host name, use the provided link for internal navigation
-    if (!hasDifferentHostname && Link) {
-        return <Link to={urlParsed} {...props} />;
-    }
-
-    let linkProps = {};
+    let linkProps: Pick<LinkProps, 'rel' | 'target'> = {};
 
     // If false, we want to open the link in the same tab (linkProps won't have any props)
     if (hasDifferentHostname) {
@@ -472,11 +467,11 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
             // Google says:
             // It’s valid to use nofollow with the new attributes — such as rel=”nofollow ugc”
             // — if you wish to be backwards-compatible with services that don’t support the new attributes.
-            linkProps = { target: '_blank', rel: clsx('noopener nofollow', isUserGeneratedContent && 'ugc') };
+            linkProps = { rel: clsx(isUserGeneratedContent && 'ugc') };
         }
     }
 
-    return <a href={href} {...props} {...linkProps} />;
+    return <SharedLink {...props as LinkProps} {...linkProps} to={href}/>;
 };
 
 // node is just to omit from exported props
@@ -548,7 +543,6 @@ export interface MarkdownProps {
     isUserGeneratedContent?: boolean;
     currentPathHostname?: string;
     addHeadingAnchors?: boolean;
-    Link?: React.ElementType;
     LinkRenderer?: (props: LinkRendererProps, options: LinkRendererOptions, isUserGeneratedContent?: boolean) => React.ReactElement;
     lazyLoadImages?: boolean;
 }
@@ -563,7 +557,6 @@ const Markdown = ({
     currentPathHostname,
     addHeadingAnchors,
     isUserGeneratedContent,
-    Link,
     LinkRenderer,
     lazyLoadImages,
 }: MarkdownProps) => {
@@ -617,8 +610,8 @@ const Markdown = ({
                 h5: headingRenderer,
                 a: (linkProps: LinkRendererProps) => (
                     LinkRenderer
-                        ? LinkRenderer(linkProps, { hostname: currentPathHostname, Link }, isUserGeneratedContent)
-                        : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname, Link }, isUserGeneratedContent)
+                        ? LinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
+                        : DefaultLinkRenderer(linkProps, { hostname: currentPathHostname }, isUserGeneratedContent)
                 ),
                 code: (codeProps: CodeRendererComponentProps) => CodeRenderer(codeProps),
                 p: ParagraphRenderer,