@apify/ui-library 1.133.0 → 1.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.133.0",
+    "version": "1.134.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "4df09cdffad169b379e062cc4dbc1641d8a6f0c7"
+    "gitHead": "f8321843cceed834c46deb61af56d269efc3c7ae"
 }

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/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.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/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/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/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/theme.ts

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

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>>,