@glideappsfinal/glide-data-grid 6.0.9

package/src/internal/growing-entry/growing-entry.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+
+import { GrowingEntryStyle, ShadowBox, InputBox } from "./growing-entry-style.js";
+import { assert } from "../../common/support.js";
+import type { SelectionRange } from "../data-grid/data-grid-types.js";
+
+interface Props
+    extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    readonly placeholder?: string;
+    readonly highlight: boolean;
+    readonly altNewline?: boolean;
+    readonly validatedSelection?: SelectionRange;
+}
+
+let globalInputID = 0;
+
+/** @category Renderers */
+export const GrowingEntry: React.FunctionComponent<Props> = (props: Props) => {
+    const { placeholder, value, onKeyDown, highlight, altNewline, validatedSelection, ...rest } = props;
+    const { onChange, className } = rest;
+
+    const inputRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+    const useText = value ?? "";
+
+    assert(onChange !== undefined, "GrowingEntry must be a controlled input area");
+
+    // 10 million id's aught to be enough for anybody
+    const [inputID] = React.useState(() => "input-box-" + (globalInputID = (globalInputID + 1) % 10_000_000));
+
+    React.useEffect(() => {
+        const ta = inputRef.current;
+        if (ta === null) return;
+
+        if (ta.disabled) return;
+        const length = useText.toString().length;
+        ta.focus();
+        ta.setSelectionRange(highlight ? 0 : length, length);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useLayoutEffect(() => {
+        if (validatedSelection !== undefined) {
+            const range = typeof validatedSelection === "number" ? [validatedSelection, null] : validatedSelection;
+            inputRef.current?.setSelectionRange(range[0], range[1]);
+        }
+    }, [validatedSelection]);
+
+    const onKeyDownInner = React.useCallback<NonNullable<typeof onKeyDown>>(
+        e => {
+            if (e.key === "Enter" && e.shiftKey && altNewline === true) {
+                return;
+            }
+            onKeyDown?.(e);
+        },
+        [altNewline, onKeyDown]
+    );
+
+    return (
+        <GrowingEntryStyle className="gdg-growing-entry">
+            <ShadowBox className={className}>{useText + "\n"}</ShadowBox>
+            <InputBox
+                {...rest}
+                className={(className ?? "") + " gdg-input"}
+                id={inputID}
+                ref={inputRef}
+                onKeyDown={onKeyDownInner}
+                value={useText}
+                placeholder={placeholder}
+                dir="auto"
+            />
+        </GrowingEntryStyle>
+    );
+};

package/src/internal/markdown-div/markdown-div.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { marked } from "marked";
+
+import { MarkdownContainer } from "./private/markdown-container.js";
+
+/** @category Renderers */
+export interface MarkdownDivProps {
+    contents: string;
+    createNode?: (content: string) => DocumentFragment;
+}
+
+/** @category Renderers */
+export default class MarkdownDiv<TProps extends MarkdownDivProps, TState> extends React.PureComponent<TProps, TState> {
+    private targetElement: HTMLElement | null = null;
+
+    private renderMarkdownIntoDiv() {
+        const { targetElement, props } = this;
+        if (targetElement === null) return;
+
+        const { contents, createNode } = props;
+
+        const innerHTML: string = (marked as any)(contents);
+
+        const childRange = document.createRange();
+        childRange.selectNodeContents(targetElement);
+        childRange.deleteContents();
+
+        let newChild: DocumentFragment | undefined = createNode?.(innerHTML);
+        if (newChild === undefined) {
+            const childDoc = document.createElement("template");
+            childDoc.innerHTML = innerHTML;
+            newChild = childDoc.content;
+        }
+        targetElement.append(newChild);
+
+        const tags = targetElement.getElementsByTagName("a");
+        for (const tag of tags) {
+            tag.target = "_blank";
+            tag.rel = "noreferrer noopener";
+        }
+    }
+
+    private containerRefHook = (element: HTMLElement | null) => {
+        this.targetElement = element;
+        this.renderMarkdownIntoDiv();
+    };
+
+    public render() {
+        // Doing this in the ref hook works great when we first render, but never again.
+        // This only works great after the first render, but not in the first render.
+        // Putting the two together makes the full solution.
+        this.renderMarkdownIntoDiv();
+        return <MarkdownContainer ref={this.containerRefHook as any} />;
+    }
+}

package/src/internal/markdown-div/private/markdown-container.tsx

@@ -0,0 +1,19 @@
+import { styled } from "@linaria/react";
+
+export const MarkdownContainer = styled.div`
+    word-break: break-word;
+    -webkit-touch-callout: default;
+    padding-top: 6px;
+
+    > * {
+        margin: 0;
+    }
+
+    & *:last-child {
+        margin-bottom: 0;
+    }
+
+    & p img {
+        width: 100%;
+    }
+`;

package/src/internal/scrolling-data-grid/infinite-scroller.tsx

@@ -0,0 +1,379 @@
+import { styled } from "@linaria/react";
+import type { Rectangle } from "../../index.js";
+import * as React from "react";
+import { useResizeDetector } from "../../common/resize-detector.js";
+import { browserIsSafari } from "../../common/browser-detect.js";
+import { useEventListener } from "../../common/utils.js";
+import useKineticScroll from "./use-kinetic-scroll.js";
+
+interface Props {
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    readonly preventDiagonalScrolling?: boolean;
+    readonly draggable: boolean;
+    readonly paddingRight?: number;
+    readonly paddingBottom?: number;
+    readonly clientHeight: number;
+    readonly scrollWidth: number;
+    readonly scrollHeight: number;
+    readonly initialSize?: readonly [width: number, height: number];
+    readonly rightElementProps?: {
+        readonly sticky?: boolean;
+        readonly fill?: boolean;
+    };
+    readonly rightElement?: React.ReactNode;
+    readonly kineticScrollPerfHack?: boolean;
+    readonly scrollRef?: React.MutableRefObject<HTMLDivElement | null>;
+    readonly update: (region: Rectangle & { paddingRight: number }) => void;
+}
+
+const ScrollRegionStyle = styled.div<{ isSafari: boolean }>`
+    .dvn-scroller {
+        overflow: ${p => (p.isSafari ? "scroll" : "auto")};
+        transform: translate3d(0, 0, 0);
+    }
+
+    .dvn-hidden {
+        visibility: hidden;
+    }
+
+    .dvn-scroll-inner {
+        display: flex;
+        pointer-events: none;
+
+        > * {
+            flex-shrink: 0;
+        }
+
+        .dvn-spacer {
+            flex-grow: 1;
+        }
+
+        .dvn-stack {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .dvn-underlay > * {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    canvas {
+        outline: none;
+
+        * {
+            height: 0;
+        }
+    }
+`;
+
+// Browser's maximum div height limit. Varies a bit by browsers.
+const BROWSER_MAX_DIV_HEIGHT = 33_554_400;
+// Maximum height of a single padder segment to avoid browser performance issues.
+// Padders are invisible div elements that create the scrollable area in the DOM.
+// They trick the browser into showing a scrollbar for the full virtual content height
+// without actually rendering millions of rows. We create multiple smaller padders
+// (max 5M pixels each) instead of one large padder to avoid browser performance issues.
+// The actual grid content is absolutely positioned and rendered on top of these padders
+// based on the current scroll position.
+const MAX_PADDER_SEGMENT_HEIGHT = 5_000_000;
+
+type ScrollLock = [undefined, number] | [number, undefined] | undefined;
+
+function useTouchUpDelayed(delay: number): boolean {
+    const [hasTouches, setHasTouches] = React.useState(false);
+
+    const safeWindow = typeof window === "undefined" ? null : window;
+
+    const cbTimer = React.useRef(0);
+
+    useEventListener(
+        "touchstart",
+        React.useCallback(() => {
+            window.clearTimeout(cbTimer.current);
+            setHasTouches(true);
+        }, []),
+        safeWindow,
+        true,
+        false
+    );
+
+    useEventListener(
+        "touchend",
+        React.useCallback(
+            e => {
+                if (e.touches.length === 0) {
+                    cbTimer.current = window.setTimeout(() => setHasTouches(false), delay);
+                }
+            },
+            [delay]
+        ),
+        safeWindow,
+        true,
+        false
+    );
+
+    return hasTouches;
+}
+
+/**
+ * InfiniteScroller provides virtual scrolling capabilities for the data grid.
+ * It handles the mapping between DOM scroll positions and virtual scroll positions
+ * when the content height exceeds browser limitations.
+ *
+ * Browser Limitations:
+ * - Most browsers limit div heights to ~33.5 million pixels
+ * - With large datasets (e.g., 100M rows × 31px = 3.1B pixels), we exceed this limit
+ * - This component uses an offset-based approach to map the limited DOM scroll range
+ *   to the full virtual scroll range
+ */
+export const InfiniteScroller: React.FC<Props> = p => {
+    const {
+        children,
+        clientHeight,
+        scrollHeight,
+        scrollWidth,
+        update,
+        draggable,
+        className,
+        preventDiagonalScrolling = false,
+        paddingBottom = 0,
+        paddingRight = 0,
+        rightElement,
+        rightElementProps,
+        kineticScrollPerfHack = false,
+        scrollRef,
+        initialSize,
+    } = p;
+    const padders: React.ReactNode[] = [];
+
+    const rightElementSticky = rightElementProps?.sticky ?? false;
+    const rightElementFill = rightElementProps?.fill ?? false;
+
+    // Track the virtual scroll position directly for smooth scrolling
+    const virtualScrollY = React.useRef(0);
+    const lastScrollY = React.useRef(0);
+    const scroller = React.useRef<HTMLDivElement | null>(null);
+
+    const dpr = typeof window === "undefined" ? 1 : window.devicePixelRatio;
+    const lastDpr = React.useRef(dpr);
+
+    // Reset scroll tracking when device pixel ratio changes (e.g., browser zoom)
+    React.useEffect(() => {
+        if (lastDpr.current !== dpr) {
+            virtualScrollY.current = 0;
+            lastScrollY.current = 0;
+            lastDpr.current = dpr;
+            const el = scroller.current;
+            if (el !== null) {
+                onScrollRef.current(el.scrollLeft, el.scrollTop);
+            }
+        }
+    }, [dpr]);
+
+    const lastScrollPosition = React.useRef({
+        scrollLeft: 0,
+        scrollTop: 0,
+        lockDirection: undefined as ScrollLock,
+    });
+
+    const rightWrapRef = React.useRef<HTMLDivElement | null>(null);
+
+    const hasTouches = useTouchUpDelayed(200);
+    const [isIdle, setIsIdle] = React.useState(true);
+    const idleTimer = React.useRef(0);
+
+    React.useLayoutEffect(() => {
+        if (!isIdle || hasTouches || lastScrollPosition.current.lockDirection === undefined) return;
+        const el = scroller.current;
+        if (el === null) return;
+        const [lx, ly] = lastScrollPosition.current.lockDirection;
+        if (lx !== undefined) {
+            el.scrollLeft = lx;
+        } else if (ly !== undefined) {
+            el.scrollTop = ly;
+        }
+        lastScrollPosition.current.lockDirection = undefined;
+    }, [hasTouches, isIdle]);
+
+    const onScroll = React.useCallback(
+        (scrollLeft?: number, scrollTop?: number) => {
+            const el = scroller.current;
+            if (el === null) return;
+
+            scrollTop = scrollTop ?? el.scrollTop;
+            scrollLeft = scrollLeft ?? el.scrollLeft;
+            const lastScrollTop = lastScrollPosition.current.scrollTop;
+            const lastScrollLeft = lastScrollPosition.current.scrollLeft;
+
+            const dx = scrollLeft - lastScrollLeft;
+            const dy = scrollTop - lastScrollTop;
+
+            if (
+                hasTouches &&
+                dx !== 0 &&
+                dy !== 0 &&
+                (Math.abs(dx) > 3 || Math.abs(dy) > 3) &&
+                preventDiagonalScrolling &&
+                lastScrollPosition.current.lockDirection === undefined
+            ) {
+                lastScrollPosition.current.lockDirection =
+                    Math.abs(dx) < Math.abs(dy) ? [lastScrollLeft, undefined] : [undefined, lastScrollTop];
+            }
+
+            const lock = lastScrollPosition.current.lockDirection;
+
+            scrollLeft = lock?.[0] ?? scrollLeft;
+            scrollTop = lock?.[1] ?? scrollTop;
+            lastScrollPosition.current.scrollLeft = scrollLeft;
+            lastScrollPosition.current.scrollTop = scrollTop;
+
+            const cWidth = el.clientWidth;
+            const cHeight = el.clientHeight;
+
+            const newY = scrollTop;
+            const delta = lastScrollY.current - newY;
+            const scrollableHeight = el.scrollHeight - cHeight;
+            lastScrollY.current = newY;
+
+            // Calculate the virtual Y position
+            let virtualY: number;
+
+            // When content height exceeds browser limits, use hybrid approach
+            if (scrollableHeight > 0 && scrollHeight > el.scrollHeight + 5) {
+                // For large jumps (scrollbar interaction) or edge positions,
+                // recalculate position based on percentage
+                if (Math.abs(delta) > 2000 || newY === 0 || newY === scrollableHeight) {
+                    const scrollProgress = Math.max(0, Math.min(1, newY / scrollableHeight));
+                    const virtualScrollableHeight = scrollHeight - cHeight;
+                    virtualY = scrollProgress * virtualScrollableHeight;
+                    // Update our tracked position for subsequent smooth scrolling
+                    virtualScrollY.current = virtualY;
+                } else {
+                    // For smooth scrolling, apply the delta directly to virtual position
+                    // This preserves 1:1 pixel movement for smooth scrolling
+                    virtualScrollY.current -= delta;
+                    virtualY = virtualScrollY.current;
+                }
+            } else {
+                // Direct mapping when within browser limits
+                virtualY = newY;
+                virtualScrollY.current = virtualY;
+            }
+
+            // Ensure virtual Y is within valid bounds
+            virtualY = Math.max(0, Math.min(virtualY, scrollHeight - cHeight));
+            virtualScrollY.current = virtualY; // Keep tracked position in bounds too
+
+            if (lock !== undefined) {
+                window.clearTimeout(idleTimer.current);
+                setIsIdle(false);
+                idleTimer.current = window.setTimeout(() => setIsIdle(true), 200);
+            }
+
+            update({
+                x: scrollLeft,
+                y: virtualY,
+                width: cWidth - paddingRight,
+                height: cHeight - paddingBottom,
+                paddingRight: rightWrapRef.current?.clientWidth ?? 0,
+            });
+        },
+        [paddingBottom, paddingRight, scrollHeight, update, preventDiagonalScrolling, hasTouches]
+    );
+
+    useKineticScroll(kineticScrollPerfHack && browserIsSafari.value, onScroll, scroller);
+
+    const onScrollRef = React.useRef(onScroll);
+    onScrollRef.current = onScroll;
+
+    const lastProps = React.useRef<{ width?: number; height?: number } | undefined>(undefined);
+
+    const didFirstScroll = React.useRef(false);
+    // if this is not a layout effect there will be a flicker when changing the number of freezeColumns
+    // we need to document what this is needed at all.
+    React.useLayoutEffect(() => {
+        if (didFirstScroll.current) onScroll();
+        else didFirstScroll.current = true;
+    }, [onScroll, paddingBottom, paddingRight]);
+
+    const setRefs = React.useCallback(
+        (instance: HTMLDivElement | null) => {
+            scroller.current = instance;
+            if (scrollRef !== undefined) {
+                scrollRef.current = instance;
+            }
+        },
+        [scrollRef]
+    );
+
+    let key = 0;
+    let h = 0;
+
+    // Ensure we don't create padders that exceed browser limits
+    const effectiveScrollHeight = Math.min(scrollHeight, BROWSER_MAX_DIV_HEIGHT);
+
+    padders.push(<div key={key++} style={{ width: scrollWidth, height: 0 }} />);
+    while (h < effectiveScrollHeight) {
+        const toAdd = Math.min(MAX_PADDER_SEGMENT_HEIGHT, effectiveScrollHeight - h);
+        padders.push(<div key={key++} style={{ width: 0, height: toAdd }} />);
+        h += toAdd;
+    }
+
+    const { ref, width, height } = useResizeDetector<HTMLDivElement>(initialSize);
+
+    if (typeof window !== "undefined" && (lastProps.current?.height !== height || lastProps.current?.width !== width)) {
+        window.setTimeout(() => onScrollRef.current(), 0);
+        lastProps.current = { width, height };
+    }
+
+    if ((width ?? 0) === 0 || (height ?? 0) === 0) return <div ref={ref} />;
+
+    return (
+        <div ref={ref}>
+            <ScrollRegionStyle isSafari={browserIsSafari.value}>
+                <div className="dvn-underlay">{children}</div>
+                <div
+                    ref={setRefs}
+                    style={lastProps.current}
+                    draggable={draggable}
+                    onDragStart={e => {
+                        if (!draggable) {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }
+                    }}
+                    className={"dvn-scroller " + (className ?? "")}
+                    onScroll={() => onScroll()}>
+                    <div className={"dvn-scroll-inner" + (rightElement === undefined ? " dvn-hidden" : "")}>
+                        <div className="dvn-stack">{padders}</div>
+                        {rightElement !== undefined && (
+                            <>
+                                {!rightElementFill && <div className="dvn-spacer" />}
+                                <div
+                                    ref={rightWrapRef}
+                                    style={{
+                                        height,
+                                        maxHeight: clientHeight - Math.ceil(dpr % 1),
+                                        position: "sticky",
+                                        top: 0,
+                                        paddingLeft: 1,
+                                        marginBottom: -40,
+                                        marginRight: paddingRight,
+                                        flexGrow: rightElementFill ? 1 : undefined,
+                                        right: rightElementSticky ? (paddingRight ?? 0) : undefined,
+                                        pointerEvents: "auto",
+                                    }}>
+                                    {rightElement}
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </ScrollRegionStyle>
+        </div>
+    );
+};

package/src/internal/scrolling-data-grid/scrolling-data-grid.stories.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+
+import { BuilderThemeWrapper } from "../../stories/story-utils.js";
+import GridScroller from "./scrolling-data-grid.js";
+import { styled } from "@linaria/react";
+import {
+    CompactSelection,
+    type GridCell,
+    GridCellKind,
+    type Rectangle,
+    type Item,
+} from "../data-grid/data-grid-types.js";
+import { getDefaultTheme } from "../../index.js";
+import type { GetCellRendererCallback } from "../../cells/cell-types.js";
+import { AllCellRenderers } from "../../cells/index.js";
+import ImageWindowLoaderImpl from "../../common/image-window-loader.js";
+import { mergeAndRealizeTheme } from "../../common/styles.js";
+
+const InnerContainer = styled.div`
+    width: 100%;
+    height: 100px;
+
+    > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+const getCellRenderer: GetCellRendererCallback = cell => {
+    if (cell.kind === GridCellKind.Custom) return undefined;
+    return AllCellRenderers.find(x => x.kind === cell.kind) as any;
+};
+
+export default {
+    title: "Subcomponents/ScrollingDataGrid",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <div>
+                <BuilderThemeWrapper width={1500} height={1000}>
+                    <InnerContainer>
+                        <Story />
+                    </InnerContainer>
+                </BuilderThemeWrapper>
+            </div>
+        ),
+    ],
+};
+
+export function Simplenotest() {
+    const [x, setX] = React.useState<number>(0);
+    const [y, setY] = React.useState<number>(0);
+    const [translateX, setTx] = React.useState<number | undefined>(0);
+    const [translateY, setTy] = React.useState<number | undefined>(0);
+
+    const onVisibleRegionChanged = React.useCallback((range: Rectangle, tx?: number, ty?: number) => {
+        setX(range.x);
+        setY(range.y);
+        setTx(tx);
+        setTy(ty);
+    }, []);
+
+    const columns = React.useMemo(() => {
+        let j = 0;
+        return ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"].map(t => ({
+            title: t,
+            width: 122 + (j += 50),
+        }));
+    }, []);
+
+    const getCellContent = React.useCallback(
+        ([col, row]: Item): GridCell => ({
+            kind: GridCellKind.Text,
+            displayData: `${col},${row} Testing things that are way too long`,
+            data: `${col},${row} Testing things that are way too long`,
+            allowOverlay: true,
+        }),
+        []
+    );
+
+    return (
+        <GridScroller
+            getCellRenderer={getCellRenderer}
+            onMouseMove={() => undefined}
+            rows={10_000}
+            enableGroups={false}
+            clientSize={[1000, 1000, 0]}
+            resizeIndicator="full"
+            cellXOffset={x}
+            cellYOffset={y}
+            drawHeader={undefined}
+            drawGroupHeader={undefined}
+            experimental={undefined}
+            headerIcons={undefined}
+            isDraggable={undefined}
+            nonGrowWidth={1000}
+            onCanvasBlur={() => undefined}
+            onCanvasFocused={() => undefined}
+            onCellFocused={() => undefined}
+            onContextMenu={() => undefined}
+            onDragEnd={() => undefined}
+            onDragLeave={() => undefined}
+            onDragOverCell={() => undefined}
+            onDragStart={() => undefined}
+            onDrop={() => undefined}
+            onHeaderIndicatorClick={() => undefined}
+            onItemHovered={() => undefined}
+            onKeyDown={() => undefined}
+            onKeyUp={() => undefined}
+            onMouseDown={() => undefined}
+            onMouseUp={() => undefined}
+            canvasRef={undefined}
+            className={undefined}
+            drawCell={undefined}
+            disabledRows={undefined}
+            fillHandle={undefined}
+            fixedShadowX={undefined}
+            fixedShadowY={undefined}
+            getGroupDetails={undefined}
+            getRowThemeOverride={undefined}
+            highlightRegions={undefined}
+            imageWindowLoader={new ImageWindowLoaderImpl()}
+            onHeaderMenuClick={undefined}
+            prelightCells={undefined}
+            drawFocusRing={true}
+            initialSize={undefined}
+            overscrollX={undefined}
+            overscrollY={undefined}
+            preventDiagonalScrolling={undefined}
+            rightElement={undefined}
+            rightElementProps={undefined}
+            scrollRef={undefined}
+            minColumnWidth={50}
+            isFocused={true}
+            theme={mergeAndRealizeTheme(getDefaultTheme())}
+            isFilling={false}
+            maxColumnWidth={500}
+            accessibilityHeight={50}
+            translateX={translateX}
+            translateY={translateY}
+            lockColumns={0}
+            selection={{
+                current: undefined,
+                rows: CompactSelection.empty(),
+                columns: CompactSelection.empty(),
+            }}
+            firstColAccessible={true}
+            groupHeaderHeight={34}
+            headerHeight={44}
+            freezeTrailingRows={0}
+            hasAppendRow={false}
+            rowHeight={34}
+            onVisibleRegionChanged={onVisibleRegionChanged}
+            columns={columns}
+            getCellContent={getCellContent}
+            freezeColumns={0}
+            verticalBorder={() => true}
+            smoothScrollX={true}
+            smoothScrollY={true}
+            setScrollDir={() => undefined}
+        />
+    );
+}