@visns-studio/visns-components 6.6.3 → 6.6.4

package/README.md

@@ -607,6 +607,41 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 
 All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
 
+#### `autoGrow` — rows that outgrow the fixed tablet row height
+
+In tablet mode (and in `large` density) the DataGrid runs at a **fixed** row
+height from `DENSITY_GRID` — 52px or 60px — because the alternative, letting
+the grid measure every row, depends on a rAF that a background-throttled tab
+never runs, which clipped action buttons after an auto-refresh. The cost is
+that a cell whose content genuinely needs a second or third line (a
+`stageCounter` with enough chips to wrap) is cut off at the row height.
+
+`"autoGrow": true` on a column buys those rows back, and only those rows:
+
+```jsx
+{
+    id: 'headers',
+    label: 'Headers',
+    type: 'stageCounter',
+    autoGrow: true,
+    stageConfig: { key: 'headers', stageLabelKey: 'name' }
+}
+```
+
+- The cell's content is measured with a `ResizeObserver`; a row whose content
+  needs more than the fixed height grows to fit it, and every other row keeps
+  the fixed height exactly as before.
+- The added height is the content's natural height plus the cell's **measured**
+  vertical padding and borders, so it tracks `--grid-cell-padding` and the
+  density in force rather than a constant.
+- **Desktop density is unaffected** (`rowHeight` is `null` there, so rows
+  already measure naturally) and a grid with no `autoGrow` column takes exactly
+  the code path it did before.
+- Group rows (`groupBy`) keep the default height; `treeGroupBy` parents and
+  members grow like any other row.
+- Grown rows stay vertically centred, so neighbouring cells and the action
+  buttons line up as they always have.
+
 #### Dropdown Column Color Support
 
 The dropdown column type now supports automatic background color application based on the selected option's `colour` property. This feature works in both DataGrid and GenericEditableTable components.

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.6.3",
+    "version": "6.6.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -144,6 +144,7 @@ import {
     renderPhoneColumn,
     renderAbnColumn,
 } from './columns/ColumnRenderers.jsx';
+import AutoGrowCell from './columns/AutoGrowCell.jsx';
 import _ from 'lodash';
 
 // Enhanced multi-line content support for data cells
@@ -959,6 +960,197 @@ const DataGrid = forwardRef(
         // prevents action buttons from being clipped.
         const { grid } = useDensity();
 
+        // ---------------------------------------------------------------
+        // Per-column autoGrow
+        // ---------------------------------------------------------------
+        //
+        // A column with `"autoGrow": true` lets the ROWS whose content does
+        // not fit the fixed height above grow to fit — and only those rows.
+        // Nothing here runs unless such a column exists AND the density gives
+        // a numeric `grid.rowHeight`; on desktop (`rowHeight === null`) the
+        // grid already measures every row, so autoGrow has nothing to add.
+        //
+        // Why this drives the grid's RowHeightManager instead of passing
+        // `rowHeight` as a function: the datagrid's types advertise
+        // `rowHeight: number | ((rowIndex) => number) | null`, but in this
+        // fork the function form is not implemented. `RowHeightManager`
+        // stores it as `rowHeightFn` and never reads it again, and
+        // `factory.tsx` derives `naturalRowHeight: typeof props.rowHeight !==
+        // 'number'` — so a function rowHeight silently turns on exactly the
+        // lazy per-row rAF measurement the fixed height exists to avoid.
+        //
+        // What IS implemented is the manager's per-index override map: every
+        // row's height comes from `rowHeightManager.getRowHeight(index)`
+        // (packages/react-virtual-list-pro/src/Row.tsx), which reads that map
+        // first and falls back to the fixed height; `setHeights(map)`
+        // re-indexes the offsets and emits `index`, which `VirtualList`
+        // listens for and answers with a full re-layout. The cells follow the
+        // row because Content/Row.tsx passes the row's own height down as the
+        // cell's `initialRowHeight` on unexpanded rows, so a grown row's other
+        // cells and its action buttons stay vertically centred in the taller
+        // box exactly as they are today.
+        //
+        // Heights are keyed by ROW ID (stable across sorting, filtering and
+        // virtualised scrolling) and only converted to the manager's
+        // index-keyed map at flush time, from the grid's own computed data —
+        // which includes group rows, so indexes stay right under groupBy/tree.
+        const autoGrowHeightsRef = useRef(new Map());
+        const autoGrowRowIndexRef = useRef(new Map());
+        const autoGrowAppliedRef = useRef(null);
+        const autoGrowRafRef = useRef(0);
+
+        const flushAutoGrowHeights = useCallback(() => {
+            autoGrowRafRef.current = 0;
+
+            const gridApi = gridRef.current;
+            const manager = gridApi?.rowHeightManager;
+            const baseRowHeight = grid.rowHeight;
+
+            if (!manager || typeof baseRowHeight !== 'number') {
+                return;
+            }
+
+            const heights = autoGrowHeightsRef.current;
+            const next = {};
+
+            // The grid's computed data is the authority on index → row: it is
+            // the array the virtual list indexes into, group rows included.
+            // The `onRenderRow` record is only a fallback for the frame
+            // before `handle` has published the computed props.
+            const data = Array.isArray(gridApi?.data) ? gridApi.data : null;
+
+            if (data) {
+                const present = new Set();
+
+                for (let index = 0; index < data.length; index++) {
+                    const row = data[index];
+
+                    // Group rows keep the default height — they carry a title,
+                    // not a column's content.
+                    if (!row || row.__group) {
+                        continue;
+                    }
+
+                    const rowId = row.id;
+
+                    if (rowId === undefined || rowId === null) {
+                        continue;
+                    }
+
+                    const key = String(rowId);
+
+                    present.add(key);
+
+                    const measured = heights.get(key);
+
+                    if (measured > baseRowHeight) {
+                        next[index] = measured;
+                    }
+                }
+
+                // Rows that left the page cannot be measured again, so drop
+                // their heights rather than letting the map grow forever.
+                heights.forEach((_value, key) => {
+                    if (!present.has(key)) {
+                        heights.delete(key);
+                    }
+                });
+            } else {
+                autoGrowRowIndexRef.current.forEach((key, index) => {
+                    const measured = heights.get(key);
+
+                    if (measured > baseRowHeight) {
+                        next[index] = measured;
+                    }
+                });
+            }
+
+            // setHeights re-indexes and emits, and the re-layout re-renders
+            // the rows — which measures them again. Applying an unchanged map
+            // would therefore loop, so compare before writing.
+            const serialised = JSON.stringify(next);
+
+            if (serialised === autoGrowAppliedRef.current) {
+                return;
+            }
+
+            autoGrowAppliedRef.current = serialised;
+
+            if (typeof manager.setHeights === 'function') {
+                manager.setHeights(next);
+            }
+        }, [grid]);
+
+        // One flush per frame: a page of 100 rows measuring on mount is 100
+        // reports and one re-layout.
+        const scheduleAutoGrowFlush = useCallback(() => {
+            if (autoGrowRafRef.current) {
+                return;
+            }
+
+            if (typeof requestAnimationFrame === 'undefined') {
+                flushAutoGrowHeights();
+                return;
+            }
+
+            autoGrowRafRef.current =
+                requestAnimationFrame(flushAutoGrowHeights);
+        }, [flushAutoGrowHeights]);
+
+        /** `AutoGrowCell`'s callback: one row's natural height, in px. */
+        const reportAutoGrowHeight = useCallback(
+            (rowId, height, force) => {
+                if (
+                    rowId === undefined ||
+                    rowId === null ||
+                    !Number.isFinite(height)
+                ) {
+                    return;
+                }
+
+                const key = String(rowId);
+                const previous = autoGrowHeightsRef.current.get(key);
+                const changed =
+                    previous === undefined || Math.abs(previous - height) > 1;
+
+                if (changed) {
+                    autoGrowHeightsRef.current.set(key, height);
+                }
+
+                // `force` covers the mount/row-changed case: the height may be
+                // identical while the INDEX it has to be applied at is not.
+                if (changed || force) {
+                    scheduleAutoGrowFlush();
+                }
+            },
+            [scheduleAutoGrowFlush]
+        );
+
+        useEffect(
+            () => () => {
+                if (
+                    autoGrowRafRef.current &&
+                    typeof cancelAnimationFrame !== 'undefined'
+                ) {
+                    cancelAnimationFrame(autoGrowRafRef.current);
+                    autoGrowRafRef.current = 0;
+                }
+            },
+            []
+        );
+
+        // Leaving the fixed-height densities hands row heights back to the
+        // grid; anything measured under the old density is meaningless.
+        useEffect(() => {
+            if (typeof grid.rowHeight === 'number') {
+                return;
+            }
+
+            autoGrowHeightsRef.current.clear();
+            autoGrowRowIndexRef.current.clear();
+            autoGrowAppliedRef.current = null;
+        }, [grid]);
+
         // Effect to handle autoRefresh setting
         useEffect(() => {
             if (ajaxSetting && ajaxSetting.autoRefresh !== undefined) {
@@ -1921,7 +2113,11 @@ const DataGrid = forwardRef(
             }
 
             // Show confirmation dialog for other actions to prevent accidental clicks
-            const confirmMessage = `Are you sure you want to perform "${iconConfig.label}" action on group "${groupValue}" (${groupRows.length} rows)?`;
+            const confirmMessage = `Are you sure you want to perform "${
+                iconConfig.label
+            }" action on group "${getGroupDisplayLabel(groupValue)}" (${
+                groupRows.length
+            } rows)?`;
 
             confirmDialog({
                 title: 'Confirm Group Action',
@@ -1959,6 +2155,28 @@ const DataGrid = forwardRef(
             );
         };
 
+        /**
+         * `groupBySetting.labelKey` is display-only: when set, the group row
+         * shows the named field taken from the group's first row instead of
+         * the raw group value (falling back to it when the field is empty).
+         * The group KEY is still `groupValue` — it decides membership,
+         * selection, collapse state, `handleGroupAction`/`shouldShowGroupAction`
+         * and what the backend receives (`groupLabel`).
+         */
+        const getGroupDisplayLabel = (groupValue) => {
+            const labelKey = ajaxSetting?.groupBySetting?.labelKey;
+
+            if (!labelKey) {
+                return groupValue;
+            }
+
+            const label = getGroupRows(groupValue)[0]?.[labelKey];
+
+            return label === null || label === undefined || label === ''
+                ? groupValue
+                : label;
+        };
+
         /**
          * The show-condition grammar shared by group action icons and row
          * action icons:
@@ -2096,7 +2314,9 @@ const DataGrid = forwardRef(
                         iconConfig.fetch.messageFromResponse &&
                             result?.data?.message
                             ? result.data.message
-                            : `${iconConfig.label} - Group: ${groupValue} completed successfully`
+                            : `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                                  groupValue
+                              )} completed successfully`
                     );
 
                     // Reload grid data if needed
@@ -2113,7 +2333,9 @@ const DataGrid = forwardRef(
                 } catch (error) {
                     console.error('Group action fetch error:', error);
                     toast.error(
-                        `${iconConfig.label} - Group: ${groupValue} failed: ${error.message}`
+                        `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                            groupValue
+                        )} failed: ${error.message}`
                     );
                 }
             } else if (iconConfig.formModal) {
@@ -2137,7 +2359,11 @@ const DataGrid = forwardRef(
                 // Fallback to existing switch logic if no fetch config
                 // Skip toast notification for edit actions
                 if (iconConfig.id !== 'edit') {
-                    toast.info(`${iconConfig.label} - Group: ${groupValue}`);
+                    toast.info(
+                        `${iconConfig.label} - Group: ${getGroupDisplayLabel(
+                            groupValue
+                        )}`
+                    );
                 }
 
                 switch (iconConfig.id) {
@@ -2684,6 +2910,26 @@ const DataGrid = forwardRef(
 
         const onRenderRow = useCallback(
             (rowProps) => {
+                // Index → row id, the fallback map autoGrow flushes from
+                // before the grid has published its computed data (see the
+                // autoGrow block above). Group rows are skipped: they keep the
+                // default height.
+                const autoGrowIndex =
+                    rowProps?.rowIndex ?? rowProps?.realIndex;
+
+                if (
+                    typeof autoGrowIndex === 'number' &&
+                    rowProps?.data &&
+                    !rowProps.data.__group &&
+                    rowProps.data.id !== undefined &&
+                    rowProps.data.id !== null
+                ) {
+                    autoGrowRowIndexRef.current.set(
+                        autoGrowIndex,
+                        String(rowProps.data.id)
+                    );
+                }
+
                 // save the original handlers to be called later
                 const { onClick } = rowProps;
 
@@ -4594,16 +4840,91 @@ const DataGrid = forwardRef(
                         };
                     };
 
+                    /**
+                     * `"autoGrow": true` on a column definition.
+                     *
+                     * Opt-in, and only meaningful where the grid runs at a
+                     * fixed row height — on desktop (`grid.rowHeight === null`)
+                     * rows already measure naturally, so this returns the
+                     * column untouched and the code path below is the one that
+                     * has always run.
+                     *
+                     * Outermost decorator on purpose: it has to measure the
+                     * FINAL content of the cell, including the tree indent and
+                     * any row-action icons the decorators below add.
+                     */
+                    const decorateAutoGrow = (gridColumn, columnDef) => {
+                        if (
+                            columnDef?.autoGrow !== true ||
+                            typeof grid.rowHeight !== 'number' ||
+                            !gridColumn
+                        ) {
+                            return gridColumn;
+                        }
+
+                        const originalRender = gridColumn.render;
+                        const existingClassName = gridColumn.className;
+
+                        // The class relaxes the nowrap/ellipsis clamp that
+                        // global-datagrid.css puts on every non-wrapping cell;
+                        // without it the content can never take a second line
+                        // and so can never be taller than the row.
+                        const withAutoGrowClass = (base) =>
+                            [base, 'cell-auto-grow'].filter(Boolean).join(' ');
+
+                        return {
+                            ...gridColumn,
+                            className:
+                                typeof existingClassName === 'function'
+                                    ? (...args) =>
+                                          withAutoGrowClass(
+                                              existingClassName(...args)
+                                          )
+                                    : withAutoGrowClass(existingClassName),
+                            render: (arg) => {
+                                const content = originalRender
+                                    ? originalRender(arg)
+                                    : arg?.value ?? null;
+
+                                const row = arg?.data;
+
+                                // Group rows keep the default height, and an
+                                // empty cell has nothing to grow for.
+                                if (
+                                    !row ||
+                                    row.__group ||
+                                    content === null ||
+                                    content === undefined ||
+                                    content === false
+                                ) {
+                                    return content;
+                                }
+
+                                return (
+                                    <AutoGrowCell
+                                        rowId={row.id}
+                                        onMeasure={reportAutoGrowHeight}
+                                    >
+                                        {content}
+                                    </AutoGrowCell>
+                                );
+                            },
+                        };
+                    };
+
                     // decorateTreeChildIndent sits INSIDE
                     // decorateTreeParentActions: the latter draws parent rows
                     // itself and delegates everything else downward, so the
                     // member indent has to be the render it delegates to.
                     const newColumns = columns.map((column) =>
-                        decorateColumnRowActions(
-                            decorateTreeParentActions(
-                                decorateTreeChildIndent(
-                                    guardTreeParentRender(
-                                        renderColumn(column),
+                        decorateAutoGrow(
+                            decorateColumnRowActions(
+                                decorateTreeParentActions(
+                                    decorateTreeChildIndent(
+                                        guardTreeParentRender(
+                                            renderColumn(column),
+                                            column
+                                        ),
                                         column
                                     ),
                                     column
@@ -5328,126 +5649,130 @@ const DataGrid = forwardRef(
                                                               aria-label="Select all items in this group"
                                                           />
                                                       )}
-                                                      <button
-                                                          className={`group-expand-btn ${styles.groupExpandBtn}`}
-                                                          onClick={(e) => {
-                                                              e.stopPropagation();
-                                                              if (
-                                                                  typeof toggleGroup ===
-                                                                  'function'
-                                                              ) {
-                                                                  toggleGroup();
+                                                      <div
+                                                          className={`group-controls ${styles.groupControls}`}
+                                                      >
+                                                          <button
+                                                              className={`group-expand-btn ${styles.groupExpandBtn}`}
+                                                              onClick={(e) => {
+                                                                  e.stopPropagation();
+                                                                  if (
+                                                                      typeof toggleGroup ===
+                                                                      'function'
+                                                                  ) {
+                                                                      toggleGroup();
+                                                                  }
+                                                              }}
+                                                              onTouchStart={(e) => {
+                                                                  e.stopPropagation();
+                                                                  handleTouchStart(
+                                                                      e,
+                                                                      'group-expand',
+                                                                      collapsed
+                                                                          ? 'Expand group'
+                                                                          : 'Collapse group'
+                                                                  );
+                                                              }}
+                                                              onTouchEnd={
+                                                                  handleTouchEnd
                                                               }
-                                                          }}
-                                                          onTouchStart={(e) => {
-                                                              e.stopPropagation();
-                                                              handleTouchStart(
-                                                                  e,
-                                                                  'group-expand',
+                                                              onTouchMove={
+                                                                  handleTouchMove
+                                                              }
+                                                              data-tooltip-id="system-tooltip"
+                                                              data-tooltip-content={
                                                                   collapsed
                                                                       ? 'Expand group'
                                                                       : 'Collapse group'
-                                                              );
-                                                          }}
-                                                          onTouchEnd={
-                                                              handleTouchEnd
-                                                          }
-                                                          onTouchMove={
-                                                              handleTouchMove
-                                                          }
-                                                          data-tooltip-id="system-tooltip"
-                                                          data-tooltip-content={
-                                                              collapsed
-                                                                  ? 'Expand group'
-                                                                  : 'Collapse group'
-                                                          }
-                                                      >
-                                                          {collapsed
-                                                              ? '+'
-                                                              : '−'}
-                                                      </button>
-                                                      {/* Dynamic group action buttons */}
-                                                      {ajaxSetting?.groupBySetting?.icons?.map(
-                                                          (
-                                                              iconConfig,
-                                                              index
-                                                          ) => {
-                                                              // Check if this icon should be shown based on show conditions
-                                                              if (
-                                                                  !shouldShowGroupAction(
-                                                                      iconConfig,
-                                                                      groupValue
-                                                                  )
-                                                              ) {
-                                                                  return null;
                                                               }
+                                                          >
+                                                              {collapsed
+                                                                  ? '+'
+                                                                  : '−'}
+                                                          </button>
+                                                          {/* Dynamic group action buttons */}
+                                                          {ajaxSetting?.groupBySetting?.icons?.map(
+                                                              (
+                                                                  iconConfig,
+                                                                  index
+                                                              ) => {
+                                                                  // Check if this icon should be shown based on show conditions
+                                                                  if (
+                                                                      !shouldShowGroupAction(
+                                                                          iconConfig,
+                                                                          groupValue
+                                                                      )
+                                                                  ) {
+                                                                      return null;
+                                                                  }
 
-                                                              const IconComponent =
-                                                                  getGroupIconComponent(
-                                                                      iconConfig.id
-                                                                  );
+                                                                  const IconComponent =
+                                                                      getGroupIconComponent(
+                                                                          iconConfig.id
+                                                                      );
 
-                                                              // Generate different color classes for multiple buttons
-                                                              const colorClasses =
-                                                                  [
-                                                                      'success',
-                                                                      'warning',
-                                                                      'info',
-                                                                      'purple',
-                                                                      'pink',
-                                                                  ];
-                                                              const colorClass =
-                                                                  colorClasses[
-                                                                      index %
-                                                                          colorClasses.length
-                                                                  ];
-
-                                                              return (
-                                                                  <button
-                                                                      key={`group-action-${index}`}
-                                                                      className={`group-action-btn group-${iconConfig.id}-btn ${styles.groupActionBtn} ${styles[colorClass]}`}
-                                                                      onClick={(
-                                                                          e
-                                                                      ) => {
-                                                                          e.stopPropagation();
-                                                                          handleGroupAction(
-                                                                              groupValue,
-                                                                              iconConfig
-                                                                          );
-                                                                      }}
-                                                                      onTouchStart={(
-                                                                          e
-                                                                      ) => {
-                                                                          e.stopPropagation();
-                                                                          handleTouchStart(
-                                                                              e,
-                                                                              `group-${iconConfig.id}-${index}`,
-                                                                              iconConfig.label
-                                                                          );
-                                                                      }}
-                                                                      onTouchEnd={
-                                                                          handleTouchEnd
-                                                                      }
-                                                                      onTouchMove={
-                                                                          handleTouchMove
-                                                                      }
-                                                                      data-tooltip-id="system-tooltip"
-                                                                      data-tooltip-content={
-                                                                          iconConfig.label
-                                                                      }
-                                                                  >
-                                                                      <IconComponent
-                                                                          strokeWidth={
-                                                                              2
+                                                                  // Generate different color classes for multiple buttons
+                                                                  const colorClasses =
+                                                                      [
+                                                                          'success',
+                                                                          'warning',
+                                                                          'info',
+                                                                          'purple',
+                                                                          'pink',
+                                                                      ];
+                                                                  const colorClass =
+                                                                      colorClasses[
+                                                                          index %
+                                                                              colorClasses.length
+                                                                      ];
+
+                                                                  return (
+                                                                      <button
+                                                                          key={`group-action-${index}`}
+                                                                          className={`group-action-btn group-${iconConfig.id}-btn ${styles.groupActionBtn} ${styles[colorClass]}`}
+                                                                          onClick={(
+                                                                              e
+                                                                          ) => {
+                                                                              e.stopPropagation();
+                                                                              handleGroupAction(
+                                                                                  groupValue,
+                                                                                  iconConfig
+                                                                              );
+                                                                          }}
+                                                                          onTouchStart={(
+                                                                              e
+                                                                          ) => {
+                                                                              e.stopPropagation();
+                                                                              handleTouchStart(
+                                                                                  e,
+                                                                                  `group-${iconConfig.id}-${index}`,
+                                                                                  iconConfig.label
+                                                                              );
+                                                                          }}
+                                                                          onTouchEnd={
+                                                                              handleTouchEnd
                                                                           }
-                                                                          size={
-                                                                              14
+                                                                          onTouchMove={
+                                                                              handleTouchMove
                                                                           }
-                                                                      />
-                                                                  </button>
-                                                              );
-                                                          }
-                                                      ) || null}
+                                                                          data-tooltip-id="system-tooltip"
+                                                                          data-tooltip-content={
+                                                                              iconConfig.label
+                                                                          }
+                                                                      >
+                                                                          <IconComponent
+                                                                              strokeWidth={
+                                                                                  2
+                                                                              }
+                                                                              size={
+                                                                                  14
+                                                                              }
+                                                                          />
+                                                                      </button>
+                                                                  );
+                                                              }
+                                                          ) || null}
+                                                      </div>
                                                       <div
                                                           className={
                                                               styles.groupInfo
@@ -5458,7 +5783,9 @@ const DataGrid = forwardRef(
                                                                   styles.groupValue
                                                               }
                                                           >
-                                                              {groupValue}
+                                                              {getGroupDisplayLabel(
+                                                                  groupValue
+                                                              )}
                                                               {/* Important marker */}
                                                               {hasImportantMarker && (
                                                                   <AlertCircle

package/src/components/columns/AutoGrowCell.jsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * The measuring wrapper behind a column's `"autoGrow": true`.
+ *
+ * Why it exists
+ * -------------
+ * In tablet mode (and in `large` density generally) the grid runs with a
+ * FIXED `rowHeight` — see the density table in `utils/useDensity.js` and the
+ * comment above `rowHeight={grid.rowHeight}` in `DataGrid.jsx`. A fixed height
+ * is what keeps action buttons from being clipped after an auto-refresh on an
+ * idle tab, because Inovua's alternative (`rowHeight={null}`) measures every
+ * row with a lazily-scheduled rAF, which a background-throttled tab never runs.
+ *
+ * The cost of that trade is that a cell whose content genuinely needs three
+ * lines — a `stageCounter` column with enough chips to wrap twice — gets cut
+ * off at the row's height. `autoGrow` buys back JUST those rows: this wrapper
+ * measures the content's natural height and hands it up, and the grid raises
+ * that ONE row to fit. Every other row keeps the fixed height, so the property
+ * that made the fixed height worth having (no measurement in the common path)
+ * is preserved.
+ *
+ * How the measurement stays honest
+ * --------------------------------
+ * The cell itself is height-clamped (`.InovuaReactDataGrid__cell` gets an
+ * inline `height` from the row's height, and `global-datagrid.css` gives it
+ * `overflow: hidden`), so measuring the CELL would only ever report the clamp
+ * back. This `div` is a plain block inside the cell's content wrapper with no
+ * height of its own, so its `scrollHeight` is the content's natural height
+ * whatever the cell around it is doing.
+ *
+ * The number reported is a ROW height, not a content height: the owning cell's
+ * vertical padding and borders are read off `getComputedStyle` and added, so
+ * the figure tracks `--grid-cell-padding` and the density that sets it instead
+ * of a constant that would drift the moment either changed.
+ *
+ * @param {object}   props
+ * @param {*}        props.rowId     id of the row this cell belongs to; the
+ *                                   key the grid stores the height under.
+ * @param {Function} props.onMeasure `(rowId, heightPx, force) => void`
+ * @param {import('react').ReactNode} props.children the column's own render.
+ */
+const AutoGrowCell = ({ rowId, onMeasure, children }) => {
+    const nodeRef = useRef(null);
+    // Last height handed up, so a ResizeObserver that fires on every column
+    // resize does not re-report a height nothing has changed about.
+    const lastReportedRef = useRef(null);
+
+    useEffect(() => {
+        const node = nodeRef.current;
+
+        if (
+            !node ||
+            rowId === undefined ||
+            rowId === null ||
+            typeof onMeasure !== 'function'
+        ) {
+            return undefined;
+        }
+
+        /**
+         * Padding + borders of the cell this content sits in. Measured rather
+         * than assumed: `--grid-cell-padding` is density-driven and a caller
+         * can override it per grid.
+         */
+        const cellChrome = () => {
+            if (
+                typeof window === 'undefined' ||
+                typeof window.getComputedStyle !== 'function' ||
+                typeof node.closest !== 'function'
+            ) {
+                return 0;
+            }
+
+            const cell = node.closest('.InovuaReactDataGrid__cell');
+
+            if (!cell) {
+                return 0;
+            }
+
+            const cs = window.getComputedStyle(cell);
+            const sum =
+                (parseFloat(cs.paddingTop) || 0) +
+                (parseFloat(cs.paddingBottom) || 0) +
+                (parseFloat(cs.borderTopWidth) || 0) +
+                (parseFloat(cs.borderBottomWidth) || 0);
+
+            return Number.isFinite(sum) ? sum : 0;
+        };
+
+        /**
+         * @param {boolean} force report even when the height has not moved —
+         *        used on mount and whenever the row under this cell changes,
+         *        because the grid keys heights by row index and an unchanged
+         *        height at a NEW index still has to be re-applied.
+         */
+        const report = (force) => {
+            if (!nodeRef.current) {
+                return;
+            }
+
+            const natural = nodeRef.current.scrollHeight || 0;
+
+            if (!natural) {
+                return;
+            }
+
+            const height = Math.ceil(natural + cellChrome());
+            const last = lastReportedRef.current;
+
+            if (!force && last !== null && Math.abs(last - height) <= 1) {
+                return;
+            }
+
+            lastReportedRef.current = height;
+            onMeasure(rowId, height, !!force);
+        };
+
+        report(true);
+
+        // No ResizeObserver (jsdom, older Safari): the mount measurement above
+        // still applies, the cell just will not follow later reflows.
+        if (typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+
+        const observer = new ResizeObserver(() => report(false));
+
+        observer.observe(node);
+
+        return () => observer.disconnect();
+    }, [rowId, onMeasure]);
+
+    return (
+        <div ref={nodeRef} className="autoGrowCell" style={{ width: '100%' }}>
+            {children}
+        </div>
+    );
+};
+
+export default AutoGrowCell;

package/src/components/styles/DataGrid.module.scss

@@ -1011,6 +1011,16 @@
     position: relative;
 }
 
+// The expand toggle and the group-action buttons as one block, so a
+// consuming stylesheet can give the controls a minimum width (lining the
+// label up with a column) while still letting a row with many buttons push
+// the label right instead of running underneath it.
+.groupControls {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
 .groupHeaderCheckbox {
     width: 22px;
     height: 22px;

package/src/components/styles/global-datagrid.css

@@ -110,6 +110,35 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     overflow: hidden !important;
 }
 
+/* Auto-grow cells — a column with `"autoGrow": true`.
+
+   The opposite trade to the tablet word-wrap clamp above: instead of the cell
+   clamping its content to the row, the ROW grows to its content (DataGrid
+   measures it through AutoGrowCell and raises that one row via the grid's
+   RowHeightManager). So the content must be allowed to take a second and third
+   line — the nowrap/ellipsis rule that applies to every other non-wrapping
+   cell would otherwise make the content one line tall forever and there would
+   be nothing to grow for.
+
+   The CELL keeps `overflow: hidden`: between the frame the content grows in
+   and the frame the row grows in, the extra lines are clipped at the row
+   boundary rather than spilling over the row below, which is what the grid
+   looks like today. The inner wrapper stays `overflow: visible` so nothing
+   clips once the row has caught up, and `align-self: center` on the grid's own
+   content wrapper keeps the value vertically centred in the taller row, next
+   to the neighbouring cells and the action buttons. */
+.InovuaReactDataGrid__cell.cell-auto-grow,
+.InovuaReactDataGrid__cell.cell-auto-grow .InovuaReactDataGrid__cell__content,
+.InovuaReactDataGrid__cell.cell-auto-grow .autoGrowCell {
+    white-space: normal !important;
+    text-overflow: clip !important;
+}
+
+.InovuaReactDataGrid__cell.cell-auto-grow .InovuaReactDataGrid__cell__content,
+.InovuaReactDataGrid__cell.cell-auto-grow .autoGrowCell {
+    overflow: visible !important;
+}
+
 /* NOTE: this fork renders header cells as .InovuaReactDataGrid__column-header
    (there is no __header-cell class in its DOM), so header padding is left to
    the module stylesheet; a __header-cell padding rule that used to sit here