@bmsuisse/datagrid 0.40.0 → 0.41.0

package/dist/index.d.ts

@@ -1687,6 +1687,23 @@ interface DataGridProps<TRow> {
      */
     selectedIds?: ReadonlySet<string>;
     onSelectedIdsChange?: (ids: ReadonlySet<string>) => void;
+    /**
+     * `"multiple"` (default) renders a checkbox per row plus a select-all in the
+     * header. `"single"` renders a radio per row instead, selects exactly one
+     * row (choosing another replaces it; a radio can't be cleared by clicking
+     * it again), and leaves the header cell empty. Setting `"single"` shows the
+     * selection column even when neither `selectedIds` nor `headerActions` is
+     * supplied; the selection itself is still read through `selectedIds` /
+     * `onSelectedIdsChange`, which hold at most one id in this mode.
+     */
+    selectionMode?: "multiple" | "single";
+    /**
+     * Caps the height of the scroll container (px number or any CSS length such
+     * as `"65vh"`) without needing `virtualize` — the header stays sticky while
+     * the rows scroll under it. Ignored when `virtualize` is active, which uses
+     * `virtualize.maxBodyHeight` instead. Omit for a grid that grows with its rows.
+     */
+    maxHeight?: number | string;
     /**
      * Extra props (className, onClick, data-* attributes, etc.) spread onto a
      * row's own `<tr>`. Applied AFTER `<DataGrid>`'s own `data-testid`/
@@ -1838,7 +1855,7 @@ interface DataGridProps<TRow> {
  * (`"server"`). Column filter UI defaults to the type-appropriate widget
  * from `src/filter` unless a column supplies its own `cell` renderer.
  */
-declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, onGridStateChange, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, error, onRetry, statusLabels, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, showTotals, editing, cellEditing, filterLabels, }: DataGridProps<TRow>): ReactElement;
+declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, onGridStateChange, selectedIds: controlledSelectedIds, onSelectedIdsChange, selectionMode, maxHeight, testId, loading: loadingProp, error, onRetry, statusLabels, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, showTotals, editing, cellEditing, filterLabels, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;

package/dist/index.js

@@ -3267,7 +3267,7 @@ function GridInlineError({
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment3, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef13, useState as useState16 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect12, useId as useId4, useMemo as useMemo9, useRef as useRef13, useState as useState16 } from "react";
 
 // src/cell-editing/renderAlwaysEditCell.tsx
 import {
@@ -3689,6 +3689,8 @@ function DataGrid({
   onGridStateChange,
   selectedIds: controlledSelectedIds,
   onSelectedIdsChange,
+  selectionMode = "multiple",
+  maxHeight,
   testId,
   loading: loadingProp = false,
   error,
@@ -3715,11 +3717,18 @@ function DataGrid({
     onGridStateChange
   );
   const [internalSelectedIds, setInternalSelectedIds] = useState16(/* @__PURE__ */ new Set());
-  const selectedIds = controlledSelectedIds ?? internalSelectedIds;
+  const rawSelectedIds = controlledSelectedIds ?? internalSelectedIds;
+  const selectedIds = useMemo9(
+    () => selectionMode === "single" && rawSelectedIds.size > 1 ? new Set([...rawSelectedIds].slice(0, 1)) : rawSelectedIds,
+    [selectionMode, rawSelectedIds]
+  );
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
+  useEffect12(() => {
+    if (selectedIds !== rawSelectedIds) updateSelectedIds(selectedIds);
+  }, [selectedIds, rawSelectedIds]);
   const [internalColumnSizing, setInternalColumnSizing] = useState16({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
@@ -3760,7 +3769,13 @@ function DataGrid({
     [rows, selectedIds, getRowId]
   );
   const allOnPageSelected = rows.length > 0 && rows.every((row) => selectedIds.has(getRowId(row)));
+  const singleSelect = selectionMode === "single";
+  const selectionGroupName = useId4();
   function toggleRowSelected(id) {
+    if (singleSelect) {
+      updateSelectedIds(/* @__PURE__ */ new Set([id]));
+      return;
+    }
     const next = new Set(selectedIds);
     if (next.has(id)) next.delete(id);
     else next.add(id);
@@ -3803,7 +3818,7 @@ function DataGrid({
   const labels = resolveStatusLabels(statusLabels);
   const hasError = toErrorInfo(error) !== void 0;
   const loading = loadingProp || (dataSource.mode === "server" ? Boolean(dataSource.loading) : false);
-  const showSelectionColumn = Boolean(headerActions?.length) || controlledSelectedIds !== void 0;
+  const showSelectionColumn = Boolean(headerActions?.length) || controlledSelectedIds !== void 0 || selectionMode === "single";
   const showRowActionsColumn = Boolean(rowActions?.length);
   const showDetailColumn = Boolean(renderDetail);
   const totalColumnCount = visibleColumns.length + (showDetailColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
@@ -4124,6 +4139,8 @@ function DataGrid({
   }
   function handleCellKeyDown(event) {
     if (!hasCellEditing || !cellEditingCtx) return;
+    if (event.target instanceof HTMLInputElement && (event.target.type === "radio" || event.target.type === "checkbox") && !event.target.closest("[data-cell-row]"))
+      return;
     if (cellEditingCtx.alwaysEdit) return;
     if (cellEditingCtx.editingCell && !cellEditingCtx.consumeJustCommitted()) return;
     const direction = CELL_NAV_KEYS[event.key];
@@ -4253,7 +4270,8 @@ function DataGrid({
                 children: /* @__PURE__ */ jsx35(
                   "input",
                   {
-                    type: "checkbox",
+                    type: singleSelect ? "radio" : "checkbox",
+                    name: singleSelect ? selectionGroupName : void 0,
                     "aria-label": `Select row ${row.id}`,
                     checked: selectedIds.has(row.id),
                     onClick: stopRowClick,
@@ -4432,7 +4450,7 @@ function DataGrid({
               "h-full overflow-auto rounded-md border",
               hasCellEditing && "relative"
             ),
-            style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
+            style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : maxHeight !== void 0 ? { maxHeight } : void 0,
             tabIndex: hasCellEditing ? 0 : void 0,
             onMouseDown: hasCellEditing ? handleCellMouseDown : void 0,
             onDoubleClick: hasCellEditing ? handleCellDoubleClick : void 0,
@@ -4550,7 +4568,7 @@ function DataGrid({
                             rowSpan: 2,
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx35(
+                            children: !singleSelect && /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",
@@ -4596,7 +4614,7 @@ function DataGrid({
                           {
                             className: selectionHeaderCellProps.className,
                             style: selectionHeaderCellProps.style,
-                            children: /* @__PURE__ */ jsx35(
+                            children: !singleSelect && /* @__PURE__ */ jsx35(
                               "input",
                               {
                                 type: "checkbox",