@apify/ui-library 1.132.1 → 1.133.0

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;
+};