@glideappsfinal/glide-data-grid 6.0.9

package/src/common/resize-detector.ts

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { useLayoutEffect, useState, useRef, type MutableRefObject } from "react";
+interface ReactResizeDetectorDimensions {
+    height?: number;
+    width?: number;
+}
+
+export function useResizeDetector<T extends HTMLElement = HTMLElement>(
+    initialSize?: readonly [width: number, height: number]
+): UseResizeDetectorReturn<T> {
+    const ref = useRef<T>(null);
+
+    const [size, setSize] = useState<ReactResizeDetectorDimensions>({
+        width: initialSize?.[0],
+        height: initialSize?.[1],
+    });
+
+    useLayoutEffect(() => {
+        const resizeCallback: ResizeObserverCallback = entries => {
+            for (const entry of entries) {
+                const { width, height } = (entry && entry.contentRect) || {};
+                setSize(cv => (cv.width === width && cv.height === height ? cv : { width, height }));
+            }
+        };
+
+        const resizeObserver = new window.ResizeObserver(resizeCallback);
+
+        if (ref.current) {
+            resizeObserver.observe(ref.current, undefined);
+        }
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref.current]);
+
+    return { ref, ...size };
+}
+
+export interface UseResizeDetectorReturn<T> extends ReactResizeDetectorDimensions {
+    ref: MutableRefObject<T | null>;
+}

package/src/common/styles.ts

@@ -0,0 +1,214 @@
+import React from "react";
+import { blend } from "../internal/data-grid/color-parser.js";
+
+// theme variable precidence
+
+/** @category Theme */
+export function makeCSSStyle(theme: Theme): Record<string, string> {
+    return {
+        "--gdg-accent-color": theme.accentColor,
+        "--gdg-accent-fg": theme.accentFg,
+        "--gdg-accent-light": theme.accentLight,
+        "--gdg-text-dark": theme.textDark,
+        "--gdg-text-medium": theme.textMedium,
+        "--gdg-text-light": theme.textLight,
+        "--gdg-text-bubble": theme.textBubble,
+        "--gdg-bg-icon-header": theme.bgIconHeader,
+        "--gdg-fg-icon-header": theme.fgIconHeader,
+        "--gdg-text-header": theme.textHeader,
+        "--gdg-text-group-header": theme.textGroupHeader ?? theme.textHeader,
+        "--gdg-bg-group-header": theme.bgGroupHeader ?? theme.bgHeader,
+        "--gdg-bg-group-header-hovered": theme.bgGroupHeaderHovered ?? theme.bgHeaderHovered,
+        "--gdg-text-header-selected": theme.textHeaderSelected,
+        "--gdg-bg-cell": theme.bgCell,
+        "--gdg-bg-cell-medium": theme.bgCellMedium,
+        "--gdg-bg-header": theme.bgHeader,
+        "--gdg-bg-header-has-focus": theme.bgHeaderHasFocus,
+        "--gdg-bg-header-hovered": theme.bgHeaderHovered,
+        "--gdg-bg-bubble": theme.bgBubble,
+        "--gdg-bg-bubble-selected": theme.bgBubbleSelected,
+        "--gdg-bubble-height": `${theme.bubbleHeight}px`,
+        "--gdg-bubble-padding": `${theme.bubblePadding}px`,
+        "--gdg-bubble-margin": `${theme.bubbleMargin}px`,
+        "--gdg-bg-search-result": theme.bgSearchResult,
+        "--gdg-border-color": theme.borderColor,
+        "--gdg-horizontal-border-color": theme.horizontalBorderColor ?? theme.borderColor,
+        "--gdg-drilldown-border": theme.drilldownBorder,
+        "--gdg-link-color": theme.linkColor,
+        "--gdg-cell-horizontal-padding": `${theme.cellHorizontalPadding}px`,
+        "--gdg-cell-vertical-padding": `${theme.cellVerticalPadding}px`,
+        "--gdg-header-font-style": theme.headerFontStyle,
+        "--gdg-base-font-style": theme.baseFontStyle,
+        "--gdg-marker-font-style": theme.markerFontStyle,
+        "--gdg-font-family": theme.fontFamily,
+        "--gdg-editor-font-size": theme.editorFontSize,
+        "--gdg-checkbox-max-size": `${theme.checkboxMaxSize}px`,
+        ...(theme.resizeIndicatorColor === undefined
+            ? {}
+            : { "--gdg-resize-indicator-color": theme.resizeIndicatorColor }),
+        ...(theme.headerBottomBorderColor === undefined
+            ? {}
+            : { "--gdg-header-bottom-border-color": theme.headerBottomBorderColor }),
+        ...(theme.roundingRadius === undefined ? {} : { "--gdg-rounding-radius": `${theme.roundingRadius}px` }),
+    };
+}
+
+/** @category Theme */
+export interface Theme {
+    accentColor: string;
+    accentFg: string;
+    accentLight: string;
+    textDark: string;
+    textMedium: string;
+    textLight: string;
+    textBubble: string;
+    bgIconHeader: string;
+    fgIconHeader: string;
+    textHeader: string;
+    textGroupHeader?: string;
+    bgGroupHeader?: string;
+    bgGroupHeaderHovered?: string;
+    textHeaderSelected: string;
+    bgCell: string;
+    bgCellMedium: string;
+    bgHeader: string;
+    bgHeaderHasFocus: string;
+    bgHeaderHovered: string;
+    bgBubble: string;
+    bgBubbleSelected: string;
+    bubbleHeight: number;
+    bubblePadding: number;
+    bubbleMargin: number;
+    bgSearchResult: string;
+    borderColor: string;
+    drilldownBorder: string;
+    linkColor: string;
+    cellHorizontalPadding: number;
+    cellVerticalPadding: number;
+    headerFontStyle: string;
+    headerIconSize: number;
+    baseFontStyle: string;
+    markerFontStyle: string;
+    fontFamily: string;
+    editorFontSize: string;
+    lineHeight: number;
+    checkboxMaxSize: number;
+
+    resizeIndicatorColor?: string;
+    horizontalBorderColor?: string;
+    headerBottomBorderColor?: string;
+    roundingRadius?: number;
+}
+
+const dataEditorBaseTheme: Theme = {
+    accentColor: "#4F5DFF",
+    accentFg: "#FFFFFF",
+    accentLight: "rgba(62, 116, 253, 0.1)",
+
+    textDark: "#313139",
+    textMedium: "#737383",
+    textLight: "#B2B2C0",
+    textBubble: "#313139",
+
+    bgIconHeader: "#737383",
+    fgIconHeader: "#FFFFFF",
+    textHeader: "#313139",
+    textGroupHeader: "#313139BB",
+    textHeaderSelected: "#FFFFFF",
+
+    bgCell: "#FFFFFF",
+    bgCellMedium: "#FAFAFB",
+    bgHeader: "#F7F7F8",
+    bgHeaderHasFocus: "#E9E9EB",
+    bgHeaderHovered: "#EFEFF1",
+
+    bgBubble: "#EDEDF3",
+    bgBubbleSelected: "#FFFFFF",
+    bubbleHeight: 20,
+    bubblePadding: 6,
+    bubbleMargin: 4,
+
+    bgSearchResult: "#fff9e3",
+
+    borderColor: "rgba(115, 116, 131, 0.16)",
+    drilldownBorder: "rgba(0, 0, 0, 0)",
+
+    linkColor: "#353fb5",
+
+    cellHorizontalPadding: 8,
+    cellVerticalPadding: 3,
+
+    headerIconSize: 18,
+
+    headerFontStyle: "600 13px",
+    baseFontStyle: "13px",
+    markerFontStyle: "9px",
+    fontFamily:
+        "Inter, Roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, noto, arial, sans-serif",
+    editorFontSize: "13px",
+    lineHeight: 1.4, //unitless scaler depends on your font
+    checkboxMaxSize: 18,
+};
+
+export interface FullTheme extends Theme {
+    headerFontFull: string;
+    baseFontFull: string;
+    markerFontFull: string;
+}
+
+/** @category Theme */
+export function getDataEditorTheme(): Theme {
+    return dataEditorBaseTheme;
+}
+
+/** @category Theme */
+export const ThemeContext = React.createContext<Theme>(dataEditorBaseTheme);
+/** @category Hooks */
+export function useTheme(): Theme {
+    return React.useContext(ThemeContext);
+}
+
+export function mergeAndRealizeTheme(theme: Theme, ...overlays: Partial<Theme | undefined>[]): FullTheme {
+    const merged: any = { ...theme };
+
+    for (const overlay of overlays) {
+        if (overlay !== undefined) {
+            for (const key in overlay) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (overlay.hasOwnProperty(key)) {
+                    if (key === "bgCell") {
+                        merged[key] = blend(overlay[key] as string, merged[key]);
+                    } else {
+                        merged[key] = (overlay as any)[key];
+                    }
+                }
+            }
+        }
+    }
+
+    if (
+        merged.headerFontFull === undefined ||
+        theme.fontFamily !== merged.fontFamily ||
+        theme.headerFontStyle !== merged.headerFontStyle
+    ) {
+        merged.headerFontFull = `${merged.headerFontStyle} ${merged.fontFamily}`;
+    }
+
+    if (
+        merged.baseFontFull === undefined ||
+        theme.fontFamily !== merged.fontFamily ||
+        theme.baseFontStyle !== merged.baseFontStyle
+    ) {
+        merged.baseFontFull = `${merged.baseFontStyle} ${merged.fontFamily}`;
+    }
+
+    if (
+        merged.markerFontFull === undefined ||
+        theme.fontFamily !== merged.fontFamily ||
+        theme.markerFontStyle !== merged.markerFontStyle
+    ) {
+        merged.markerFontFull = `${merged.markerFontStyle} ${merged.fontFamily}`;
+    }
+
+    return merged;
+}

package/src/common/support.ts

@@ -0,0 +1,67 @@
+export function proveType<T>(_val: T) {
+    // do nothing, just prove the compiler thinks the types match
+}
+
+function panic(message: string = "This should not happen"): never {
+    throw new Error(message);
+}
+
+export function assert(fact: boolean, message: string = "Assertion failed"): asserts fact {
+    if (fact) return;
+    return panic(message);
+}
+
+export function assertNever(_never: never, msg?: string): never {
+    return panic(msg ?? "Hell froze over");
+}
+export function maybe<T>(fn: () => T, defaultValue: T) {
+    try {
+        return fn();
+    } catch {
+        return defaultValue;
+    }
+}
+
+// The following code is licensed under the MIT license to Luke Edwards
+// Original license and code can be found here: https://github.com/lukeed/dequal/blob/master/license
+// I have merely "ported" it to be TS (any any any) and directly included it for convenience.
+const has = Object.prototype.hasOwnProperty;
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function deepEqual(foo: any, bar: any): boolean {
+    let ctor: any, len: number;
+    if (foo === bar) return true;
+
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+        if (ctor === Date) return foo.getTime() === bar.getTime();
+        if (ctor === RegExp) return foo.toString() === bar.toString();
+
+        if (ctor === Array) {
+            if ((len = foo.length) === bar.length) {
+                while (len-- && deepEqual(foo[len], bar[len]));
+            }
+            return len === -1;
+        }
+
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (!ctor || typeof foo === "object") {
+            len = 0;
+            // eslint-disable-next-line guard-for-in
+            for (ctor in foo) {
+                if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+                if (!(ctor in bar) || !deepEqual(foo[ctor], bar[ctor])) return false;
+            }
+            return Object.keys(bar).length === len;
+        }
+    }
+
+    return foo !== foo && bar !== bar;
+}
+
+/**
+ * This is a type that takes a type and makes all of its properties required.
+ * This is useful for forcing a an object to have all properties defined from the get go, which helps V8 optimize it.
+ */
+export type FullyDefined<T> = {
+    [K in keyof Required<T>]: T[K];
+};

package/src/common/utils.tsx

@@ -0,0 +1,284 @@
+import * as React from "react";
+import debounce from "lodash/debounce.js";
+import { deepEqual } from "./support.js";
+
+export function useEventListener<K extends keyof HTMLElementEventMap>(
+    eventName: K,
+    handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    element: HTMLElement | Window | Document | null,
+    passive: boolean,
+    capture = false
+) {
+    // Create a ref that stores handler
+    const savedHandler = React.useRef<(this: HTMLElement, ev: HTMLElementEventMap[K]) => any | undefined>(undefined);
+
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    savedHandler.current = handler;
+    React.useEffect(
+        () => {
+            // Make sure element supports addEventListener
+            if (element === null || element.addEventListener === undefined) return;
+            const el = element as HTMLElement;
+
+            // Create event listener that calls handler function stored in ref
+            const eventListener = (event: HTMLElementEventMap[K]) => {
+                savedHandler.current?.call(el, event);
+            };
+
+            el.addEventListener(eventName, eventListener, { passive, capture });
+
+            // Remove event listener on cleanup
+            return () => {
+                el.removeEventListener(eventName, eventListener, { capture });
+            };
+        },
+        [eventName, element, passive, capture] // Re-run if eventName or element changes
+    );
+}
+
+export function whenDefined<T>(obj: any, result: T) {
+    return obj === undefined ? undefined : result;
+}
+
+const PI = Math.PI;
+export function degreesToRadians(degrees: number) {
+    return (degrees * PI) / 180;
+}
+
+export const getSquareBB = (posX: number, posY: number, squareSideLength: number) => ({
+    x1: posX - squareSideLength / 2,
+    y1: posY - squareSideLength / 2,
+    x2: posX + squareSideLength / 2,
+    y2: posY + squareSideLength / 2,
+});
+
+export const getSquareXPosFromAlign = (
+    alignment: "left" | "center" | "right",
+    containerX: number,
+    containerWidth: number,
+    horizontalPadding: number,
+    squareWidth: number
+) => {
+    switch (alignment) {
+        case "left":
+            return Math.floor(containerX) + horizontalPadding + squareWidth / 2;
+        case "center":
+            return Math.floor(containerX + containerWidth / 2);
+        case "right":
+            return Math.floor(containerX + containerWidth) - horizontalPadding - squareWidth / 2;
+    }
+};
+export const getSquareWidth = (maxSize: number, containerHeight: number, verticalPadding: number) =>
+    Math.min(maxSize, containerHeight - verticalPadding * 2);
+
+type BoundingBox = { x1: number; y1: number; x2: number; y2: number };
+export const pointIsWithinBB = (x: number, y: number, bb: BoundingBox) =>
+    bb.x1 <= x && x <= bb.x2 && bb.y1 <= y && y <= bb.y2;
+
+/**
+ * The input provided to a sprite function.
+ *
+ * @category Columns
+ */
+export interface SpriteProps {
+    fgColor: string;
+    bgColor: string;
+}
+
+export const EditPencil: React.FunctionComponent<Partial<SpriteProps>> = (props: Partial<SpriteProps>) => {
+    const fg = props.fgColor ?? "currentColor";
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M12.7073 7.05029C7.87391 11.8837 10.4544 9.30322 6.03024 13.7273C5.77392 13.9836 5.58981 14.3071 5.50189 14.6587L4.52521 18.5655C4.38789 19.1148 4.88543 19.6123 5.43472 19.475L9.34146 18.4983C9.69313 18.4104 10.0143 18.2286 10.2706 17.9722L16.9499 11.2929"
+                stroke={fg}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+                vectorEffect="non-scaling-stroke"
+            />
+            <path
+                d="M20.4854 4.92901L19.0712 3.5148C18.2901 2.73375 17.0238 2.73375 16.2428 3.5148L14.475 5.28257C15.5326 7.71912 16.4736 8.6278 18.7176 9.52521L20.4854 7.75744C21.2665 6.97639 21.2665 5.71006 20.4854 4.92901Z"
+                stroke={fg}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+                vectorEffect="non-scaling-stroke"
+            />
+        </svg>
+    );
+};
+
+export const Checkmark: React.FunctionComponent<Partial<SpriteProps>> = (props: Partial<SpriteProps>) => {
+    const fg = props.fgColor ?? "currentColor";
+
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M19 6L10.3802 17L5.34071 11.8758"
+                vectorEffect="non-scaling-stroke"
+                stroke={fg}
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export function useDebouncedMemo<T>(factory: () => T, deps: React.DependencyList | undefined, time: number): T {
+    const [state, setState] = React.useState(factory);
+
+    const mountedRef = React.useRef(true);
+    React.useEffect(
+        () => () => {
+            mountedRef.current = false;
+        },
+        []
+    );
+
+    const debouncedSetState = React.useRef<typeof setState>(
+        debounce(x => {
+            if (mountedRef.current) {
+                setState(x);
+            }
+        }, time)
+    );
+
+    React.useLayoutEffect(() => {
+        if (mountedRef.current) {
+            debouncedSetState.current(() => factory());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+
+    return state;
+}
+
+// Shamelessly inline direction to avoid conflicts with 1.0 and 2.0.
+const rtlRange = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
+const ltrRange =
+    "A-Za-z\u00C0-\u00D6\u00D8-\u00F6" +
+    "\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C" +
+    "\uFE00-\uFE6F\uFEFD-\uFFFF";
+
+/* eslint-disable no-misleading-character-class */
+const rtl = new RegExp("^[^" + ltrRange + "]*[" + rtlRange + "]");
+/* eslint-enable no-misleading-character-class */
+
+export function direction(value: string): "rtl" | "not-rtl" {
+    return rtl.test(value) ? "rtl" : "not-rtl";
+}
+
+let scrollbarWidthCache: number | undefined = undefined;
+export function getScrollBarWidth(): number {
+    if (typeof document === "undefined") return 0;
+    if (scrollbarWidthCache !== undefined) return scrollbarWidthCache;
+    const inner = document.createElement("p");
+    inner.style.width = "100%";
+    inner.style.height = "200px";
+
+    const outer = document.createElement("div");
+    outer.id = "testScrollbar";
+
+    outer.style.position = "absolute";
+    outer.style.top = "0px";
+    outer.style.left = "0px";
+    outer.style.visibility = "hidden";
+    outer.style.width = "200px";
+    outer.style.height = "150px";
+    outer.style.overflow = "hidden";
+    outer.append(inner);
+
+    document.body.append(outer);
+    const w1 = inner.offsetWidth;
+    outer.style.overflow = "scroll";
+    let w2 = inner.offsetWidth;
+    if (w1 === w2) {
+        w2 = outer.clientWidth;
+    }
+
+    outer.remove();
+
+    scrollbarWidthCache = w1 - w2;
+    return scrollbarWidthCache;
+}
+
+// Dear future reader,
+// This dumb hook is to make sure if the inputState changes, that effectively behaves like an instant "setState" call.
+// This is useful in a wide variety of situations. I'm too dumb to know if this is a good idea or a really dumb one.
+// I can't tell. It's like poes law but for code.
+//
+// I'm sorry.
+const empty = Symbol();
+export function useStateWithReactiveInput<T>(inputState: T): [T, React.Dispatch<React.SetStateAction<T>>, () => void] {
+    // When [0] is not empty we will return it, [1] is always the last value we saw
+    const inputStateRef = React.useRef<[T | typeof empty, T]>([empty, inputState]);
+    if (inputStateRef.current[1] !== inputState) {
+        // it changed, we must use thee!
+        inputStateRef.current[0] = inputState;
+    }
+    inputStateRef.current[1] = inputState;
+
+    const [state, setState] = React.useState(inputState);
+    // crimes against humanity here
+    const [, forceRender] = React.useState<{} | undefined>();
+    const setStateOuter = React.useCallback<typeof setState>(nv => {
+        // this takes care of the case where the inputState was set, then setState gets called again but back to what
+        // the state was before the inputState changed. Since the useState effect wont trigger a render in this case
+        // we need to be very naughty and force it to see the change. Technically this may not be needed some chunk of
+        // the time (in fact most of it) but checking for it is likely to be more expensive than just over-doing it
+        const s = inputStateRef.current[0];
+        if (s !== empty) {
+            nv = typeof nv === "function" ? (nv as (pv: T) => T)(s) : nv;
+            if (nv === s) return; // they are setting it to what the inputState is anyway so we can just do nothing
+        }
+        if (s !== empty) forceRender({});
+        setState(pv => {
+            if (typeof nv === "function") {
+                return (nv as (pv: T) => T)(s === empty ? pv : s);
+            }
+            return nv;
+        });
+        inputStateRef.current[0] = empty;
+    }, []);
+
+    const onEmpty = React.useCallback(() => {
+        inputStateRef.current[0] = empty;
+        forceRender({});
+    }, []);
+
+    return [inputStateRef.current[0] === empty ? state : inputStateRef.current[0], setStateOuter, onEmpty];
+}
+
+export function makeAccessibilityStringForArray(arr: readonly string[]): string {
+    // this is basically just .join(", ") but checks to make sure it is not going to allocate
+    // a string that is so large it might crash the browser
+    if (arr.length === 0) {
+        return "";
+    }
+
+    let index = 0;
+    let count = 0;
+    for (const str of arr) {
+        count += str.length;
+        if (count > 10_000) break;
+        index++;
+    }
+    return arr.slice(0, index).join(", ");
+}
+
+export function useDeepMemo<T>(value: T): T {
+    const ref = React.useRef<T>(value);
+
+    if (!deepEqual(value, ref.current)) {
+        ref.current = value;
+    }
+
+    return ref.current;
+}