@apify/ui-library 1.132.1 → 1.134.0

package/src/components/table/table.styled.ts

@@ -0,0 +1,207 @@
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+
+/** z-index for sticky table head cells. Consumers can override via CSS if needed. */
+const STICKY_HEAD_Z_INDEX = 5;
+
+export const tableClassNames = {
+    TABLE: 'Table',
+    HEAD: 'Table-Head',
+    BODY: 'Table-Body',
+    FOOT: 'Table-Foot',
+
+    HEAD_ROW: 'Table-Head-Row',
+    HEAD_CELL: 'Table-Head-Cell',
+
+    BODY_ROW: 'Table-Body-Row',
+    BODY_ROW_CLICKABLE: 'Table-Body-Row_clickable',
+    BODY_ROW_EXPANDED: 'Table-Body-Row_expanded',
+    BODY_CELL: 'Table-Body-Cell',
+
+    FOOT_ROW: 'Table-Foot-Row',
+    FOOT_CELL: 'Table-Foot-Cell',
+
+    ROW_EMPTY: 'Table-Row-Empty',
+    ROW_EMPTY_CELL: 'Table-Row-Empty-Cell',
+
+    ROW_EXPANSION: 'Table-Row-Expansion',
+    ROW_EXPANSION_CELL: 'Table-Row-Expansion-Cell',
+
+    WRAPPER_SCROLLABLE: 'Table-Scrollable-Content',
+    WRAPPER_SHADOW_LEFT: 'Table-Scrollable-Shadow-Left',
+    WRAPPER_SHADOW_RIGHT: 'Table-Scrollable-Shadow-Right',
+
+    // Responsive hiding
+    HIDDEN_SM: 'Table-Cell_hiddenSM',
+    HIDDEN_MD: 'Table-Cell_hiddenMD',
+    HIDDEN_LG: 'Table-Cell_hiddenLG',
+
+    // Nested links
+    CELL_OVERLAY_LINK: 'Table-Cell-Overlay-Link',
+    CELL_LINK: 'Table-Cell-Link',
+};
+
+export const StyledTable = styled.table`
+    position: relative;
+    border-collapse: separate;
+    border-spacing: 0;
+    min-width: 100%;
+
+    /* Head cell rounding */
+    .${tableClassNames.HEAD_CELL}:first-child {
+        border-top-left-radius: ${theme.radius.radius12};
+    }
+    .${tableClassNames.HEAD_CELL}:last-child {
+        border-top-right-radius: ${theme.radius.radius12};
+    }
+
+    /* Generic cell padding */
+    .${tableClassNames.HEAD_CELL},
+    .${tableClassNames.BODY_CELL},
+    .${tableClassNames.ROW_EMPTY_CELL},
+    .${tableClassNames.ROW_EXPANSION_CELL} {
+        padding: ${theme.space.space8};
+        position: relative;
+    }
+
+    /* Head styling */
+    .${tableClassNames.HEAD_CELL} {
+        position: sticky;
+        top: 0;
+        z-index: ${STICKY_HEAD_Z_INDEX};
+        height: 4rem;
+        background-color: ${theme.color.neutral.backgroundMuted};
+        border-bottom: solid 1px ${theme.color.neutral.separatorSubtle};
+        color: ${theme.color.neutral.textMuted};
+    }
+
+    /* Body styling */
+    .${tableClassNames.BODY_ROW}:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    .${tableClassNames.BODY_ROW}:not(:first-child) .${tableClassNames.BODY_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    }
+
+    .${tableClassNames.BODY_ROW_CLICKABLE} {
+        cursor: pointer;
+    }
+
+    /* Foot styling */
+    .${tableClassNames.FOOT_ROW}:not(:first-child) .${tableClassNames.FOOT_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    }
+
+    /* Responsive hiding */
+    .${tableClassNames.HIDDEN_SM} {
+        display: none !important;
+    }
+
+    @media ${theme.device.tablet} {
+        .${tableClassNames.HIDDEN_MD} {
+            display: none !important;
+        }
+    }
+
+    @media ${theme.device.desktop} {
+        .${tableClassNames.HIDDEN_LG} {
+            display: none !important;
+        }
+    }
+
+    /* Expansion row */
+    .${tableClassNames.ROW_EXPANSION_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+        box-shadow: inset 0rem 0.2rem 0.8rem -0.2rem ${theme.color.neutral.separatorSubtle};
+    }
+
+    /* Nested links — see https://www.notion.so/apify/How-to-Nested-links-4863b883e9e1498b965531d946721926 */
+    .${tableClassNames.CELL_OVERLAY_LINK} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        cursor: pointer;
+    }
+
+    .${tableClassNames.CELL_LINK} {
+        position: relative;
+        z-index: 1;
+        color: ${theme.color.neutral.text};
+        cursor: pointer;
+        /* Extra padding for easier clicking, compensated by negative margin */
+        padding: ${theme.space.space4} ${theme.space.space8};
+        margin: -${theme.space.space4} -${theme.space.space8};
+
+        &:hover {
+            z-index: 2;
+            color: ${theme.color.primary.text};
+        }
+    }
+
+    /* Empty row */
+    .${tableClassNames.ROW_EMPTY_CELL} {
+        text-align: center;
+        padding: ${theme.space.space16};
+    }
+`;
+
+export const StyledHorizontallyScrollableTableWrapper = styled(Box)`
+    position: relative;
+    width: 100%;
+    background-color: ${theme.color.neutral.background};
+    border: solid 1px ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    .${tableClassNames.WRAPPER_SCROLLABLE} {
+        position: relative;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1.6rem;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: ${STICKY_HEAD_Z_INDEX + 1};
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(to right, ${theme.color.neutral.separatorSubtle}, transparent);
+    }
+
+    &::after {
+        right: 0;
+        background: linear-gradient(to left, ${theme.color.neutral.separatorSubtle}, transparent);
+    }
+
+    &.${tableClassNames.WRAPPER_SHADOW_LEFT}::before {
+        opacity: 1;
+    }
+
+    &.${tableClassNames.WRAPPER_SHADOW_RIGHT}::after {
+        opacity: 1;
+    }
+`;
+
+export const StyledTableFooterWrapper = styled(Box)`
+    position: relative;
+    width: 100%;
+    background-color: ${theme.color.neutral.backgroundMuted};
+    border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    overflow-x: auto;
+    scrollbar-width: none;
+`;

package/src/components/table/table.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { StyledTable, tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const Table: FC<HTMLAttributes<HTMLTableElement>> = ({ className, ...rest }) => (
+    <StyledTable data-test={tableTestIds.TABLE} className={clsx(tableClassNames.TABLE, className)} {...rest} />
+);

package/src/components/table/table_body.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableBody: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
+    <tbody data-test={tableTestIds.BODY} className={clsx(tableClassNames.BODY, className)} {...rest} />
+);

package/src/components/table/table_cell.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import type { FC, TdHTMLAttributes } from 'react';
+import { useContext } from 'react';
+
+import { Link, type LinkProps } from '../link.js';
+import { TableRowLinkContext } from './table.context.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableCell: FC<TdHTMLAttributes<HTMLTableCellElement>> = ({ className, children, ...rest }) => {
+    const rowLink = useContext(TableRowLinkContext);
+
+    return (
+        <td data-test={tableTestIds.CELL} className={clsx(tableClassNames.BODY_CELL, className)} {...rest}>
+            {rowLink && <Link className={tableClassNames.CELL_OVERLAY_LINK} to={rowLink} tabIndex={-1} ariaHidden />}
+            {children}
+        </td>
+    );
+};
+
+/**
+ * Inner link inside a cell whose row has a `to` prop (overlay link).
+ * Elevated above the row overlay via `z-index` so it remains clickable and hoverable.
+ * Includes extra padding (compensated by negative margin) for easier click targets.
+ */
+export const TableCellLink: FC<LinkProps> = ({ className, ...rest }) => (
+    <Link className={clsx(tableClassNames.CELL_LINK, className)} {...rest} />
+);

package/src/components/table/table_empty_row.tsx

@@ -0,0 +1,12 @@
+import type { FC, ReactNode } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableEmptyRow: FC<{ colSpan: number; children: ReactNode }> = ({ colSpan, children }) => (
+    <tr data-test={tableTestIds.EMPTY_ROW} className={tableClassNames.ROW_EMPTY}>
+        <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
+            {children}
+        </td>
+    </tr>
+);

package/src/components/table/table_error_row.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+
+import { Text } from '../text/index.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({ colSpan, children, error }) => (
+    <tr data-test={tableTestIds.ERROR_ROW} className={tableClassNames.ROW_EMPTY}>
+        <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
+            {children ?? <Text color="error">{error?.message ?? 'Failed to load data'}</Text>}
+        </td>
+    </tr>
+);

package/src/components/table/table_expansion_row.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import type { FC, ReactNode } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+import type { TableExpansion } from './types.js';
+
+export const TableExpansionRow: FC<{
+    colSpan: number;
+    children: ReactNode;
+    expansion: TableExpansion;
+    itemId: string;
+    className?: string;
+}> = ({ colSpan, children, expansion, itemId, className }) => {
+    if (!expansion.isExpanded(itemId)) return null;
+
+    return (
+        <tr data-test={tableTestIds.EXPANSION_ROW} className={clsx(tableClassNames.ROW_EXPANSION, className)}>
+            <td colSpan={colSpan} className={tableClassNames.ROW_EXPANSION_CELL}>
+                {children}
+            </td>
+        </tr>
+    );
+};

package/src/components/table/table_foot.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
+    <tfoot data-test={tableTestIds.FOOT} className={clsx(tableClassNames.FOOT, className)} {...rest} />
+);

package/src/components/table/table_head.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableHead: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
+    <thead data-test={tableTestIds.HEAD} className={clsx(tableClassNames.HEAD, className)} {...rest} />
+);

package/src/components/table/table_head_cell.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, ThHTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableHeadCell: FC<ThHTMLAttributes<HTMLTableCellElement>> = ({ className, ...rest }) => (
+    <th data-test={tableTestIds.HEAD_CELL} className={clsx(tableClassNames.HEAD_CELL, className)} {...rest} />
+);

package/src/components/table/table_head_row.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableHeadRow: FC<HTMLAttributes<HTMLTableRowElement>> = ({ className, ...rest }) => (
+    <tr data-test={tableTestIds.HEAD_ROW} className={clsx(tableClassNames.HEAD_ROW, className)} {...rest} />
+);

package/src/components/table/table_loading_row.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+
+import { InlineSpinner } from '../spinner.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableLoadingRow: FC<{ colSpan: number; children?: ReactNode }> = ({ colSpan, children }) => (
+    <tr data-test={tableTestIds.LOADING_ROW} className={tableClassNames.ROW_EMPTY}>
+        <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
+            {children ?? <InlineSpinner />}
+        </td>
+    </tr>
+);

package/src/components/table/table_row.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+
+import { TableRowLinkContext } from './table.context.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+import type { TableRowProps } from './types.js';
+
+export const TableRow: FC<TableRowProps> = ({ className, clickable, expanded, to, ...rest }) => {
+    const row = (
+        <tr
+            data-test={tableTestIds.ROW}
+            className={clsx(
+                tableClassNames.BODY_ROW,
+                (clickable || to) && tableClassNames.BODY_ROW_CLICKABLE,
+                expanded && tableClassNames.BODY_ROW_EXPANDED,
+                className,
+            )}
+            {...rest}
+        />
+    );
+
+    if (!to) return row;
+
+    return (
+        <TableRowLinkContext.Provider value={to}>
+            {row}
+        </TableRowLinkContext.Provider>
+    );
+};

package/src/components/table/table_test_ids.ts

@@ -0,0 +1,15 @@
+export const tableTestIds = {
+    TABLE: 'Table-table',
+    HEAD: 'Table-head',
+    HEAD_ROW: 'Table-headRow',
+    HEAD_CELL: 'Table-headCell',
+    BODY: 'Table-body',
+    ROW: 'Table-row',
+    CELL: 'Table-cell',
+    FOOT: 'Table-foot',
+    WRAPPER: 'Table-wrapper',
+    EMPTY_ROW: 'Table-emptyRow',
+    LOADING_ROW: 'Table-loadingRow',
+    ERROR_ROW: 'Table-errorRow',
+    EXPANSION_ROW: 'Table-expansionRow',
+};

package/src/components/table/table_wrapper.tsx

@@ -0,0 +1,71 @@
+import type { FC } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+import { Box } from '../box.js';
+import {
+    StyledHorizontallyScrollableTableWrapper,
+    StyledTableFooterWrapper,
+    tableClassNames,
+} from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+import type { HorizontallyScrollableTableWrapperProps } from './types.js';
+
+export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({ children, footer, className }) => {
+    const scrollableRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const animationFrameIdRef = useRef(0);
+
+    const updateShadows = useCallback(() => {
+        const container = scrollableRef.current;
+        const wrapper = wrapperRef.current;
+        if (!container || !wrapper) return;
+
+        const isScrollable = container.scrollWidth > container.clientWidth;
+
+        if (container.scrollLeft > 0) {
+            wrapper.classList.add(tableClassNames.WRAPPER_SHADOW_LEFT);
+        } else {
+            wrapper.classList.remove(tableClassNames.WRAPPER_SHADOW_LEFT);
+        }
+
+        if (isScrollable && container.scrollLeft < container.scrollWidth - container.clientWidth - 1) {
+            wrapper.classList.add(tableClassNames.WRAPPER_SHADOW_RIGHT);
+        } else {
+            wrapper.classList.remove(tableClassNames.WRAPPER_SHADOW_RIGHT);
+        }
+    }, []);
+
+    const throttledUpdateShadows = useCallback(() => {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = requestAnimationFrame(updateShadows);
+    }, [updateShadows]);
+
+    useEffect(() => {
+        const container = scrollableRef.current;
+        if (!container) return undefined;
+
+        updateShadows();
+        container.addEventListener('scroll', throttledUpdateShadows);
+        const resizeObserver = new ResizeObserver(throttledUpdateShadows);
+        resizeObserver.observe(container);
+
+        return () => {
+            cancelAnimationFrame(animationFrameIdRef.current);
+            container.removeEventListener('scroll', throttledUpdateShadows);
+            resizeObserver.disconnect();
+        };
+    }, [updateShadows, throttledUpdateShadows]);
+
+    return (
+        <StyledHorizontallyScrollableTableWrapper data-test={tableTestIds.WRAPPER} ref={wrapperRef} className={className}>
+            <Box className={tableClassNames.WRAPPER_SCROLLABLE} ref={scrollableRef}>
+                {children}
+            </Box>
+            {footer && (
+                <StyledTableFooterWrapper>
+                    {footer}
+                </StyledTableFooterWrapper>
+            )}
+        </StyledHorizontallyScrollableTableWrapper>
+    );
+};

package/src/components/table/types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import type { To } from '../link.js';
+
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /** Apply clickable cursor style. Automatically set when `to` is provided. */
+    clickable?: boolean;
+    /** Apply expanded row style. */
+    expanded?: boolean;
+    /** Row-level navigation URL. Each `TableCell` inside will render an overlay link automatically. */
+    to?: To;
+};
+
+export type HorizontallyScrollableTableWrapperProps = {
+    children: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+};
+
+export type TableExpansion = {
+    expandedId: string | null;
+    toggle: (id: string) => void;
+    isExpanded: (id: string) => boolean;
+};

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