@glideappsfinal/glide-data-grid 6.0.9

package/src/internal/data-grid/render/draw-edit-hover-indicator.ts

@@ -0,0 +1,61 @@
+import type { FullTheme } from "../../../common/styles.js";
+import type { Rectangle, HoverEffectTheme } from "../../../index.js";
+import { roundedRect, measureTextCached } from "./data-grid-lib.js";
+import { withAlpha } from "../color-parser.js";
+
+export function drawEditHoverIndicator(
+    ctx: CanvasRenderingContext2D,
+    theme: FullTheme,
+    effectTheme: HoverEffectTheme | undefined,
+    displayData: string,
+    rect: Rectangle,
+    hoverAmount: number,
+    overrideCursor: ((cursor: React.CSSProperties["cursor"] | undefined) => void) | undefined
+) {
+    ctx.textBaseline = "alphabetic";
+
+    const effectRect = getHoverEffectRect(ctx, rect, displayData, theme, effectTheme?.fullSize ?? false);
+
+    ctx.beginPath();
+    roundedRect(ctx, effectRect.x, effectRect.y, effectRect.width, effectRect.height, theme.roundingRadius ?? 4);
+    ctx.globalAlpha = hoverAmount;
+    ctx.fillStyle = effectTheme?.bgColor ?? withAlpha(theme.textDark, 0.1);
+    ctx.fill();
+
+    // restore
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = theme.textDark;
+    ctx.textBaseline = "middle";
+
+    overrideCursor?.("text");
+}
+
+function getHoverEffectRect(
+    ctx: CanvasRenderingContext2D,
+    cellRect: Rectangle,
+    displayData: string,
+    theme: FullTheme,
+    fullSize: boolean
+): Rectangle {
+    const padX = theme.cellHorizontalPadding;
+    const padY = theme.cellVerticalPadding;
+
+    if (fullSize) {
+        return {
+            x: cellRect.x + padX / 2,
+            y: cellRect.y + padY / 2 + 1,
+            width: cellRect.width - padX,
+            height: cellRect.height - padY - 1,
+        };
+    }
+
+    const m = measureTextCached(displayData, ctx, theme.baseFontFull, "alphabetic");
+    const maxH = cellRect.height - padY;
+    const h = Math.min(maxH, m.actualBoundingBoxAscent * 2.5);
+    return {
+        x: cellRect.x + padX / 2,
+        y: cellRect.y + (cellRect.height - h) / 2 + 1,
+        width: m.width + padX * 3,
+        height: h - 1,
+    };
+}

package/src/internal/data-grid/render/draw-grid-arg.ts

@@ -0,0 +1,85 @@
+import type { GetCellRendererCallback } from "../../../cells/cell-types.js";
+import type { RenderStateProvider } from "../../../common/render-state-provider.js";
+import type { FullTheme } from "../../../common/styles.js";
+import type { HoverValues } from "../animation-manager.js";
+import type { MappedGridColumn } from "./data-grid-lib.js";
+import type { BlitData } from "./data-grid-render.blit.js";
+import type { SpriteManager } from "../data-grid-sprites.js";
+import type {
+    CompactSelection,
+    GridSelection,
+    Item,
+    InnerGridCell,
+    DrawHeaderCallback,
+    DrawGroupHeaderCallback,
+    CellList,
+    DrawCellCallback,
+    FillHandle,
+} from "../data-grid-types.js";
+import type { CellSet } from "../cell-set.js";
+import type { EnqueueCallback } from "../use-animation-queue.js";
+import type { ImageWindowLoader } from "../image-window-loader-interface.js";
+import type { GroupDetailsCallback, GetRowThemeCallback, Highlight } from "./data-grid-render.cells.js";
+
+export type HoverInfo = readonly [Item, readonly [number, number]];
+
+export interface DragAndDropState {
+    src: number;
+    dest: number;
+}
+
+export interface DrawGridArg {
+    readonly canvasCtx: CanvasRenderingContext2D;
+    readonly headerCanvasCtx: CanvasRenderingContext2D;
+    readonly bufferACtx: CanvasRenderingContext2D;
+    readonly bufferBCtx: CanvasRenderingContext2D;
+    readonly width: number;
+    readonly height: number;
+    readonly cellXOffset: number;
+    readonly cellYOffset: number;
+    readonly translateX: number;
+    readonly translateY: number;
+    readonly mappedColumns: readonly MappedGridColumn[];
+    readonly enableGroups: boolean;
+    readonly freezeColumns: number;
+    readonly dragAndDropState: DragAndDropState | undefined;
+    readonly theme: FullTheme;
+    readonly headerHeight: number;
+    readonly groupHeaderHeight: number | number[];
+    readonly disabledRows: CompactSelection;
+    readonly rowHeight: number | ((index: number) => number);
+    readonly verticalBorder: (col: number) => boolean;
+    readonly isResizing: boolean;
+    readonly resizeCol: number | undefined;
+    readonly isFocused: boolean;
+    readonly drawFocus: boolean;
+    readonly selection: GridSelection;
+    readonly fillHandle: FillHandle;
+    readonly freezeTrailingRows: number;
+    readonly hasAppendRow: boolean;
+    readonly hyperWrapping: boolean;
+    readonly rows: number;
+    readonly getCellContent: (cell: Item) => InnerGridCell;
+    readonly overrideCursor: (cursor: React.CSSProperties["cursor"]) => void;
+    readonly getGroupDetails: GroupDetailsCallback;
+    readonly getRowThemeOverride: GetRowThemeCallback | undefined;
+    readonly drawHeaderCallback: DrawHeaderCallback | undefined;
+    readonly drawGroupHeaderCallback: DrawGroupHeaderCallback | undefined;
+    readonly drawCellCallback: DrawCellCallback | undefined;
+    readonly prelightCells: CellList | undefined;
+    readonly highlightRegions: readonly Highlight[] | undefined;
+    readonly imageLoader: ImageWindowLoader;
+    readonly lastBlitData: React.MutableRefObject<BlitData | undefined>;
+    readonly damage: CellSet | undefined;
+    readonly hoverValues: HoverValues;
+    readonly hoverInfo: HoverInfo | undefined;
+    readonly spriteManager: SpriteManager;
+    readonly maxScaleFactor: number;
+    readonly touchMode: boolean;
+    readonly renderStrategy: "single-buffer" | "double-buffer" | "direct";
+    readonly enqueue: EnqueueCallback;
+    readonly renderStateProvider: RenderStateProvider;
+    readonly getCellRenderer: GetCellRendererCallback;
+    readonly minimumCellWidth: number;
+    readonly resizeIndicator: "full" | "header" | "none";
+}

package/src/internal/data-grid/sprites.ts

@@ -0,0 +1,321 @@
+import type { SpriteProps } from "../../common/utils.js";
+
+const iconHead = `<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">`;
+const headerRowID = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+
+    return `
+    ${iconHead}<rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/><path d="M15.75 4h-1.5a.25.25 0 0 0-.177.074L9.308 8.838a3.75 3.75 0 1 0 1.854 1.854l1.155-1.157.967.322a.5.5 0 0 0 .65-.55l-.18-1.208.363-.363.727.331a.5.5 0 0 0 .69-.59l-.254-.904.647-.647A.25.25 0 0 0 16 5.75v-1.5a.25.25 0 0 0-.25-.25zM7.5 13.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" fill="${fg}"/></svg>`;
+};
+
+const headerCode = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}<rect x="2" y="2" width="16" height="16" rx="4" fill="${bg}"/><path d="m12.223 13.314 3.052-2.826a.65.65 0 0 0 0-.984l-3.052-2.822c-.27-.25-.634-.242-.865.022-.232.263-.206.636.056.882l2.601 2.41-2.601 2.41c-.262.245-.288.619-.056.882.231.263.595.277.865.026Zm-4.444.005c.266.25.634.241.866-.027.231-.263.206-.636-.06-.882L5.983 10l2.602-2.405c.266-.25.291-.62.06-.887-.232-.263-.596-.272-.866-.022L4.723 9.51a.653.653 0 0 0 0 .983l3.056 2.827Z" fill="${fg}"/></svg>`;
+};
+
+const headerNumber = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2z" fill="${bg}"/>
+    <path d="M6.52 12.78H5.51V8.74l-1.33.47v-.87l2.29-.83h.05v5.27zm5.2 0H8.15v-.69l1.7-1.83a6.38 6.38 0 0 0 .34-.4c.09-.11.16-.22.22-.32s.1-.19.12-.27a.9.9 0 0 0 0-.56.63.63 0 0 0-.15-.23.58.58 0 0 0-.22-.15.75.75 0 0 0-.29-.05c-.27 0-.48.08-.62.23a.95.95 0 0 0-.2.65H8.03c0-.24.04-.46.13-.67a1.67 1.67 0 0 1 .97-.91c.23-.1.49-.14.77-.14.26 0 .5.04.7.11.21.08.38.18.52.32.14.13.25.3.32.48a1.74 1.74 0 0 1 .03 1.13 2.05 2.05 0 0 1-.24.47 4.16 4.16 0 0 1-.35.47l-.47.5-1 1.05h2.32v.8zm1.8-3.08h.55c.28 0 .48-.06.61-.2a.76.76 0 0 0 .2-.55.8.8 0 0 0-.05-.28.56.56 0 0 0-.13-.22.6.6 0 0 0-.23-.15.93.93 0 0 0-.32-.05.92.92 0 0 0-.29.05.72.72 0 0 0-.23.12.57.57 0 0 0-.21.46H12.4a1.3 1.3 0 0 1 .5-1.04c.15-.13.33-.23.54-.3a2.48 2.48 0 0 1 1.4 0c.2.06.4.15.55.28.15.13.27.28.36.47.08.19.13.4.13.65a1.15 1.15 0 0 1-.2.65 1.36 1.36 0 0 1-.58.49c.15.05.28.12.38.2a1.14 1.14 0 0 1 .43.62c.03.13.05.26.05.4 0 .25-.05.47-.14.66a1.42 1.42 0 0 1-.4.49c-.16.13-.35.23-.58.3a2.51 2.51 0 0 1-.73.1c-.22 0-.44-.03-.65-.09a1.8 1.8 0 0 1-.57-.28 1.43 1.43 0 0 1-.4-.47 1.41 1.41 0 0 1-.15-.66h1a.66.66 0 0 0 .22.5.87.87 0 0 0 .58.2c.25 0 .45-.07.6-.2a.71.71 0 0 0 .21-.56.97.97 0 0 0-.06-.36.61.61 0 0 0-.18-.25.74.74 0 0 0-.28-.15 1.33 1.33 0 0 0-.37-.04h-.55V9.7z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerString = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+  <path d="M8.182 12.4h3.636l.655 1.6H14l-3.454-8H9.455L6 14h1.527l.655-1.6zM10 7.44l1.36 3.651H8.64L10 7.441z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerBoolean = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+    <path
+        d="M16.2222 2H3.77778C2.8 2 2 2.8 2 3.77778V16.2222C2 17.2 2.8 18 3.77778 18H16.2222C17.2 18 17.9911 17.2 17.9911 16.2222L18 3.77778C18 2.8 17.2 2 16.2222 2Z"
+        fill="${bg}"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.66667 6.66669C5.73368 6.66669 4.16667 8.15907 4.16667 10C4.16667 11.841 5.73368 13.3334 7.66667 13.3334H12.3333C14.2663 13.3334 15.8333 11.841 15.8333 10C15.8333 8.15907 14.2663 6.66669 12.3333 6.66669H7.66667ZM12.5 12.5C13.8807 12.5 15 11.3807 15 10C15 8.61931 13.8807 7.50002 12.5 7.50002C11.1193 7.50002 10 8.61931 10 10C10 11.3807 11.1193 12.5 12.5 12.5Z"
+        fill="${fg}"
+    />
+</svg>`;
+};
+
+const headerUri = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+<path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.29 4.947a3.368 3.368 0 014.723.04 3.375 3.375 0 01.041 4.729l-.009.009-1.596 1.597a3.367 3.367 0 01-5.081-.364.71.71 0 011.136-.85 1.95 1.95 0 002.942.21l1.591-1.593a1.954 1.954 0 00-.027-2.733 1.95 1.95 0 00-2.732-.027l-.91.907a.709.709 0 11-1.001-1.007l.915-.911.007-.007z" fill="${fg}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55 8.678a3.368 3.368 0 015.082.364.71.71 0 01-1.136.85 1.95 1.95 0 00-2.942-.21l-1.591 1.593a1.954 1.954 0 00.027 2.733 1.95 1.95 0 002.73.028l.906-.906a.709.709 0 111.003 1.004l-.91.91-.008.01a3.368 3.368 0 01-4.724-.042 3.375 3.375 0 01-.041-4.728l.009-.009L6.55 8.678z" fill="${fg}"/>
+</svg>
+  `;
+};
+
+const renameIcon = (props: SpriteProps) => {
+    const bg = props.bgColor;
+    return `${iconHead}
+    <path stroke="${bg}" stroke-width="2" d="M12 3v14"/>
+    <path stroke="${bg}" stroke-width="2" stroke-linecap="round" d="M10 4h4m-4 12h4"/>
+    <path d="M11 14h4a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-4v2h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4v2ZM9.5 8H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h4.5v2H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h4.5v2Z" fill="${bg}"/>
+  </svg>
+`;
+};
+
+const headerAudioUri = headerUri;
+
+const headerVideoUri = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 13.138a.5.5 0 00.748.434l5.492-3.138a.5.5 0 000-.868L7.748 6.427A.5.5 0 007 6.862v6.276z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerEmoji = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <path d="M10 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 9.17A4.17 4.17 0 0 1 5.83 10 4.17 4.17 0 0 1 10 5.83 4.17 4.17 0 0 1 14.17 10 4.17 4.17 0 0 1 10 14.17z" fill="${fg}"/>
+    <path d="M8.33 8.21a.83.83 0 1 0-.03 1.67.83.83 0 0 0 .03-1.67zm3.34 0a.83.83 0 1 0-.04 1.67.83.83 0 0 0 .04-1.67z" fill="${fg}"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.53 13.9a2.82 2.82 0 0 1-5.06 0l.77-.38a1.97 1.97 0 0 0 3.52 0l.77.39z" fill="${fg}"/>
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2z" fill="${bg}"/>
+    <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 11a5 5 0 1 1 .01-10.01A5 5 0 0 1 10 15z" fill="${fg}"/>
+    <path d="M8 7.86a1 1 0 1 0-.04 2 1 1 0 0 0 .04-2zm4 0a1 1 0 1 0-.04 2 1 1 0 0 0 .04-2z" fill="${fg}"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.53 11.9a2.82 2.82 0 0 1-5.06 0l.77-.38a1.97 1.97 0 0 0 3.52 0l.77.39z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerImage = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+  <path opacity=".5" fill-rule="evenodd" clip-rule="evenodd" d="M12.499 10.801a.5.5 0 01.835 0l2.698 4.098a.5.5 0 01-.418.775H10.22a.5.5 0 01-.417-.775l2.697-4.098z" fill="${fg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.07 8.934a.5.5 0 01.824 0l4.08 5.958a.5.5 0 01-.412.782h-8.16a.5.5 0 01-.413-.782l4.08-5.958zM13.75 8.333a2.083 2.083 0 100-4.166 2.083 2.083 0 000 4.166z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerPhone = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <path fill="${fg}" d="M3 3h14v14H3z"/>
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2zm-7.24 9.78h1.23c.15 0 .27.06.36.18l.98 1.28a.43.43 0 0 1-.05.58l-1.2 1.21a.45.45 0 0 1-.6.04A6.72 6.72 0 0 1 7.33 10c0-.61.1-1.2.25-1.78a6.68 6.68 0 0 1 2.12-3.3.44.44 0 0 1 .6.04l1.2 1.2c.16.17.18.42.05.59l-.98 1.29a.43.43 0 0 1-.36.17H8.98A5.38 5.38 0 0 0 8.67 10c0 .62.11 1.23.3 1.79z" fill="${bg}"/>
+  </svg>`;
+};
+
+const headerMarkdown = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2z" fill="${bg}"/>
+    <path d="m13.49 13.15-2.32-3.27h1.4V7h1.86v2.88h1.4l-2.34 3.27zM11 13H9v-3l-1.5 1.92L6 10v3H4V7h2l1.5 2L9 7h2v6z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerDate = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+  <path d="M14.8 4.182h-.6V3H13v1.182H7V3H5.8v1.182h-.6c-.66 0-1.2.532-1.2 1.182v9.454C4 15.468 4.54 16 5.2 16h9.6c.66 0 1.2-.532 1.2-1.182V5.364c0-.65-.54-1.182-1.2-1.182zm0 10.636H5.2V7.136h9.6v7.682z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerTime = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2z" fill="${bg}"/>
+    <path d="M10 4a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 6-6 6 6 0 0 0-6-6zm0 10.8A4.8 4.8 0 0 1 5.2 10a4.8 4.8 0 1 1 4.8 4.8z" fill="${fg}"/>
+    <path d="M10 7H9v3.93L12.5 13l.5-.8-3-1.76V7z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerEmail = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 8.643a1.357 1.357 0 100 2.714 1.357 1.357 0 000-2.714zM7.357 10a2.643 2.643 0 115.286 0 2.643 2.643 0 01-5.286 0z" fill="${fg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.589 4.898A5.643 5.643 0 0115.643 10v.5a2.143 2.143 0 01-4.286 0V8a.643.643 0 011.286 0v2.5a.857.857 0 001.714 0V10a4.357 4.357 0 10-1.708 3.46.643.643 0 01.782 1.02 5.643 5.643 0 11-5.842-9.582z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerReference = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <rect x="2" y="8" width="10" height="8" rx="2" fill="${bg}"/>
+    <rect x="8" y="4" width="10" height="8" rx="2" fill="${bg}"/>
+    <path d="M10.68 7.73V6l2.97 3.02-2.97 3.02v-1.77c-2.13 0-3.62.7-4.68 2.2.43-2.15 1.7-4.31 4.68-4.74z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerIfThenElse = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path fill="${fg}" d="M4 3h12v14H4z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 2A1.6 1.6 0 002 3.6v12.8A1.6 1.6 0 003.6 18h12.8a1.6 1.6 0 001.6-1.6V3.6A1.6 1.6 0 0016.4 2H3.6zm11.3 10.8a.7.7 0 01.7.7v1.4a.7.7 0 01-.7.7h-1.4a.7.7 0 01-.7-.7v-1.4a.7.7 0 01.6-.693.117.117 0 00.1-.115V10.35a.117.117 0 00-.117-.116h-2.8a.117.117 0 00-.117.116v2.333c0 .064.053.117.117.117h.117a.7.7 0 01.7.7v1.4a.7.7 0 01-.7.7H9.3a.7.7 0 01-.7-.7v-1.4a.7.7 0 01.7-.7h.117a.117.117 0 00.117-.117V10.35a.117.117 0 00-.117-.117h-2.8a.117.117 0 00-.117.117v2.342c0 .058.042.106.1.115a.7.7 0 01.6.693v1.4a.7.7 0 01-.7.7H5.1a.7.7 0 01-.7-.7v-1.4a.7.7 0 01.7-.7h.35a.116.116 0 00.116-.117v-2.45c0-.515.418-.933.934-.933h2.917a.117.117 0 00.117-.117V6.85a.117.117 0 00-.117-.116h-2.45a.7.7 0 01-.7-.7V5.1a.7.7 0 01.7-.7h6.067a.7.7 0 01.7.7v.934a.7.7 0 01-.7.7h-2.45a.117.117 0 00-.118.116v2.333c0 .064.053.117.117.117H13.5c.516 0 .934.418.934.934v2.45c0 .063.052.116.116.116h.35z" fill="${bg}"/>
+</svg>`;
+};
+
+const headerSingleValue = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+    <path d="M9.98 13.33c.45 0 .74-.3.73-.75l-.01-.1-.16-1.67 1.45 1.05a.81.81 0 0 0 .5.18c.37 0 .72-.32.72-.76 0-.3-.17-.54-.49-.68l-1.63-.77 1.63-.77c.32-.14.49-.37.49-.67 0-.45-.34-.76-.71-.76a.81.81 0 0 0-.5.18l-1.47 1.03.16-1.74.01-.08c.01-.46-.27-.76-.72-.76-.46 0-.76.32-.75.76l.01.08.16 1.74-1.47-1.03a.77.77 0 0 0-.5-.18.74.74 0 0 0-.72.76c0 .3.17.53.49.67l1.63.77-1.62.77c-.32.14-.5.37-.5.68 0 .44.35.75.72.75a.78.78 0 0 0 .5-.17L9.4 10.8l-.16 1.68v.09c-.02.44.28.75.74.75z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerLookup = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+    <path d="M8 5.83H5.83a.83.83 0 0 0 0 1.67h1.69A4.55 4.55 0 0 1 8 5.83zm-.33 3.34H5.83a.83.83 0 0 0 0 1.66h2.72a4.57 4.57 0 0 1-.88-1.66zM5.83 12.5a.83.83 0 0 0 0 1.67h7.5a.83.83 0 1 0 0-1.67h-7.5zm8.8-2.9a3.02 3.02 0 0 0 .46-1.6c0-1.66-1.32-3-2.94-3C10.52 5 9.2 6.34 9.2 8s1.31 3 2.93 3c.58 0 1.11-.17 1.56-.47l2.04 2.08.93-.94-2.04-2.08zm-2.48.07c-.9 0-1.63-.75-1.63-1.67s.73-1.67 1.63-1.67c.9 0 1.63.75 1.63 1.67s-.73 1.67-1.63 1.67z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerTextTemplate = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+  <path d="M7.676 4.726V3l2.976 3.021-2.976 3.022v-1.77c-2.125 0-3.613.69-4.676 2.201.425-2.158 1.7-4.316 4.676-4.748zM10.182 14.4h3.636l.655 1.6H16l-3.454-8h-1.091L8 16h1.527l.655-1.6zM12 9.44l1.36 3.65h-2.72L12 9.44z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerMath = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.167 5.417a.833.833 0 100 1.666h4.166a.833.833 0 100-1.666H4.167z" fill="${fg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.083 4.167a.833.833 0 10-1.666 0v4.166a.833.833 0 101.666 0V4.167zM11.667 5.417a.833.833 0 100 1.666h4.166a.833.833 0 100-1.666h-4.166zM5.367 11.688a.833.833 0 00-1.179 1.179l2.947 2.946a.833.833 0 001.178-1.178l-2.946-2.947z" fill="${fg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.313 12.867a.833.833 0 10-1.178-1.179l-2.947 2.947a.833.833 0 101.179 1.178l2.946-2.946z" fill="${fg}"/>
+  <path d="M10.833 12.5c0-.46.373-.833.834-.833h4.166a.833.833 0 110 1.666h-4.166a.833.833 0 01-.834-.833zM10.833 15c0-.46.373-.833.834-.833h4.166a.833.833 0 110 1.666h-4.166a.833.833 0 01-.834-.833z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerRollup = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <path d="M16.22 2H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.77-.8 1.77-1.78L18 3.78C18 2.8 17.2 2 16.22 2z" fill="${bg}"/>
+    <path d="M10 8.84a1.16 1.16 0 1 0 0 2.32 1.16 1.16 0 0 0 0-2.32zm3.02 3.61a3.92 3.92 0 0 0 .78-3.28.49.49 0 1 0-.95.2c.19.87-.02 1.78-.58 2.47a2.92 2.92 0 1 1-4.13-4.08 2.94 2.94 0 0 1 2.43-.62.49.49 0 1 0 .17-.96 3.89 3.89 0 1 0 2.28 6.27zM10 4.17a5.84 5.84 0 0 0-5.44 7.93.49.49 0 1 0 .9-.35 4.86 4.86 0 1 1 2.5 2.67.49.49 0 1 0-.4.88c.76.35 1.6.54 2.44.53a5.83 5.83 0 0 0 0-11.66zm3.02 3.5a.7.7 0 1 0-1.4 0 .7.7 0 0 0 1.4 0zm-6.97 5.35a.7.7 0 1 1 0 1.4.7.7 0 0 1 0-1.4z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerJoinStrings = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+  <path d="M12.4 13.565c1.865-.545 3.645-2.083 3.645-4.396 0-1.514-.787-2.604-2.071-2.604C12.69 6.565 12 7.63 12 8.939c1.114.072 1.865.726 1.865 1.683 0 .933-.8 1.647-1.84 2.023l.375.92zM4 5h6v2H4zM4 9h5v2H4zM4 13h4v2H4z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerSplitString = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    ${iconHead}
+    <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+    <path d="M12.4 13.56c1.86-.54 3.65-2.08 3.65-4.4 0-1.5-.8-2.6-2.08-2.6S12 7.64 12 8.95c1.11.07 1.86.73 1.86 1.68 0 .94-.8 1.65-1.83 2.03l.37.91zM4 5h6v2H4zm0 4h5v2H4zm0 4h4v2H4z" fill="${fg}"/>
+  </svg>`;
+};
+
+const headerGeoDistance = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <path d="M16.222 2H3.778C2.8 2 2 2.8 2 3.778v12.444C2 17.2 2.8 18 3.778 18h12.444c.978 0 1.77-.8 1.77-1.778L18 3.778C18 2.8 17.2 2 16.222 2z" fill="${bg}"/>
+  <path d="M10 7a1 1 0 100-2v2zm0 6a1 1 0 100 2v-2zm0-8H7v2h3V5zm-3 6h5V9H7v2zm5 2h-2v2h2v-2zm1-1a1 1 0 01-1 1v2a3 3 0 003-3h-2zm-1-1a1 1 0 011 1h2a3 3 0 00-3-3v2zM4 8a3 3 0 003 3V9a1 1 0 01-1-1H4zm3-3a3 3 0 00-3 3h2a1 1 0 011-1V5z" fill="${fg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.856 12.014a.5.5 0 00-.712.702L5.409 14l-1.265 1.284a.5.5 0 00.712.702l1.255-1.274 1.255 1.274a.5.5 0 00.712-.702L6.813 14l1.265-1.284a.5.5 0 00-.712-.702L6.11 13.288l-1.255-1.274zM12.856 4.014a.5.5 0 00-.712.702L13.409 6l-1.265 1.284a.5.5 0 10.712.702l1.255-1.274 1.255 1.274a.5.5 0 10.712-.702L14.813 6l1.265-1.284a.5.5 0 00-.712-.702L14.11 5.288l-1.255-1.274z" fill="${fg}"/>
+</svg>`;
+};
+
+const headerArray = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `${iconHead}
+  <rect x="2" y="2" width="16" height="16" rx="2" fill="${bg}"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.25 7.25a.75.75 0 000-1.5h-6.5a.75.75 0 100 1.5h6.5zM15 10a.75.75 0 01-.75.75h-6.5a.75.75 0 010-1.5h6.5A.75.75 0 0115 10zm-.75 4.25a.75.75 0 000-1.5h-6.5a.75.75 0 000 1.5h6.5zm-8.987-7a.75.75 0 100-1.5.75.75 0 000 1.5zm.75 2.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm-.75 4.25a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="${fg}"/>
+</svg>`;
+};
+
+const rowOwnerOverlay = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 15v1h14v-2.5c0-.87-.44-1.55-.98-2.04a6.19 6.19 0 0 0-1.9-1.14 12.1 12.1 0 0 0-2.48-.67A4 4 0 1 0 5 6a4 4 0 0 0 2.36 3.65c-.82.13-1.7.36-2.48.67-.69.28-1.37.65-1.9 1.13A2.8 2.8 0 0 0 2 13.5V15z" fill="${bg}" stroke="${fg}" stroke-width="2"/>
+  </svg>`;
+};
+
+const protectedColumnOverlay = (props: SpriteProps) => {
+    const fg = props.fgColor;
+    const bg = props.bgColor;
+    return `
+    <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.43 6.04v-.18a3.86 3.86 0 0 0-7.72 0v.18A2.15 2.15 0 0 0 3 8.14v5.72C3 15.04 3.96 16 5.14 16H12c1.18 0 2.14-.96 2.14-2.14V8.14c0-1.03-.73-1.9-1.71-2.1zM7.86 6v-.14a.71.71 0 1 1 1.43 0V6H7.86z" fill="${bg}" stroke="${fg}" stroke-width="2"/>
+  </svg>
+`;
+};
+
+export const sprites = {
+    headerRowID,
+    headerNumber,
+    headerCode,
+    headerString,
+    headerBoolean,
+    headerAudioUri,
+    headerVideoUri,
+    headerEmoji,
+    headerImage,
+    headerUri,
+    headerPhone,
+    headerMarkdown,
+    headerDate,
+    headerTime,
+    headerEmail,
+    headerReference,
+    headerIfThenElse,
+    headerSingleValue,
+    headerLookup,
+    headerTextTemplate,
+    headerMath,
+    headerRollup,
+    headerJoinStrings,
+    headerSplitString,
+    headerGeoDistance,
+    headerArray,
+    rowOwnerOverlay,
+    protectedColumnOverlay,
+    renameIcon,
+};
+
+export type HeaderIconMap = Readonly<typeof sprites>;

package/src/internal/data-grid/use-animation-queue.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type Item } from "./data-grid-types.js";
+import { CellSet } from "./cell-set.js";
+import { packColRowToNumber, unpackNumberToColRow } from "../../common/render-state-provider.js";
+
+export type EnqueueCallback = (item: Item) => void;
+
+export function useAnimationQueue(draw: (items: CellSet) => void): EnqueueCallback {
+    const queue = React.useRef<number[]>([]);
+    const seq = React.useRef(0);
+    const drawRef = React.useRef(draw);
+    drawRef.current = draw;
+
+    const loop = React.useCallback(() => {
+        const requeue = () => window.requestAnimationFrame(fn);
+
+        const fn = () => {
+            const toDraw = queue.current.map(unpackNumberToColRow);
+
+            queue.current = [];
+            drawRef.current(new CellSet(toDraw));
+            if (queue.current.length > 0) {
+                seq.current++;
+            } else {
+                seq.current = 0;
+            }
+        };
+
+        window.requestAnimationFrame(seq.current > 600 ? requeue : fn);
+    }, []);
+
+    return React.useCallback(
+        (item: Item) => {
+            if (queue.current.length === 0) loop();
+            const packed = packColRowToNumber(item[0], item[1]);
+            if (queue.current.includes(packed)) return;
+            queue.current.push(packed);
+        },
+        [loop]
+    );
+}

package/src/internal/data-grid/use-selection-behavior.ts

@@ -0,0 +1,152 @@
+import React from "react";
+import { CompactSelection, type GridSelection, type Slice } from "./data-grid-types.js";
+
+type SetCallback = (newVal: GridSelection, expand: boolean) => void;
+
+/**
+ * The type of selection blending to use:
+ * - `exclusive`: Only one type of selection can be made at a time.
+ * - `mixed`: Multiple types of selection can be made at a time, but only when a multi-key (e.g., Cmd/Ctrl) is held.
+ * - `additive`: Multiple types of selection can be made at a time, and selections accumulate without a modifier.
+ */
+export type SelectionBlending = "exclusive" | "mixed" | "additive";
+
+type SelectionTrigger = "click" | "drag" | "keyboard-nav" | "keyboard-select" | "edit";
+
+export function useSelectionBehavior(
+    gridSelection: GridSelection,
+    setGridSelection: SetCallback,
+    rangeBehavior: SelectionBlending,
+    columnBehavior: SelectionBlending,
+    rowBehavior: SelectionBlending,
+    rangeSelect: "none" | "cell" | "rect" | "multi-cell" | "multi-rect",
+    rangeSelectionColumnSpanning: boolean
+) {
+    // if append is true, the current range will be added to the rangeStack
+    const setCurrent = React.useCallback(
+        (
+            value: Pick<NonNullable<GridSelection["current"]>, "cell" | "range"> | undefined,
+            expand: boolean,
+            append: boolean,
+            trigger: SelectionTrigger
+        ) => {
+            if ((rangeSelect === "cell" || rangeSelect === "multi-cell") && value !== undefined) {
+                value = {
+                    ...value,
+                    range: {
+                        x: value.cell[0],
+                        y: value.cell[1],
+                        width: 1,
+                        height: 1,
+                    },
+                };
+            }
+
+            if (!rangeSelectionColumnSpanning && value !== undefined && value.range.width > 1) {
+                value = {
+                    ...value,
+                    range: {
+                        ...value.range,
+                        width: 1,
+                        x: value.cell[0],
+                    },
+                };
+            }
+
+            const rangeMixable =
+                (rangeBehavior === "mixed" && (append || trigger === "drag")) || rangeBehavior === "additive";
+            const allowColumnCoSelect = (columnBehavior === "mixed" || columnBehavior === "additive") && rangeMixable;
+            const allowRowCoSelect = (rowBehavior === "mixed" || rowBehavior === "additive") && rangeMixable;
+            let newVal: GridSelection = {
+                current:
+                    value === undefined
+                        ? undefined
+                        : {
+                              ...value,
+                              rangeStack: trigger === "drag" ? (gridSelection.current?.rangeStack ?? []) : [],
+                          },
+                columns: allowColumnCoSelect ? gridSelection.columns : CompactSelection.empty(),
+                rows: allowRowCoSelect ? gridSelection.rows : CompactSelection.empty(),
+            };
+
+            const addLastRange = append && (rangeSelect === "multi-rect" || rangeSelect === "multi-cell");
+            if (addLastRange && newVal.current !== undefined && gridSelection.current !== undefined) {
+                newVal = {
+                    ...newVal,
+                    current: {
+                        ...newVal.current,
+                        rangeStack: [...gridSelection.current.rangeStack, gridSelection.current.range],
+                    },
+                };
+            }
+            setGridSelection(newVal, expand);
+        },
+        [
+            columnBehavior,
+            gridSelection,
+            rangeBehavior,
+            rangeSelect,
+            rangeSelectionColumnSpanning,
+            rowBehavior,
+            setGridSelection,
+        ]
+    );
+
+    const setSelectedRows = React.useCallback(
+        (newRows: CompactSelection | undefined, append: Slice | number | undefined, allowMixed: boolean): void => {
+            newRows = newRows ?? gridSelection.rows;
+            if (append !== undefined) {
+                newRows = newRows.add(append);
+            }
+            let newVal: GridSelection;
+            if (rowBehavior === "exclusive" && newRows.length > 0) {
+                newVal = {
+                    current: undefined,
+                    columns: CompactSelection.empty(),
+                    rows: newRows,
+                };
+            } else {
+                const rangeMixed = (allowMixed && rangeBehavior === "mixed") || rangeBehavior === "additive";
+                const columnMixed = (allowMixed && columnBehavior === "mixed") || columnBehavior === "additive";
+                const current = !rangeMixed ? undefined : gridSelection.current;
+                newVal = {
+                    current,
+                    columns: columnMixed ? gridSelection.columns : CompactSelection.empty(),
+                    rows: newRows,
+                };
+            }
+            setGridSelection(newVal, false);
+        },
+        [columnBehavior, gridSelection, rangeBehavior, rowBehavior, setGridSelection]
+    );
+
+    const setSelectedColumns = React.useCallback(
+        (newCols: CompactSelection | undefined, append: number | Slice | undefined, allowMixed: boolean): void => {
+            newCols = newCols ?? gridSelection.columns;
+            if (append !== undefined) {
+                newCols = newCols.add(append);
+            }
+            let newVal: GridSelection;
+            if (columnBehavior === "exclusive" && newCols.length > 0) {
+                newVal = {
+                    current: undefined,
+                    rows: CompactSelection.empty(),
+                    columns: newCols,
+                };
+            } else {
+                const rangeMixed = (allowMixed && rangeBehavior === "mixed") || rangeBehavior === "additive";
+                const rowMixed = (allowMixed && rowBehavior === "mixed") || rowBehavior === "additive";
+                const current = !rangeMixed ? undefined : gridSelection.current;
+                newVal = {
+                    current,
+                    rows: rowMixed ? gridSelection.rows : CompactSelection.empty(),
+                    columns: newCols,
+                };
+            }
+            setGridSelection(newVal, false);
+        },
+        [columnBehavior, gridSelection, rangeBehavior, rowBehavior, setGridSelection]
+    );
+
+    return [setCurrent, setSelectedRows, setSelectedColumns] as const;
+}