@rebasepro/ui 0.17.3 → 0.18.1

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-
-import { deepEqual as equal } from "fast-equals"
-
-import { CellRendererParams, VirtualTableColumn } from "./VirtualTableProps";
-
-type VirtualTableCellProps<T> = {
-    dataKey: string;
-    column: VirtualTableColumn;
-    columns: VirtualTableColumn[];
-    rowData: T;
-    cellData: unknown;
-    rowIndex: number;
-    columnIndex: number;
-    cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;
-    // Sortable props
-    sortableNodeRef?: (node: HTMLElement | null) => void;
-    sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, unknown>;
-    isDragging?: boolean;
-    isDraggable?: boolean;
-    frozen?: boolean;
-    extraData?: unknown;
-};
-
-export const VirtualTableCell = React.memo<VirtualTableCellProps<unknown>>(
-    function VirtualTableCell<T>(props: VirtualTableCellProps<T>) {
-        return props.rowData ? props.cellRenderer(
-            {
-                cellData: props.cellData,
-                rowData: props.rowData,
-                rowIndex: props.rowIndex,
-                isScrolling: false,
-                column: props.column,
-                columns: props.columns,
-                columnIndex: props.columnIndex,
-                width: props.column.width,
-                sortableNodeRef: props.sortableNodeRef,
-                sortableStyle: props.sortableStyle,
-                sortableAttributes: props.sortableAttributes,
-                isDragging: props.isDragging,
-                isDraggable: props.isDraggable,
-                frozen: props.frozen,
-                extraData: props.extraData
-            } as CellRendererParams<T>
-        ) : null;
-    },
-    (a, b) => {
-        return equal(a.rowData, b.rowData) &&
-            equal(a.column, b.column) &&
-            equal(a.cellData, b.cellData) &&
-            a.rowIndex === b.rowIndex &&
-            a.columnIndex === b.columnIndex &&
-            a.isDragging === b.isDragging &&
-            a.isDraggable === b.isDraggable &&
-            a.frozen === b.frozen &&
-            equal(a.extraData, b.extraData)
-    }
-);

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -1,327 +0,0 @@
-import { ArrowUpIcon, FilterIcon } from "lucide-react";
-import { iconSize } from "../../icons/Icon";
-
-import React, { RefObject, useCallback, useEffect, useState } from "react";
-import { deepEqual as equal } from "fast-equals";
-
-import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
-import { ErrorBoundary } from "../ErrorBoundary";
-import { Badge } from "../Badge";
-import { Button } from "../Button";
-import { IconButton } from "../IconButton";
-import { Popover } from "../Popover";
-import { defaultBorderMixin } from "../../styles";
-import { cls } from "../../util/cls";
-interface FilterFormProps<T> {
-    column: VirtualTableColumn<T>;
-    onFilterUpdate: (filter?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => void;
-    filter?: [VirtualTableWhereFilterOp, unknown];
-    onHover: boolean,
-    createFilterField: (props: FilterFormFieldProps<T>) => React.ReactNode;
-    hidden: boolean;
-    setHidden: (hidden: boolean) => void;
-}
-
-export type FilterFormFieldProps<CustomProps> = {
-    id: React.Key,
-    filterValue: [VirtualTableWhereFilterOp, unknown] | undefined,
-    setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, unknown]) => void;
-    column: VirtualTableColumn<CustomProps>;
-    hidden: boolean;
-    setHidden: (hidden: boolean) => void;
-};
-
-type VirtualTableHeaderProps<M extends Record<string, unknown>> = {
-    resizeHandleRef: React.Ref<HTMLDivElement>;
-    columnIndex: number;
-    isResizingIndex: number;
-    column: VirtualTableColumn<unknown>;
-    onColumnSort: (key: Extract<keyof M, string>, additive?: boolean) => void;
-    filter?: [VirtualTableWhereFilterOp, unknown];
-    sort: VirtualTableSort;
-    /**
-     * This column's zero-based rank in a multi-key sort, or `undefined` when
-     * only one column is sorted and a rank would say nothing.
-     */
-    sortPosition?: number;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
-    onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
-    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
-    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
-    isDragging?: boolean;
-    isDraggable?: boolean;
-};
-
-/**
- * What the next click on this column's sort control will do, spelled out for
- * the tooltip and for screen readers. An unlabelled arrow that means three
- * different things depending on the state it is in is a control you have to
- * click to learn.
- */
-function sortActionTitle(sort: VirtualTableSort, sortPosition?: number): string {
-    const rank = sortPosition !== undefined ? ` (sort key ${sortPosition + 1})` : "";
-    const addKey = " — shift-click to add it under the current sort instead";
-    if (sort === "asc") return `Sorted ascending${rank}. Click to sort descending.${addKey}`;
-    if (sort === "desc") return `Sorted descending${rank}. Click to remove this sort.${addKey}`;
-    return `Click to sort ascending.${addKey}`;
-}
-
-export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<string, unknown>>>(
-    function VirtualTableHeader<M extends Record<string, unknown>>({
-        resizeHandleRef,
-        columnIndex,
-        isResizingIndex,
-        sort,
-        sortPosition,
-        onColumnSort,
-        onFilterUpdate,
-        filter,
-        column,
-        onClickResizeColumn,
-        createFilterField,
-        AdditionalHeaderWidget,
-        isDragging,
-        isDraggable
-    }: VirtualTableHeaderProps<M>) {
-
-        const [onHover, setOnHover] = useState(false);
-
-        const [openFilter, setOpenFilter] = React.useState(false);
-        const [hidden, setHidden] = React.useState(false);
-
-        const handleSettingsClick = useCallback((_event: React.MouseEvent) => {
-            setOpenFilter(true);
-        }, []);
-
-        const update = useCallback((filterForProperty?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => {
-            onFilterUpdate(column, filterForProperty);
-            if (newOpenFilterState !== undefined)
-                setOpenFilter(newOpenFilterState);
-        }, [column, onFilterUpdate]);
-
-        const thisColumnIsResizing = isResizingIndex === columnIndex;
-        const anotherColumnIsResizing = isResizingIndex !== columnIndex && isResizingIndex > 0;
-
-        const hovered = !anotherColumnIsResizing && (onHover || thisColumnIsResizing);
-
-        return (
-            <ErrorBoundary>
-                <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
-                        isDragging
-                            ? "bg-primary-bg dark:bg-primary-bg-dark"
-                            : "bg-surface-50 dark:bg-surface-900",
-                        "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-900 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-900/50",
-                        column.frozen ? "sticky left-0 z-10" : "relative z-0",
-                        isDraggable && "cursor-grab"
-                    )}
-                    style={{
-                        left: column.frozen ? 0 : undefined,
-                        minWidth: column.width,
-                        maxWidth: column.width
-                    }}
-                    onMouseEnter={() => setOnHover(true)}
-                    onMouseMove={() => setOnHover(true)}
-                    onMouseLeave={() => setOnHover(false)}
-                >
-
-                    <div className="overflow-hidden grow">
-                        <div
-                            className={`flex items-center justify-${column.headerAlign} flex-row`}>
-
-                            {column.icon && (
-                                <div className="flex-shrink-0 flex items-center justify-center mr-1">
-                                    {React.isValidElement(column.icon) ? (
-                                        React.cloneElement(column.icon as React.ReactElement<any>, {
-                                            size: 14,
-                                            className: cls((column.icon as React.ReactElement<any>).props?.className, "flex-shrink-0")
-                                        })
-                                    ) : (
-                                        column.icon
-                                    )}
-                                </div>
-                            )}
-
-                            <div
-                                className="truncate -webkit-box w-full mr-1 overflow-hidden"
-                                style={{
-                                    WebkitBoxOrient: "vertical",
-                                    WebkitLineClamp: 2,
-                                    justifyContent: column.align
-                                }}>
-                                {column.title}
-                            </div>
-
-                        </div>
-                    </div>
-                    <>
-
-                        {AdditionalHeaderWidget &&
-                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
-
-                        {column.sortable && (sort || hovered || openFilter) &&
-                            <div className="flex-shrink-0 flex items-center">
-                                <Badge color="secondary"
-                                    invisible={!sort}>
-                                    <IconButton
-                                        size={"small"}
-                                        className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
-                                        // Shift keeps the sort already in place
-                                        // and adds this column beneath it, which
-                                        // is how a two-key order is built from
-                                        // header clicks. Plain click still
-                                        // replaces the whole sort, so the common
-                                        // case takes no modifier and nothing a
-                                        // user knew before stops working.
-                                        title={sortActionTitle(sort, sortPosition)}
-                                        aria-label={sortActionTitle(sort, sortPosition)}
-                                        onClick={(event: React.MouseEvent) => {
-                                            onColumnSort(column.key as Extract<keyof M, string>, event.shiftKey);
-                                        }}
-                                    >
-                                        {!sort &&
-                                            <ArrowUpIcon size={14} className="flex-shrink-0" />}
-                                        {sort === "asc" &&
-                                            <ArrowUpIcon size={14} className="flex-shrink-0" />}
-                                        {sort === "desc" &&
-                                            <ArrowUpIcon size={14} className="flex-shrink-0 rotate-180" />}
-                                    </IconButton>
-                                </Badge>
-                                {/* The rank, shown only once there is more than
-                                    one key: two arrows with no numbers beside
-                                    them say a table is sorted by both columns
-                                    and nothing about which one decides. */}
-                                {sort && sortPosition !== undefined && (
-                                    <span
-                                        className="flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-semibold leading-none tabular-nums text-text-secondary dark:text-text-secondary-dark"
-                                        aria-hidden={true}
-                                    >
-                                        {sortPosition + 1}
-                                    </span>
-                                )}
-                            </div>
-                        }
-                    </>
-
-                    {column.filter && createFilterField && <div className="flex-shrink-0">
-                        <Badge color="secondary"
-                            invisible={!filter}>
-
-                            <Popover
-                                open={openFilter}
-                                onOpenChange={setOpenFilter}
-                                className={hidden ? "hidden" : undefined}
-                                modal={true}
-                                trigger={
-                                    <IconButton
-                                        className={onHover || openFilter ? "bg-white dark:bg-surface-900" : undefined}
-                                        size={"small"}
-                                        onClick={handleSettingsClick}>
-                                        <FilterIcon size={14} className="flex-shrink-0"/>
-                                    </IconButton>}
-                            >
-                                <FilterForm column={column}
-                                    filter={filter}
-                                    onHover={onHover}
-                                    onFilterUpdate={update}
-                                    createFilterField={createFilterField}
-                                    hidden={hidden}
-                                    setHidden={setHidden}/>
-
-                            </Popover>
-
-                        </Badge>
-
-                    </div>}
-
-                    {column.resizable && <div
-                        ref={resizeHandleRef as React.Ref<HTMLDivElement>}
-                        data-no-dnd="true"
-                        className={cls(
-                            "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
-                            hovered && "bg-surface-300 dark:bg-surface-700"
-                        )}
-                        onPointerDown={(e) => {
-                            e.stopPropagation();
-                            if (onClickResizeColumn) {
-                                onClickResizeColumn(columnIndex, column);
-                            }
-                        }}
-                    />}
-                </div>
-
-            </ErrorBoundary>
-        );
-    }, equal) as React.FunctionComponent<VirtualTableHeaderProps<Record<string, unknown>>>;
-
-function FilterForm<M>({
-    column,
-    onFilterUpdate,
-    filter,
-    onHover,
-    createFilterField,
-    hidden,
-    setHidden
-}: FilterFormProps<M>) {
-
-    const id = column.key;
-
-    const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, unknown] | undefined>(filter);
-
-    useEffect(() => {
-        setFilterInternal(filter);
-    }, [filter]);
-
-    if (!column.filter) return null;
-
-    const submit = () => {
-        onFilterUpdate(filterInternal, false);
-    };
-
-    const reset = (_e: React.MouseEvent) => {
-        onFilterUpdate(undefined, false);
-    };
-
-    const filterIsSet = !!filter;
-
-    const filterField = createFilterField({
-        id,
-        filterValue: filterInternal,
-        setFilterValue: setFilterInternal,
-        column,
-        hidden,
-        setHidden
-    });
-
-    if (!filterField) return null;
-    return (
-        <form noValidate={true}
-            onSubmit={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                submit();
-            }}
-            className={"text-surface-900 dark:text-white"}>
-            <div
-                className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
-                {column.title ?? id}
-            </div>
-            {filterField && <div className="m-4 w-[400px]">
-                {filterField}
-            </div>}
-            <div className="flex justify-end m-4">
-                <Button
-                    className="mr-4"
-                    disabled={!filterIsSet}
-                    variant={"text"}
-                    type="reset"
-                    aria-label="filter clear"
-                    onClick={reset}>Clear</Button>
-                <Button
-                    type="submit">Filter</Button>
-            </div>
-        </form>
-    );
-
-}

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -1,250 +0,0 @@
-import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
-
-import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
-import { ErrorBoundary } from "../ErrorBoundary";
-import { VirtualTableHeader } from "./VirtualTableHeader";
-import { VirtualTableContextProps } from "./types";
-import { defaultBorderMixin } from "../../styles";
-import { cls } from "../../util/cls";import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-// Sortable column header wrapper
-const SortableColumnHeader = ({
-    column,
-    columnIndex,
-    columnRefs,
-    isResizing,
-    onFilterUpdate,
-    filter,
-    sortIndex,
-    sortCount,
-    onColumnSort,
-    onClickResizeColumn,
-    createFilterField,
-    isDragging,
-    isDraggable
-}: {
-    column: VirtualTableColumn;
-    columnIndex: number;
-    columnRefs: React.Ref<HTMLDivElement>[];
-    isResizing: number;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
-    filter: [VirtualTableWhereFilterOp, unknown] | undefined;
-    sortIndex: Map<string, { direction: "asc" | "desc"; position: number }>;
-    sortCount: number;
-    onColumnSort: (key: string, additive?: boolean) => void;
-    onClickResizeColumn: (index: number) => void;
-    createFilterField: ((props: import("./VirtualTableHeader").FilterFormFieldProps<unknown>) => React.ReactNode) | undefined;
-    isDragging: boolean;
-    isDraggable: boolean;
-}) => {
-    const [isPressing, setIsPressing] = useState(false);
-
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition
-    } = useSortable({
-        id: column.key,
-        disabled: !isDraggable || column.frozen
-    });
-
-    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: column.width,
-        maxWidth: column.width,
-        width: column.width
-    };
-
-    // Combine our press handlers with dnd-kit listeners
-    const combinedListeners = isDraggable ? {
-        ...listeners,
-        onPointerDown: (e: React.PointerEvent) => {
-            setIsPressing(true);
-            listeners?.onPointerDown?.(e);
-        },
-        onPointerUp: () => setIsPressing(false),
-        onPointerCancel: () => setIsPressing(false)
-    } : {};
-
-    // Reset pressing state when drag ends
-    React.useEffect(() => {
-        if (!isDragging) {
-            setIsPressing(false);
-        }
-    }, [isDragging]);
-
-    return (
-        <div
-            ref={setNodeRef}
-            style={style}
-            className={cls(
-                "flex-shrink-0 h-full",
-                column.frozen && "sticky left-0 z-10"
-            )}
-            {...attributes}
-            {...combinedListeners}
-        >
-            <VirtualTableHeader
-                resizeHandleRef={columnRefs[columnIndex]}
-                columnIndex={columnIndex}
-                isResizingIndex={isResizing}
-                onFilterUpdate={onFilterUpdate}
-                filter={filter}
-                sort={sortIndex.get(column.key)?.direction}
-                sortPosition={sortCount > 1 ? sortIndex.get(column.key)?.position : undefined}
-                onColumnSort={onColumnSort}
-                onClickResizeColumn={onClickResizeColumn}
-                column={column}
-                createFilterField={createFilterField}
-                AdditionalHeaderWidget={column.AdditionalHeaderWidget}
-                isDragging={isDragging || isPressing}
-                isDraggable={isDraggable}/>
-        </div>
-    );
-};
-
-export const VirtualTableHeaderRow = ({
-    columns,
-    sortIndex,
-    onColumnSort,
-    onFilterUpdate,
-    filter,
-    onColumnResize,
-    onColumnResizeEnd,
-    createFilterField,
-    AddColumnComponent,
-    onColumnsOrderChange,
-    data,
-    cellRenderer: CellRenderer,
-    rowHeight = 54,
-    draggingColumnId,
-    headerHeight = 48
-}: VirtualTableContextProps<Record<string, unknown>>) => {
-
-    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
-    const [isResizing, setIsResizing] = useState(-1);
-
-    const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {
-        const column = columns[index];
-        const minWidth = 100;
-        const maxWidth = 800;
-        const newWidth = width > maxWidth ? maxWidth : (width < minWidth ? minWidth : width);
-        const params = {
-            width: newWidth,
-            key: column.key as string,
-            column: {
-                ...column,
-                width: newWidth
-            } as VirtualTableColumn
-        };
-        if (!end)
-            onColumnResize(params);
-        else
-            onColumnResizeEnd(params);
-    }, [columns, onColumnResize, onColumnResizeEnd]);
-
-    const getEventNewWidth = useCallback((e: MouseEvent) => {
-        if (isResizing >= 0) {
-            const left = columnRefs[isResizing].current?.parentElement?.getBoundingClientRect().left;
-            if (!left) return;
-            return e.clientX - left;
-        }
-        return undefined;
-    }, [columnRefs, isResizing]);
-
-    const setCursorDocument = useCallback((isResizing: boolean) => {
-        document.body.style.cursor = isResizing ? "col-resize" : "auto";
-    }, []);
-
-    const handleOnMouseMove = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newWidth = getEventNewWidth(e);
-        if (newWidth)
-            adjustWidthColumn(isResizing, newWidth, false);
-    }, [adjustWidthColumn, getEventNewWidth, isResizing]);
-
-    const handleOnMouseUp = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const newWidth = getEventNewWidth(e);
-        if (newWidth)
-            adjustWidthColumn(isResizing, newWidth, true);
-        setIsResizing(-1);
-        setCursorDocument(false);
-    }, [adjustWidthColumn, getEventNewWidth, isResizing, setCursorDocument]);
-
-    const removeResizingListeners = useCallback(() => {
-        document.removeEventListener("mousemove", handleOnMouseMove);
-        document.removeEventListener("mouseup", handleOnMouseUp);
-    }, [handleOnMouseMove, handleOnMouseUp]);
-
-    const attachResizeListeners = useCallback(() => {
-        document.addEventListener("mousemove", handleOnMouseMove);
-        document.addEventListener("mouseup", handleOnMouseUp);
-    }, [handleOnMouseMove, handleOnMouseUp]);
-
-    useEffect(() => {
-        if (isResizing >= 0) {
-            attachResizeListeners();
-        } else {
-            removeResizingListeners();
-        }
-        return () => {
-            removeResizingListeners();
-        };
-    }, [attachResizeListeners, isResizing, removeResizingListeners]);
-
-    const onClickResizeColumn = useCallback((index: number) => {
-        setIsResizing(index);
-        setCursorDocument(true);
-    }, [setCursorDocument]);
-
-    return (
-        <>
-            <div
-                className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900")}
-                style={{ height: headerHeight }}>
-                {columns.map((column, columnIndex) => {
-                    const columnFilter = column && filter && filter[column.key] ? filter[column.key] : undefined;
-                    const filterForThisProperty: [VirtualTableWhereFilterOp, unknown] | undefined =
-                        columnFilter
-                            ? (Array.isArray(columnFilter[0]) ? (columnFilter as [VirtualTableWhereFilterOp, unknown][])[0] : (columnFilter as [VirtualTableWhereFilterOp, unknown]))
-                            : undefined;
-
-                    const isDraggable = !column.frozen && !!onColumnsOrderChange;
-                    const isDragging = draggingColumnId === column.key;
-
-                    return (
-                        <ErrorBoundary key={"header_" + column.key}>
-                            <SortableColumnHeader
-                                column={column}
-                                columnIndex={columnIndex}
-                                columnRefs={columnRefs}
-                                isResizing={isResizing}
-                                onFilterUpdate={onFilterUpdate}
-                                filter={filterForThisProperty}
-                                sortIndex={sortIndex}
-                                sortCount={sortIndex.size}
-                                onColumnSort={onColumnSort}
-                                onClickResizeColumn={onClickResizeColumn}
-                                createFilterField={createFilterField}
-                                isDragging={isDragging}
-                                isDraggable={isDraggable}
-                            />
-                        </ErrorBoundary>
-                    );
-                })}
-
-                {AddColumnComponent && <AddColumnComponent/>}
-
-            </div>
-        </>
-    );
-};