@apify/ui-library 0.71.1-featcolortokens-178953.55 → 0.71.1-featcolortokens-178953.58

package/src/components/floating/menu.tsx

@@ -1,189 +0,0 @@
-import {
-    FloatingFocusManager,
-    FloatingPortal,
-    useClick,
-    useDismiss,
-    useInteractions,
-    useListNavigation,
-    useRole,
-    useTypeahead,
-} from '@floating-ui/react';
-import clsx from 'clsx';
-import React, {
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-
-import {
-    Box,
-    type BoxProps,
-} from '../box.js';
-import { Text } from '../text/index.js';
-import { useFloatingMenu } from './menu_common.js';
-import {
-    DropdownMenuBaseComponent,
-    ListMenuComponent,
-    ListMenuItemComponent,
-} from './menu_components.js';
-
-export const menuClassNames = {
-    WRAPPER: 'menu-wrapper',
-    BASE: 'menu-base',
-    LIST: 'menu-list',
-    ITEM: 'menu-item',
-};
-
-type SelectActionType = 'click' | 'enter' | 'space' | 'type';
-
-// It might be tempting to define label as ReactNode, but we need to have the string value for keyboard navigation
-// More difficult cases can be handled using renderOption prop
-export interface MenuOption {
-    label: string,
-    value: string,
-}
-
-export interface MenuProps<T = MenuOption> {
-    options: T[],
-    value?: string,
-    onSelect: (newValue: string, selectedBy: SelectActionType) => void,
-    defaultLabel?: React.ReactNode,
-    closeOnSelect?: boolean,
-    renderOption?: (option: T) => React.ReactNode,
-    components?: {
-        MenuBase?: React.ElementType,
-        Menu?: React.ElementType,
-        MenuItem?: React.ElementType,
-    },
-}
-
-const defaultRenderOption = ({ label }: MenuOption) => (<Text as='span'>{label}</Text>);
-
-/**
- * This example is a Select taken from https://floating-ui.com/docs/react-examples
- * It tries to mimic API of react-select as closely as possible
- */
-export const Menu = <T extends MenuOption>({
-    options,
-    value,
-    onSelect,
-    closeOnSelect = true,
-    defaultLabel,
-    components,
-    renderOption,
-    className,
-    ...rest
-}: MenuProps<T> & BoxProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const { refs, floatingStyles, context } = useFloatingMenu({
-        isOpen,
-        setIsOpen,
-    });
-
-    const selectedIndex = useMemo(() => {
-        const foundIndex = options.findIndex((option) => option.value === value);
-        return foundIndex < 0 ? null : foundIndex;
-    }, [options, value]);
-
-    const [activeIndex, setActiveIndex] = useState<number | null>(null);
-    const handleSelect = (newIndex: number, selectedBy: SelectActionType) => {
-        onSelect(options[newIndex].value, selectedBy);
-        if (closeOnSelect) setIsOpen(false);
-    };
-
-    const listRef = useRef<(HTMLElement | null)[]>([]);
-    const isTypingRef = useRef(false);
-    const listContentRef = useRef(options.map((option) => option.label));
-
-    const click = useClick(context, { event: 'mousedown' });
-    const dismiss = useDismiss(context);
-    const typeahead = useTypeahead(context, {
-        listRef: listContentRef,
-        activeIndex,
-        selectedIndex,
-        onMatch: isOpen ? setActiveIndex : (newIndex) => onSelect(options[newIndex].value, 'type'),
-        onTypingChange(isTyping) {
-            isTypingRef.current = isTyping;
-        },
-    });
-    const role = useRole(context, { role: 'listbox' });
-    const listNav = useListNavigation(context, {
-        listRef,
-        activeIndex,
-        selectedIndex,
-        onNavigate: setActiveIndex,
-        loop: true,
-    });
-
-    const { getFloatingProps, getItemProps, getReferenceProps } = useInteractions([click, dismiss, role, listNav, typeahead]);
-
-    const MenuBaseComponent = components?.MenuBase || DropdownMenuBaseComponent;
-    const MenuComponent = components?.Menu || ListMenuComponent;
-    const MenuItemComponent = components?.MenuItem || ListMenuItemComponent;
-
-    const effectiveRenderOption = renderOption || defaultRenderOption;
-
-    return (
-        <Box
-            className={clsx(className, menuClassNames.WRAPPER)}
-            {...rest}
-        >
-            <MenuBaseComponent
-                aria-labelledby="select-label"
-                aria-autocomplete="none"
-                ref={refs.setReference}
-                {...getReferenceProps()}
-                className={menuClassNames.BASE}
-                tabindex="0"
-            >
-                {selectedIndex !== null ? options[selectedIndex].label : defaultLabel}
-            </MenuBaseComponent>
-            {isOpen && (
-                <FloatingPortal>
-                    <FloatingFocusManager
-                        context={context}
-                        modal={false}
-                    >
-                        <MenuComponent
-                            ref={refs.setFloating}
-                            style={floatingStyles}
-                            {...getFloatingProps()}
-                            className={menuClassNames.LIST}
-                        >
-                            {options.map((option, i) => (
-                                <MenuItemComponent
-                                    key={option.value}
-                                    $isSelected={i === selectedIndex}
-                                    $isActive={i === activeIndex}
-                                    ref={(node: HTMLElement | null) => {
-                                        listRef.current[i] = node;
-                                    }}
-                                    role="option"
-                                    tabIndex={i === activeIndex ? 0 : -1}
-                                    className={menuClassNames.ITEM}
-                                    aria-selected={i === selectedIndex && i === activeIndex}
-                                    {...getItemProps({
-                                        onClick: () => handleSelect(i, 'click'), // Handles mouse click
-                                        onKeyDown: (event) => {
-                                            if (event.key === 'Enter') {
-                                                event.preventDefault();
-                                                handleSelect(i, 'enter'); // Handles enter press
-                                            }
-
-                                            if (event.key === ' ' && !isTypingRef.current) {
-                                                event.preventDefault();
-                                                handleSelect(i, 'space');
-                                            }
-                                        },
-                                    })}
-                                >
-                                    {effectiveRenderOption(option)}
-                                </MenuItemComponent>
-                            ))}
-                        </MenuComponent>
-                    </FloatingFocusManager>
-                </FloatingPortal>
-            )}
-        </Box>
-    );
-};

package/src/components/floating/menu_common.tsx

@@ -1,31 +0,0 @@
-import {
-    autoUpdate,
-    offset,
-    size,
-    useFloating,
-} from '@floating-ui/react';
-
-export const useFloatingMenu = ({
-    isOpen,
-    setIsOpen,
-}: {
-    isOpen: boolean,
-    setIsOpen: (newIsOpen: boolean) => void
-}) => useFloating<Element>({
-    placement: 'bottom-start',
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-        offset(5),
-        size({
-            apply({ elements, availableHeight }) {
-                Object.assign(elements.floating.style, {
-                    maxHeight: `${availableHeight}px`,
-                    minHeight: '50px',
-                });
-            },
-            padding: 10,
-        }),
-    ],
-});

package/src/components/floating/menu_components.tsx

@@ -1,99 +0,0 @@
-import {
-    type ReferenceType,
-    type UseFloatingReturn,
-} from '@floating-ui/react';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ChevronDownIcon } from '@apify/ui-icons';
-
-import { theme } from '../../design_system/theme.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-
-export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
-
-/**
- * Menu wrapper component
- */
-export const ListMenuComponent = styled(Box).attrs({
-    p: 'space8',
-})`
-    display: flex;
-    flex-direction: column;
-    max-height: 300px;
-    min-width: 160px;
-    box-shadow: ${theme.shadow.shadow2};
-    background: ${theme.color.neutral.background};
-    border: 1px solid ${theme.color.neutral.separatorSubtle};
-    border-radius: ${theme.radius.radius8};
-    scrollbar-color: ${theme.color.neutral.separatorSubtle} ${theme.color.neutral.background};
-    outline: none;
-    overflow-y: auto;
-    z-index: 10;
-`;
-
-interface SelectableListMenuItemProps {
-    $isActive?: boolean,
-    $isSelected?: boolean,
-}
-
-/**
- * Menu item component
- */
-export const ListMenuItemComponent = styled(Box).attrs({
-    px: 'space8',
-})<SelectableListMenuItemProps>`
-    border-radius: ${theme.radius.radius8};
-    outline: none;
-    cursor: pointer;
-    white-space: nowrap;
-
-    ${({ $isActive }) => $isActive && css`
-        background-color: ${theme.color.neutral.hover};
-    `}
-
-    ${({ $isSelected }) => $isSelected && css`
-        background-color: ${theme.color.neutral.backgroundSubtle};
-        color: ${theme.color.primary.text};
-    `}
-`;
-
-/**
- * Menu base component WITHOUT dropdown icon
- */
-export const PlainMenuBaseComponent = styled(Box)`
-    display: flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-    padding: ${theme.space.space8};
-    border-radius: ${theme.radius.radius8};
-    border: 1px solid ${theme.color.neutral.separatorSubtle};
-    background-color: ${theme.color.neutral.backgroundMuted};
-
-    cursor: pointer;
-    transition: background-color 0.2s ease-in-out;
-
-    &:hover {
-        background-color: ${theme.color.neutral.backgroundSubtle};
-    }
-`;
-
-type DropdownMenuBaseComponentProps = {
-    children: React.ReactNode;
-} & BoxProps;
-
-/**
- * Menu base component WITH dropdown icon
- */
-export const DropdownMenuBaseComponent = forwardRef<HTMLElement, DropdownMenuBaseComponentProps>(({
-    children,
-    ...props
-}, ref) => {
-    return (
-        <PlainMenuBaseComponent {...props} ref={ref}>
-            {children}
-            <ChevronDownIcon size="16" color={theme.color.neutral.icon} />
-        </PlainMenuBaseComponent>
-    );
-});

package/src/components/image.tsx

@@ -1,24 +0,0 @@
-import { forwardRef } from 'react';
-
-import type { ImageProxyOptions } from '../ui_dependency_provider.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
-
-type ImageProps = {
-    src: string,
-    alt?: string,
-    width?: number,
-    height?: number,
-    loading?: 'eager' | 'lazy' | undefined;
-} & ImageProxyOptions
-
-export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
-    const { InternalImage } = useSharedUiDependencies();
-    return (
-        <Box
-            ref={ref}
-            {...props}
-            as={InternalImage}
-        />
-    );
-});

package/src/components/index.ts

@@ -1,22 +0,0 @@
-export * from './text/index.js';
-export * from './box.js';
-export * from './message.js';
-export * from './floating/index.js';
-export * from './button.js';
-export * from './link.js';
-export * from './action_link.js';
-export * from './simple_markdown/index.js';
-export * from './code/index.js';
-export * from './color_wheel_gradient.js';
-export * from './readme_renderer/index.js';
-export * from './to_consolidate/index.js';
-export * from './tile/index.js';
-export * from './blog_article.js';
-export * from './banner.js';
-export * from './actor_template_card.js';
-export * from './chip.js';
-export * from './image.js';
-export * from './rating.js';
-export * from './badge.js';
-export * from './tag.js';
-export * from './tabs/index.js';

package/src/components/link.tsx

@@ -1,114 +0,0 @@
-import clsx from 'clsx';
-import { createPath, type Path } from 'history';
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-
-import { ExternalLinkIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type BoxProps } from './box.js';
-
-export type To = string | Partial<Path>;
-export interface RegularLinkProps {
-    to: To,
-    hideExternalIcon?: boolean,
-    showExternalIcon?: boolean,
-    rel?: string,
-    target?: string,
-    trackingId?: string,
-    trackingData?: object,
-}
-
-// TODO: This function is copied from tools.client.js. We can remove it from there once this is deployed
-/**
- * Checks if passed url is external
- */
-export const isUrlExternal = (url: To, windowLocationHost: string) => {
-    if (!url || typeof (url) !== 'string') return false;
-    const domainMatch = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i);
-    return !!(domainMatch && domainMatch[1] !== windowLocationHost);
-};
-
-// TODO: This function is copied from tools.client.js. We can remove it from there once this is deployed
-/**
- * Checks if passed url is email
- */
-export const isUrlEmail = (url: To) => {
-    if (!url || typeof (url) !== 'string') return false;
-    return url.startsWith('mailto:');
-};
-
-const StyledLink = styled(Box)`
-    /* Basic positioning */
-    display: inline-flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-
-    /* Default behavior */
-    text-decoration: none;
-    transition: color ${theme.transition.fastEaseInOut};
-
-    &:hover {
-        text-decoration: none;
-        color: ${theme.color.primary.actionHover};
-    }
-
-    &:active {
-        color: ${theme.color.primary.actionActive};
-    }
-`;
-
-export type LinkProps = RegularLinkProps & BoxProps;
-
-export const Link = forwardRef<HTMLElement, LinkProps>(({
-    to,
-    children,
-    rel,
-    target,
-    hideExternalIcon,
-    showExternalIcon,
-    onClick,
-    trackingId,
-    trackingData,
-    ...rest
-}, ref) => {
-    const {
-        windowLocationHost,
-        isHrefTrusted,
-        trackClick,
-        InternalLink,
-    } = useSharedUiDependencies();
-    const href = typeof (to) === 'string' ? to : createPath(to);
-    const isExternal = isUrlExternal(to, windowLocationHost);
-    const isEmail = isUrlEmail(to);
-    const isTrusted = isHrefTrusted(href);
-
-    const trackedOnClick = (e: React.MouseEvent) => {
-        if (trackingId && trackClick) trackClick(trackingId, trackingData);
-        if (onClick) onClick(e);
-    };
-
-    const effectiveRel = clsx(
-        rel,
-        isExternal && 'external',
-        (isExternal || target === '_blank') && 'noopener',
-        (isExternal && !isTrusted) && 'nofollow',
-    );
-
-    return (
-        <StyledLink
-            // We use the InternalLink only for internal navigation
-            forwardedAs={(isEmail || isExternal) ? 'a' : InternalLink}
-            href={href}
-            rel={effectiveRel}
-            target={target || (isExternal ? '_blank' : '_self')}
-            onClick={trackedOnClick}
-            ref={ref}
-            {...rest}
-        >
-            {children}
-            {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
-        </StyledLink>
-    );
-});

package/src/components/message.tsx

@@ -1,153 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import styled from 'styled-components';
-
-import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import { Box, type BoxProps } from './box.js';
-import { Button } from './button.js';
-import { Heading } from './text/index.js';
-
-export const messageClassNames = {
-    main: 'Message',
-    icon: 'icon',
-    content: 'content',
-    caption: 'caption',
-    dismiss: 'dismiss',
-};
-
-const StyledMessage = styled(Box)`
-    display: flex;
-    gap: ${theme.space.space8};
-
-    border-radius: ${theme.radius.radius8};
-    box-shadow: ${theme.shadow.shadow1};
-
-    .${messageClassNames.content} {
-        flex: 1;
-        margin-top: 1px; /* This is to align icon with text (align-items: center not possible - icon should be on top) */
-    }
-
-    .${messageClassNames.caption} {
-        /* TODO: We should not override the default Heading that is rendered for caption but it doesn't look good without these */
-        line-height: 20px;
-        font-weight: 600;
-        margin-bottom: ${theme.space.space4};
-    }
-
-    .${messageClassNames.dismiss} {
-        background: transparent;
-        height: 20px;
-
-        svg {
-            color: ${theme.color.neutral.icon}
-        }
-    }
-
-    &.borderless {
-        border: none !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-    }
-
-    &.info {
-        background-color: ${theme.color.neutral.background};
-        border: 1px solid ${theme.color.neutral.border};
-
-        .${messageClassNames.icon} { color: ${theme.color.primary.icon}; }
-    }
-
-    &.success {
-        background-color: ${theme.color.success.backgroundSubtle};
-        border: 1px solid ${theme.color.success.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.success.icon}; }
-    }
-
-    &.warning {
-        background-color: ${theme.color.warning.backgroundSubtle};
-        border: 1px solid ${theme.color.warning.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.warning.icon}; }
-    }
-
-    &.danger {
-        background-color: ${theme.color.danger.backgroundSubtle};
-        border: 1px solid ${theme.color.danger.borderSubtle};
-
-        .${messageClassNames.icon} { color: ${theme.color.danger.icon}; }
-    }
-`;
-
-export type MessageType = 'info' | 'warning' | 'success' | 'danger';
-
-const typeToIcon: { [key in MessageType]: React.ElementType } = {
-    info: InfoIcon,
-    success: CheckCircleIcon,
-    warning: WarningTriangleIcon,
-    danger: WarningTriangleIcon,
-};
-
-type MessageProps = BoxProps & {
-    type: MessageType,
-    caption?: string,
-    icon?: React.ElementType,
-    onDismissClick?: () => void,
-    borderless?: boolean,
-    boxless?: boolean,
-    as?: React.ElementType,
-    dismissTrackingId?: string,
-}
-
-/**
- * Component used to display larger messages that are part of the content of the application.
- */
-export const Message: React.FC<MessageProps> = ({
-    className,
-    icon,
-    caption,
-    children,
-    onDismissClick,
-    type = 'warning',
-    borderless = false,
-    boxless = false,
-    dismissTrackingId,
-    as,
-    ...rest
-}) => {
-    const Icon = icon || typeToIcon[type];
-    return (
-        <StyledMessage
-            className={clsx(className, messageClassNames.main, type, borderless && 'borderless')}
-            mb={boxless ? 'space8' : 'space16'} // TODO: Export message without margin
-            p={boxless ? 'none' : 'space16'}
-            forwardedAs={as}
-            {...rest}
-        >
-            <Icon className={messageClassNames.icon} size="20" />
-            <div className={messageClassNames.content}>
-                {caption && (<Heading as='div' type='titleM' className={messageClassNames.caption}>{caption}</Heading>)}
-                {children}
-            </div>
-            {onDismissClick && (
-                <Button
-                    size='small'
-                    variant='text'
-                    trackingId={dismissTrackingId}
-                    onClick={onDismissClick}
-                    className={messageClassNames.dismiss}
-                >
-                    <CrossIcon size="16" />
-                </Button>
-            )}
-        </StyledMessage>
-    );
-};
-
-type SpecificMessageProps = Omit<MessageProps, 'type'>;
-// Semantic classes for all the message types
-export const InfoMessage = (props: SpecificMessageProps) => (<Message {...props} type='info' />);
-export const WarningMessage = (props: SpecificMessageProps) => (<Message {...props} type='warning' />);
-export const SuccessMessage = (props: SpecificMessageProps) => (<Message {...props} type='success' />);
-export const DangerMessage = (props: SpecificMessageProps) => (<Message {...props} type='danger' />);