@glideappsfinal/glide-data-grid 6.0.9

package/src/data-editor/group-rename.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { styled } from "@linaria/react";
+import { css } from "@linaria/core";
+import ClickOutsideContainer from "../internal/click-outside-container/click-outside-container.js";
+import type { Rectangle } from "../internal/data-grid/data-grid-types.js";
+
+interface Props {
+    readonly bounds: Rectangle;
+    readonly group: string;
+    readonly onClose: () => void;
+    readonly onFinish: (newVal: string) => void;
+    readonly canvasBounds: DOMRect;
+}
+
+const RenameInput = styled.input<{ targetHeight: number }>`
+    flex-grow: 1;
+    border: none;
+    outline: none;
+    background-color: var(--gdg-bg-header-has-focus);
+    border-radius: 9px;
+    padding: 0 8px;
+    box-shadow: 0 0 0 1px var(--gdg-border-color);
+    color: var(--gdg-text-group-header);
+    min-height: ${p => Math.max(16, p.targetHeight - 10)}px;
+    font: var(--gdg-header-font-style) var(--gdg-font-family);
+`;
+
+export const GroupRename: React.FC<Props> = (p: Props) => {
+    const { bounds, group, onClose, canvasBounds, onFinish } = p;
+
+    const [value, setValue] = React.useState(group);
+
+    return (
+        <ClickOutsideContainer
+            style={{
+                position: "absolute",
+                left: bounds.x - canvasBounds.left + 1,
+                top: bounds.y - canvasBounds.top,
+                width: bounds.width - 2,
+                height: bounds.height,
+            }}
+            className={css`
+                padding: 0 8px;
+                display: flex;
+                align-items: center;
+                background-color: var(--gdg-bg-header);
+            `}
+            onClickOutside={onClose}>
+            <RenameInput
+                targetHeight={bounds.height}
+                data-testid="group-rename-input"
+                value={value}
+                onBlur={onClose}
+                onFocus={e => e.target.setSelectionRange(0, value.length)}
+                onChange={e => setValue(e.target.value)}
+                onKeyDown={e => {
+                    if (e.key === "Enter") {
+                        onFinish(value);
+                    } else if (e.key === "Escape") {
+                        onClose();
+                    }
+                }}
+                autoFocus={true}
+            />
+        </ClickOutsideContainer>
+    );
+};

package/src/data-editor/row-grouping-api.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import type { Item } from "../internal/data-grid/data-grid-types.js";
+import { flattenRowGroups, mapRowIndexToPath, type RowGroup, type RowGroupingOptions, type MapResult } from "./row-grouping.js";
+
+export interface RowGroupingMapperResult<T> extends Omit<MapResult, 'originalIndex'> {
+    path: readonly number[];
+    originalIndex: T;
+    isGroupHeader: boolean;
+    groupRows: number;
+}
+
+export type RowGroupingMapper = {
+    (itemOrRow: number): RowGroupingMapperResult<number>;
+    (itemOrRow: Item): RowGroupingMapperResult<Item>;
+};
+
+export interface UseRowGroupingResult {
+    readonly mapper: RowGroupingMapper;
+    readonly updateRowGroupingByPath: (
+        rowGrouping: readonly RowGroup[],
+        path: readonly number[],
+        update: Partial<RowGroup>
+    ) => readonly RowGroup[];
+    readonly getRowGroupingForPath: (rowGrouping: readonly RowGroup[], path: readonly number[]) => RowGroup;
+}
+
+export function useRowGrouping(options: RowGroupingOptions | undefined, rows: number): UseRowGroupingResult {
+    const flattenedRowGroups = React.useMemo(
+        () => (options === undefined ? undefined : flattenRowGroups(options, rows)),
+        [options, rows]
+    );
+
+    return {
+        getRowGroupingForPath,
+        updateRowGroupingByPath,
+        mapper: React.useCallback<UseRowGroupingResult["mapper"]>(
+            (itemOrRow: number | Item) => {
+                if (typeof itemOrRow === "number") {
+                    return mapRowIndexToPath(itemOrRow, flattenedRowGroups);
+                }
+                const r = mapRowIndexToPath(itemOrRow[1], flattenedRowGroups);
+                return {
+                    ...r,
+                    originalIndex: [itemOrRow[0], r.originalIndex],
+                } as any; // FIXME
+            },
+            [flattenedRowGroups]
+        ),
+    };
+}
+
+export function updateRowGroupingByPath(
+    rowGrouping: readonly RowGroup[],
+    path: readonly number[],
+    update: Partial<RowGroup>
+): readonly RowGroup[] {
+    const [index, ...rest] = path;
+    if (rest[0] === -1) {
+        return rowGrouping.map((group, i) => (i === index ? { ...group, ...update } : group));
+    }
+    return rowGrouping.map((group, i) =>
+        i === index ? { ...group, subGroups: updateRowGroupingByPath(group.subGroups ?? [], rest, update) } : group
+    );
+}
+
+export function getRowGroupingForPath(rowGrouping: readonly RowGroup[], path: readonly number[]): RowGroup {
+    const [index, ...rest] = path;
+    if (rest[0] === -1) {
+        return rowGrouping[index];
+    }
+    return getRowGroupingForPath(rowGrouping[index].subGroups ?? [], rest);
+}

package/src/data-editor/row-grouping.ts

@@ -0,0 +1,326 @@
+import React from "react";
+import type { Theme } from "../common/styles.js";
+import type { DataEditorProps } from "./data-editor.js";
+import type { DataGridProps } from "../internal/data-grid/data-grid.js";
+import { whenDefined } from "../common/utils.js";
+
+type Mutable<T> = {
+    -readonly [K in keyof T]: T[K];
+};
+
+export type RowGroup = {
+    /**
+     * The index of the header if the groups are all flattened and expanded
+     */
+    readonly headerIndex: number;
+    readonly isCollapsed: boolean;
+    readonly subGroups?: readonly RowGroup[];
+};
+
+export interface RowGroupingOptions {
+    /**
+     * The indexes of the rows of the grid which are group headers and their collapse state. If a number is provided
+     * instead of an object, the group header will not be collapsed.
+     */
+    readonly groups: readonly RowGroup[];
+
+    /**
+     * Causes the group headers to collect at the top of the grid. Each replacing the last.
+     */
+    //readonly makeGroupHeadersSticky?: boolean;
+
+    /**
+     * The height of the group headers. All group headers must have the same height.
+     */
+    readonly height: number;
+
+    /**
+     * Enables or disables the drawing of borders inside of group headers.
+     * @defaultValue true
+     */
+    //readonly verticalBorders?: boolean;
+
+    /**
+     * Overrides the default theme of the group headers.
+     */
+    readonly themeOverride?: Partial<Theme>;
+
+    /**
+     * Controls the navigation behavior of the grid. If `skip` is provided the grid will skip over the group headers
+     * when the user selects a new cell. If `skip-up` or `skip-down` is provided the grid will skip over the group
+     * headers when the user navigates up or down.
+     *
+     * If a group header is marked block, it will act like skip, but clicking on it will also not result in selection
+     *  a cell when clicked.
+     */
+    readonly navigationBehavior?: "normal" | "skip" | "skip-up" | "skip-down" | "block";
+
+    /**
+     * Controls the selection behavior of the grid. If spanning is allowed group headers act like any other cells. If
+     * spanning is not allowed selections will be unable to span group headers.
+     */
+    readonly selectionBehavior?: "allow-spanning" | "block-spanning";
+}
+
+export type ExpandedRowGroup = {
+    readonly headerIndex: number;
+    readonly isCollapsed: boolean;
+    readonly depth: number;
+    readonly path: readonly number[];
+    subGroups?: readonly ExpandedRowGroup[];
+};
+
+export function expandRowGroups(groups: readonly RowGroup[]): ExpandedRowGroup[] {
+    function processGroup(group: RowGroup, depth: number, path: readonly number[]): ExpandedRowGroup {
+        if (typeof group === "number") {
+            return {
+                headerIndex: group,
+                isCollapsed: false,
+                depth,
+                path,
+            };
+        }
+
+        const expandedGroup: ExpandedRowGroup = {
+            headerIndex: group.headerIndex,
+            isCollapsed: group.isCollapsed,
+            depth,
+            path,
+        };
+
+        if (group.subGroups !== undefined) {
+            expandedGroup.subGroups = group.subGroups
+                .map((x, ind) => processGroup(x, depth + 1, [...path, ind]))
+                .sort((a, b) => a.headerIndex - b.headerIndex);
+        }
+
+        return expandedGroup;
+    }
+
+    const expanded: ExpandedRowGroup[] = groups.map((group, i) => processGroup(group, 0, [i]));
+
+    // Sort the top-level expanded groups
+    return expanded.sort((a, b) => a.headerIndex - b.headerIndex);
+}
+
+export interface FlattenedRowGroup {
+    readonly rowIndex: number;
+    readonly headerIndex: number;
+    readonly contentIndex: number; // the content index of the first row in the group
+    readonly isCollapsed: boolean;
+    readonly depth: number;
+    readonly rows: number;
+    readonly path: readonly number[];
+}
+
+interface SkippableFlattenedRowGroup extends FlattenedRowGroup {
+    readonly skip: boolean;
+}
+
+export function flattenRowGroups(rowGrouping: RowGroupingOptions, rows: number): FlattenedRowGroup[] {
+    const flattened: SkippableFlattenedRowGroup[] = [];
+
+    function processGroup(
+        group: ExpandedRowGroup,
+        nextHeaderIndex: number | null,
+        skipChildren: boolean = false
+    ): void {
+        let rowsInGroup = nextHeaderIndex !== null ? nextHeaderIndex - group.headerIndex : rows - group.headerIndex;
+        if (group.subGroups !== undefined) {
+            rowsInGroup = group.subGroups[0].headerIndex - group.headerIndex;
+        }
+
+        rowsInGroup--; // the header isn't in the group
+
+        flattened.push({
+            rowIndex: -1, // we will fill this in later
+            headerIndex: group.headerIndex,
+            contentIndex: -1, // we will fill this in later
+            skip: skipChildren,
+            isCollapsed: group.isCollapsed,
+            depth: group.depth,
+            path: group.path,
+            rows: rowsInGroup,
+        });
+
+        if (group.subGroups) {
+            for (let i = 0; i < group.subGroups.length; i++) {
+                const nextSubHeaderIndex =
+                    i < group.subGroups.length - 1 ? group.subGroups[i + 1].headerIndex : nextHeaderIndex;
+                processGroup(group.subGroups[i], nextSubHeaderIndex, skipChildren || group.isCollapsed);
+            }
+        }
+    }
+
+    const expandedGroups = expandRowGroups(rowGrouping.groups);
+
+    for (let i = 0; i < expandedGroups.length; i++) {
+        const nextHeaderIndex = i < expandedGroups.length - 1 ? expandedGroups[i + 1].headerIndex : null;
+        processGroup(expandedGroups[i], nextHeaderIndex);
+    }
+
+    let rowIndex = 0;
+    let contentIndex = 0;
+    for (const g of flattened as Mutable<(typeof flattened)[number]>[]) {
+        g.contentIndex = contentIndex;
+        contentIndex += g.rows;
+
+        g.rowIndex = rowIndex;
+        rowIndex += g.isCollapsed ? 1 : g.rows + 1;
+    }
+
+    return flattened
+        .filter(x => x.skip === false)
+        .map(x => {
+            const { skip, ...rest } = x;
+            return rest;
+        });
+}
+
+export interface MapResult {
+    readonly path: readonly number[];
+    readonly isGroupHeader: boolean;
+    readonly originalIndex: number;
+    readonly groupIndex: number;
+    readonly groupRows: number;
+    readonly contentIndex: number;
+}
+
+// grid relative index to path and other details
+export function mapRowIndexToPath(row: number, flattenedRowGroups?: readonly FlattenedRowGroup[]): MapResult {
+    if (flattenedRowGroups === undefined || flattenRowGroups.length === 0)
+        return {
+            path: [row],
+            originalIndex: row,
+            isGroupHeader: false,
+            groupIndex: row,
+            contentIndex: row,
+            groupRows: -1,
+        };
+
+    let toGo = row;
+    for (const group of flattenedRowGroups) {
+        if (toGo === 0)
+            return {
+                path: [...group.path, -1],
+                originalIndex: group.headerIndex,
+                isGroupHeader: true,
+                groupIndex: -1,
+                contentIndex: -1,
+                groupRows: group.rows,
+            };
+        if (!group.isCollapsed) {
+            if (toGo <= group.rows)
+                return {
+                    path: [...group.path, toGo - 1],
+                    originalIndex: group.headerIndex + toGo,
+                    isGroupHeader: false,
+                    groupIndex: toGo - 1,
+                    contentIndex: group.contentIndex + toGo - 1,
+                    groupRows: group.rows,
+                };
+            toGo = toGo - group.rows - 1;
+        } else {
+            toGo--;
+        }
+    }
+    // this shouldn't happen
+    // this is a fucking awful code smell. Probably means the algorithm above is trash and can be done better.
+    // I suppose to eliminate this, you can treat this case as part of the overflow of the last group.
+    return {
+        path: [row],
+        originalIndex: row,
+        isGroupHeader: false,
+        groupIndex: row,
+        contentIndex: row,
+        groupRows: -1,
+    };
+}
+
+export interface UseRowGroupingInnerResult {
+    readonly rows: number;
+    readonly rowNumberMapper: (row: number) => number | undefined;
+    readonly rowHeight: NonNullable<DataEditorProps["rowHeight"]>;
+    readonly getRowThemeOverride: DataGridProps["getRowThemeOverride"];
+}
+
+export function useRowGroupingInner(
+    options: RowGroupingOptions | undefined,
+    rows: number,
+    rowHeightIn: NonNullable<DataEditorProps["rowHeight"]>,
+    getRowThemeOverrideIn: DataEditorProps["getRowThemeOverride"]
+): UseRowGroupingInnerResult {
+    const flattenedRowGroups = React.useMemo(
+        () => (options === undefined ? undefined : flattenRowGroups(options, rows)),
+        [options, rows]
+    );
+
+    const flattenedRowGroupsMap = React.useMemo(() => {
+        return flattenedRowGroups?.reduce<{ [rowIndex: number]: FlattenedRowGroup | undefined }>((acc, group) => {
+            acc[group.rowIndex] = group;
+            return acc;
+        }, {});
+    }, [flattenedRowGroups]);
+
+    const effectiveRows = React.useMemo(() => {
+        if (flattenedRowGroups === undefined) return rows;
+        return flattenedRowGroups.reduce((acc, group) => acc + (group.isCollapsed ? 1 : group.rows + 1), 0);
+    }, [flattenedRowGroups, rows]);
+
+    const rowHeight = React.useMemo(() => {
+        if (options === undefined) return rowHeightIn;
+        if (typeof rowHeightIn === "number" && options.height === rowHeightIn) return rowHeightIn;
+        return (rowIndex: number) => {
+            if (flattenedRowGroupsMap?.[rowIndex]) return options.height;
+            return typeof rowHeightIn === "number" ? rowHeightIn : rowHeightIn(rowIndex);
+        };
+    }, [flattenedRowGroupsMap, options, rowHeightIn]);
+
+    const rowNumberMapperOut = React.useCallback(
+        (row: number): number | undefined => {
+            if (flattenedRowGroups === undefined) return row;
+            let toGo = row;
+
+            for (const group of flattenedRowGroups) {
+                if (toGo === 0) return undefined;
+                toGo--;
+                if (!group.isCollapsed) {
+                    if (toGo < group.rows) return group.contentIndex + toGo;
+                    toGo -= group.rows;
+                }
+            }
+
+            return row;
+        },
+        [flattenedRowGroups]
+    );
+
+    const getRowThemeOverride = whenDefined(
+        getRowThemeOverrideIn ?? options?.themeOverride,
+        React.useCallback(
+            (row: number): Partial<Theme> | undefined => {
+                if (options === undefined) return getRowThemeOverrideIn?.(row, row, row);
+                if (getRowThemeOverrideIn === undefined && options?.themeOverride === undefined) return undefined;
+                const { isGroupHeader, contentIndex, groupIndex } = mapRowIndexToPath(row, flattenedRowGroups);
+                if (isGroupHeader) return options.themeOverride;
+                return getRowThemeOverrideIn?.(row, groupIndex, contentIndex);
+            },
+            [flattenedRowGroups, getRowThemeOverrideIn, options]
+        )
+    );
+
+    if (options === undefined)
+        return {
+            rowHeight,
+            rows: rows,
+            rowNumberMapper: rowNumberMapperOut,
+            getRowThemeOverride,
+        };
+
+    return {
+        rowHeight,
+        rows: effectiveRows,
+        rowNumberMapper: rowNumberMapperOut,
+        getRowThemeOverride,
+    };
+}

package/src/data-editor/stories/data-editor-repros.stories.tsx

@@ -0,0 +1,107 @@
+import * as React from "react";
+
+import { useState, useMemo } from "storybook/preview-api";
+import { BuilderThemeWrapper } from "../../stories/story-utils.js";
+import { type GridCell, GridCellKind, type Item } from "../../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { styled } from "@linaria/react";
+
+export default {
+    title: "Tests/TestCases/Bugs",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <BuilderThemeWrapper width={1000} height={800}>
+                <Story />
+            </BuilderThemeWrapper>
+        ),
+    ],
+};
+
+const bug70Gen = ([, row]: Item): GridCell => ({
+    allowOverlay: true,
+    kind: GridCellKind.Number,
+    data: row,
+    displayData: row.toString(),
+});
+
+const ignore = () => undefined;
+
+const Bug70Style = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    > a {
+        margin-bottom: 20px;
+    }
+`;
+
+export function Bug70() {
+    const cols = [
+        { title: "Col1", width: 100 },
+        { title: "Col2", width: 100 },
+    ];
+
+    return (
+        <Bug70Style className="App">
+            <p>To cause error: scroll down at least one row, edit a cell in Col2, and hit Tab</p>
+            <a href="https://github.com/glideapps/glide-data-grid/issues/70" target="_blank" rel="noreferrer">
+                Original report
+            </a>
+            <DataEditor
+                width={500}
+                height={500}
+                rows={100}
+                columns={cols}
+                getCellContent={bug70Gen}
+                onCellEdited={ignore}
+            />
+        </Bug70Style>
+    );
+}
+
+const filterColumnsGen = ([col, row]: Item): GridCell => ({
+    allowOverlay: true,
+    kind: GridCellKind.Text,
+    data: `${col} - ${row}`,
+    displayData: `${col} - ${row}`,
+});
+
+const filteringColumns = [
+    { title: "Col AAAA", width: 120 },
+    { title: "Col AAA", width: 120 },
+    { title: "Col AA", width: 120 },
+    { title: "Col A", width: 120 },
+    { title: "Col", width: 120 },
+];
+
+export function FilterColumns() {
+    const [searchText, setSearchText] = useState("");
+
+    const cols = useMemo(() => {
+        if (searchText === "") {
+            return filteringColumns;
+        }
+
+        return filteringColumns.filter(c => c.title.toLowerCase().includes(searchText.toLowerCase()));
+    }, [searchText]);
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchText(e.target.value);
+    };
+
+    return (
+        <div>
+            <input value={searchText} onChange={onInputChange} />
+            <DataEditor
+                width={1000}
+                height={500}
+                rows={100}
+                columns={cols}
+                getCellContent={filterColumnsGen}
+                smoothScrollX={true}
+                smoothScrollY={true}
+            />
+        </div>
+    );
+}