@linzjs/step-ag-grid 29.16.0 → 29.19.0

package/README.md

@@ -276,5 +276,5 @@ If your grid has a data-testid a global will be exposed in window with the helpe
 This will throw an exception if the row id is not found.
 
 ```tsx
-window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("1000")
+window.__stepAgGrid.grids[dataTestId].scrollRowIntoViewById("1001")
 ```

package/dist/index.css

@@ -340,6 +340,11 @@
   flex-direction: column;
 }
 
+.Grid-hideSelectedRow div.ag-row::before {
+  content: "";
+  background-color: white !important;
+}
+
 .Grid-wrapper {
   display: flex;
   flex-direction: column;
@@ -636,3 +641,25 @@ div.ag-row div.ag-cell.rangeSelectBottom {
 .MenuItem-icon {
   margin-right: 8px;
 }
+
+.GridFormInlineTextInput {
+  height: 100%;
+}
+
+.GridFormInlineTextInput-error > input {
+  border: 2px solid red !important;
+}
+
+.GridFormInlineTextInput > input {
+  display: block;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  padding-left: 9px;
+  padding-right: 9px;
+  outline: 0;
+  border: 0;
+  font-family: "Open Sans", system-ui, sans-serif;
+}

package/dist/src/components/Grid.d.ts

@@ -23,16 +23,17 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     enableClickSelection?: boolean;
     enableRangeSelection?: boolean;
     enableSelectionWithoutKeys?: boolean;
+    enableMultilineBulkEdit?: boolean;
     externalSelectedIds?: TData['id'][];
     externalSelectedItems?: TData[];
     hideSelectColumn?: boolean;
+    hideSelectedRow?: boolean;
     selectColumnPinned?: ColDef['pinned'];
     selectable?: boolean;
     setExternalSelectedIds?: (ids: TData['id'][]) => void;
     setExternalSelectedItems?: (items: TData[]) => void;
     onBulkEditingComplete?: () => Promise<void> | void;
     singleClickEdit?: boolean;
-    stopEditingWhenCellsLoseFocus?: boolean;
     contextMenu?: GridContextMenuComponent<TData>;
     contextMenuSelectRow?: boolean;
     onCellFocused?: (props: {
@@ -64,4 +65,4 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ theme, "data-testid": dataTestId, suppressReadOnlyStyle, defaultPostSort, rowData, rowHeight, rowSelection, sizeColumns, autoSelectFirstRow, enableRangeSelection, externalSelectedIds, externalSelectedItems, selectColumnPinned, selectable, setExternalSelectedIds, setExternalSelectedItems, singleClickEdit, stopEditingWhenCellsLoseFocus, contextMenuSelectRow, contextMenu, onCellFocused: paramsOnCellFocused, onColumnMoved, suppressColumnVirtualization, maxInitialWidth, ...params }: GridProps<TData>) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ theme, "data-testid": dataTestId, suppressReadOnlyStyle, defaultPostSort, rowData, rowHeight, rowSelection, sizeColumns, autoSelectFirstRow, enableRangeSelection, externalSelectedIds, externalSelectedItems, selectColumnPinned, selectable, setExternalSelectedIds, setExternalSelectedItems, singleClickEdit, enableMultilineBulkEdit, contextMenuSelectRow, contextMenu, onCellFocused: paramsOnCellFocused, onColumnMoved, suppressColumnVirtualization, maxInitialWidth, ...params }: GridProps<TData>) => ReactElement;

package/dist/src/components/gridForm/GridFormInlineTextInput.d.ts

@@ -0,0 +1,15 @@
+import { TextInputValidatorProps } from '../../utils/textValidator';
+import { MaybePromise } from '../../utils/util';
+import { CellEditorCommon } from '../GridCell';
+import { GridBaseRow } from '../types';
+export interface GridFormInlineTextInput<TData extends GridBaseRow> extends TextInputValidatorProps<TData>, CellEditorCommon {
+    placeholder?: string;
+    units?: string;
+    onSave?: (props: {
+        selectedRows: TData[];
+        selectedRowIds: TData['id'][];
+        value: string;
+    }) => MaybePromise<boolean>;
+    helpText?: string;
+}
+export declare const GridFormInlineTextInput: <TData extends GridBaseRow>(props: GridFormInlineTextInput<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/gridForm/index.d.ts

@@ -1,5 +1,6 @@
 export * from './GridFormDropDown';
 export * from './GridFormEditBearing';
+export * from './GridFormInlineTextInput';
 export * from './GridFormMessage';
 export * from './GridFormMultiSelect';
 export * from './GridFormMultiSelectGrid';

package/dist/src/components/gridHook/useGridRangeSelection.d.ts

@@ -4,7 +4,7 @@ import { GridBaseRow } from '../types';
 export interface CellLocation {
     rowId: string;
     colId: string;
-    timestamp: number;
+    clickLocation: [number, number];
 }
 export interface GridRanges<TData extends GridBaseRow> {
     selectedColIds: string[];

package/dist/src/components/gridPopoverEdit/GridInlineTextInput.d.ts

@@ -0,0 +1,5 @@
+import { GenericCellEditorProps } from '../GridCell';
+import { GridFormInlineTextInput } from '../gridForm/GridFormInlineTextInput';
+import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
+import { ColDefT, GridBaseRow } from '../types';
+export declare const GridInlineTextInput: <TData extends GridBaseRow, TValue = any>(colDef: GenericCellColDef<TData, TValue>, params: GenericCellEditorProps<GridFormInlineTextInput<TData>>) => ColDefT<TData, TValue>;

package/dist/src/components/gridPopoverEdit/index.d.ts

@@ -1,5 +1,6 @@
 export * from './GridButton';
 export * from './GridEditBoolean';
+export * from './GridInlineTextInput';
 export * from './GridPopoutEditMultiSelect';
 export * from './GridPopoutEditMultiSelectGrid';
 export * from './GridPopoverEditBearing';

package/dist/src/contexts/GridContext.d.ts

@@ -20,7 +20,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     getColDef: (colId?: string) => ColDef | undefined;
     getColumns: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => ColDefT<TData, any>[];
     getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-    setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => void;
+    setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, enableMultilineBulkEdit: boolean, dataTestId?: string) => void;
     prePopupOps: () => void;
     setQuickFilter: (quickFilter: string) => void;
     editingCells: () => boolean;

package/dist/src/utils/__tests__/storybookTestUtil.ts

@@ -1,7 +1,7 @@
 import { sortBy } from 'lodash-es';
 import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { findQuick, getAllQuick } from './testQuick';
+import { findQuick, getAllQuick, queryAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
@@ -22,6 +22,10 @@ export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement
   await user.keyboard('{Enter}');
 };
 
+export const getNumberOfGridRows = (props?: { grid?: HTMLElement }): number => {
+  return queryAllQuick({ classes: '.ag-row' }, props?.grid).length;
+};
+
 export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
   return sortBy(
     getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),

package/dist/step-ag-grid.cjs

@@ -2634,8 +2634,9 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, co
     const clickedRowRef = React.useRef(null);
     const eventRef = React.useRef(undefined);
     const openMenu = React.useCallback((e) => {
-        if (!e)
+        if (!e) {
             return;
+        }
         prePopupOps();
         setAnchorPoint({ x: e.clientX, y: e.clientY });
         setOpen(true);
@@ -2905,7 +2906,11 @@ const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOn
         contextMenu: (GridRangeSelectContextMenu),
         context: { onCopy, copyType, setCopyType },
     });
-    const rangeSelectInterceptContextMenu = React.useCallback((event) => rangeStartRef.current == null ? cellContextMenu(event) : rangeSelectContextMenu(event), [cellContextMenu, rangeSelectContextMenu]);
+    const rangeSelectInterceptContextMenu = React.useCallback((event) => {
+        return hasSelectedMoreThanOneCellRef.current && rangeStartRef.current !== null
+            ? rangeSelectContextMenu(event)
+            : cellContextMenu(event);
+    }, [cellContextMenu, rangeSelectContextMenu]);
     return {
         onCopyEvent,
         rangeSelectInterceptContextMenu,
@@ -3029,6 +3034,23 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
         rangeEndRef.current = null;
         updateRangeSelectionCellClasses();
     }, [updateRangeSelectionCellClasses]);
+    const mouseDownRef = React.useRef([0, 0]);
+    const trackMouseDown = React.useCallback((e) => {
+        mouseDownRef.current = [e.screenX, e.screenY];
+    }, []);
+    const trackMouseUp = React.useCallback((e) => {
+        if (rangeEndRef.current) {
+            rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
+        }
+    }, []);
+    React.useEffect(() => {
+        document.addEventListener('mousedown', trackMouseDown, { capture: true });
+        document.addEventListener('mouseup', trackMouseUp, { capture: true });
+        return () => {
+            document.removeEventListener('mousemove', trackMouseDown, { capture: true });
+            document.removeEventListener('mouseup', trackMouseUp, { capture: true });
+        };
+    }, []);
     const onCellMouseOver = React.useCallback((e, mouseDown) => {
         if (!enableRangeSelection) {
             return;
@@ -3042,19 +3064,20 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
         rangeEndRef.current = {
             rowId: e.node.data.id,
             colId: e.column.getColId(),
-            timestamp: Date.now(),
+            clickLocation: [0, 0],
         };
         if (mouseDown) {
             const sortedNodes = [];
             e.api.forEachNodeAfterFilterAndSort((node) => sortedNodes.push(node));
             rangeSortedNodesRef.current = sortedNodes;
             setRefreshIntervalEnabled(true);
-            rangeStartRef.current = { ...rangeEndRef.current };
+            rangeStartRef.current = { ...rangeEndRef.current, clickLocation: mouseDownRef.current };
         }
         if (rangeStartRef.current &&
             rangeEndRef.current &&
             (rangeStartRef.current.rowId !== rangeEndRef.current.rowId ||
                 rangeStartRef.current.colId !== rangeEndRef.current.colId)) {
+            e.api.stopEditing();
             hasSelectedMoreThanOneCellRef.current = true;
             window.getSelection()?.removeAllRanges();
         }
@@ -3259,7 +3282,7 @@ defaultPostSort = true, rowData, rowHeight = theme === 'ag-theme-step-default' ?
 // ─── Selection ────────────────────────────────
 autoSelectFirstRow, enableRangeSelection = false, externalSelectedIds, externalSelectedItems, selectColumnPinned = 'left', selectable, setExternalSelectedIds, setExternalSelectedItems, 
 // ─── Editing ──────────────────────────────────
-singleClickEdit = false, stopEditingWhenCellsLoseFocus = false, 
+singleClickEdit = false, enableMultilineBulkEdit = false, 
 // ─── Context Menu ─────────────────────────────
 contextMenuSelectRow = false, contextMenu, 
 // ─── Callbacks / Events ───────────────────────
@@ -3541,10 +3564,16 @@ maxInitialWidth,
      * When grid is ready set the apis to the grid context and sync selected items to grid.
      */
     const onGridReady = React.useCallback((event) => {
-        setApis(event.api, hasExternallySelectedItems, dataTestId);
+        setApis(event.api, hasExternallySelectedItems, enableMultilineBulkEdit, dataTestId);
         event.api.showNoRowsOverlay();
         synchroniseExternallySelectedItemsToGrid();
-    }, [dataTestId, hasExternallySelectedItems, setApis, synchroniseExternallySelectedItemsToGrid]);
+    }, [
+        dataTestId,
+        enableMultilineBulkEdit,
+        hasExternallySelectedItems,
+        setApis,
+        synchroniseExternallySelectedItemsToGrid,
+    ]);
     /**
      * When the grid is being initialized the data may be empty.
      * This will resize columns when we have at least one row.
@@ -3587,6 +3616,11 @@ maxInitialWidth,
      * Handle double click edit
      */
     const onCellDoubleClick = React.useCallback((event) => {
+        const cellEditing = event.api.getEditingCells()?.[0];
+        if (cellEditing && cellEditing.colId === event.column.getColId() && cellEditing.rowIndex === event.rowIndex) {
+            // Ignore double click in already editing cell
+            return;
+        }
         const editable = fnOrVar(event.colDef?.editable, event);
         if (editable && !invokeEditAction(event)) {
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
@@ -3671,18 +3705,25 @@ maxInitialWidth,
      * Handle single click edits
      */
     const onCellClicked = React.useCallback((event) => {
-        if (rangeStartRef.current && rangeEndRef.current) {
+        if (enableRangeSelection && rangeStartRef.current && rangeEndRef.current) {
             // This is to detect difference between a single click and a click drag return to cell.
-            if (rangeEndRef.current.timestamp - rangeStartRef.current.timestamp < 100) {
-                clearRangeSelection();
+            const maxDistanceBetweenC = Math.max(Math.abs(rangeEndRef.current.clickLocation[0] - rangeStartRef.current.clickLocation[0]), Math.abs(rangeEndRef.current.clickLocation[1] - rangeStartRef.current.clickLocation[1]));
+            if (maxDistanceBetweenC > 8) {
+                return;
             }
-            return;
+            clearRangeSelection();
         }
         const editable = fnOrVar(event.colDef?.editable, event);
         if ((editable && event.colDef.singleClickEdit) ?? singleClickEdit) {
+            const editingCell = event.api.getEditingCells()[0];
+            // If we are editing and single click we don't want the editing  to stop
+            if (editingCell && editingCell.colId === event.column.getColId() && editingCell.rowIndex === event.rowIndex) {
+                return;
+            }
+            event.api.setFocusedCell(event.rowIndex ?? 0, event.column.getColId(), event.rowPinned);
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
-    }, [clearRangeSelection, singleClickEdit, startCellEditing]);
+    }, [clearRangeSelection, enableRangeSelection, singleClickEdit, startCellEditing]);
     /**
      * Set of column I'd's that are prevented from auto-sizing as they are user set
      */
@@ -3963,7 +4004,7 @@ maxInitialWidth,
             event.api.sizeColumnsToFit();
         }
     }, [sizeColumns]);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: clearHighlightRowClasses, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText, rowHeight: rowHeight, rowSelection: selectable
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready', params.hideSelectedRow && 'Grid-hideSelectedRow'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsxRuntime.jsx(agGridReact.AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: clearHighlightRowClasses, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText, rowHeight: rowHeight, rowSelection: selectable
                         ? {
                             enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
                             enableClickSelection: params.enableClickSelection ?? false,
@@ -3973,7 +4014,7 @@ maxInitialWidth,
                                 headerCheckbox: false,
                             }),
                         }
-                        : undefined, stopEditingWhenCellsLoseFocus: stopEditingWhenCellsLoseFocus, selectionColumnDef: selectionColumnDef, suppressCellFocus: params.suppressCellFocus, suppressClickEdit: true, suppressColumnVirtualisation: suppressColumnVirtualization, suppressStartEditOnTab: true }) })] }));
+                        : undefined, selectionColumnDef: selectionColumnDef, suppressCellFocus: params.suppressCellFocus, suppressClickEdit: true, suppressColumnVirtualisation: suppressColumnVirtualization, suppressStartEditOnTab: true }) })] }));
 };
 const quickFilterParser = (filterStr) => {
     // filter is exact matches exactly groups separated by commas
@@ -4788,6 +4829,7 @@ const textMatch = (text, filter) => {
 
 const CancelPromise = () => Promise.resolve(true);
 const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick, }) => {
+    const { resetFocusedCellAfterCellEditing } = useGridContext();
     const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext();
     const saveButtonRef = React.useRef(null);
     const [isOpen, setOpen] = React.useState(false);
@@ -4798,6 +4840,7 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
         if (reason == CloseReason.CANCEL) {
             await updateValue(CancelPromise, 0);
             stopEditing();
+            resetFocusedCellAfterCellEditing();
             return;
         }
         if (invalid?.()) {
@@ -4806,8 +4849,9 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
         }
         if (await updateValue(save ?? (() => Promise.resolve(true)), reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
             stopEditing();
+            resetFocusedCellAfterCellEditing();
         }
-    }, [invalid, save, stopEditing, updateValue]);
+    }, [invalid, resetFocusedCellAfterCellEditing, save, stopEditing, updateValue]);
     const popoverWrapper = React.useCallback((children) => {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.jsxs(ControlledMenu, { state: isOpen ? 'open' : 'closed', portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: 'step-ag-grid-react-menu', onClose: (event) => {
                     // Prevent menu from closing when modals are invoked
@@ -5176,6 +5220,128 @@ const GridFormEditBearing = (props) => {
                 : props.formatValue(bearingNumberParser(value)), error: bearingStringValidator(value, props.range), helpText: 'Press enter or tab to save' }) }));
 };
 
+const TextInputValidator = (props, value, data, context) => {
+    if (value == null)
+        return null;
+    // This can happen because subcomponent is invoked without type safety
+    if (typeof value !== 'string') {
+        return 'Value is not a string';
+    }
+    if (props.required && value.trim() == '') {
+        return 'Must not be empty';
+    }
+    if (props.maxLength && value.length > props.maxLength) {
+        return `Must be no longer than ${props.maxLength} characters`;
+    }
+    if (props.maxBytes && stringByteLengthIsInvalid(value, props.maxBytes)) {
+        return `Must be no longer than ${props.maxBytes} bytes`;
+    }
+    const nf = props.numberFormat;
+    if (nf) {
+        if (value != '' && !isFloat(value)) {
+            return `Must be a valid number`;
+        }
+        if (value != '') {
+            const number = parseFloat(value);
+            if (nf.notZero && number === 0) {
+                return `Must not be 0`;
+            }
+            if (nf.gtMin != null && number <= nf.gtMin) {
+                return `Must be greater than ${nf.gtMin.toLocaleString()}`;
+            }
+            if (nf.geMin != null && number < nf.geMin) {
+                return `Must not be less than ${nf.geMin.toLocaleString()}`;
+            }
+            if (nf.ltMax != null && number >= nf.ltMax) {
+                return `Must be less than ${nf.ltMax.toLocaleString()}`;
+            }
+            if (nf.leMax != null && number > nf.leMax) {
+                return `Must not be greater than ${nf.leMax.toLocaleString()}`;
+            }
+            if (nf.precision != null && value != '') {
+                if (parseFloat(number.toPrecision(nf.precision)) != number) {
+                    return `Must have no more than ${nf.precision} digits precision`;
+                }
+            }
+            if (nf.scale != null && value != '') {
+                if (parseFloat(number.toFixed(nf.scale)) != number) {
+                    return nf.scale == 0 ? `Must be a whole number` : `Must have no more than ${nf.scale} decimal places`;
+                }
+            }
+        }
+    }
+    if (props.invalid) {
+        return props.invalid(value, data, context);
+    }
+    return null;
+};
+
+const GridFormInlineTextInput = (props) => {
+    const { onSave } = props;
+    const { getSelectedRows, prePopupOps } = useGridContext();
+    const { field, value: initialVale, data } = useGridPopoverContext();
+    const initValue = React.useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
+    const [value, setValue] = React.useState(initValue);
+    const invalid = React.useCallback(() => TextInputValidator(props, value, data, {}), [data, props, value]);
+    React.useEffect(() => {
+        prePopupOps();
+    }, [prePopupOps]);
+    const save = React.useCallback(async () => {
+        if (invalid()) {
+            return false;
+        }
+        const trimmedValue = value.trim();
+        // No change, so don't save
+        if (initValue === trimmedValue) {
+            return true;
+        }
+        if (!onSave) {
+            console.error(`No onSave handler for GridFormInlineTextInput "${String(field)}`);
+            return false;
+        }
+        const selectedRows = getSelectedRows();
+        const selectedRowIds = selectedRows.map((data) => data.id);
+        return onSave({
+            selectedRowIds,
+            selectedRows,
+            value: trimmedValue,
+        });
+    }, [invalid, value, initValue, onSave, getSelectedRows, field]);
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const { triggerSave } = useGridPopoverHook({
+        className: props.className,
+        invalid,
+        save,
+    });
+    const tabDirectionRef = React.useRef(CloseReason.BLUR);
+    const tabRecorder = React.useCallback((e) => {
+        if (e.key === 'Tab') {
+            tabDirectionRef.current = e.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD;
+            e.preventDefault();
+            e.stopPropagation();
+            void triggerSave(tabDirectionRef.current);
+        }
+    }, [triggerSave]);
+    React.useEffect(() => {
+        const input = inputRef.current;
+        input?.addEventListener('keydown', tabRecorder, { capture: true });
+        return () => {
+            input?.removeEventListener('keydown', tabRecorder, { capture: true });
+        };
+    }, [tabRecorder]);
+    return (jsxRuntime.jsx("div", { className: clsx('GridFormInlineTextInput', invalid() && 'GridFormInlineTextInput-error'), title: String(invalid() ?? ''), children: jsxRuntime.jsx("input", { ref: inputRef, type: 'text', value: value, onChange: (e) => setValue(e.target.value), placeholder: props.placeholder ?? 'Type here', onBlur: () => {
+                void triggerSave(CloseReason.BLUR);
+            }, onKeyUp: (e) => {
+                if (e.key === 'Enter') {
+                    void triggerSave(CloseReason.BLUR);
+                }
+            } }) }));
+};
+
 const GridFormMessage = (props) => {
     const { selectedRows } = useGridPopoverContext();
     const [message, setMessage] = React.useState(null);
@@ -5587,62 +5753,6 @@ const TextAreaInput = (props) => {
                             }, "data-allowtabtosave": props.allowTabToSave, children: props.value }) })] }), jsxRuntime.jsx(FormError, { error: props.error, helpText: props.helpText })] }));
 };
 
-const TextInputValidator = (props, value, data, context) => {
-    if (value == null)
-        return null;
-    // This can happen because subcomponent is invoked without type safety
-    if (typeof value !== 'string') {
-        return 'Value is not a string';
-    }
-    if (props.required && value.trim() == '') {
-        return 'Must not be empty';
-    }
-    if (props.maxLength && value.length > props.maxLength) {
-        return `Must be no longer than ${props.maxLength} characters`;
-    }
-    if (props.maxBytes && stringByteLengthIsInvalid(value, props.maxBytes)) {
-        return `Must be no longer than ${props.maxBytes} bytes`;
-    }
-    const nf = props.numberFormat;
-    if (nf) {
-        if (value != '' && !isFloat(value)) {
-            return `Must be a valid number`;
-        }
-        if (value != '') {
-            const number = parseFloat(value);
-            if (nf.notZero && number === 0) {
-                return `Must not be 0`;
-            }
-            if (nf.gtMin != null && number <= nf.gtMin) {
-                return `Must be greater than ${nf.gtMin.toLocaleString()}`;
-            }
-            if (nf.geMin != null && number < nf.geMin) {
-                return `Must not be less than ${nf.geMin.toLocaleString()}`;
-            }
-            if (nf.ltMax != null && number >= nf.ltMax) {
-                return `Must be less than ${nf.ltMax.toLocaleString()}`;
-            }
-            if (nf.leMax != null && number > nf.leMax) {
-                return `Must not be greater than ${nf.leMax.toLocaleString()}`;
-            }
-            if (nf.precision != null && value != '') {
-                if (parseFloat(number.toPrecision(nf.precision)) != number) {
-                    return `Must have no more than ${nf.precision} digits precision`;
-                }
-            }
-            if (nf.scale != null && value != '') {
-                if (parseFloat(number.toFixed(nf.scale)) != number) {
-                    return nf.scale == 0 ? `Must be a whole number` : `Must have no more than ${nf.scale} decimal places`;
-                }
-            }
-        }
-    }
-    if (props.invalid) {
-        return props.invalid(value, data, context);
-    }
-    return null;
-};
-
 const GridFormSubComponentTextArea = (props) => {
     const { value, data, setValue, setValid, context } = React.useContext(GridSubComponentContext);
     const helpText = props.helpText ?? 'Press tab to save';
@@ -5821,6 +5931,11 @@ const GridEditBoolean = (colDef, editorProps) => {
     });
 };
 
+const GridInlineTextInput = (colDef, params) => GridCell(colDef, {
+    editor: GridFormInlineTextInput,
+    ...params,
+});
+
 const GridPopoutEditMultiSelect = (colDef, props) => GridCell(colDef, {
     editor: GridFormMultiSelect,
     ...props,
@@ -5961,6 +6076,7 @@ const GridContextProvider = (props) => {
     const [invisibleColumnIds, _setInvisibleColumnIds] = React.useState();
     const testId = React.useRef();
     const hasExternallySelectedItemsRef = React.useRef(false);
+    const enableMultilineBulkEditRef = React.useRef(false);
     const idsBeforeUpdate = React.useRef([]);
     const prePopupFocusedCell = React.useRef();
     const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = React.useState(false);
@@ -6025,8 +6141,9 @@ const GridContextProvider = (props) => {
     /**
      * Set the grid api when the grid is ready.
      */
-    const setApis = React.useCallback((gridApi, hasExternallySelectedItems, dataTestId) => {
+    const setApis = React.useCallback((gridApi, hasExternallySelectedItems, enableMultilineBulkEdit, dataTestId) => {
         hasExternallySelectedItemsRef.current = hasExternallySelectedItems;
+        enableMultilineBulkEditRef.current = enableMultilineBulkEdit;
         testId.current = dataTestId;
         setGridApi(gridApi);
         gridApi?.setGridOption('quickFilterText', quickFilter);
@@ -6171,7 +6288,7 @@ const GridContextProvider = (props) => {
             if (flash) {
                 lodashEs.delay(() => {
                     try {
-                        !gridApi.isDestroyed && gridApi.flashCells({ rowNodes });
+                        !gridApi.isDestroyed() && gridApi.flashCells({ rowNodes });
                     }
                     catch {
                         // ignore, flash cells sometimes throws errors as nodes have gone out of scope
@@ -6237,13 +6354,13 @@ const GridContextProvider = (props) => {
      * Then we size the flexed columns.
      */
     const autoSizeColumns = React.useCallback(async ({ skipHeader, colIds, userSizedColIds } = {}) => {
-        if (!gridApi || !gridApi.getColumnState()) {
+        if (!gridApi || gridApi.isDestroyed() || !gridApi.getColumnState()) {
             return null;
         }
         try {
             const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
             const getVisibleColStates = () => {
-                const colStates = gridApi.getColumnState();
+                const colStates = gridApi.getColumnState() ?? [];
                 return colStates.filter((colState) => {
                     const colId = colState.colId;
                     return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId);
@@ -6303,9 +6420,11 @@ const GridContextProvider = (props) => {
         if (!gridApi || gridApi.isDestroyed() || startCellEditingInProgressRef.current) {
             return;
         }
-        if (prePopupFocusedCell.current) {
-            gridApi.setFocusedCell(prePopupFocusedCell.current.rowIndex, prePopupFocusedCell.current.column);
-            prePopupFocusedCell.current = undefined;
+        const cellToFocus = prePopupFocusedCell.current;
+        if (cellToFocus) {
+            lodashEs.defer(() => {
+                gridApi.setFocusedCell(cellToFocus.rowIndex, cellToFocus.column);
+            });
         }
     }, [gridApi]);
     // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
@@ -6371,9 +6490,8 @@ const GridContextProvider = (props) => {
     }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
     const bulkEditingCompleteCallbackRef = React.useRef();
     const onBulkEditingComplete = React.useCallback(async () => {
-        resetFocusedCellAfterCellEditing();
         await bulkEditingCompleteCallbackRef.current?.();
-    }, [resetFocusedCellAfterCellEditing]);
+    }, []);
     const setOnBulkEditingComplete = React.useCallback((cellEditingCompleteCallback) => {
         bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
     }, []);
@@ -6413,10 +6531,18 @@ const GridContextProvider = (props) => {
                 return true;
             }
             const postRow = gridApi.getFocusedCell();
-            if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
-                // We didn't find an editable cell in the same row, or the cell column didn't change
-                // implying it was start/end of grid
-                break;
+            if (enableMultilineBulkEditRef.current) {
+                // Last cell in grid, nowhere to tab
+                if (preRow?.rowIndex === postRow?.rowIndex && preRow?.column === postRow?.column) {
+                    break;
+                }
+            }
+            else {
+                if (preRow?.rowIndex !== postRow?.rowIndex || preRow?.column === postRow?.column) {
+                    // We didn't find an editable cell in the same row, or the cell column didn't change
+                    // implying it was start/end of grid
+                    break;
+                }
             }
             if (focusedCellIsEditable()) {
                 const focusedCell = gridApi.getFocusedCell();
@@ -6800,6 +6926,7 @@ exports.GridFilterQuick = GridFilterQuick;
 exports.GridFilters = GridFilters;
 exports.GridFormDropDown = GridFormDropDown;
 exports.GridFormEditBearing = GridFormEditBearing;
+exports.GridFormInlineTextInput = GridFormInlineTextInput;
 exports.GridFormMessage = GridFormMessage;
 exports.GridFormMultiSelect = GridFormMultiSelect;
 exports.GridFormMultiSelectGrid = GridFormMultiSelectGrid;
@@ -6809,6 +6936,7 @@ exports.GridFormSubComponentTextInput = GridFormSubComponentTextInput;
 exports.GridFormTextArea = GridFormTextArea;
 exports.GridFormTextInput = GridFormTextInput;
 exports.GridIcon = GridIcon;
+exports.GridInlineTextInput = GridInlineTextInput;
 exports.GridLoadableCell = GridLoadableCell;
 exports.GridNoRowsOverlay = GridNoRowsOverlay;
 exports.GridNoRowsOverlayFr = GridNoRowsOverlayFr;