@mui/x-data-grid-generator 8.26.0 → 8.27.0

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v8.27.0
+
+_Feb 2, 2026_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Data Grid supports new `longText` [column type](https://mui.com/x/react-data-grid/column-definition/#column-types)
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.0`
+
+- [DataGrid] Fix virtualization crash by preventing out-of-bounds `focusedVirtualCell` indices (#21123) @cherniavskii
+- [DataGrid] Fix focus steal issue with `<Dialog />` (#21106) @MBilalShafi
+- [DataGrid] Add new `longText` column type (#21103) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.27.0`.
+
+#### `@mui/x-data-grid-premium@8.27.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.27.0`, plus:
+
+- [DataGridPremium] Fix focus retention when undo/redo operations are done on the same cell (#21110) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.27.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.0`
+
+- [charts] Deprecate `AxisId` class in favour of to `data-axis-id` attribute (#21048) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.27.0`, plus:
+
+- [charts-pro] Add `onItemClick` to the heatmap (#20817) (#21030) @alexfauquette
+
+#### `@mui/x-charts-premium@8.27.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.0`, plus:
+
+- [charts-premium] Fix wrong `defaultSlots` in premium charts (#21052) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.0`, plus:
+
+- [RichTreeViewPro] Do not export `useSimpleTreeViewApiRef()` and `useRichTreeViewApiRef()` from pro package (#21145) @flaviendelangle
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix DataGrid's cell edit renderers (@arminmeh) (#21041) @github-actions[bot]
+
+### Core
+
+- [code-infra] Add `consistent-type-imports` rule to the grid packages (#21119) @arminmeh
+- [code-infra] Allow user to select target branch if it exists for current major (#21005) @JCQuintas
+- [code-infra] Fix the target branch condition in the release script (#21051) @arminmeh
+- [code-infra] Update docs deploy script to fetch from `v8.x` (#21013) @arminmeh
+
+## 8.26.1
+
+_Jan 23, 2026_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Data Grid Premium type imports
+
+### Data Grid
+
+#### `@mui/x-data-grid-premium@8.26.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Fix type import (#21033) @arminmeh
+
 ## 8.26.0
 
 _Jan 22, 2026_

package/columns/commodities.columns.d.ts

@@ -1,2 +1,2 @@
-import { GridColDefGenerator } from "../services/gridColDefGenerator.js";
+import type { GridColDefGenerator } from "../services/gridColDefGenerator.js";
 export declare const getCommodityColumns: (editable?: boolean) => GridColDefGenerator[];

package/columns/commodities.columns.js

@@ -61,6 +61,7 @@ const getCommodityColumns = (editable = false) => [{
   generateData: _services.generateIsFilled,
   type: 'boolean',
   width: 80,
+  renderEditCell: _renderer.renderEditBoolean,
   editable
 }, {
   field: 'status',
@@ -168,6 +169,7 @@ const getCommodityColumns = (editable = false) => [{
   type: 'singleSelect',
   generateData: _services.randomCountry,
   renderCell: _renderer.renderCountry,
+  renderEditCell: _renderer.renderEditCountry,
   valueOptions: _staticData.COUNTRY_ISO_OPTIONS_SORTED,
   valueParser: value => {
     if (typeof value === 'string') {

package/columns/employees.columns.d.ts

@@ -1,2 +1,2 @@
-import { GridColDefGenerator } from "../services/gridColDefGenerator.js";
+import type { GridColDefGenerator } from "../services/gridColDefGenerator.js";
 export declare const getEmployeeColumns: () => GridColDefGenerator[];

package/columns/employees.columns.js

@@ -127,6 +127,7 @@ const getEmployeeColumns = () => [{
   generateData: _services.randomBoolean,
   type: 'boolean',
   width: 150,
+  renderEditCell: _renderer.renderEditBoolean,
   editable: true
 }, {
   field: 'salary',

package/constants/prompts.d.ts

@@ -1,2 +1,2 @@
-import { PromptResponse } from '@mui/x-data-grid-premium';
+import type { PromptResponse } from '@mui/x-data-grid-premium';
 export declare const mockPrompts: Map<string, PromptResponse>;

package/esm/columns/commodities.columns.d.ts

@@ -1,2 +1,2 @@
-import { GridColDefGenerator } from "../services/gridColDefGenerator.js";
+import type { GridColDefGenerator } from "../services/gridColDefGenerator.js";
 export declare const getCommodityColumns: (editable?: boolean) => GridColDefGenerator[];

package/esm/columns/commodities.columns.js

@@ -1,6 +1,6 @@
 import { gridStringOrNumberComparator } from '@mui/x-data-grid-premium';
 import { randomCommodity, randomDesk, randomEmail, randomFeeRate, generateFilledQuantity, randomId, randomIncoterm, generateIsFilled, randomQuantity, randomTraderName, randomUnitPrice, randomUnitPriceCurrency, randomStatusOptions, randomPnL, randomTradeDate, randomMaturityDate, randomBrokerId, randomCompanyName, randomCountry, randomCurrency, randomAddress, randomCity, randomUpdatedDate, randomCreatedDate, randomRateType, randomContractType, randomTaxCode } from "../services/index.js";
-import { renderCountry, renderEmail, renderIncoterm, renderPnl, renderProgress, renderStatus, renderTotalPrice, renderEditCurrency, renderEditProgress, renderEditStatus, renderEditIncoterm } from "../renderer/index.js";
+import { renderCountry, renderEmail, renderIncoterm, renderPnl, renderProgress, renderStatus, renderTotalPrice, renderEditCurrency, renderEditProgress, renderEditStatus, renderEditIncoterm, renderEditBoolean, renderEditCountry } from "../renderer/index.js";
 import { CONTRACT_TYPE_OPTIONS, COUNTRY_ISO_OPTIONS_SORTED, CURRENCY_OPTIONS, INCOTERM_OPTIONS, RATE_TYPE_OPTIONS, STATUS_OPTIONS, TAXCODE_OPTIONS } from "../services/static-data.js";
 export const getCommodityColumns = (editable = false) => [{
   field: 'id',
@@ -55,6 +55,7 @@ export const getCommodityColumns = (editable = false) => [{
   generateData: generateIsFilled,
   type: 'boolean',
   width: 80,
+  renderEditCell: renderEditBoolean,
   editable
 }, {
   field: 'status',
@@ -162,6 +163,7 @@ export const getCommodityColumns = (editable = false) => [{
   type: 'singleSelect',
   generateData: randomCountry,
   renderCell: renderCountry,
+  renderEditCell: renderEditCountry,
   valueOptions: COUNTRY_ISO_OPTIONS_SORTED,
   valueParser: value => {
     if (typeof value === 'string') {

package/esm/columns/employees.columns.d.ts

@@ -1,2 +1,2 @@
-import { GridColDefGenerator } from "../services/gridColDefGenerator.js";
+import type { GridColDefGenerator } from "../services/gridColDefGenerator.js";
 export declare const getEmployeeColumns: () => GridColDefGenerator[];

package/esm/columns/employees.columns.js

@@ -1,6 +1,6 @@
 import { gridStringOrNumberComparator } from '@mui/x-data-grid-premium';
 import { randomCity, randomCompanyName, randomCountry, randomCreatedDate, randomEmail, randomId, randomJobTitle, randomPhoneNumber, randomRating, randomUpdatedDate, randomUrl, randomUserName, randomBoolean, randomName, randomColor, randomInt } from "../services/index.js";
-import { renderAvatar, renderCountry, renderEmail, renderLink, renderRating, renderEditRating, renderEditCountry } from "../renderer/index.js";
+import { renderAvatar, renderCountry, renderEmail, renderLink, renderRating, renderEditRating, renderEditCountry, renderEditBoolean } from "../renderer/index.js";
 import { COUNTRY_ISO_OPTIONS_SORTED } from "../services/static-data.js";
 export const getEmployeeColumns = () => [{
   field: 'id',
@@ -121,6 +121,7 @@ export const getEmployeeColumns = () => [{
   generateData: randomBoolean,
   type: 'boolean',
   width: 150,
+  renderEditCell: renderEditBoolean,
   editable: true
 }, {
   field: 'salary',

package/esm/constants/prompts.d.ts

@@ -1,2 +1,2 @@
-import { PromptResponse } from '@mui/x-data-grid-premium';
+import type { PromptResponse } from '@mui/x-data-grid-premium';
 export declare const mockPrompts: Map<string, PromptResponse>;

package/esm/hooks/serverUtils.d.ts

@@ -1,4 +1,4 @@
-import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel, GridValidRowModel, GridAggregationModel, GridPivotModel, GridGetRowsResponse } from '@mui/x-data-grid-premium';
+import { type GridRowModel, type GridFilterModel, type GridSortModel, type GridColDef, type GridRowId, type GridPaginationModel, type GridValidRowModel, type GridAggregationModel, type GridPivotModel, type GridGetRowsResponse } from '@mui/x-data-grid-premium';
 export interface FakeServerResponse {
   returnedRows: GridRowModel[];
   aggregateRow?: GridValidRowModel;

package/esm/hooks/useBasicDemoData.d.ts

@@ -1,2 +1,2 @@
-import { GridBasicData } from "../services/index.js";
+import { type GridBasicData } from "../services/index.js";
 export declare const useBasicDemoData: (nbRows: number, nbCols: number) => GridBasicData;

package/esm/hooks/useDemoData.d.ts

@@ -1,7 +1,7 @@
-import { GridColumnVisibilityModel } from '@mui/x-data-grid-premium';
-import { GridDemoData } from "../services/real-data-service.js";
-import { GridColDefGenerator } from "../services/gridColDefGenerator.js";
-import { AddPathToDemoDataOptions, DemoTreeDataValue } from "../services/tree-data-generator.js";
+import type { GridColumnVisibilityModel } from '@mui/x-data-grid-premium';
+import { type GridDemoData } from "../services/real-data-service.js";
+import type { GridColDefGenerator } from "../services/gridColDefGenerator.js";
+import { type AddPathToDemoDataOptions, type DemoTreeDataValue } from "../services/tree-data-generator.js";
 export type DemoDataReturnType = {
   data: DemoTreeDataValue;
   loading: boolean;

package/esm/hooks/useEditDropdownState.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type GridRowId } from '@mui/x-data-grid-premium';
+interface UseEditDropdownStateParams {
+  id: GridRowId;
+  field: string;
+  hasFocus: boolean;
+}
+/**
+ * Hook that manages dropdown state and keyboard handling for custom edit cells
+ * with dropdowns (Select, Autocomplete).
+ *
+ * Provides:
+ * - Auto-open on mount if cell had focus when edit started
+ * - Focus management when tabbing into the cell
+ * - Keyboard handlers for Tab, Enter, Escape that work in both cell and row edit modes
+ * - Handlers for Select and Autocomplete components
+ */
+export declare function useEditDropdownState(params: UseEditDropdownStateParams): {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  shouldAutoOpen: boolean;
+  handleSelectKeyDown: (event: React.KeyboardEvent) => void;
+  handleSelectMenuClose: (event: object, reason: "escapeKeyDown" | "backdropClick" | "tabKeyDown") => void;
+  handleSelectMenuListKeyDown: (event: React.KeyboardEvent) => void;
+  createSelectChangeHandler: (getValue: (event: {
+    target: {
+      value: unknown;
+    };
+  }) => unknown) => (event: {
+    target: {
+      value: unknown;
+    };
+  }) => Promise<void>;
+  handleAutocompleteInputKeyDown: (event: React.KeyboardEvent) => void;
+  handleAutocompleteWrapperKeyDown: (event: React.KeyboardEvent) => void;
+  createAutocompleteChangeHandler: <T>(transformValue?: (value: T) => unknown) => (event: React.SyntheticEvent, newValue: T) => Promise<void>;
+};
+export {};

package/esm/hooks/useEditDropdownState.js

@@ -0,0 +1,158 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { GridCellEditStopReasons, GridEditModes, useGridApiContext, useGridRootProps } from '@mui/x-data-grid-premium';
+import { useRowEditHandlers } from "./useRowEditHandlers.js";
+/**
+ * Hook that manages dropdown state and keyboard handling for custom edit cells
+ * with dropdowns (Select, Autocomplete).
+ *
+ * Provides:
+ * - Auto-open on mount if cell had focus when edit started
+ * - Focus management when tabbing into the cell
+ * - Keyboard handlers for Tab, Enter, Escape that work in both cell and row edit modes
+ * - Handlers for Select and Autocomplete components
+ */
+export function useEditDropdownState(params) {
+  const {
+    id,
+    field,
+    hasFocus
+  } = params;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const inputRef = React.useRef(null);
+
+  // Only auto-open if this cell had focus when edit started
+  const shouldAutoOpen = React.useRef(hasFocus).current;
+  const [open, setOpen] = React.useState(shouldAutoOpen);
+
+  // Track open state in a ref for event handlers that need current value
+  const openRef = React.useRef(open);
+  openRef.current = open;
+  const isRowEditMode = rootProps.editMode === GridEditModes.Row;
+  const closeMenu = React.useCallback(() => setOpen(false), []);
+  const {
+    handleTabKeyDown,
+    handleMenuKeyDown
+  } = useRowEditHandlers({
+    id,
+    field,
+    onClose: closeMenu
+  });
+
+  // Focus input when hasFocus becomes true (e.g., when tabbing into this cell)
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current?.focus();
+    }
+  }, [hasFocus]);
+
+  /**
+   * Handler for Select's onKeyDown - handles Tab when menu is closed
+   */
+  const handleSelectKeyDown = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      handleTabKeyDown(event);
+    }
+  }, [handleTabKeyDown]);
+
+  /**
+   * Handler for Select's MenuProps.onClose - closes menu and exits cell edit on backdrop click
+   */
+  const handleSelectMenuClose = React.useCallback((event, reason) => {
+    setOpen(false);
+    if (reason === 'backdropClick' && rootProps.editMode === GridEditModes.Cell && apiRef.current.getCellMode(id, field) === 'edit') {
+      const cellParams = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, cellParams, {
+        reason: GridCellEditStopReasons.cellFocusOut
+      }));
+    }
+  }, [apiRef, id, field, rootProps.editMode]);
+
+  /**
+   * Creates a change handler for Select that closes menu and optionally exits edit mode
+   */
+  const createSelectChangeHandler = React.useCallback(getValue => {
+    return async event => {
+      // Close menu after selection
+      setOpen(false);
+      const newValue = getValue(event);
+      const isValid = await apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: newValue
+      }, event);
+
+      // In cell edit mode, selecting closes the menu and exits edit mode
+      // In row edit mode, selecting only closes the menu (already done above)
+      // Check if still in edit mode to avoid double-exit when Enter key also triggers grid's handler
+      if (isValid && !isRowEditMode && apiRef.current.getCellMode(id, field) === 'edit') {
+        const cellParams = apiRef.current.getCellParams(id, field);
+        apiRef.current.publishEvent('cellEditStop', _extends({}, cellParams, {
+          reason: GridCellEditStopReasons.enterKeyDown
+        }));
+      }
+    };
+  }, [apiRef, id, field, isRowEditMode]);
+
+  /**
+   * Handler for Autocomplete's InputBase onKeyDown - handles Tab
+   */
+  const handleAutocompleteInputKeyDown = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      handleTabKeyDown(event);
+    }
+  }, [handleTabKeyDown]);
+
+  /**
+   * Handler for Autocomplete's wrapper div - stops Enter/Escape only when dropdown is open
+   */
+  const handleAutocompleteWrapperKeyDown = React.useCallback(event => {
+    if (isRowEditMode && openRef.current && (event.key === 'Enter' || event.key === 'Escape')) {
+      event.stopPropagation();
+    }
+  }, [isRowEditMode]);
+
+  /**
+   * Creates a change handler for Autocomplete that optionally exits edit mode
+   */
+  const createAutocompleteChangeHandler = React.useCallback(transformValue => {
+    return async (event, newValue) => {
+      const valueToSet = transformValue ? transformValue(newValue) : newValue;
+      await apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: valueToSet
+      }, event);
+
+      // In cell edit mode, selecting exits edit mode
+      // In row edit mode, selecting only closes the dropdown (Autocomplete handles this)
+      // Check if still in edit mode to avoid double-exit when Enter key also triggers grid's handler
+      if (!isRowEditMode && apiRef.current.getCellMode(id, field) === 'edit') {
+        apiRef.current.stopCellEditMode({
+          id,
+          field
+        });
+      }
+    };
+  }, [apiRef, id, field, isRowEditMode]);
+  return {
+    // State
+    open,
+    setOpen,
+    inputRef,
+    shouldAutoOpen,
+    // Select handlers
+    handleSelectKeyDown,
+    handleSelectMenuClose,
+    handleSelectMenuListKeyDown: handleMenuKeyDown,
+    createSelectChangeHandler,
+    // Autocomplete handlers
+    handleAutocompleteInputKeyDown,
+    handleAutocompleteWrapperKeyDown,
+    createAutocompleteChangeHandler
+  };
+}

package/esm/hooks/useMockServer.d.ts

@@ -1,5 +1,5 @@
 import { type GridGetRowsResponse, type GridRowId, type GridRowModel, type GridColDef, type GridInitialState } from '@mui/x-data-grid-premium';
-import { AddPathToDemoDataOptions } from "../services/tree-data-generator.js";
+import { type AddPathToDemoDataOptions } from "../services/tree-data-generator.js";
 import type { ServerOptions } from "./serverUtils.js";
 export declare const BASE_URL = "https://mui.com/x/api/data-grid";
 type UseMockServerResponse<T> = {

package/esm/hooks/useMovieData.d.ts

@@ -1,4 +1,4 @@
-import { GridColDef, GridRowModel } from '@mui/x-data-grid-premium';
+import type { GridColDef, GridRowModel } from '@mui/x-data-grid-premium';
 export type Movie = {
   id: number;
   title: string;

package/esm/hooks/useQuery.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridRowModel } from '@mui/x-data-grid-pro';
-import { UseDemoDataOptions } from "./useDemoData.js";
+import { type GridRowModel } from '@mui/x-data-grid-pro';
+import { type UseDemoDataOptions } from "./useDemoData.js";
 import type { ServerOptions, QueryOptions, PageInfo } from "./serverUtils.js";
 export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: ServerOptions) => {
   columns: import("../index.js").GridColDefGenerator[];

package/esm/hooks/useRowEditHandlers.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type GridRowId } from '@mui/x-data-grid-premium';
+interface UseRowEditHandlersParams {
+  id: GridRowId;
+  field: string;
+  onClose?: () => void;
+}
+/**
+ * Hook that provides keyboard event handlers for custom edit cells
+ * to work correctly in both cell and row edit modes.
+ *
+ * In row edit mode:
+ * - Tab moves focus to the next/previous editable cell
+ * - Enter/Escape are stopped from propagating to prevent exiting row edit
+ *
+ * In cell edit mode:
+ * - Default behavior is preserved
+ */
+export declare function useRowEditHandlers(params: UseRowEditHandlersParams): {
+  handleTabKeyDown: (event: React.KeyboardEvent) => void;
+  handleEnterEscapeKeyDown: (event: React.KeyboardEvent) => void;
+  handleMenuKeyDown: (event: React.KeyboardEvent) => void;
+  moveFocusToNextCell: (shiftKey: boolean) => void;
+};
+export {};

package/esm/hooks/useRowEditHandlers.js

@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+import { GridEditModes, useGridApiContext, useGridRootProps } from '@mui/x-data-grid-premium';
+/**
+ * Hook that provides keyboard event handlers for custom edit cells
+ * to work correctly in both cell and row edit modes.
+ *
+ * In row edit mode:
+ * - Tab moves focus to the next/previous editable cell
+ * - Enter/Escape are stopped from propagating to prevent exiting row edit
+ *
+ * In cell edit mode:
+ * - Default behavior is preserved
+ */
+export function useRowEditHandlers(params) {
+  const {
+    id,
+    field,
+    onClose
+  } = params;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const isRowEditMode = rootProps.editMode === GridEditModes.Row;
+  const moveFocusToNextCell = React.useCallback(shiftKey => {
+    const editableFields = apiRef.current.getVisibleColumns().filter(column => column.type === 'actions' || apiRef.current.isCellEditable(apiRef.current.getCellParams(id, column.field))).map(column => column.field);
+    const currentIndex = editableFields.indexOf(field);
+    if (currentIndex === -1) {
+      return;
+    }
+    const nextIndex = shiftKey ? currentIndex - 1 : currentIndex + 1;
+    if (nextIndex < 0 || nextIndex >= editableFields.length) {
+      // At boundary - exit row edit mode
+      apiRef.current.stopRowEditMode({
+        id,
+        field,
+        cellToFocusAfter: shiftKey ? 'left' : 'right'
+      });
+      return;
+    }
+    apiRef.current.setCellFocus(id, editableFields[nextIndex]);
+  }, [apiRef, id, field]);
+
+  /**
+   * Handle Tab key in row edit mode.
+   * Closes any open popup and moves focus to the next/previous editable cell.
+   */
+  const handleTabKeyDown = React.useCallback(event => {
+    if (!isRowEditMode || event.key !== 'Tab') {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onClose?.();
+    moveFocusToNextCell(event.shiftKey);
+  }, [isRowEditMode, onClose, moveFocusToNextCell]);
+
+  /**
+   * Prevent Enter/Escape from bubbling in row edit mode.
+   * This prevents the grid from exiting row edit when selecting from a dropdown.
+   */
+  const handleEnterEscapeKeyDown = React.useCallback(event => {
+    if (!isRowEditMode) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === 'Escape') {
+      event.stopPropagation();
+    }
+  }, [isRowEditMode]);
+
+  /**
+   * Combined handler for menus/listboxes that need to handle both Tab and Enter/Escape.
+   */
+  const handleMenuKeyDown = React.useCallback(event => {
+    handleEnterEscapeKeyDown(event);
+    handleTabKeyDown(event);
+  }, [handleEnterEscapeKeyDown, handleTabKeyDown]);
+  return {
+    handleTabKeyDown,
+    handleEnterEscapeKeyDown,
+    handleMenuKeyDown,
+    moveFocusToNextCell
+  };
+}

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v8.26.0
+ * @mui/x-data-grid-generator v8.27.0
  *
  * @license UNLICENSED
  * This source code is licensed under the UNLICENSED license found in the

package/esm/renderer/index.d.ts

@@ -13,4 +13,5 @@ export * from "./renderEditProgress.js";
 export * from "./renderEditStatus.js";
 export * from "./renderEditIncoterm.js";
 export * from "./renderEditRating.js";
-export * from "./renderEditCountry.js";
+export * from "./renderEditCountry.js";
+export * from "./renderEditBoolean.js";

package/esm/renderer/index.js

@@ -13,4 +13,5 @@ export * from "./renderEditProgress.js";
 export * from "./renderEditStatus.js";
 export * from "./renderEditIncoterm.js";
 export * from "./renderEditRating.js";
-export * from "./renderEditCountry.js";
+export * from "./renderEditCountry.js";
+export * from "./renderEditBoolean.js";

package/esm/renderer/renderAvatar.d.ts

@@ -1,4 +1,4 @@
-import { GridRenderCellParams } from '@mui/x-data-grid-premium';
+import type { GridRenderCellParams } from '@mui/x-data-grid-premium';
 export declare function renderAvatar(params: GridRenderCellParams<{
   name: string;
   color: string;

package/esm/renderer/renderCountry.d.ts

@@ -1,3 +1,3 @@
-import { GridRenderCellParams } from '@mui/x-data-grid-premium';
-import { CountryIsoOption } from "../services/static-data.js";
+import { type GridRenderCellParams } from '@mui/x-data-grid-premium';
+import type { CountryIsoOption } from "../services/static-data.js";
 export declare function renderCountry(params: GridRenderCellParams<CountryIsoOption, any, any>): any;

package/esm/renderer/renderEditBoolean.d.ts

@@ -0,0 +1,2 @@
+import { type GridRenderEditCellParams } from '@mui/x-data-grid-premium';
+export declare function renderEditBoolean(params: GridRenderEditCellParams<any, boolean>): import("react/jsx-runtime").JSX.Element;