@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/VirtualTable/VirtualTable.tsx

@@ -1,700 +0,0 @@
-
-
-import React, { createContext, forwardRef, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import { deepEqual as equal } from "fast-equals"
-
-import { FixedSizeList as List } from "react-window";
-import useMeasure from "react-use-measure";
-
-import { CircularProgress } from "../CircularProgress";
-import {
-    OnVirtualTableColumnResizeParams,
-    VirtualTableColumn,
-    VirtualTableFilterValues,
-    VirtualTableProps,
-    VirtualTableSortKey,
-    VirtualTableWhereFilterOp
-} from "./VirtualTableProps";
-
-import { VirtualTableContextProps } from "./types";
-import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
-import { VirtualTableRow } from "./VirtualTableRow";
-import { VirtualTableCell } from "./VirtualTableCell";
-import { CenteredView } from "../CenteredView";
-import { Typography } from "../Typography";
-import { cls } from "../../util/cls";
-import { useDebounceCallback } from "../../hooks/useDebounceCallback";
-import {
-    closestCenter,
-    DndContext,
-    DragEndEvent,
-    DragStartEvent,
-    PointerSensor,
-    useSensor,
-    useSensors
-} from "@dnd-kit/core";
-import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
-
-
-const VirtualListContext = createContext<VirtualTableContextProps<Record<string, unknown>>>(null! as VirtualTableContextProps<Record<string, unknown>>);
-VirtualListContext.displayName = "VirtualListContext";
-
-type InnerElementProps = {
-    children: React.ReactNode,
-    style: React.CSSProperties
-};
-
-// eslint-disable-next-line react/display-name
-const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
-    children,
-    ...rest
-}: InnerElementProps, ref) => {
-
-    return (
-        <VirtualListContext.Consumer>
-            {(virtualTableProps) => {
-                const customView = virtualTableProps.customView;
-                const headerHeight = virtualTableProps.headerHeight ?? 48;
-                return (
-                    <>
-                        <div
-                            id={"virtual-table"}
-                            style={{
-                                position: "relative",
-                                height: "100%",
-                                zIndex: 0
-                            }}>
-                            <div
-                                ref={ref}
-                                {...rest}
-                                style={{
-                                    ...rest?.style,
-                                    height: (typeof rest?.style?.height === "number" ? rest.style.height : parseFloat((rest?.style?.height as string) || "0")) + headerHeight,
-                                    minHeight: "100%",
-                                    position: "relative"
-                                }}>
-                                <div style={{ position: "sticky",
-top: 0,
-zIndex: 20 }}>
-                                    <VirtualTableHeaderRow {...virtualTableProps}/>
-                                </div>
-                                {!customView && children}
-                            </div>
-
-                        </div>
-
-                        {customView && <div style={{
-                            position: "sticky",
-                            top: virtualTableProps.headerHeight ?? 48,
-                            flexGrow: 1,
-                            height: `calc(100% - ${virtualTableProps.headerHeight ?? 48}px)`,
-                            marginTop: `calc(${(virtualTableProps.headerHeight ?? 48)}px - 100vh)`,
-                            left: 0
-                        }}>{customView}</div>}
-
-                    </>
-                );
-            }}
-        </VirtualListContext.Consumer>
-    );
-})
-    ;
-
-/**
- * This is a Table component that allows displaying arbitrary data, not
- * necessarily related to entities or properties. It is the component
- * that powers the entity collections but has a generic API, so it
- * can be reused.
- *
- * @group Components
- */
-const VirtualTableInner = React.memo<VirtualTableProps<Record<string, unknown>>>(
-    function VirtualTable<T extends Record<string, unknown>>({
-        data,
-        onResetPagination,
-        onEndReached,
-        endOffset = 600,
-        rowHeight = 54,
-        headerHeight = 48,
-        columns: columnsProp,
-        onRowClick,
-        onColumnResize,
-        onColumnResizeEnd,
-        filter: filterInput,
-        checkFilterCombination,
-        onFilterUpdate,
-        sortBy,
-        error,
-        emptyComponent,
-        onSortByUpdate,
-        onScroll: onScrollProp,
-        loading,
-        cellRenderer,
-        hoverRow,
-        createFilterField,
-        rowClassName,
-        style,
-        className,
-        endAdornment,
-        AddColumnComponent,
-        initialScroll = 0,
-        onColumnsOrderChange,
-        extraData
-    }: VirtualTableProps<T>) {
-
-        // Where each sorted column sits in the order, so a header can show both
-        // which way it runs and how much it counts: `roles ↑1, created_at ↓2`
-        // reads as "by role, newest first within each role". Without the rank a
-        // multi-key sort shows two arrows and no way to tell which one wins.
-        const sortIndex = useMemo(() => {
-            const index = new Map<string, { direction: "asc" | "desc"; position: number }>();
-            (sortBy ?? []).forEach(([key, direction], position) => {
-                if (!index.has(key)) index.set(key, { direction,
-position });
-            });
-            return index;
-        }, [sortBy]);
-
-        const [columns, setColumns] = useState(columnsProp);
-
-        const tableRef = useRef<HTMLDivElement>(null);
-        const endReachCallbackThreshold = useRef<number>(0);
-
-        const debouncedScroll = useDebounceCallback(onScrollProp, 200);
-
-        // Drag and drop state
-        const [draggingColumnId, setDraggingColumnId] = useState<string | null>(null);
-
-        const sensors = useSensors(
-            useSensor(PointerSensor, {
-                activationConstraint: {
-                    distance: 5
-                }
-            })
-        );
-
-        const handleDragStart = useCallback((event: DragStartEvent) => {
-            setDraggingColumnId(event.active.id as string);
-        }, []);
-
-        const handleDragEnd = useCallback((event: DragEndEvent) => {
-            const {
-                active,
-                over
-            } = event;
-            setDraggingColumnId(null);
-
-            if (over && active.id !== over.id && onColumnsOrderChange) {
-                const oldIndex = columns.findIndex((col) => col.key === active.id);
-                const newIndex = columns.findIndex((col) => col.key === over.id);
-
-                if (oldIndex !== -1 && newIndex !== -1) {
-                    const newColumns = arrayMove(columns, oldIndex, newIndex);
-                    setColumns(newColumns);
-                    onColumnsOrderChange(newColumns);
-                }
-            }
-        }, [columns, onColumnsOrderChange]);
-
-        const handleDragCancel = useCallback(() => {
-            setDraggingColumnId(null);
-        }, []);
-
-        // Set initial scroll position
-        useEffect(() => {
-            if (tableRef.current && initialScroll) {
-                const { scrollLeft } = tableRef.current;
-                tableRef.current.scrollTo(scrollLeft, initialScroll);
-            }
-        }, [tableRef, initialScroll]);
-
-        useEffect(() => {
-            setColumns(columnsProp);
-        }, [columnsProp]);
-
-    // Removed redundant ResizeObserver to prevent performance issues and UI flickering.
-
-        const [measureRef, bounds] = useMeasure({
-            polyfill: ResizeObserver,
-            scroll: true,
-            // This is important for handling zooming in react-flow
-            offsetSize: true
-        });
-
-        const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            setColumns(prevColumns =>
-                prevColumns.map((column) =>
-                    column.key === params.column.key ? params.column : column
-                )
-            );
-        }, []);
-
-        const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
-            if (onColumnResize) {
-                onColumnResize(params);
-            }
-            if (onColumnResizeEnd) {
-                onColumnResizeEnd(params);
-            }
-        }, [columns, onColumnResize, onColumnResizeEnd]);
-
-        // saving the current filter as a ref as a workaround for header closure
-        const filterRef = useRef<VirtualTableFilterValues<string> | undefined>(undefined);
-
-        useEffect(() => {
-            filterRef.current = filterInput;
-        }, [filterInput]);
-
-        const scrollToTop = useCallback(() => {
-            endReachCallbackThreshold.current = 0;
-            if (tableRef.current) {
-                tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
-            }
-        }, []);
-
-        /**
-         * Click a header to sort by that column: ascending, descending, then
-         * off. Shift-click to keep the sort you already have and add this
-         * column under it — the same idiom spreadsheets use, and the only way
-         * to build "by role, newest first" out of two clicks.
-         *
-         * Shift cycles the column it lands on through the same three states, so
-         * a key added by mistake is removed by shift-clicking it twice more,
-         * without disturbing the keys around it.
-         */
-        const onColumnSort = useCallback((key: string, additive = false) => {
-
-            const current = sortIndex.get(key);
-            const next: "asc" | "desc" | undefined = current === undefined
-                ? "asc"
-                : current.direction === "asc" ? "desc" : undefined;
-
-            const existing = sortBy ?? [];
-            let newSortBy: VirtualTableSortKey[] | undefined;
-            if (!additive) {
-                newSortBy = next ? [[key, next]] : undefined;
-            } else if (next === undefined) {
-                newSortBy = existing.filter(([existingKey]) => existingKey !== key);
-            } else if (current === undefined) {
-                newSortBy = [...existing, [key, next]];
-            } else {
-                newSortBy = existing.map((entry) => entry[0] === key ? [key, next] as VirtualTableSortKey : entry);
-            }
-            if (newSortBy?.length === 0) newSortBy = undefined;
-
-            const filter = filterRef.current;
-            if (filter) {
-                if (checkFilterCombination && !checkFilterCombination(filter, newSortBy)) {
-                    if (onFilterUpdate)
-                        onFilterUpdate(undefined);
-                }
-            }
-
-            if (onResetPagination) {
-                onResetPagination();
-            }
-
-            if (onSortByUpdate) {
-                onSortByUpdate(newSortBy);
-            }
-
-            scrollToTop();
-        }, [checkFilterCombination, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortBy, sortIndex]);
-
-        const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
-
-        const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
-                endReachCallbackThreshold.current = scrollOffset;
-                onEndReached();
-            }
-        }, [data?.length, onEndReached]);
-
-        const onScroll = useCallback(({
-            scrollDirection,
-            scrollOffset,
-            scrollUpdateWasRequested
-        }: {
-            scrollDirection: "forward" | "backward",
-            scrollOffset: number,
-            scrollUpdateWasRequested: boolean;
-        }) => {
-            if (onScrollProp) {
-                debouncedScroll({
-                    scrollDirection,
-                    scrollOffset,
-                    scrollUpdateWasRequested
-                })
-            }
-            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
-                onEndReachedInternal(scrollOffset);
-        }, [maxScroll, onEndReachedInternal]);
-
-        const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => {
-
-            endReachCallbackThreshold.current = 0;
-            const filter = filterRef.current;
-            let newFilterValue: VirtualTableFilterValues<string> = filter ? { ...filter } : {};
-
-            if (!filterForProperty) {
-                delete newFilterValue[column.key];
-            } else {
-                newFilterValue[column.key] = filterForProperty;
-            }
-            const isNewFilterCombinationValid = !checkFilterCombination || checkFilterCombination(newFilterValue, sortBy);
-            if (!isNewFilterCombinationValid) {
-                newFilterValue = filterForProperty ? { [column.key]: filterForProperty } as VirtualTableFilterValues<Extract<keyof T, string>> : {};
-            }
-
-            if (onFilterUpdate) onFilterUpdate(newFilterValue);
-        }, [checkFilterCombination, onFilterUpdate, sortBy]);
-
-        const empty = !loading && (data?.length ?? 0) === 0;
-        const customView = (error && (data?.length ?? 0) === 0)
-            ? <CenteredView maxWidth={"2xl"}
-                className="flex flex-col gap-2">
-
-                <Typography variant={"h6"}>
-                    {"Error"}
-                </Typography>
-
-                {error?.message && <SafeLinkRenderer text={error.message}/>}
-
-            </CenteredView>
-            : (empty
-                ? (loading
-                    ? <div className="flex items-center justify-center py-12 px-8">
-                        <CircularProgress size="small"/>
-                    </div>
-                    : <div
-                        className="flex flex-col overflow-auto items-center justify-center py-12 px-8">
-                        {emptyComponent}
-                    </div>)
-                : undefined);
-
-        const virtualListController = useMemo(() => ({
-            data,
-            rowHeight: rowHeight,
-            headerHeight: headerHeight,
-            cellRenderer,
-            columns,
-            onRowClick,
-            customView,
-            onColumnResize: onColumnResizeInternal,
-            onColumnResizeEnd: onColumnResizeEndInternal,
-            filter: filterRef.current,
-            onColumnSort,
-            onFilterUpdate: onFilterUpdateInternal,
-            sortIndex,
-            hoverRow: hoverRow ?? false,
-            createFilterField,
-            rowClassName,
-            endAdornment,
-            AddColumnComponent,
-            onColumnsOrderChange: onColumnsOrderChange ? (newColumns: VirtualTableColumn[]) => {
-                setColumns(newColumns);
-                onColumnsOrderChange(newColumns);
-            } : undefined,
-            draggingColumnId,
-            extraData
-        }), [data, rowHeight, cellRenderer, columns, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortIndex, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId, extraData]);
-
-        // Get sortable column keys (excluding frozen columns)
-        const sortableColumnKeys = columns
-            .filter(col => !col.frozen)
-            .map(col => col.key);
-
-        const tableContent = (
-            <div
-                ref={measureRef}
-                style={style}
-                className={cls(
-                    "h-full w-full",
-                    className,
-                    draggingColumnId && "overflow-hidden"
-                )}>
-                {/* SAFETY: T extends Record<string, any> is structurally assignable to Record<string, unknown> */}
-                <VirtualListContext.Provider
-                    value={virtualListController as VirtualTableContextProps<Record<string, unknown>>}>
-
-                    <MemoizedList
-                        outerRef={tableRef}
-                        key={rowHeight}
-                        width={bounds.width}
-                        height={bounds.height}
-                        itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
-                        onScroll={draggingColumnId ? undefined : onScroll}
-                        includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={rowHeight}/>
-
-                </VirtualListContext.Provider>
-            </div>
-        );
-
-        // Wrap with DndContext if column reorder is enabled
-        if (onColumnsOrderChange) {
-            return (
-                <DndContext
-                    sensors={sensors}
-                    collisionDetection={closestCenter}
-                    onDragStart={handleDragStart}
-                    onDragEnd={handleDragEnd}
-                    onDragCancel={handleDragCancel}
-                >
-                    <SortableContext
-                        items={sortableColumnKeys}
-                        strategy={horizontalListSortingStrategy}
-                    >
-                        {tableContent}
-                    </SortableContext>
-                </DndContext>
-            );
-        }
-
-        return tableContent;
-    },
-    equal
-);
-
-/**
- * `React.memo` is not generic-preserving: it takes the props type as its own
- * type argument, so annotating the call with
- * `VirtualTableProps<Record<string, unknown>>` pinned `T` at the boundary and
- * discarded the `<T>` the inner function declares. The exported component was
- * therefore not generic at all — every consumer got `Record<string, unknown>`,
- * `columns` and `cellRenderer` were unrelated to `data`, and a caller writing
- * `<VirtualTable<Post> …>` was told the component expects no type arguments.
- *
- * Re-asserting the call signature is the standard way to carry a type parameter
- * across `memo`; it is the only cast here, and it restores the generic the
- * implementation always had. Runtime behaviour is unchanged — this is the same
- * memoized component under a type that describes it.
- */
-export const VirtualTable = VirtualTableInner as <T extends Record<string, unknown>>(
-    props: VirtualTableProps<T>
-) => React.ReactElement | null;
-// Wrapper that applies sortable transforms to cells
-const SortableCellWrapper = ({
-    columnKey,
-    width,
-    isDragging,
-    isDraggable,
-    frozen,
-    children
-}: {
-    columnKey: string;
-    width: number;
-    isDragging: boolean;
-    isDraggable: boolean;
-    frozen?: boolean;
-    children: React.ReactNode;
-}) => {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition
-    } = useSortable({
-        id: columnKey,
-        disabled: !isDraggable || frozen
-    });
-
-    // Remove tabIndex from attributes to avoid capturing focus before cell content
-    const { tabIndex: _tabIndex, ...attrsWithoutTabIndex } = attributes;
-
-    const style = {
-        // Only use translate, ignore any scale transforms
-        transform: transform ? `translateX(${transform.x}px)` : undefined,
-        // Don't transition the dragged item - only other items should animate
-        transition: isDragging ? undefined : transition,
-        minWidth: width,
-        maxWidth: width,
-        width: width
-    };
-
-    return (
-        <div
-            ref={setNodeRef}
-            style={style}
-            className={cls(
-                "flex-shrink-0",
-                frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
-            )}
-            {...attrsWithoutTabIndex}
-        >
-            {children}
-        </div>
-    );
-};
-
-function MemoizedList({
-    outerRef,
-    width,
-    height,
-    itemCount,
-    onScroll,
-    itemSize,
-    includeAddColumn
-}: {
-    outerRef: RefObject<HTMLDivElement | null>;
-    width: number;
-    height: number;
-    itemCount: number;
-    onScroll?: (params: {
-        scrollDirection: "forward" | "backward",
-        scrollOffset: number,
-        scrollUpdateWasRequested: boolean;
-    }) => void;
-    itemSize: number;
-    includeAddColumn?: boolean;
-}) {
-
-    const Row = useCallback(({
-        index,
-        style
-    }: { index: number; style: React.CSSProperties }) => {
-        return <VirtualListContext.Consumer>
-            {({
-                onRowClick,
-                data,
-                columns,
-                rowHeight = 54,
-                headerHeight = 48,
-                cellRenderer,
-                hoverRow,
-                rowClassName,
-                endAdornment,
-                draggingColumnId,
-                onColumnsOrderChange,
-                extraData
-            }) => {
-
-                if (endAdornment && index === (data ?? []).length) {
-                    return <div style={{
-                        ...style,
-                        height: "auto",
-                        position: "sticky",
-                        bottom: 0,
-                        zIndex: 1
-                    }}>
-                        {endAdornment}
-                    </div>;
-                }
-
-                const rowData = (data ? data[index] : undefined) as Record<string, unknown>;
-                return (
-                    <VirtualTableRow
-                        key={`row_${index}`}
-                        rowData={rowData}
-                        rowIndex={index}
-                        onRowClick={onRowClick}
-                        columns={columns}
-                        hoverRow={hoverRow}
-                        rowClassName={rowClassName}
-                        style={{
-                            ...style,
-                            top: `calc(${style.top}px + ${headerHeight ?? 48}px)`
-                        }}
-                        rowHeight={rowHeight}>
-
-                        {columns.map((column: VirtualTableColumn, columnIndex: number) => {
-                            const cellData = rowData && rowData[column.key];
-                            const isDragging = draggingColumnId === column.key;
-                            const isDraggable = !column.frozen && !!onColumnsOrderChange;
-
-                            return onColumnsOrderChange ? (
-                                <SortableCellWrapper
-                                    key={`cell_wrapper_${column.key}`}
-                                    columnKey={column.key}
-                                    width={column.width}
-                                    isDragging={isDragging}
-                                    isDraggable={isDraggable}
-                                    frozen={column.frozen}
-                                >
-                                    <VirtualTableCell
-                                        dataKey={column.key}
-                                        // @ts-expect-error -- React.memo<VirtualTableProps<any>> erases the generic T, so cellRenderer's parameter type widens to `any` losing structural compatibility with VirtualTableCell<T>. The types are structurally correct at runtime.
-                                        cellRenderer={cellRenderer}
-                                        column={column}
-                                        columns={columns}
-                                        rowData={rowData}
-                                        cellData={cellData}
-                                        rowIndex={index}
-                                        columnIndex={columnIndex}
-                                        extraData={extraData}/>
-                                </SortableCellWrapper>
-                            ) : (
-                                <div
-                                    key={`cell_wrapper_${column.key}`}
-                                    className={cls(
-                                        "flex-shrink-0 relative",
-                                        column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
-                                    )}
-                                    style={{
-                                        minWidth: column.width,
-                                        maxWidth: column.width,
-                                        width: column.width
-                                    }}
-                                >
-                                    <VirtualTableCell
-                                        dataKey={column.key}
-                                        // @ts-expect-error -- React.memo<VirtualTableProps<any>> erases the generic T, so cellRenderer's parameter type widens to `any` losing structural compatibility with VirtualTableCell<T>. The types are structurally correct at runtime.
-                                        cellRenderer={cellRenderer}
-                                        column={column}
-                                        columns={columns}
-                                        rowData={rowData}
-                                        cellData={cellData}
-                                        rowIndex={index}
-                                        columnIndex={columnIndex}
-                                        extraData={extraData}/>
-                                </div>
-                            );
-                        })}
-
-                        {includeAddColumn && <div className={"w-20"}/>}
-
-                    </VirtualTableRow>
-                );
-            }}
-        </VirtualListContext.Consumer>;
-    }, []);
-
-    return <List
-        outerRef={outerRef}
-        innerElementType={innerElementType}
-        width={width}
-        height={height}
-        overscanCount={4}
-        itemCount={itemCount}
-        onScroll={onScroll}
-        itemSize={itemSize}>
-        {Row}
-    </List>;
-}
-
-const SafeLinkRenderer: React.FC<{
-    text: string;
-}> = ({ text }) => {
-    const urlRegex = /https?:\/\/[^\s]+/g;
-    const urls = text.match(urlRegex) || [];
-    const parts = text.split(urlRegex);
-
-    return (
-        <div className={"break-all"}>
-            {parts.map((part, i) => (
-                <React.Fragment key={i}>
-                    {part}
-                    {urls[i] && (
-                        <>
-                            <a href={urls[i]} className="underline" target="_blank" rel="noopener noreferrer">Link</a>
-                            <br/>
-                        </>
-                    )}
-                </React.Fragment>
-            ))}
-        </div>
-    );
-};