@bmsuisse/datagrid 0.31.2 → 0.32.1

package/dist/index.d.ts

@@ -1848,6 +1848,16 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
     estimatedRowHeight?: number;
     /** Max height of the scrollable table body in pixels. Required for virtualization to have a viewport to scroll within. Defaults to 480. */
     maxBodyHeight?: number;
+    /**
+     * `data-testid` for the tree's own scrollable container — the element
+     * `maxBodyHeight` actually applies to once virtualized. Omit for no
+     * attribute at all. Useful for an e2e test that needs to scroll this
+     * specific tree or assert on its scroll position; the outer
+     * `data-testid="tree-datagrid"` wrapper isn't it, and isn't unique per
+     * tree on a page with more than one — same convention as `<DataGrid>`'s
+     * own `testId`.
+     */
+    testId?: string;
     /**
      * Controlled row selection — same convention as `<DataGrid>`'s own
      * `selectedIds`/`onSelectedIdsChange`. Both must be supplied together to
@@ -1949,7 +1959,7 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
  * column's cell matches `treeColumnId` (defaults to `columns[0]`); every
  * other column renders exactly like it would in `<DataGrid>`.
  */
-declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, editing, }: TreeDataGridProps<TRow>): ReactElement;
+declare function TreeDataGrid<TRow>({ columns, data, treeColumnId, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, testId, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, editing, }: TreeDataGridProps<TRow>): ReactElement;
 
 interface FlatTreeRow<TRow> {
     row: TRow;

package/dist/index.js

@@ -3155,6 +3155,12 @@ function useGridState(dataSource, initialState, externalState, showPagination =
 import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
+var MIN_COLUMN_SIZE = 40;
+function sortDirToAriaSort(dir) {
+  if (dir === "asc") return "ascending";
+  if (dir === "desc") return "descending";
+  return "none";
+}
 var DETAIL_COLUMN_WIDTH = 44;
 var ROW_ACTIONS_COLUMN_WIDTH = 44;
 var EMPTY_ID_ARRAY = [];
@@ -3928,52 +3934,84 @@ function DataGrid({
                       const filterable = isFilterable(column) && column.filterDisplay !== "row";
                       const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                       const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                      return /* @__PURE__ */ jsxs20("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
-                        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-                          sortable ? /* @__PURE__ */ jsxs20(
-                            "button",
-                            {
-                              type: "button",
-                              className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
-                              onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                              children: [
-                                headerContent,
-                                sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
-                              ]
-                            }
-                          ) : (
-                            // Not wrapped in a `<button>` (unlike the sortable branch above): a
-                            // disabled `<button>` swallows pointer events for its entire subtree,
-                            // silently breaking any interactive content a column's own `renderHeader`
-                            // embeds directly (bare filter inputs, "select/reject all" buttons) —
-                            // clicks never reach them at all, even though nothing looks wrong visually.
-                            /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
-                          ),
-                          filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
-                            /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx33(
-                              FunnelIcon7,
+                      return /* @__PURE__ */ jsxs20(
+                        "th",
+                        {
+                          rowSpan,
+                          style: cellProps?.style,
+                          className: cellProps?.className,
+                          "aria-sort": sortable ? sortDirToAriaSort(sortEntry?.dir) : void 0,
+                          "aria-label": column.header,
+                          children: [
+                            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+                              sortable ? /* @__PURE__ */ jsxs20(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-testid": `sort-button-${column.id}`,
+                                  className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
+                                  onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                                  children: [
+                                    headerContent,
+                                    sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                    sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                                  ]
+                                }
+                              ) : (
+                                // Not wrapped in a `<button>` (unlike the sortable branch above): a
+                                // disabled `<button>` swallows pointer events for its entire subtree,
+                                // silently breaking any interactive content a column's own `renderHeader`
+                                // embeds directly (bare filter inputs, "select/reject all" buttons) —
+                                // clicks never reach them at all, even though nothing looks wrong visually.
+                                /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                              ),
+                              filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
+                                /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+                                  Button,
+                                  {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    "data-testid": `filter-trigger-${column.id}`,
+                                    "aria-label": `Filter ${column.header}`,
+                                    children: /* @__PURE__ */ jsx33(
+                                      FunnelIcon7,
+                                      {
+                                        className: cn(
+                                          "h-3 w-3",
+                                          filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
+                                        ),
+                                        "aria-hidden": true
+                                      }
+                                    )
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
+                              ] })
+                            ] }),
+                            enableColumnResizing && /* @__PURE__ */ jsx33(
+                              "div",
                               {
-                                className: cn(
-                                  "h-3 w-3",
-                                  filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
-                                ),
-                                "aria-hidden": true
+                                "data-testid": `resize-handle-${column.id}`,
+                                role: "separator",
+                                "aria-orientation": "vertical",
+                                "aria-label": `Resize ${column.header} column`,
+                                tabIndex: 0,
+                                onMouseDown: header.getResizeHandler(),
+                                onTouchStart: header.getResizeHandler(),
+                                onKeyDown: (event) => {
+                                  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+                                  event.preventDefault();
+                                  const delta = event.key === "ArrowRight" ? 10 : -10;
+                                  const nextSize = Math.max(MIN_COLUMN_SIZE, columnSize(column.id) + delta);
+                                  updateColumnSizing({ ...columnSizing, [column.id]: nextSize });
+                                },
+                                className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                               }
-                            ) }) }),
-                            /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
-                          ] })
-                        ] }),
-                        enableColumnResizing && /* @__PURE__ */ jsx33(
-                          "div",
-                          {
-                            "data-testid": `resize-handle-${column.id}`,
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
-                          }
-                        )
-                      ] }, header.id);
+                            )
+                          ]
+                        },
+                        header.id
+                      );
                     }
                     return /* @__PURE__ */ jsxs20(Fragment3, { children: [
                       hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
@@ -4377,6 +4415,7 @@ function TreeDataGrid({
   virtualizeThreshold = 100,
   estimatedRowHeight = 40,
   maxBodyHeight = 480,
+  testId,
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
   getRowSelectionState,
@@ -4565,28 +4604,39 @@ function TreeDataGrid({
       "div",
       {
         ref: scrollRef,
+        "data-testid": testId,
         className: shouldVirtualize ? "overflow-y-auto" : void 0,
         style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
         children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse text-sm", children: [
           /* @__PURE__ */ jsx34("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx34(
-              Checkbox,
+            showSelectionColumn && /* @__PURE__ */ jsx34(
+              "th",
               {
-                "aria-label": "Select all visible rows",
-                checked: allVisibleSelected,
-                onCheckedChange: toggleAllVisibleSelected
+                className: "sticky top-0 z-20 border-b border-border bg-muted p-1",
+                style: { width: SELECTION_COLUMN_WIDTH },
+                children: /* @__PURE__ */ jsx34(
+                  Checkbox,
+                  {
+                    "aria-label": "Select all visible rows",
+                    checked: allVisibleSelected,
+                    onCheckedChange: toggleAllVisibleSelected
+                  }
+                )
               }
-            ) }),
+            ),
             visibleColumns.map((column) => /* @__PURE__ */ jsx34(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
-                className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
+                className: cn(
+                  "sticky top-0 z-20 border-b border-border bg-muted p-2 font-medium",
+                  alignClassName(column)
+                ),
                 children: column.header
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx34("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+            showRowActionsColumn && /* @__PURE__ */ jsx34("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
           ] }) }),
           /* @__PURE__ */ jsx34("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
             const groupExpanded = isGroupExpanded(bucket.key);