Break out types

packages/core/src/cells/cell-types.ts

@@ -5,13 +5,13 @@ import type {
     Rectangle,
     CustomCell,
     ProvideEditorCallback,
-    BaseGridMouseEventArgs,
     BooleanEmpty,
     BooleanIndeterminate,
     Item,
 } from "../internal/data-grid/data-grid-types.js";
 import type { FullTheme } from "../common/styles.js";
 import type { ImageWindowLoader } from "../internal/data-grid/image-window-loader-interface.js";
+import type { BaseGridMouseEventArgs } from "../internal/data-grid/event-args.js";
 
 export interface BaseDrawArgs {
     ctx: CanvasRenderingContext2D;

packages/core/src/common/is-hotkey.ts

@@ -1,4 +1,4 @@
-import type { GridKeyEventArgs } from "../internal/data-grid/data-grid-types.js";
+import type { GridKeyEventArgs } from "../internal/data-grid/event-args.js";
 import { browserIsOSX } from "./browser-detect.js";
 
 // brain dead syntax, find your deps, and make buggy replacements with 5 times the effort

packages/core/src/data-editor/data-editor.tsx

@@ -10,9 +10,6 @@ import {
     type EditableGridCell,
     type GridCell,
     GridCellKind,
-    type GridDragEventArgs,
-    type GridKeyEventArgs,
-    type GridMouseEventArgs,
     type GridSelection,
     isEditableGridCell,
     type Rectangle,
@@ -23,29 +20,20 @@ import {
     type Slice,
     isInnerOnlyCell,
     type ProvideEditorCallback,
-    type GridMouseCellEventArgs,
     type GridColumn,
     isObjectEditorCallbackResult,
-    type GroupHeaderClickedEventArgs,
-    type HeaderClickedEventArgs,
-    type CellClickedEventArgs,
     type Item,
     type MarkerCell,
     headerCellUnheckedMarker,
     headerCellCheckedMarker,
     headerCellIndeterminateMarker,
-    groupHeaderKind,
-    outOfBoundsKind,
     type ValidatedGridCell,
     type ImageEditorType,
     type CustomCell,
-    headerKind,
     BooleanEmpty,
     BooleanIndeterminate,
-    type FillPatternEventArgs,
     type FillHandleDirection,
     type EditListItem,
-    mouseEventArgsAreEqual,
 } from "../internal/data-grid/data-grid-types.js";
 import DataGridSearch, { type DataGridSearchProps } from "../internal/data-grid-search/data-grid-search.js";
 import { browserIsOSX } from "../common/browser-detect.js";
@@ -79,6 +67,20 @@ import { useRemAdjuster } from "./use-rem-adjuster.js";
 import { type Highlight } from "../internal/data-grid/data-grid-render.js";
 import { withAlpha } from "../internal/data-grid/color-parser.js";
 import { combineRects, getClosestRect } from "../common/math.js";
+import {
+    type HeaderClickedEventArgs,
+    type GroupHeaderClickedEventArgs,
+    type CellClickedEventArgs,
+    type FillPatternEventArgs,
+    type GridMouseEventArgs,
+    groupHeaderKind,
+    outOfBoundsKind,
+    type GridMouseCellEventArgs,
+    headerKind,
+    type GridDragEventArgs,
+    mouseEventArgsAreEqual,
+    type GridKeyEventArgs,
+} from "../internal/data-grid/event-args.js";
 
 const DataGridOverlayEditor = React.lazy(
     async () => await import("../internal/data-grid-overlay-editor/data-grid-overlay-editor.js")
@@ -2537,30 +2539,27 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         ]
     );
 
-    const adjustSelectionOnScroll = React.useCallback(
-        () => {
-            const args = hoveredRef.current;
-            if (args === undefined) return;
-            const [xDir, yDir] = args.scrollEdge;
-            let [col, row] = args.location;
-            const visible = visibleRegionRef.current;
-            if (xDir === -1) {
-                col = visible.x;
-            } else if (xDir === 1) {
-                col = visible.x + visible.width;
-            }
-            if (yDir === -1) {
-                row = Math.max(0, visible.y);
-            } else if (yDir === 1) {
-                row = Math.min(rows, visible.y + visible.height);
-            }
-            onItemHoveredImpl({
-                ...args,
-                location: [col, row] as any,
-            })
-        },
-        [onItemHoveredImpl, rows]
-    )
+    const adjustSelectionOnScroll = React.useCallback(() => {
+        const args = hoveredRef.current;
+        if (args === undefined) return;
+        const [xDir, yDir] = args.scrollEdge;
+        let [col, row] = args.location;
+        const visible = visibleRegionRef.current;
+        if (xDir === -1) {
+            col = visible.x;
+        } else if (xDir === 1) {
+            col = visible.x + visible.width;
+        }
+        if (yDir === -1) {
+            row = Math.max(0, visible.y);
+        } else if (yDir === 1) {
+            row = Math.min(rows, visible.y + visible.height);
+        }
+        onItemHoveredImpl({
+            ...args,
+            location: [col, row] as any,
+        });
+    }, [onItemHoveredImpl, rows]);
 
     useAutoscroll(scrollDir, scrollRef, adjustSelectionOnScroll);
 

packages/core/src/data-editor/use-autoscroll.ts

@@ -1,13 +1,13 @@
 import React from "react";
-import type { GridMouseCellEventArgs } from "../internal/data-grid/data-grid-types.js";
+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,
+    onScroll?: () => void
 ) {
     const speedScalar = React.useRef(0);
     const [xDir, yDir] = scrollDirection ?? [0, 0];

packages/core/src/docs/examples/column-group-collapse.stories.tsx

@@ -8,9 +8,10 @@ import {
     useMockDataGenerator,
     defaultProps,
 } from "../../data-editor/stories/utils.js";
-import type { GridColumn, GroupHeaderClickedEventArgs } from "../../internal/data-grid/data-grid-types.js";
+import type { GridColumn } from "../../internal/data-grid/data-grid-types.js";
 import { CompactSelection } from "../../internal/data-grid/data-grid-types.js";
 import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import type { GroupHeaderClickedEventArgs } from "../../internal/data-grid/event-args.js";
 
 export default {
     title: "Glide-Data-Grid/DataEditor Demos",

packages/core/src/docs/examples/row-hover.stories.tsx

@@ -8,8 +8,8 @@ import {
     useAllMockedKinds,
 } from "../../data-editor/stories/utils.js";
 import type { GetRowThemeCallback } from "../../internal/data-grid/data-grid-render.js";
-import type { GridMouseEventArgs } from "../../internal/data-grid/data-grid-types.js";
 import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import type { GridMouseEventArgs } from "../../internal/data-grid/event-args.js";
 
 export default {
     title: "Glide-Data-Grid/DataEditor Demos",

packages/core/src/docs/examples/tooltips.stories.tsx

@@ -9,8 +9,8 @@ import {
     useMockDataGenerator,
     defaultProps,
 } from "../../data-editor/stories/utils.js";
-import type { GridMouseEventArgs } from "../../internal/data-grid/data-grid-types.js";
 import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import type { GridMouseEventArgs } from "../../internal/data-grid/event-args.js";
 
 export default {
     title: "Glide-Data-Grid/DataEditor Demos",

packages/core/src/internal/data-grid-dnd/data-grid-dnd.tsx

@@ -2,7 +2,8 @@
 import clamp from "lodash/clamp.js";
 import * as React from "react";
 import DataGrid, { type DataGridProps, type DataGridRef } from "../data-grid/data-grid.js";
-import type { GridColumn, GridMouseEventArgs, InnerGridColumn, Rectangle } from "../data-grid/data-grid-types.js";
+import type { GridColumn, InnerGridColumn, Rectangle } from "../data-grid/data-grid-types.js";
+import type { GridMouseEventArgs } from "../data-grid/event-args.js";
 
 type Props = Omit<
     DataGridProps,

packages/core/src/internal/data-grid/data-grid-render.tsx

@@ -8,7 +8,6 @@ import {
     GridColumnIcon,
     type Item,
     type CellList,
-    type GridMouseGroupHeaderEventArgs,
     headerCellCheckboxPrefix,
     GridCellKind,
     BooleanIndeterminate,
@@ -47,6 +46,7 @@ import type { EnqueueCallback } from "./use-animation-queue.js";
 import type { RenderStateProvider } from "../../common/render-state-provider.js";
 import type { ImageWindowLoader } from "./image-window-loader-interface.js";
 import { hugRectToTarget } from "../../common/math.js";
+import type { GridMouseGroupHeaderEventArgs } from "./event-args.js";
 
 // Future optimization opportunities
 // - Create a cache of a buffer used to render the full view of a partially displayed column so that when

packages/core/src/internal/data-grid/data-grid-types.ts

@@ -6,6 +6,7 @@ import type { CSSProperties } from "react";
 import type { SpriteManager } from "./data-grid-sprites.js";
 import type { OverlayImageEditorProps } from "../data-grid-overlay-editor/private/image-overlay-editor.js";
 import type { ImageWindowLoader } from "./image-window-loader-interface.js";
+import type { BaseGridMouseEventArgs } from "./event-args.js";
 
 // Thoughts:
 // rows/columns are called out as selected, but when selected they must also be added
@@ -26,30 +27,6 @@ export interface GridSelection {
 /** @category Types */
 export type ImageEditorType = React.ComponentType<OverlayImageEditorProps>;
 
-/** @category Types */
-export type GridMouseEventArgs =
-    | GridMouseCellEventArgs
-    | GridMouseHeaderEventArgs
-    | GridMouseOutOfBoundsEventArgs
-    | GridMouseGroupHeaderEventArgs;
-
-export interface PreventableEvent {
-    preventDefault: () => void;
-}
-/** @category Types */
-export interface CellClickedEventArgs extends GridMouseCellEventArgs, PreventableEvent {}
-
-/** @category Types */
-export interface HeaderClickedEventArgs extends GridMouseHeaderEventArgs, PreventableEvent {}
-
-/** @category Types */
-export interface GroupHeaderClickedEventArgs extends GridMouseGroupHeaderEventArgs, PreventableEvent {}
-
-export interface FillPatternEventArgs extends PreventableEvent {
-    patternSource: Rectangle;
-    fillDestination: Rectangle;
-}
-
 /** @category Types */
 export const BooleanEmpty = null;
 /** @category Types */
@@ -60,96 +37,6 @@ export type BooleanEmpty = null;
 /** @category Types */
 export type BooleanIndeterminate = undefined;
 
-export interface PositionableMouseEventArgs {
-    readonly localEventX: number;
-    readonly localEventY: number;
-}
-
-/** @category Types */
-export interface BaseGridMouseEventArgs {
-    readonly shiftKey: boolean;
-    readonly ctrlKey: boolean;
-    readonly metaKey: boolean;
-    readonly isTouch: boolean;
-    readonly isLongTouch?: boolean;
-    readonly isEdge: boolean;
-    readonly button: number;
-    readonly scrollEdge: readonly [xDir: -1 | 0 | 1, yDir: -1 | 0 | 1];
-}
-
-/** @category Types */
-export interface GridMouseCellEventArgs extends BaseGridMouseEventArgs, PositionableMouseEventArgs {
-    readonly kind: "cell";
-    readonly location: Item;
-    readonly bounds: Rectangle;
-    readonly isFillHandle: boolean;
-}
-
-/** @category Types */
-export const headerKind = "header" as const;
-/** @category Types */
-export interface GridMouseHeaderEventArgs extends BaseGridMouseEventArgs, PositionableMouseEventArgs {
-    readonly kind: typeof headerKind;
-    readonly location: readonly [number, -1];
-    readonly bounds: Rectangle;
-    readonly group: string;
-}
-
-/** @category Types */
-export const groupHeaderKind = "group-header" as const;
-/** @category Types */
-export interface GridMouseGroupHeaderEventArgs extends BaseGridMouseEventArgs, PositionableMouseEventArgs {
-    readonly kind: typeof groupHeaderKind;
-    readonly location: readonly [number, -2];
-    readonly bounds: Rectangle;
-    readonly group: string;
-}
-
-/** @category Types */
-export const outOfBoundsKind = "out-of-bounds" as const;
-/** @category Types */
-
-export enum OutOfBoundsRegionAxis {
-    Start = -2,
-    StartPadding = -1,
-    Center = 0,
-    EndPadding = 1,
-    End = 2,
-}
-
-export interface GridMouseOutOfBoundsEventArgs extends BaseGridMouseEventArgs {
-    readonly kind: typeof outOfBoundsKind;
-    readonly location: Item;
-    readonly isMaybeScrollbar: boolean;
-    readonly region: readonly [OutOfBoundsRegionAxis, OutOfBoundsRegionAxis];
-}
-
-/** @category Types */
-export interface GridKeyEventArgs {
-    readonly bounds: Rectangle | undefined;
-    readonly key: string;
-    readonly keyCode: number;
-    readonly altKey: boolean;
-    readonly shiftKey: boolean;
-    readonly ctrlKey: boolean;
-    readonly metaKey: boolean;
-    readonly cancel: () => void;
-    readonly stopPropagation: () => void;
-    readonly preventDefault: () => void;
-    readonly rawEvent: React.KeyboardEvent<HTMLElement> | undefined;
-    readonly location: Item | undefined;
-}
-
-export interface DragHandler {
-    readonly setData: (mime: string, payload: string) => void;
-    readonly setDragImage: (image: Element, x: number, y: number) => void;
-    readonly preventDefault: () => void;
-    readonly defaultPrevented: () => boolean;
-}
-
-/** @category Types */
-export type GridDragEventArgs = GridMouseEventArgs & DragHandler;
-
 /** @category Types */
 export type TrailingRowType = "sticky" | "appended" | "none";
 
@@ -767,23 +654,3 @@ export class CompactSelection {
         }
     }
 }
-
-export function mouseEventArgsAreEqual(args: GridMouseEventArgs | undefined, other: GridMouseEventArgs | undefined) {
-    if (args === other) return true;
-
-    if (args?.kind === "out-of-bounds") {
-        return (
-            args?.kind === other?.kind &&
-            args?.location[0] === other?.location[0] &&
-            args?.location[1] === other?.location[1] &&
-            args?.region[0] === other?.region[0] &&
-            args?.region[1] === other?.region[1]
-        );
-    }
-
-    return (
-        args?.kind === other?.kind &&
-        args?.location[0] === other?.location[0] &&
-        args?.location[1] === other?.location[1]
-    );
-}