@mui/x-data-grid-generator 8.26.1 → 8.27.1

package/esm/services/real-data-service.d.ts

@@ -1,5 +1,5 @@
-import { GridRowModel, GridInitialState } from '@mui/x-data-grid-premium';
-import { GridColDefGenerator } from "./gridColDefGenerator.js";
+import type { GridRowModel, GridInitialState } from '@mui/x-data-grid-premium';
+import type { GridColDefGenerator } from "./gridColDefGenerator.js";
 export interface GridDemoData {
   rows: GridRowModel[];
   columns: GridColDefGenerator[];

package/esm/services/tree-data-generator.d.ts

@@ -1,5 +1,5 @@
-import { DataGridPremiumProps } from '@mui/x-data-grid-premium';
-import { GridDemoData } from "./real-data-service.js";
+import type { DataGridPremiumProps } from '@mui/x-data-grid-premium';
+import type { GridDemoData } from "./real-data-service.js";
 export interface AddPathToDemoDataOptions {
   /**
    * The field used to generate the path

package/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/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/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/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/hooks/useEditDropdownState.js

@@ -0,0 +1,165 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditDropdownState = useEditDropdownState;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _xDataGridPremium = require("@mui/x-data-grid-premium");
+var _useRowEditHandlers = require("./useRowEditHandlers");
+/**
+ * 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
+ */
+function useEditDropdownState(params) {
+  const {
+    id,
+    field,
+    hasFocus
+  } = params;
+  const apiRef = (0, _xDataGridPremium.useGridApiContext)();
+  const rootProps = (0, _xDataGridPremium.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 === _xDataGridPremium.GridEditModes.Row;
+  const closeMenu = React.useCallback(() => setOpen(false), []);
+  const {
+    handleTabKeyDown,
+    handleMenuKeyDown
+  } = (0, _useRowEditHandlers.useRowEditHandlers)({
+    id,
+    field,
+    onClose: closeMenu
+  });
+
+  // Focus input when hasFocus becomes true (e.g., when tabbing into this cell)
+  (0, _useEnhancedEffect.default)(() => {
+    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 === _xDataGridPremium.GridEditModes.Cell && apiRef.current.getCellMode(id, field) === 'edit') {
+      const cellParams = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', (0, _extends2.default)({}, cellParams, {
+        reason: _xDataGridPremium.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', (0, _extends2.default)({}, cellParams, {
+          reason: _xDataGridPremium.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/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/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/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/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/hooks/useRowEditHandlers.js

@@ -0,0 +1,90 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowEditHandlers = useRowEditHandlers;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPremium = require("@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
+ */
+function useRowEditHandlers(params) {
+  const {
+    id,
+    field,
+    onClose
+  } = params;
+  const apiRef = (0, _xDataGridPremium.useGridApiContext)();
+  const rootProps = (0, _xDataGridPremium.useGridRootProps)();
+  const isRowEditMode = rootProps.editMode === _xDataGridPremium.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/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "8.26.1",
+  "version": "8.27.1",
   "author": "MUI Team",
   "description": "Generate fake data for demo purposes only.",
   "license": "UNLICENSED",
@@ -25,10 +25,10 @@
     "chance": "^1.1.13",
     "clsx": "^2.1.1",
     "lru-cache": "^11.2.2",
-    "@mui/x-data-grid-premium": "8.26.1",
-    "@mui/x-data-grid": "8.26.0",
+    "@mui/x-data-grid": "8.27.1",
+    "@mui/x-data-grid-pro": "8.27.1",
     "@mui/x-internals": "8.26.0",
-    "@mui/x-data-grid-pro": "8.26.0"
+    "@mui/x-data-grid-premium": "8.27.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/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/renderer/index.js

@@ -178,4 +178,15 @@ Object.keys(_renderEditCountry).forEach(function (key) {
       return _renderEditCountry[key];
     }
   });
+});
+var _renderEditBoolean = require("./renderEditBoolean");
+Object.keys(_renderEditBoolean).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _renderEditBoolean[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _renderEditBoolean[key];
+    }
+  });
 });

package/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/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/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;

package/renderer/renderEditBoolean.js

@@ -0,0 +1,63 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderEditBoolean = renderEditBoolean;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _xDataGridPremium = require("@mui/x-data-grid-premium");
+var _useRowEditHandlers = require("../hooks/useRowEditHandlers");
+var _jsxRuntime = require("react/jsx-runtime");
+function EditBoolean(props) {
+  const {
+    id,
+    value,
+    field,
+    hasFocus
+  } = props;
+  const apiRef = (0, _xDataGridPremium.useGridApiContext)();
+  const rootProps = (0, _xDataGridPremium.useGridRootProps)();
+  const inputRef = React.useRef(null);
+  const {
+    handleTabKeyDown
+  } = (0, _useRowEditHandlers.useRowEditHandlers)({
+    id,
+    field
+  });
+  const handleChange = React.useCallback(async event => {
+    await apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: event.target.checked
+    }, event);
+  }, [apiRef, field, id]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (hasFocus) {
+      inputRef.current?.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onKeyDownCapture: handleTabKeyDown,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+      inputRef: inputRef,
+      checked: Boolean(value),
+      onChange: handleChange,
+      size: "small"
+    }, rootProps.slotProps?.baseCheckbox))
+  });
+}
+function renderEditBoolean(params) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditBoolean, (0, _extends2.default)({}, params));
+}

package/renderer/renderEditCountry.d.ts

@@ -1,3 +1,3 @@
-import { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
-import { CountryIsoOption } from "../services/static-data.js";
+import type { GridRenderEditCellParams } from '@mui/x-data-grid-premium';
+import { type CountryIsoOption } from "../services/static-data.js";
 export declare function renderEditCountry(params: GridRenderEditCellParams<CountryIsoOption>): import("react/jsx-runtime").JSX.Element;