@apify/ui-library 1.133.0 → 1.134.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.133.0",
+    "version": "1.134.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.34.1",
+        "@apify/ui-icons": "^1.34.2",
         "@floating-ui/react": "^0.27.19",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "4df09cdffad169b379e062cc4dbc1641d8a6f0c7"
+    "gitHead": "1b7093b01669dad875392071d7234b2920fbb073"
 }

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -1,6 +1,6 @@
 import { readFileSync, writeFileSync } from 'node:fs';
 
-// eslint-disable-next-line import/no-extraneous-dependencies
+// eslint-disable-next-line import-x/no-extraneous-dependencies
 import { print, types } from 'recast';
 
 const { builders } = types;

package/src/components/badge.stories.jsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+// eslint-disable-next-line import-x/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';

package/src/components/box.tsx

@@ -34,7 +34,7 @@ type SharedBoxProps = {
     style?: React.CSSProperties
     onClick?: (e: React.MouseEvent) => void,
     id?: string,
-}
+};
 
 // This should be renamed - these props are global for any element not just Boxes
 export type RegularBoxProps = SharedBoxProps & { as?: React.ElementType };

package/src/components/button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-// eslint-disable-next-line import/extensions
+// eslint-disable-next-line import-x/extensions
 import { action } from 'storybook/actions';
 import styled from 'styled-components';
 

package/src/components/button.tsx

@@ -236,12 +236,12 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         &:hover {
             color: ${actionTextColor || textColor};
             ${hoverGradient
-        ? css`
+                    ? css`
                     background-image: ${hoverGradient};
                     background-color: ${backgroundColor};
                 `
-        : css`background-color: ${hoverColor};`
-}
+                    : css`background-color: ${hoverColor};`
+            }
             border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
         }
 

package/src/components/card_container.tsx

@@ -16,7 +16,7 @@ const HEADER_PLACEMENT = {
     BOTTOM: 'BOTTOM',
 } as const;
 
-const Wrapper = styled(Box)<{$headerPlacement: ValueOf<typeof HEADER_PLACEMENT>}>`
+const Wrapper = styled(Box)<{ $headerPlacement: ValueOf<typeof HEADER_PLACEMENT> }>`
     background-color: ${theme.color.neutral.backgroundSubtle};
     border-radius: ${theme.radius.radius12};
 

package/src/components/chip.tsx

@@ -80,7 +80,7 @@ const chipTypeStyle = {
     `,
 } satisfies Record<CHIP_TYPES, unknown>;
 
-const StyledChip = styled.span<{size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean}>`
+const StyledChip = styled.span<{ size: CHIP_SIZES, type: CHIP_TYPES, clickable: boolean }>`
     ${({ size }) => chipSizeStyle[size]};
     ${({ type }) => chipTypeStyle[type]};
     /* Static styles */
@@ -100,7 +100,7 @@ export type ChipProps = RegularBoxProps & {
     size?: CHIP_SIZES
     icon?: React.ReactNode
     clickable?: boolean
-}
+};
 
 /**
  * Component for displaying status and for labelling other components.
@@ -121,7 +121,7 @@ export const Chip = forwardRef(({
 
 Chip.displayName = 'Chip';
 
-type SpecificChipProps = Omit<ChipProps, 'type'>
+type SpecificChipProps = Omit<ChipProps, 'type'>;
 
 export const PrimaryChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props} />;
 export const NeutralChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props} />;

package/src/components/code/code_block/code_block.styled.tsx

@@ -8,7 +8,7 @@ export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
     $fullWidth?: boolean;
     $fullHeight?: string;
     $showLineNumbers?: boolean;
-}
+};
 
 export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
     background-color: ${theme.color.neutral.backgroundMuted} !important;
@@ -130,10 +130,10 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
         top: 0;
         right: 0;
         ${({ $hasHeader }) => ($hasHeader
-        ? css`
+            ? css`
             padding-top: 6px;
             padding-right: ${theme.space.space8};`
-        : css`
+            : css`
             padding-top: ${theme.space.space16};
             padding-right: ${theme.space.space16};`)}
 

package/src/components/code/code_block/code_block.tsx

@@ -21,7 +21,7 @@ type CodeTab = {
     language?: string;
     bashCommandsStart?: number[];
     to?: string;
-}
+};
 
 type HeaderProps = {
     tabs: CodeTab[] | null;
@@ -29,7 +29,7 @@ type HeaderProps = {
     onTabChange: (tab: CodeTab, e: React.MouseEvent) => void;
     title?: string;
     showBashHeader?: boolean;
-}
+};
 
 const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
 
@@ -111,7 +111,7 @@ export type CodeBlockProps = RegularBoxProps & {
     bashCommandsStart?: number[];
     hideBashPromptPrefixes?: boolean;
     hideLineNumbers?: boolean | undefined;
-}
+};
 
 export const CodeBlock = ({
     content,

package/src/components/code/inline_code/inline_code.tsx

@@ -42,7 +42,7 @@ export type InlineCodeProps = RegularBoxProps & {
     children: React.ReactNode,
     size?: SharedTextSize,
     withCopyButton?: boolean,
-}
+};
 
 // This might be just a Chip component
 export const InlineCode: React.FC<InlineCodeProps> = ({

package/src/components/code/one_line_code/one_line_code.tsx

@@ -51,7 +51,7 @@ type OneLineCodeWrapperProps = SyntaxHighlighterBaseStylesWrapperProps & {
     $fitContent?: boolean;
     $showBashPrefixes?: boolean;
     $disabled?: boolean;
-}
+};
 
 const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCodeWrapperProps>`
     display: flex;
@@ -160,7 +160,7 @@ export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
     disabled?: boolean;
     hideCopyButton?: boolean;
     trackingBundle?: OneLineCodeTrackingBundle;
-}
+};
 
 export function OneLineCode({
     children,

package/src/components/code/prism_highlighter.tsx

@@ -128,7 +128,7 @@ const PreWrapper = styled.pre<PreWrapperProps>`
                 padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
             }
 
-            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
+            ${({ $isSingleLine }) => !$isSingleLine && css<{ $hasLinePrefixes: boolean }>`
                 &:hover {
                     background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
                     border-left: 6px solid ${theme.color.neutral.border} !important;

package/src/components/code/prism_python.ts

@@ -60,9 +60,9 @@ Prism.languages.python = {
             punctuation: /\./,
         },
     },
-    // eslint-disable-next-line max-len
+    // eslint-disable-next-line @stylistic/max-len
     keyword: /\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,
-    // eslint-disable-next-line max-len
+    // eslint-disable-next-line @stylistic/max-len
     builtin: /\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,
     boolean: /\b(?:False|None|True)\b/,
     number: /\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,

package/src/components/floating/tooltip.tsx

@@ -52,6 +52,14 @@ const StyledFloatingComponentBase = styled(FloatingComponentBase)<{ $isDarkTheme
     background-color: ${theme.colorPalette.dark.neutral900};
     padding: ${theme.space.space8};
 
+    a {
+        color: ${theme.colorPalette.dark.blue100};
+
+        &:hover {
+            color: ${theme.colorPalette.dark.blue75};
+        }
+    }
+
     ${({ $isDarkTheme }) => $isDarkTheme && css`
         box-shadow: ${theme.shadow.shadow2};
         border: 1px solid ${theme.color.neutral.smallTooltipBorder};

package/src/components/icon_button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react-vite';
-// eslint-disable-next-line import/extensions
+// eslint-disable-next-line import-x/extensions
 import { action } from 'storybook/actions';
 import styled from 'styled-components';
 

package/src/components/icon_button.tsx

@@ -96,7 +96,7 @@ const iconButtonVariantStyle: Record<ICON_BUTTON_VARIANTS, IconButtonVariantStyl
 type IconButtonSizeConfig = {
     iconSize: IconSize;
     spinnerSize: string;
-}
+};
 
 const iconButtonSizeConfig: Record<ButtonSize, IconButtonSizeConfig> = {
     extraLarge: {
@@ -142,12 +142,12 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
 
         &:hover {
             ${backgroundHoverGradient
-        ? css`
+                    ? css`
                     background-image: ${backgroundHoverGradient};
                     background-color: ${backgroundColor};
                 `
-        : css`background-color: ${backgroundHoverColor};`
-}
+                    : css`background-color: ${backgroundHoverColor};`
+            }
             border-color: ${borderHoverColor || borderColor};
             color: ${iconColor};
         }
@@ -195,7 +195,7 @@ type IconButtonNodePropsMap = {
         element: HTMLButtonElement;
         props: RegularButtonProps;
     };
-}
+};
 
 export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
     as?: T

package/src/components/image.tsx

@@ -10,7 +10,7 @@ type ImageProps = {
     width?: number,
     height?: number,
     loading?: 'eager' | 'lazy' | undefined;
-} & ImageProxyOptions
+} & ImageProxyOptions;
 
 export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
     const { InternalImage } = useSharedUiDependencies();

package/src/components/link.stories.tsx

@@ -3,7 +3,7 @@ import type { ElementType } from 'react';
 
 import { Link, type LinkProps } from './link.js';
 
-// eslint-disable-next-line max-len
+// eslint-disable-next-line @stylistic/max-len
 const longText = 'This is a very long link text that might wrap to multiple lines depending on the container width. It is used to test how the Link component handles overflow and wrapping in different scenarios.';
 
 // Mock the UI dependencies provider for Storybook

package/src/components/message.tsx

@@ -59,7 +59,7 @@ const StyledMessage = styled(Box)<{ $boxless?: boolean, $hasCaption?: boolean }>
         }
 
         ${({ $hasCaption }) => ($hasCaption
-        ? css`
+            ? css`
             grid-template-areas:
                 'iconArea captionArea'
                 'descriptionArea descriptionArea';
@@ -152,7 +152,7 @@ type MessageProps = BoxProps & {
     as?: React.ElementType,
     dismissTrackingId?: string,
     actions?: ActionButtonProps[],
-}
+};
 
 /**
  * Component used to display larger messages that are part of the content of the application.

package/src/components/rating.tsx

@@ -13,7 +13,7 @@ import { Text } from './text/index.js';
 
 type RatingStatsProps = {
     ratingStats: Record<ReviewRating, number>
-}
+};
 
 const StyledRating = styled(Box)`
     display: flex;
@@ -57,7 +57,7 @@ const StyledRatingBar = styled(Box)<{ $widthPercent: number }>`
 
 type SingleStarRatingProps = BoxProps & {
     color?: string;
-}
+};
 
 export const SingleStarRating: FC<SingleStarRatingProps> = ({
     color = theme.color.neutral.icon,
@@ -74,7 +74,7 @@ export const SingleStarRating: FC<SingleStarRatingProps> = ({
 type RatingProps = BoxProps & {
     rating: number | undefined;
     color?: string;
-}
+};
 
 export const Rating: FC<RatingProps> = ({
     rating = 0,

package/src/components/simple_markdown/simple_markdown.tsx

@@ -190,7 +190,7 @@ export type SimpleMarkdownProps = Omit<ReactMarkdownOptions, 'urlTransform' | 'c
     size?: MarkdownSize,
     children: string,
     className?: string,
-}
+};
 
 export const useDefaultUrlTransform = () => {
     const { windowLocationHost } = useSharedUiDependencies();

package/src/components/spinner.tsx

@@ -102,7 +102,7 @@ export const BlockSpinner = styled(Spinner)`
 /**
  * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
  */
-export const InlineSpinner = styled(Spinner)<{size?: string}>`
+export const InlineSpinner = styled(Spinner)<{ size?: string }>`
     display: inline-block;
     position: relative;
     height: ${({ size }) => size || theme.space.space12};

package/src/components/store/store_actor_header.tsx

@@ -12,7 +12,7 @@ const storeActorHeaderClassNames = {
     badge: 'ActorStoreItem-badge',
 };
 
-const StyledStoreActorHeader = styled(Box)<{ $compact: boolean}>`
+const StyledStoreActorHeader = styled(Box)<{ $compact: boolean }>`
     display: flex;
     gap: ${({ $compact }) => ($compact ? theme.space.space4 : theme.space.space12)};
     align-items: ${({ $compact }) => ($compact ? 'flex-start' : 'center')};
@@ -79,7 +79,7 @@ export type StoreActorHeaderProps = {
     hasRisingStarBadge?: boolean,
     avatarSize?: number,
     compact?: boolean;
-}
+};
 
 export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
     name,

package/src/components/tabs/tabs.tsx

@@ -128,7 +128,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
 type TabOverflowState = {
     right: boolean;
     left: boolean;
-}
+};
 
 const isTabsOverflowing = (node: HTMLDivElement): TabOverflowState => {
     if (node.scrollWidth > node.clientWidth) {

package/src/components/tag.tsx

@@ -35,7 +35,7 @@ type TagNodePropsMap = {
         element: HTMLButtonElement;
         props: RegularButtonProps;
     };
-}
+};
 
 type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
 export type TagProps<T extends TagNodeType> = SharedTagProps & ({

package/src/components/to_consolidate/pagination.tsx

@@ -39,7 +39,7 @@ export type PaginationButtonsProps = {
     page: number;
     totalPages: number;
     onPageChange: (page: number) => void;
-}
+};
 
 // TODO: Consolidate and move to /library
 export const PaginationButtons: FC<PaginationButtonsProps> = ({

package/src/design_system/colors/build_color_tokens.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import-x/no-extraneous-dependencies
 import StyleDictionary from 'style-dictionary';
 
 const DO_NOT_EXPORT_COMMENT = `/**

package/src/design_system/theme.ts

@@ -22,4 +22,4 @@ export const theme = {
     typography: typographyTokens,
 };
 
-export type UiThemeOption = 'LIGHT' | 'DARK'
+export type UiThemeOption = 'LIGHT' | 'DARK';

package/src/design_system/typography_theme.ts

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+/* eslint-disable @stylistic/max-len */
 export const typographyTokens = {
     shared: {
         mobile: {

package/src/type_utils.ts

@@ -3,5 +3,5 @@
 // It's called transient props (https://styled-components.com/docs/api#transient-props)
 export type WithTransientProps<T> = { [P in keyof T & string as `$${P}`]: T[P] };
 
-export type WithRequired<T, K extends keyof T> = T & Required<Pick<T, K>>
+export type WithRequired<T, K extends keyof T> = T & Required<Pick<T, K>>;
 export type WithOptional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

package/src/ui_dependency_provider.tsx

@@ -18,7 +18,7 @@ export type ImageProxyOptions = {
         width?: number,
         height?: number,
     }
-}
+};
 
 export interface UiDependencies {
     InternalLink: React.ForwardRefExoticComponent<AgnosticInternalLinkProps & React.RefAttributes<HTMLAnchorElement>>,