@glideappsfinal/glide-data-grid 6.0.9

package/src/data-editor/use-autoscroll.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import type { GridMouseCellEventArgs } from "../internal/data-grid/event-args.js";
+
+const maxPxPerMs = 2;
+const msToFullSpeed = 1300;
+
+export function useAutoscroll(
+    scrollDirection: GridMouseCellEventArgs["scrollEdge"] | undefined,
+    scrollRef: React.MutableRefObject<HTMLDivElement | null>,
+    onScroll?: () => void
+) {
+    const speedScalar = React.useRef(0);
+    const [xDir, yDir] = scrollDirection ?? [0, 0];
+    React.useEffect(() => {
+        if (xDir === 0 && yDir === 0) {
+            speedScalar.current = 0;
+            return;
+        }
+        let cancelled = false;
+
+        let lastTime = 0;
+        const scrollFn = (curTime: number) => {
+            if (cancelled) return;
+            if (lastTime === 0) {
+                lastTime = curTime;
+            } else {
+                const step = curTime - lastTime;
+                speedScalar.current = Math.min(1, speedScalar.current + step / msToFullSpeed);
+                const motion = speedScalar.current ** 1.618 * step * maxPxPerMs;
+                scrollRef.current?.scrollBy(xDir * motion, yDir * motion);
+                lastTime = curTime;
+                onScroll?.();
+            }
+            window.requestAnimationFrame(scrollFn);
+        };
+        window.requestAnimationFrame(scrollFn);
+        return () => {
+            cancelled = true;
+        };
+    }, [scrollRef, xDir, yDir, onScroll]);
+}

package/src/data-editor/use-cells-for-selection.ts

@@ -0,0 +1,72 @@
+import * as React from "react";
+import type { DataGridSearchProps } from "../internal/data-grid-search/data-grid-search.js";
+import { type CellArray, type GridCell, GridCellKind } from "../internal/data-grid/data-grid-types.js";
+import type { DataEditorProps } from "./data-editor.js";
+
+type CellsForSelectionCallback = NonNullable<DataGridSearchProps["getCellsForSelection"]>;
+export function useCellsForSelection(
+    getCellsForSelectionIn: CellsForSelectionCallback | true | undefined,
+    getCellContent: DataEditorProps["getCellContent"],
+    rowMarkerOffset: number,
+    abortController: AbortController,
+    rows: number
+) {
+    const getCellsForSelectionDirectWhenValid = React.useCallback<CellsForSelectionCallback>(
+        rect => {
+            if (getCellsForSelectionIn === true) {
+                const result: GridCell[][] = [];
+
+                for (let y = rect.y; y < rect.y + rect.height; y++) {
+                    const row: GridCell[] = [];
+                    for (let x = rect.x; x < rect.x + rect.width; x++) {
+                        if (x < 0 || y >= rows) {
+                            row.push({
+                                kind: GridCellKind.Loading,
+                                allowOverlay: false,
+                            });
+                        } else {
+                            row.push(getCellContent([x, y]));
+                        }
+                    }
+                    result.push(row);
+                }
+
+                return result;
+            }
+            return getCellsForSelectionIn?.(rect, abortController.signal) ?? [];
+        },
+        [abortController.signal, getCellContent, getCellsForSelectionIn, rows]
+    );
+    const getCellsForSelectionDirect =
+        getCellsForSelectionIn !== undefined ? getCellsForSelectionDirectWhenValid : undefined;
+    const getCellsForSelectionMangled = React.useCallback<CellsForSelectionCallback>(
+        rect => {
+            if (getCellsForSelectionDirect === undefined) return [];
+            const newRect = {
+                ...rect,
+                x: rect.x - rowMarkerOffset,
+            };
+            if (newRect.x < 0) {
+                newRect.x = 0;
+                newRect.width--;
+                const r = getCellsForSelectionDirect(newRect, abortController.signal);
+
+                if (typeof r === "function") {
+                    return async () =>
+                        // eslint-disable-next-line unicorn/no-await-expression-member
+                        (await r()).map<CellArray[0]>(row => [
+                            { kind: GridCellKind.Loading, allowOverlay: false },
+                            ...row,
+                        ]);
+                }
+                return r.map(row => [{ kind: GridCellKind.Loading, allowOverlay: false }, ...row]);
+            }
+            return getCellsForSelectionDirect(newRect, abortController.signal);
+        },
+        [abortController.signal, getCellsForSelectionDirect, rowMarkerOffset]
+    );
+
+    const getCellsForSelection = getCellsForSelectionIn !== undefined ? getCellsForSelectionMangled : undefined;
+
+    return [getCellsForSelection, getCellsForSelectionDirect] as const;
+}

package/src/data-editor/use-column-sizer.ts

@@ -0,0 +1,253 @@
+import * as React from "react";
+import type { FullTheme } from "../common/styles.js";
+import type { DataGridSearchProps } from "../internal/data-grid-search/data-grid-search.js";
+import type { GetCellRendererCallback } from "../cells/cell-types.js";
+
+import {
+    type CellArray,
+    type GridCell,
+    type GridColumn,
+    type InnerGridColumn,
+    isSizedGridColumn,
+    resolveCellsThunk,
+    type SizedGridColumn,
+} from "../internal/data-grid/data-grid-types.js";
+const defaultSize = 150;
+
+function measureCell(
+    ctx: CanvasRenderingContext2D,
+    cell: GridCell,
+    theme: FullTheme,
+    getCellRenderer: GetCellRendererCallback
+): number {
+    const r = getCellRenderer(cell);
+    return r?.measure?.(ctx, cell, theme) ?? defaultSize;
+}
+
+export function measureColumn(
+    ctx: CanvasRenderingContext2D,
+    theme: FullTheme,
+    c: GridColumn,
+    colIndex: number,
+    selectedData: CellArray,
+    minColumnWidth: number,
+    maxColumnWidth: number,
+    removeOutliers: boolean,
+    getCellRenderer: GetCellRendererCallback
+): SizedGridColumn {
+    let max = 0;
+    const sizes: number[] =
+        selectedData === undefined
+            ? []
+            : selectedData.map(row => {
+                  const r = measureCell(ctx, row[colIndex], theme, getCellRenderer);
+                  max = Math.max(max, r);
+                  return r;
+              });
+
+    if (sizes.length > 5 && removeOutliers) {
+        max = 0;
+        // Filter out outliers
+        let sum = 0;
+        for (const size of sizes) {
+            sum += size;
+        }
+        const average = sum / sizes.length;
+        // Set sizes that are considered outliers to zero
+        for (let i = 0; i < sizes.length; i++) {
+            if (sizes[i] >= average * 2) {
+                sizes[i] = 0;
+            } else {
+                max = Math.max(max, sizes[i]);
+            }
+        }
+    }
+    const currentFont = ctx.font;
+    ctx.font = theme.headerFontFull;
+    max = Math.max(max, ctx.measureText(c.title).width + theme.cellHorizontalPadding * 2 + (c.icon === undefined ? 0 : 28));
+    ctx.font = currentFont;
+    const final = Math.max(Math.ceil(minColumnWidth), Math.min(Math.floor(maxColumnWidth), Math.ceil(max)));
+
+    return {
+        ...c,
+        width: final,
+    };
+}
+
+/** @category Hooks */
+export function useColumnSizer(
+    columns: readonly GridColumn[],
+    rows: number,
+    getCellsForSelection: DataGridSearchProps["getCellsForSelection"],
+    clientWidth: number,
+    minColumnWidth: number,
+    maxColumnWidth: number,
+    theme: FullTheme,
+    getCellRenderer: GetCellRendererCallback,
+    abortController: AbortController
+): {
+    readonly sizedColumns: readonly InnerGridColumn[];
+    readonly nonGrowWidth: number;
+} {
+    const rowsRef = React.useRef(rows);
+    const getCellsForSelectionRef = React.useRef(getCellsForSelection);
+    const themeRef = React.useRef(theme);
+    rowsRef.current = rows;
+    getCellsForSelectionRef.current = getCellsForSelection;
+    themeRef.current = theme;
+
+    const [canvas, ctx] = React.useMemo(() => {
+        if (typeof window === "undefined") return [null, null];
+        const offscreen = document.createElement("canvas");
+        offscreen.style["display"] = "none";
+        offscreen.style["opacity"] = "0";
+        offscreen.style["position"] = "fixed";
+        return [offscreen, offscreen.getContext("2d", { alpha: false })];
+    }, []);
+
+    React.useLayoutEffect(() => {
+        if (canvas) document.documentElement.append(canvas);
+        return () => {
+            canvas?.remove();
+        };
+    }, [canvas]);
+
+    const memoMap = React.useRef<Record<string, number>>({});
+
+    const lastColumns = React.useRef<typeof columns | undefined>(undefined);
+    const [selectedData, setSelectionData] = React.useState<CellArray | undefined>();
+
+    React.useLayoutEffect(() => {
+        const getCells = getCellsForSelectionRef.current;
+        if (getCells === undefined || columns.every(isSizedGridColumn)) return;
+        let computeRows = Math.max(1, 10 - Math.floor(columns.length / 10_000));
+        let tailRows = 0;
+        if (computeRows < rowsRef.current && computeRows > 1) {
+            computeRows--;
+            tailRows = 1;
+        }
+
+        const computeArea = {
+            x: 0,
+            y: 0,
+            width: columns.length,
+            height: Math.min(rowsRef.current, computeRows),
+        };
+
+        const tailComputeArea = {
+            x: 0,
+            y: rowsRef.current - 1,
+            width: columns.length,
+            height: 1,
+        };
+        const fn = async () => {
+            const getResult = getCells(computeArea, abortController.signal);
+            const tailGetResult = tailRows > 0 ? getCells(tailComputeArea, abortController.signal) : undefined;
+            let toSet: CellArray;
+            // eslint-disable-next-line unicorn/prefer-ternary
+            if (typeof getResult === "object") {
+                toSet = getResult;
+            } else {
+                toSet = await resolveCellsThunk(getResult);
+            }
+            if (tailGetResult !== undefined) {
+                // eslint-disable-next-line unicorn/prefer-ternary
+                if (typeof tailGetResult === "object") {
+                    toSet = [...toSet, ...tailGetResult];
+                } else {
+                    toSet = [...toSet, ...(await resolveCellsThunk(tailGetResult))];
+                }
+            }
+            lastColumns.current = columns;
+            setSelectionData(toSet);
+        };
+        void fn();
+    }, [abortController.signal, columns]);
+
+    return React.useMemo(() => {
+        const getRaw = () => {
+            if (columns.every(isSizedGridColumn)) {
+                return columns;
+            }
+
+            if (ctx === null) {
+                return columns.map(c => {
+                    if (isSizedGridColumn(c)) return c;
+
+                    return {
+                        ...c,
+                        width: defaultSize,
+                    };
+                });
+            }
+
+            ctx.font = themeRef.current.baseFontFull;
+
+            return columns.map((c, colIndex) => {
+                if (isSizedGridColumn(c)) return c;
+
+                if (memoMap.current[c.id] !== undefined) {
+                    return {
+                        ...c,
+                        width: memoMap.current[c.id],
+                    };
+                }
+
+                if (selectedData === undefined || lastColumns.current !== columns || c.id === undefined) {
+                    return {
+                        ...c,
+                        width: defaultSize,
+                    };
+                }
+
+                const r = measureColumn(
+                    ctx,
+                    theme,
+                    c,
+                    colIndex,
+                    selectedData,
+                    minColumnWidth,
+                    maxColumnWidth,
+                    true,
+                    getCellRenderer
+                );
+                memoMap.current[c.id] = r.width;
+                return r;
+            });
+        };
+
+        let result: readonly InnerGridColumn[] = getRaw();
+        let totalWidth = 0;
+        let totalGrow = 0;
+        const distribute: number[] = [];
+        for (const [i, c] of result.entries()) {
+            totalWidth += c.width;
+            if (c.grow !== undefined && c.grow > 0) {
+                totalGrow += c.grow;
+                distribute.push(i);
+            }
+        }
+        if (totalWidth < clientWidth && distribute.length > 0) {
+            const writeable = [...result];
+            const extra = clientWidth - totalWidth;
+            let remaining = extra;
+            for (let di = 0; di < distribute.length; di++) {
+                const i = distribute[di];
+                const weighted = (result[i].grow ?? 0) / totalGrow;
+                const toAdd =
+                    di === distribute.length - 1 ? remaining : Math.min(remaining, Math.floor(extra * weighted));
+                writeable[i] = {
+                    ...result[i],
+                    growOffset: toAdd,
+                    width: result[i].width + toAdd,
+                };
+                remaining -= toAdd;
+            }
+            result = writeable;
+        }
+        return {
+            sizedColumns: result,
+            nonGrowWidth: totalWidth,
+        };
+    }, [clientWidth, columns, ctx, selectedData, theme, minColumnWidth, maxColumnWidth, getCellRenderer]);
+}

package/src/data-editor/use-initial-scroll-offset.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+import type { VisibleRegion } from "./visible-region.js";
+import type { DataEditorCoreProps } from "../index.js";
+import { useStateWithReactiveInput } from "../common/utils.js";
+
+// shamelessly stolen and modified from: https://github.com/theKashey/use-callback-ref
+// MIT License https://github.com/theKashey/use-callback-ref/tree/master?tab=MIT-1-ov-file#readme
+function useCallbackRef<T>(
+    initialValue: T | null,
+    callback: (newValue: T | null, lastValue: T | null) => void
+): React.MutableRefObject<T | null> {
+    const [ref] = React.useState(() => ({
+        value: initialValue,
+        callback,
+        facade: {
+            get current() {
+                return ref.value;
+            },
+            set current(value) {
+                const last = ref.value;
+
+                if (last !== value) {
+                    ref.value = value;
+                    ref.callback(value, last);
+                }
+            },
+        },
+    }));
+    ref.callback = callback;
+
+    return ref.facade;
+}
+
+export function useInitialScrollOffset(
+    scrollOffsetX: number | undefined,
+    scrollOffsetY: number | undefined,
+    rowHeight: NonNullable<DataEditorCoreProps["rowHeight"]>,
+    visibleRegionRef: React.MutableRefObject<VisibleRegion>,
+    onDidScroll: () => void
+) {
+    const [visibleRegionY, visibleRegionTy] = React.useMemo(() => {
+        return [
+            scrollOffsetY !== undefined && typeof rowHeight === "number" ? Math.floor(scrollOffsetY / rowHeight) : 0,
+            scrollOffsetY !== undefined && typeof rowHeight === "number" ? -(scrollOffsetY % rowHeight) : 0,
+        ];
+    }, [scrollOffsetY, rowHeight]);
+
+    const visibleRegionInput = React.useMemo<VisibleRegion>(
+        () => ({
+            x: visibleRegionRef.current.x,
+            y: visibleRegionY,
+            width: visibleRegionRef.current.width ?? 1,
+            height: visibleRegionRef.current.height ?? 1,
+            // tx: 'TODO',
+            ty: visibleRegionTy,
+        }),
+        [visibleRegionRef, visibleRegionTy, visibleRegionY]
+    );
+
+    const [visibleRegion, setVisibleRegion, empty] = useStateWithReactiveInput<VisibleRegion>(visibleRegionInput);
+
+    const onDidScrollRef = React.useRef(onDidScroll);
+    onDidScrollRef.current = onDidScroll;
+
+    const scrollRef = useCallbackRef<HTMLDivElement | null>(null, newVal => {
+        if (newVal !== null && scrollOffsetY !== undefined) {
+            newVal.scrollTop = scrollOffsetY;
+        } else if (newVal !== null && scrollOffsetX !== undefined) {
+            newVal.scrollLeft = scrollOffsetX;
+        }
+    });
+
+    const vScrollReady = (visibleRegion.height ?? 1) > 1;
+    React.useLayoutEffect(() => {
+        if (scrollOffsetY !== undefined && scrollRef.current !== null && vScrollReady) {
+            if (scrollRef.current.scrollTop === scrollOffsetY) return;
+            scrollRef.current.scrollTop = scrollOffsetY;
+            if (scrollRef.current.scrollTop !== scrollOffsetY) {
+                empty();
+            }
+            onDidScrollRef.current();
+        }
+    }, [scrollOffsetY, vScrollReady, empty, scrollRef]);
+
+    const hScrollReady = (visibleRegion.width ?? 1) > 1;
+    React.useLayoutEffect(() => {
+        if (scrollOffsetX !== undefined && scrollRef.current !== null && hScrollReady) {
+            if (scrollRef.current.scrollLeft === scrollOffsetX) return;
+            scrollRef.current.scrollLeft = scrollOffsetX;
+            if (scrollRef.current.scrollLeft !== scrollOffsetX) {
+                empty();
+            }
+            onDidScrollRef.current();
+        }
+    }, [scrollOffsetX, hScrollReady, empty, scrollRef]);
+
+    return {
+        visibleRegion,
+        setVisibleRegion,
+        scrollRef,
+    };
+}

package/src/data-editor/use-rem-adjuster.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { getDataEditorTheme, type Theme } from "../common/styles.js";
+
+interface DataEditorDimensions {
+    rowHeight: number | ((n: number) => number);
+    headerHeight: number;
+    groupHeaderHeight: number | number[];
+    theme: Partial<Theme> | undefined;
+    overscrollX: number | undefined;
+    overscrollY: number | undefined;
+}
+
+interface DataEditorProps {
+    rowHeight: number | ((n: number) => number);
+    headerHeight: number;
+    groupHeaderHeight: number | number[];
+    theme?: Partial<Theme>;
+    overscrollX?: number;
+    overscrollY?: number;
+    scaleToRem: boolean;
+    remSize: number;
+}
+
+export function useRemAdjuster({
+    rowHeight: rowHeightIn,
+    headerHeight: headerHeightIn,
+    groupHeaderHeight: groupHeaderHeightIn,
+    theme: themeIn,
+    overscrollX: overscrollXIn,
+    overscrollY: overscrollYIn,
+    scaleToRem,
+    remSize,
+}: DataEditorProps): DataEditorDimensions {
+    const [rowHeight, headerHeight, groupHeaderHeight, theme, overscrollX, overscrollY] = React.useMemo(() => {
+        if (!scaleToRem || remSize === 16)
+            return [rowHeightIn, headerHeightIn, groupHeaderHeightIn, themeIn, overscrollXIn, overscrollYIn];
+        const scaler = remSize / 16;
+        const rh = rowHeightIn;
+        const bt = getDataEditorTheme();
+        const scaledGroupHeaderHeight = Array.isArray(groupHeaderHeightIn)
+            ? groupHeaderHeightIn.map(h => Math.ceil(h * scaler))
+            : Math.ceil(groupHeaderHeightIn * scaler);
+        return [
+            typeof rh === "number" ? rh * scaler : (n: number) => Math.ceil(rh(n) * scaler),
+            Math.ceil(headerHeightIn * scaler),
+            scaledGroupHeaderHeight,
+            {
+                ...themeIn,
+                headerIconSize: (themeIn?.headerIconSize ?? bt.headerIconSize) * scaler,
+                cellHorizontalPadding: (themeIn?.cellHorizontalPadding ?? bt.cellHorizontalPadding) * scaler,
+                cellVerticalPadding: (themeIn?.cellVerticalPadding ?? bt.cellVerticalPadding) * scaler,
+            },
+            Math.ceil((overscrollXIn ?? 0) * scaler),
+            Math.ceil((overscrollYIn ?? 0) * scaler),
+        ];
+    }, [groupHeaderHeightIn, headerHeightIn, overscrollXIn, overscrollYIn, remSize, rowHeightIn, scaleToRem, themeIn]);
+
+    return { rowHeight, headerHeight, groupHeaderHeight, theme, overscrollX, overscrollY };
+}

package/src/data-editor/visible-region.ts

@@ -0,0 +1,20 @@
+import { type Rectangle, type Item } from "../internal/data-grid/data-grid-types.js";
+
+export type VisibleRegion = Rectangle & {
+    /** value in px */
+    tx?: number;
+    /** value in px */
+    ty?: number;
+    extras?: {
+        selected?: Item;
+        /**
+         * @deprecated
+         */
+        freezeRegion?: Rectangle;
+
+        /**
+         * All visible freeze regions
+         */
+        freezeRegions?: readonly Rectangle[];
+    };
+};

package/src/data-editor-all.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { DataEditor, type DataEditorProps, type DataEditorRef } from "./data-editor/data-editor.js";
+import { AllCellRenderers } from "./cells/index.js";
+import { sprites } from "./internal/data-grid/sprites.js";
+import ImageWindowLoaderImpl from "./common/image-window-loader.js";
+import type { ImageWindowLoader } from "./internal/data-grid/image-window-loader-interface.js";
+
+export interface DataEditorAllProps extends Omit<DataEditorProps, "imageWindowLoader"> {
+    imageWindowLoader?: ImageWindowLoader;
+}
+
+const DataEditorAllImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorAllProps> = (p, ref) => {
+    const allSprites = React.useMemo(() => {
+        return { ...sprites, ...p.headerIcons };
+    }, [p.headerIcons]);
+
+    const renderers = React.useMemo(() => {
+        return p.renderers ?? AllCellRenderers;
+    }, [p.renderers])
+
+    const imageWindowLoader = React.useMemo(() => {
+        return p.imageWindowLoader ?? new ImageWindowLoaderImpl();
+    }, [p.imageWindowLoader]);
+
+    return (
+        <DataEditor
+            {...p}
+            renderers={renderers}
+            headerIcons={allSprites}
+            ref={ref}
+            imageWindowLoader={imageWindowLoader}
+        />
+    );
+};
+
+export const DataEditorAll = React.forwardRef(DataEditorAllImpl);

package/src/docs/00-faq.stories.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { SimpleThemeWrapper } from "../stories/story-utils.js";
+import { DocWrapper, Marked } from "./doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const FAQ: React.VFC = () => {
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# FAQ
+
+### Nothing shows up? It crashes when I edit a cell?
+
+Please read the [Prerequisites section in the docs](https://github.com/glideapps/glide-data-grid/blob/main/packages/core/API.md).
+
+### Does it work with screen readers and other a11y tools?
+
+Yes. Unfortunately none of the primary developers are accessibility users so there are likely flaws in the implementation we are not aware of. Bug reports welcome!
+
+### Does it support my data source?
+
+Yes.
+
+Data Grid is agnostic about the way you load/store/generate/mutate your data. What it requires is that you tell it which columns you have, how many rows, and to give it a function it can call to get the data for a cell in a specific row and column.
+
+### Does it do sorting?
+
+Yes through the [glide-data-grid-source](https://www.npmjs.com/package/@glideapps/glide-data-grid-source) package.
+
+### Does it do search?
+
+Yes, built in! There are examples in the storybook.
+
+### Can it filter?
+
+Nothing built in yet. It is planned for the \`glide-data-grid-source\`.
+
+### Can it do frozen columns?
+
+Yes
+
+### Can I render my own cells?
+
+Yes
+
+`}
+            </Marked>
+        </DocWrapper>
+    );
+};
+(FAQ as any).storyName = "00. FAQ";