Merge branch 'main' into fix/scaling-to-root-font-size

Author: lukasmasuch

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "6.0.4-alpha10",
+    "version": "6.0.4-alpha11",
     "scripts": {
         "start": "npm run storybook",
         "version": "./update-version.sh",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-cells",
-    "version": "6.0.4-alpha10",
+    "version": "6.0.4-alpha11",
     "description": "Extra cells for glide-data-grid",
     "sideEffects": [
         "**/*.css"
@@ -50,7 +50,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "6.0.4-alpha10",
+        "@glideapps/glide-data-grid": "6.0.4-alpha11",
         "@linaria/react": "^4.5.4",
         "@toast-ui/editor": "3.2.2",
         "@toast-ui/react-editor": "3.2.3",

packages/cells/package.json

@@ -371,6 +371,8 @@ The data grid uses the `Theme` provided to the DataEditer in the `theme` prop. T
 | bgHeader              | string              | --gdg-bg-header               | The header background color                                                                       |
 | bgHeaderHasFocus      | string              | --gdg-bg-header-has           | The header background color when its column contains the selected cell                            |
 | bgHeaderHovered       | string              | --gdg-bg-header-hovered       | The header background color when it is hovered                                                    |
+| bgGroupHeader         | string \| undefined | --gdg-bg-group-header         | The group header background color, if none provided the `bgHeader` is used instead.               |
+| bgGroupHeaderHovered  | string \| undefined | --gdg-bg-group-header-hovered | The group header background color when it is hovered, if none provided the `bgHeaderHovered` is used instead. |
 | bgBubble              | string              | --gdg-bg-bubble               | The background color used in bubbles                                                              |
 | bgBubbleSelected      | string              | --gdg-bg-bubble-selected      | The background color used in bubbles when the cell is selected                                    |
 | bgSearchResult        | string              | --gdg-bg-search-result        | The background color used for cells which match the search string                                 |
@@ -418,7 +420,12 @@ scrollTo: (
         row: number,
         dir?: "horizontal" | "vertical" | "both",
         paddingX?: number,
-        paddingY?: number
+        paddingY?: number,
+        options?: {
+            hAlign?: "start" | "center" | "end";
+            vAlign?: "start" | "center" | "end";
+            behavior?: ScrollBehavior; // "auto" | "smooth" | "instant"
+        }
     ) => void;
 ```
 
@@ -432,7 +439,11 @@ Requests the data grid to scroll to a particular location. If only one direction
 ## appendRow
 
 ```ts
-appendRow: (col: number, openOverlay: boolean = true) => Promise<void>;
+appendRow: (
+         col: number,
+         openOverlay: boolean = true,
+         behavior?: ScrollBehavior; // "auto" | "smooth" | "instant"
+) => Promise<void>;
 ```
 
 Appends a row to the data grid.
@@ -729,6 +740,8 @@ drawHeader?: (args: {
     theme: Theme;
     rect: Rectangle;
     hoverAmount: number;
+    hoverX: number | undefined;
+    hoverY: number | undefined;
     isSelected: boolean;
     isHovered: boolean;
     hasSelectedCell: boolean;

packages/core/API.md

@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid",
-    "version": "6.0.4-alpha10",
+    "version": "6.0.4-alpha11",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
     "sideEffects": [
         "**/*.css"

packages/core/package.json

@@ -17,6 +17,8 @@ export function makeCSSStyle(theme: Theme): Record<string, string> {
         "--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,
@@ -60,6 +62,8 @@ export interface Theme {
     fgIconHeader: string;
     textHeader: string;
     textGroupHeader?: string;
+    bgGroupHeader?: string;
+    bgGroupHeaderHovered?: string;
     textHeaderSelected: string;
     bgCell: string;
     bgCellMedium: string;

packages/core/src/common/styles.ts

@@ -687,6 +687,7 @@ type ScrollToFn = (
     options?: {
         hAlign?: "start" | "center" | "end";
         vAlign?: "start" | "center" | "end";
+        behavior?: ScrollBehavior;
     }
 ) => void;
 
@@ -697,7 +698,7 @@ export interface DataEditorRef {
      * @param col The column index to focus in the new row.
      * @returns A promise which waits for the append to complete.
      */
-    appendRow: (col: number, openOverlay?: boolean) => Promise<void>;
+    appendRow: (col: number, openOverlay?: boolean, behavior?: ScrollBehavior) => Promise<void>;
     /**
      * Triggers cells to redraw.
      */
@@ -1611,10 +1612,11 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                                 scrollX /= scale;
                                 scrollY /= scale;
                             }
-                            scrollRef.current.scrollTo(
-                                scrollX + scrollRef.current.scrollLeft,
-                                scrollY + scrollRef.current.scrollTop
-                            );
+                            scrollRef.current.scrollTo({
+                                left: scrollX + scrollRef.current.scrollLeft,
+                                top: scrollY + scrollRef.current.scrollTop,
+                                behavior: options?.behavior ?? "auto",
+                            });
                         }
                     }
                 }
@@ -1641,7 +1643,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     getCellContentRef.current = getCellContent;
     rowsRef.current = rows;
     const appendRow = React.useCallback(
-        async (col: number, openOverlay: boolean = true): Promise<void> => {
+        async (col: number, openOverlay: boolean = true, behavior?:  ScrollBehavior): Promise<void> => {
             const c = mangledCols[col];
             if (c?.trailingRowOptions?.disabled === true) {
                 return;
@@ -1667,7 +1669,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 }
 
                 const row = typeof r === "number" ? r : bottom ? rows : 0;
-                scrollToRef.current(col - rowMarkerOffset, row);
+                scrollToRef.current(col - rowMarkerOffset, row, "both", 0, 0, behavior ? { behavior } : undefined);
                 setCurrent(
                     {
                         cell: [col, row],
@@ -3335,6 +3337,9 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             if (onKeyDownIn !== undefined) {
                 onKeyDownIn({
                     ...event,
+                    ...event.location && {
+                        location: [event.location[0] - rowMarkerOffset, event.location[1]] as any,
+                    },
                     cancel: () => {
                         cancelled = true;
                     },

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

@@ -1,13 +1,13 @@
 import React from "react";
 import type { Item } from "../internal/data-grid/data-grid-types.js";
-import { flattenRowGroups, mapRowIndexToPath, type RowGroup, type RowGroupingOptions } from "./row-grouping.js";
+import { flattenRowGroups, mapRowIndexToPath, type RowGroup, type RowGroupingOptions, type MapResult } from "./row-grouping.js";
 
-export type RowGroupingMapperResult<T> = {
+export interface RowGroupingMapperResult<T> extends Omit<MapResult, 'originalIndex'> {
     path: readonly number[];
     originalIndex: T;
     isGroupHeader: boolean;
     groupRows: number;
-};
+}
 
 export type RowGroupingMapper = {
     (itemOrRow: number): RowGroupingMapperResult<number>;

packages/core/src/data-editor/row-grouping-api.ts

@@ -4,6 +4,10 @@ import type { DataEditorProps } from "./data-editor.js";
 import type { DataGridProps } from "../internal/data-grid/data-grid.js";
 import { whenDefined } from "../common/utils.js";
 
+type Mutable<T> = {
+    -readonly [K in keyof T]: T[K];
+};
+
 export type RowGroup = {
     /**
      * The index of the header if the groups are all flattened and expanded
@@ -100,6 +104,7 @@ export function expandRowGroups(groups: readonly RowGroup[]): ExpandedRowGroup[]
 }
 
 export interface FlattenedRowGroup {
+    readonly rowIndex: number;
     readonly headerIndex: number;
     readonly contentIndex: number; // the content index of the first row in the group
     readonly isCollapsed: boolean;
@@ -128,6 +133,7 @@ export function flattenRowGroups(rowGrouping: RowGroupingOptions, rows: number):
         rowsInGroup--; // the header isn't in the group
 
         flattened.push({
+            rowIndex: -1, // we will fill this in later
             headerIndex: group.headerIndex,
             contentIndex: -1, // we will fill this in later
             skip: skipChildren,
@@ -153,10 +159,14 @@ export function flattenRowGroups(rowGrouping: RowGroupingOptions, rows: number):
         processGroup(expandedGroups[i], nextHeaderIndex);
     }
 
+    let rowIndex = 0;
     let contentIndex = 0;
-    for (const g of flattened) {
-        (g as any).contentIndex = contentIndex;
+    for (const g of flattened as Mutable<(typeof flattened)[number]>[]) {
+        g.contentIndex = contentIndex;
         contentIndex += g.rows;
+
+        g.rowIndex = rowIndex;
+        rowIndex += g.isCollapsed ? 1 : g.rows + 1;
     }
 
     return flattened
@@ -167,7 +177,7 @@ export function flattenRowGroups(rowGrouping: RowGroupingOptions, rows: number):
         });
 }
 
-interface MapResult {
+export interface MapResult {
     readonly path: readonly number[];
     readonly isGroupHeader: boolean;
     readonly originalIndex: number;
@@ -199,18 +209,19 @@ export function mapRowIndexToPath(row: number, flattenedRowGroups?: readonly Fla
                 contentIndex: -1,
                 groupRows: group.rows,
             };
-        toGo--;
         if (!group.isCollapsed) {
-            if (toGo < group.rows)
+            if (toGo <= group.rows)
                 return {
-                    path: [...group.path, toGo],
+                    path: [...group.path, toGo - 1],
                     originalIndex: group.headerIndex + toGo,
                     isGroupHeader: false,
-                    groupIndex: toGo,
-                    contentIndex: group.contentIndex + toGo,
+                    groupIndex: toGo - 1,
+                    contentIndex: group.contentIndex + toGo - 1,
                     groupRows: group.rows,
                 };
-            toGo -= group.rows;
+            toGo = toGo - group.rows - 1;
+        } else {
+            toGo--;
         }
     }
     // this shouldn't happen
@@ -244,6 +255,13 @@ export function useRowGroupingInner(
         [options, rows]
     );
 
+    const flattenedRowGroupsMap = React.useMemo(() => {
+        return flattenedRowGroups?.reduce<{ [rowIndex: number]: FlattenedRowGroup | undefined }>((acc, group) => {
+            acc[group.rowIndex] = group;
+            return acc;
+        }, {});
+    }, [flattenedRowGroups]);
+
     const effectiveRows = React.useMemo(() => {
         if (flattenedRowGroups === undefined) return rows;
         return flattenedRowGroups.reduce((acc, group) => acc + (group.isCollapsed ? 1 : group.rows + 1), 0);
@@ -253,11 +271,10 @@ export function useRowGroupingInner(
         if (options === undefined) return rowHeightIn;
         if (typeof rowHeightIn === "number" && options.height === rowHeightIn) return rowHeightIn;
         return (rowIndex: number) => {
-            const { isGroupHeader } = mapRowIndexToPath(rowIndex, flattenedRowGroups);
-            if (isGroupHeader) return options.height;
+            if (flattenedRowGroupsMap?.[rowIndex]) return options.height;
             return typeof rowHeightIn === "number" ? rowHeightIn : rowHeightIn(rowIndex);
         };
-    }, [flattenedRowGroups, options, rowHeightIn]);
+    }, [flattenedRowGroupsMap, options, rowHeightIn]);
 
     const rowNumberMapperOut = React.useCallback(
         (row: number): number | undefined => {

packages/core/src/data-editor/row-grouping.ts

@@ -254,7 +254,9 @@ The global theme is provided by the DataEditor by default and can be overriden b
 | bgIconHeader | --gdg-bg-icon-header | string | The background color for header icons |
 | fgIconHeader | --gdg-fg-icon-header | string | The foreground color for header icons |
 | textHeader | --gdg-text-header | string | The header text color |
-| textGroupHeader | --gdg-text-group-header | string \\| undefined | The group header text color, if none provided the \`textHeader\` is used instead. |
+| bgGroupHeader | --gdg-bg-group-header | string | The group header background color, if none provided the \`bgHeader\` is used instead. |
+| bgGroupHeaderHovered | --gdg-bg-group-header-hovered | string | The group header background color when it is hovered, if none provided the \`bgHeaderHovered\` is used instead. |
+| textGroupHeader | --gdg-text-group-header | string | The group header text color, if none provided the \`textHeader\` is used instead. |
 | textHeaderSelected | --gdg-text-header-selected | string | The text color used for selected headers |
 | bgCell | --gdg-bg-cell | string | The primary background color of the data grid. |
 | bgCellMedium | --gdg-bg-cell-medium | string | Used for disabled or otherwise off colored cells. |
@@ -281,10 +283,10 @@ If an option is missing from any theme it will be filled in with the default the
             </Marked>
             <Highlight>
                 {`
-return <DataEditor 
+return <DataEditor
         theme={{
           bgCell: "#F2F9FF"
-        }} 
+        }}
         getCellContent={getContent} columns={columns} rows={data.length} />
 `}
             </Highlight>
@@ -376,7 +378,7 @@ const getContent = React.useCallback((cell: Item): GridCell => {
             textDark: "#FF0000",
         }
     }
-    
+
     const d = getDataForCell(col, row);
     return {
         kind: GridCellKind.Text,