@rebasepro/ui 0.17.3 → 0.18.0

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -1,339 +0,0 @@
-
-
-import React from "react";
-import type { FilterFormFieldProps } from "./VirtualTableHeader";
-
-/** One sort key: the column, and which way it runs. */
-export type VirtualTableSortKey = [string, "asc" | "desc"];
-
-export type OnRowClickParams<T extends Record<string, unknown>> = {
-    rowData: T;
-    rowIndex: number;
-    event: React.SyntheticEvent
-};
-
-/**
- * @see Table
- * @group Components
- */
-export interface VirtualTableProps<T extends Record<string, unknown>> {
-
-    /**
-     * Array of arbitrary data
-     */
-    data?: T[];
-
-    /**
-     * Properties displayed in this collection. If this property is not set
-     * every property is displayed, you can filter
-     */
-    columns: VirtualTableColumn[];
-
-    /**
-     * Custom cell renderer
-     * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
-     */
-    cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;
-
-    /**
-     * Set this callback if you want to support some combinations
-     * of filter combinations only.
-     * @param filterValues
-     * @param sortBy
-     */
-    checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>,
-        sortBy?: VirtualTableSortKey[]) => boolean;
-
-    /**
-     * A callback function when scrolling the table to near the end
-     */
-    onEndReached?: () => void;
-
-    /**
-     * Offset in pixels where the onEndReached callback is triggered
-     */
-    endOffset?: number;
-
-    /**
-     * When the pagination should be reset. E.g. the filters or sorting
-     * has been reset.
-     */
-    onResetPagination?: () => void;
-
-    /**
-     * Callback when a row is clicked
-     */
-    onRowClick?: (props: OnRowClickParams<T>) => void;
-
-    /**
-     * Callback when a column is resized
-     */
-    onColumnResize?: (params: OnVirtualTableColumnResizeParams) => void;
-    onColumnResizeEnd?: (params: OnVirtualTableColumnResizeParams) => void;
-
-    /**
-     * Size of the table
-     */
-    rowHeight?: number,
-    headerHeight?: number,
-
-    /**
-     * In case this table should have some filters set by default
-     */
-    filter?: VirtualTableFilterValues<string>;
-
-    /**
-     * Callback used when filters are updated
-     * @param filter
-     */
-    onFilterUpdate?: (filter?: VirtualTableFilterValues<string> | undefined) => void;
-
-    /**
-     * Callback when the table is scrolled
-     * @param props
-     */
-    onScroll?: (props: {
-        scrollDirection: "forward" | "backward",
-        scrollOffset: number,
-        scrollUpdateWasRequested: boolean
-    }) => void;
-
-    /**
-     * Sort applied to this collection: the keys in order of significance, the
-     * second breaking ties on the first.
-     */
-    sortBy?: VirtualTableSortKey[];
-
-    /**
-     * Callback used when sorting is updated
-     * @param sortBy
-     */
-    onSortByUpdate?: (sortBy?: VirtualTableSortKey[]) => void;
-
-    /**
-     * If there is an error loading data you can pass it here, so it gets
-     * displayed instead of the content
-     */
-    error?: Error;
-
-    /**
-     * Message displayed when there is no data
-     */
-    emptyComponent?: React.ReactNode;
-
-    /**
-     * Is the table in a loading state
-     */
-    loading?: boolean;
-
-    /**
-     * Should apply a different style when hovering
-     */
-    hoverRow?: boolean;
-
-    /**
-     * Apply a custom class name to the row
-     * @param rowData
-     */
-    rowClassName?: (rowData: T) => string | undefined;
-
-    /**
-     * Callback to create a filter field, displayed in the header as a dropdown
-     * @param props
-     */
-    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
-
-    /**
-     * Class name applied to the table
-     */
-    className?: string;
-
-    /**
-     * Style applied to the table
-     */
-    style?: React.CSSProperties;
-
-    /**
-     * Component rendered at the end of the table, after scroll
-     */
-    endAdornment?: React.ReactNode;
-
-    /**
-     * If adding this callback, a button to add a new column is displayed.
-     * @param column
-     */
-    AddColumnComponent?: React.ComponentType;
-
-    /**
-     * Initial scroll position
-     */
-    initialScroll?: number;
-
-    /**
-     * Callback when columns are reordered via drag-and-drop.
-     * @param columns The new column order
-     */
-    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
-
-    /**
-     * Extra data passed to the cell renderer
-     */
-    extraData?: unknown;
-
-}
-
-export type CellRendererParams<T = unknown> = {
-    column: VirtualTableColumn;
-    columns: VirtualTableColumn[];
-    columnIndex: number;
-    rowData?: T;
-    rowIndex: number;
-    width: number;
-    isScrolling?: boolean;
-    // Sortable props for dnd-kit integration
-    sortableNodeRef?: (node: HTMLElement | null) => void;
-    sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, unknown>;
-    isDragging?: boolean;
-    isDraggable?: boolean;
-    frozen?: boolean;
-    extraData?: unknown;
-};
-
-/**
- * @see Table
- * @group Components
- */
-export interface VirtualTableColumn<CustomProps = unknown> {
-
-    /**
-     * Data key for the cell value, could be "a.b.c"
-     */
-    key: string;
-
-    /**
-     * The width of the column, gutter width is not included
-     */
-    width: number;
-
-    /**
-     * Label displayed in the header
-     */
-    title?: string;
-
-    /**
-     * This column is frozen to the left
-     */
-    frozen?: boolean;
-
-    /**
-     * How is the
-     */
-    headerAlign?: "left" | "center" | "right";
-
-    /**
-     * Icon displayed in the header
-     */
-    icon?: React.ReactNode;
-
-    /**
-     *
-     */
-    filter?: boolean;
-
-    /**
-     * Alignment of the column cell
-     */
-
-    align?: "left" | "right" | "center";
-
-    /**
-     * Whether the column is sortable, defaults to false
-     */
-    sortable?: boolean;
-
-    /**
-     * Can it be resized
-     */
-    resizable?: boolean;
-
-    /**
-     * Custom props passed to the cell renderer
-     */
-    custom?: CustomProps;
-
-    /**
-     * Additional children to be rendered in the header when hovering
-     */
-    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
-}
-
-/**
- * @see Table
- * @group Collection components
- */
-export type OnVirtualTableColumnResizeParams = {
-    width: number,
-    key: string,
-    column: VirtualTableColumn
-};
-
-/**
- * The filter operators this table can express.
- *
- * A deliberate copy of `WhereFilterOp` in `@rebasepro/types`, not an import:
- * `@rebasepro/ui` has no dependency on the core types and is meant to stay
- * usable on its own. The cost is that two published packages export the same
- * name, so the two must be kept identical by hand —
- * `packages/types/test/filter-operators-duplication.test.ts` fails if they
- * diverge, because a table that cannot express an operator the query layer
- * supports is a silent gap: the filter simply is not offered.
- *
- * @see Table
- * @group Components
- */
-export type WhereFilterOp =
-    | "<"
-    | "<="
-    | "=="
-    | "!="
-    | ">="
-    | ">"
-    | "array-contains"
-    | "in"
-    | "not-in"
-    | "array-contains-any"
-    | "like"
-    | "ilike"
-    | "not-like"
-    | "not-ilike"
-    | "is-null"
-    | "is-not-null";
-
-export type FilterValues<Key extends string> =
-    Partial<Record<Key, [WhereFilterOp, unknown] | [WhereFilterOp, unknown][]>>;
-
-/**
- * @see Table
- * @group Components
- */
-export type VirtualTableSort = "asc" | "desc" | undefined;
-
-/**
- * @see Table
- * @group Components
- */
-export type VirtualTableFilterValues<Key extends string> = FilterValues<Key>;
-
-/**
- * Filter conditions in a `Query.where()` clause, named by {@link WhereFilterOp}.
- *
- * The list is not repeated here: this comment used to name eight operators when
- * the type had sixteen, having been written before the SQL pattern and null
- * checks (`like`, `ilike`, `not-like`, `not-ilike`, `is-null`, `is-not-null`)
- * were added. A prose copy of a union drifts from it silently.
- *
- * @see Table
- * @group Models
- */
-export type VirtualTableWhereFilterOp = WhereFilterOp;

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -1,51 +0,0 @@
-import React, { useCallback } from "react";
-
-import { deepEqual as equal } from "fast-equals"
-
-import { VirtualTableRowProps } from "./types";
-import { cls } from "../../util/cls";
-export const VirtualTableRow = React.memo<VirtualTableRowProps<Record<string, unknown>>>(
-    function VirtualTableRow<T extends Record<string, unknown>>({
-        rowData,
-        rowIndex,
-        children,
-        onRowClick,
-        rowHeight,
-        style,
-        hoverRow,
-        rowClassName
-    }: VirtualTableRowProps<T>) {
-
-        const onClick = useCallback((event: React.SyntheticEvent) => {
-            if (onRowClick)
-                onRowClick({
-                    rowData,
-                    rowIndex,
-                    event
-                })
-        }, [onRowClick, rowData, rowIndex]);
-
-        return (
-            <div
-                className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800",
-                    rowClassName ? rowClassName(rowData) : "",
-                    {
-                        "hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
-                        "cursor-pointer ": onRowClick
-                    }
-                )}
-                onClick={onClick}
-                style={{
-                    ...(style),
-                    height: rowHeight,
-                    width: "fit-content"
-                }}
-            >
-                {children}
-            </div>
-        );
-
-    },
-    equal
-);

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { cls } from "../../../util";
-import { focusedDisabled } from "../../../styles";
-import { DateTimeField } from "../../DateTimeField";
-
-export function VirtualTableDateField(props: {
-    name?: string;
-    error?: Error;
-    mode?: "date" | "date_time";
-    timezone?: string;
-    internalValue: Date | undefined | null;
-    updateValue: (newValue: (Date | null)) => void;
-    focused: boolean;
-    disabled: boolean;
-    small?: boolean;
-    locale?: string;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-}) {
-    const { disabled, error, mode, timezone, internalValue, updateValue, small = false, locale } = props;
-
-    return (
-        <DateTimeField
-            value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue ?? null)}
-            // Same omission as `VirtualTableInput`: destructured and forwarded
-            // nowhere, so a disabled date cell was still editable. `error` went
-            // the same way — it drives `DateTimeField`'s invalid styling, and a
-            // prop a caller passes should reach something rather than sit in a
-            // destructure.
-            disabled={disabled}
-            error={Boolean(error)}
-            invisible={true}
-            // Without this the field falls back to DateTimeField's own default of
-            // `size="large"` (min-h-64px), which overflows a table cell and makes
-            // the value collide with the cell border.
-            size={small ? "small" : "medium"}
-            inputClassName={cls("w-full h-full", focusedDisabled)}
-            className={cls("w-full h-full", focusedDisabled)}
-            mode={mode}
-            timezone={timezone}
-            locale={locale}
-        />
-    );
-}

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -1,89 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
-import { focusedDisabled } from "../../../styles";
-import { TextareaAutosize } from "../../TextareaAutosize";
-
-export function VirtualTableInput(props: {
-    error?: Error;
-    value: string;
-    multiline?: boolean;
-    focused: boolean;
-    disabled: boolean;
-    updateValue: (newValue: (string | null)) => void;
-    onBlur?: () => void;
-}) {
-    const ref = React.useRef<HTMLTextAreaElement>(null);
-    const { disabled, value, multiline = false, updateValue, focused } = props;
-    const prevValue = useRef<string | null>(value);
-    const [internalValue, setInternalValue] = useState<typeof value>(value);
-    const focusedState = useRef<boolean>(false);
-
-    useEffect(() => {
-        if (prevValue.current !== value && value !== internalValue)
-            setInternalValue(value);
-        prevValue.current = value;
-    }, [value]);
-
-    const doUpdate = React.useCallback(() => {
-        const emptyInitialValue = !value;
-        if (emptyInitialValue && !internalValue) return;
-        if (internalValue !== value && internalValue !== prevValue.current) {
-            prevValue.current = internalValue;
-            updateValue(internalValue);
-        }
-    }, [internalValue, updateValue, value]);
-
-    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
-
-    useEffect(() => {
-        if (ref.current && focused && !focusedState.current) {
-            focusedState.current = true;
-            ref.current.focus({ preventScroll: true });
-            ref.current.selectionStart = ref.current.value.length;
-            ref.current.selectionEnd = ref.current.value.length;
-        } else {
-            focusedState.current = focused;
-        }
-    }, [focused, ref]);
-
-    return (
-        <TextareaAutosize
-            className={focusedDisabled}
-            ref={ref}
-            // Destructured above and passed to nothing, so a property carrying
-            // `admin: { disabled: true }` stayed typeable in the table and the
-            // debounced write fired on blur. `readOnly` as well as `disabled`:
-            // a disabled textarea is skipped by keyboard navigation, and a cell
-            // you cannot tab through is worse than one you cannot edit.
-            disabled={disabled}
-            readOnly={disabled}
-            style={{
-                padding: 0,
-                margin: 0,
-                width: "100%",
-                color: "unset",
-                fontWeight: "unset",
-                fontSize: "unset",
-                fontFamily: "unset",
-                background: "unset",
-                border: "unset",
-                resize: "none",
-                outline: "none"
-            }}
-            value={internalValue ?? ""}
-            onChange={(evt) => {
-                const newValue = evt.target.value as string;
-                if (multiline || !newValue.endsWith("\n"))
-                    setInternalValue(newValue);
-            }}
-            onFocus={() => {
-                focusedState.current = true;
-            }}
-            onBlur={() => {
-                focusedState.current = false;
-                doUpdate();
-                if (props.onBlur) props.onBlur();
-            }}
-        />
-    );
-}

package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
-import { cls } from "../../../util";
-import { focusedDisabled } from "../../../styles";
-import { TextField } from "../../TextField";
-
-export function VirtualTableNumberInput(props: {
-    error?: Error;
-    value: number;
-    align?: "right" | "left" | "center";
-    updateValue: (newValue: (number | null)) => void;
-    focused: boolean;
-    disabled: boolean;
-}) {
-    const { align = "left", value, updateValue, focused } = props;
-    const propStringValue = (value && typeof value === "number") ? value.toString() : "";
-    const [internalValue, setInternalValue] = useState<string | null>(propStringValue);
-    const prevValue = useRef<number | null>(value);
-
-    useEffect(() => {
-        if (prevValue.current !== value && String(value) !== internalValue)
-            setInternalValue(value ? value.toString() : null);
-        prevValue.current = value;
-    }, [value]);
-
-    const doUpdate = React.useCallback(() => {
-        if (internalValue !== propStringValue) {
-            if (internalValue !== undefined && internalValue !== null) {
-                const numberValue = parseFloat(internalValue);
-                if (isNaN(numberValue)) return;
-                updateValue(numberValue);
-            } else {
-                updateValue(null);
-            }
-        }
-    }, [internalValue, value]);
-
-    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
-
-    useEffect(() => {
-        if (!focused && propStringValue !== internalValue)
-            setInternalValue(value !== undefined && value !== null ? value.toString() : null);
-    }, [value, focused]);
-
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        if (inputRef.current && focused) {
-            inputRef.current.focus({ preventScroll: true });
-        }
-    }, [focused, inputRef]);
-
-    const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
-
-    return (
-        <TextField
-            inputRef={inputRef}
-            invisible={true}
-            size="small"
-            className="w-full"
-            inputClassName={cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
-            inputStyle={{ textAlign: align }}
-            value={internalValue ?? ""}
-            onChange={(evt) => {
-                const newValue = evt.target.value.replace(",", ".");
-                if (newValue.length === 0) setInternalValue(null);
-                if (regexp.test(newValue) || newValue.startsWith("-")) setInternalValue(newValue);
-            }}
-        />
-    );
-}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -1,107 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import { Select, SelectItem } from "../../Select";
-import { MultiSelect, MultiSelectItem } from "../../MultiSelect";
-import { Chip } from "../../Chip";
-
-export interface VirtualTableSelectOption {
-    value: string | number;
-    label: string;
-    color?: string;
-}
-
-export function VirtualTableSelect(props: {
-    options: VirtualTableSelectOption[];
-    error?: Error;
-    multiple?: boolean;
-    disabled: boolean;
-    small?: boolean;
-    value: string | number | string[] | number[] | undefined;
-    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
-    focused: boolean;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-}) {
-    const { options, value, disabled, small = false, focused, updateValue, multiple = false } = props;
-    const validValue = (Array.isArray(value) && multiple) || (!Array.isArray(value) && !multiple);
-    const ref = useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-        if (ref.current && focused) {
-            ref.current?.focus({ preventScroll: true });
-        }
-    }, [focused, ref]);
-
-    const onChange = useCallback((updatedValue: string | string[]) => {
-        if (multiple) {
-            const isNumber = options.some(o => typeof o.value === "number");
-            const newValue = (updatedValue as string[]).map((v) => {
-                const opt = options.find(o => String(o.value) === v);
-                return typeof opt?.value === "number" ? parseFloat(v) : v;
-            });
-            if (isNumber) {
-                updateValue(newValue as number[]);
-            } else {
-                updateValue(newValue as string[]);
-            }
-        } else {
-            const opt = options.find(o => String(o.value) === updatedValue);
-            updateValue(typeof opt?.value === "number" ? parseFloat(updatedValue as string) : (updatedValue as string || null));
-        }
-    }, [multiple, updateValue, options]);
-
-    const renderValue = (val?: string | number) => {
-        const option = options.find(o => o.value === val);
-        return (
-            <Chip size={small ? "small" : "medium"}>
-                {option ? option.label : String(val)}
-            </Chip>
-        );
-    };
-
-    const handleOpenChange = useCallback((open: boolean) => {
-        if (!open && ref.current) {
-            setTimeout(() => {
-                ref.current?.focus({ preventScroll: true });
-            }, 0);
-        }
-    }, []);
-
-    return multiple ? (
-        <MultiSelect
-            inputRef={ref}
-            className="w-full h-full p-0 bg-transparent outline-none"
-            position={"item-aligned"}
-            disabled={disabled}
-            includeClear={false}
-            useChips={false}
-            value={validValue ? (value as (string | number)[]).map(v => String(v)) : []}
-            onValueChange={onChange}
-            onOpenChange={handleOpenChange}
-        >
-            {options.map((opt) => (
-                <MultiSelectItem key={String(opt.value)} value={String(opt.value)}>
-                    <Chip size={small ? "small" : "medium"}>{opt.label}</Chip>
-                </MultiSelectItem>
-            ))}
-        </MultiSelect>
-    ) : (
-        <Select
-            inputRef={ref}
-            fullWidth
-            className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
-            inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
-            position={"item-aligned"}
-            disabled={disabled}
-            padding={false}
-            value={validValue ? String(value) : ""}
-            onValueChange={onChange}
-            onOpenChange={handleOpenChange}
-            renderValue={renderValue}
-        >
-            {options.map((opt) => (
-                <SelectItem key={String(opt.value)} value={String(opt.value)}>
-                    <Chip size={small ? "small" : "medium"}>{opt.label}</Chip>
-                </SelectItem>
-            ))}
-        </Select>
-    );
-}