@apify/ui-library 1.110.1-chorerewritepublishworkflowo-80feae.22 → 1.111.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.110.1-chorerewritepublishworkflowo-80feae.22+c6bb8af90ca",
+    "version": "1.111.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.24.1-chorerewritepublishworkflowo-80feae.22+c6bb8af90ca",
+        "@apify/ui-icons": "^1.24.0",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "c6bb8af90ca3b7a384f12ebe711ba0e0e852948a"
+    "gitHead": "83de7de30cc06e9d618eea1fca3c594e9ee8d545"
 }

package/src/components/action_link.tsx

@@ -1,17 +1,20 @@
-import type React from 'react';
+import React, { type FC } from 'react';
 import styled from 'styled-components';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
+import type { RequiredBy } from '@apify-packages/types';
+
 import { theme } from '../design_system/theme.js';
-import { Box } from './box.js';
-import { Link, type LinkProps } from './link.js';
+import { Box, type BoxProps } from './box.js';
+import { Link, type LinkProps, StyledAsLink } from './link.js';
 import { Heading } from './text/index.js';
 
 const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     display: inline-flex;
     align-items: center;
     color: ${theme.color.neutral.text};
+    cursor: pointer;
 
     svg {
         transition: transform 0.2s ease-in-out;
@@ -24,7 +27,25 @@ const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     }
 `;
 
-export const ActionLink: React.FC<LinkProps & { contentProps?: object }> = ({
+export const ActionBox: FC<RequiredBy<BoxProps, 'onClick'> & { contentProps?: object }> = ({
+    as = StyledAsLink,
+    contentProps,
+    children,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as}
+            $isBackLink={false}
+            {...rest}
+        >
+            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
+            <ArrowRightIcon size="16" />
+        </StyledGuidepost>
+    );
+};
+
+export const ActionLink: FC<LinkProps & { contentProps?: object }> = ({
     children,
     as = Link,
     contentProps,

package/src/components/link.tsx

@@ -72,7 +72,7 @@ function getHref(to: To, isExternal?: boolean): string {
     return createPath(to);
 }
 
-const StyledLink = styled(Box)`
+export const StyledAsLink = styled(Box)`
     /* Basic positioning */
     display: inline-flex;
     align-items: center;
@@ -131,7 +131,7 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
     const effectiveRel = clsx(Array.from(uniqRel));
 
     return (
-        <StyledLink
+        <StyledAsLink
             // We use the InternalLink only for internal navigation
             forwardedAs={(isEmail || isExternal) ? 'a' : InternalLink}
             href={href}
@@ -143,6 +143,6 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
         >
             {children}
             {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
-        </StyledLink>
+        </StyledAsLink>
     );
 });