@mui/x-data-grid 8.26.0 → 8.27.0

package/esm/colDef/gridBooleanOperators.d.ts

@@ -1,2 +1,2 @@
-import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridBooleanOperators: () => GridFilterOperator<any, boolean | null, any>[];

package/esm/colDef/gridCheckboxSelectionColDef.d.ts

@@ -1,3 +1,3 @@
-import { GridColDef } from "../models/colDef/gridColDef.js";
+import type { GridColDef } from "../models/colDef/gridColDef.js";
 export declare const GRID_CHECKBOX_SELECTION_FIELD = "__check__";
 export declare const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef;

package/esm/colDef/gridDateColDef.d.ts

@@ -1,4 +1,4 @@
-import { GridColTypeDef, GridValueFormatter } from "../models/colDef/gridColDef.js";
+import type { GridColTypeDef, GridValueFormatter } from "../models/colDef/gridColDef.js";
 export declare const gridDateFormatter: GridValueFormatter;
 export declare const gridDateTimeFormatter: GridValueFormatter;
 export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date, string>;

package/esm/colDef/gridDateOperators.d.ts

@@ -1,3 +1,3 @@
-import { GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
-import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import { type GridFilterInputDateProps } from "../components/panel/filterPanel/GridFilterInputDate.js";
+import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, Date, any, GridFilterInputDateProps>[];

package/esm/colDef/gridDefaultColumnTypes.js

@@ -4,6 +4,7 @@ import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.js";
 import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
 import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.js";
 import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.js";
+import { GRID_LONG_TEXT_COL_DEF } from "./gridLongTextColDef.js";
 export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {
@@ -14,7 +15,8 @@ export const getGridDefaultColumnTypes = () => {
     boolean: GRID_BOOLEAN_COL_DEF,
     singleSelect: GRID_SINGLE_SELECT_COL_DEF,
     [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
-    custom: GRID_STRING_COL_DEF
+    custom: GRID_STRING_COL_DEF,
+    longText: GRID_LONG_TEXT_COL_DEF
   };
   return nativeColumnTypes;
 };

package/esm/colDef/gridLongTextColDef.d.ts

@@ -0,0 +1,2 @@
+import type { GridColTypeDef } from "../models/colDef/gridColDef.js";
+export declare const GRID_LONG_TEXT_COL_DEF: GridColTypeDef<string | null, any>;

package/esm/colDef/gridLongTextColDef.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderLongTextCell } from "../components/cell/GridLongTextCell.js";
+import { renderEditLongTextCell } from "../components/cell/GridEditLongTextCell.js";
+export const GRID_LONG_TEXT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  type: 'longText',
+  display: 'flex',
+  renderCell: renderLongTextCell,
+  renderEditCell: renderEditLongTextCell
+});

package/esm/colDef/gridNumericColDef.d.ts

@@ -1,2 +1,2 @@
-import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+import type { GridColTypeDef } from "../models/colDef/gridColDef.js";
 export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef<number | string | null, string>;

package/esm/colDef/gridNumericOperators.d.ts

@@ -1,4 +1,4 @@
-import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 import type { GridFilterInputValueProps } from "../models/gridFilterInputComponent.js";
 import type { GetApplyQuickFilterFn } from "../models/colDef/gridColDef.js";
 export declare const getGridNumericQuickFilterFn: GetApplyQuickFilterFn<any, number | string | null>;

package/esm/colDef/gridSingleSelectColDef.d.ts

@@ -1,2 +1,2 @@
-import { GridSingleSelectColDef } from "../models/colDef/gridColDef.js";
+import type { GridSingleSelectColDef } from "../models/colDef/gridColDef.js";
 export declare const GRID_SINGLE_SELECT_COL_DEF: Omit<GridSingleSelectColDef, 'field'>;

package/esm/colDef/gridSingleSelectOperators.d.ts

@@ -1,2 +1,2 @@
-import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/esm/colDef/gridStringColDef.d.ts

@@ -1,4 +1,4 @@
-import { GridColTypeDef } from "../models/colDef/gridColDef.js";
+import type { GridColTypeDef } from "../models/colDef/gridColDef.js";
 /**
  * TODO: Move pro and premium properties outside of this Community file
  */

package/esm/colDef/gridStringOperators.d.ts

@@ -1,4 +1,4 @@
 import type { GetApplyQuickFilterFn } from "../models/colDef/gridColDef.js";
-import { GridFilterOperator } from "../models/gridFilterOperator.js";
+import type { GridFilterOperator } from "../models/gridFilterOperator.js";
 export declare const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown>;
 export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/esm/colDef/index.d.ts

@@ -5,6 +5,7 @@ export * from "./gridDateColDef.js";
 export * from "./gridNumericColDef.js";
 export * from "./gridSingleSelectColDef.js";
 export * from "./gridStringColDef.js";
+export * from "./gridLongTextColDef.js";
 export * from "./gridBooleanOperators.js";
 export * from "./gridDateOperators.js";
 export * from "./gridNumericOperators.js";

package/esm/colDef/index.js

@@ -5,6 +5,7 @@ export * from "./gridDateColDef.js";
 export * from "./gridNumericColDef.js";
 export * from "./gridSingleSelectColDef.js";
 export * from "./gridStringColDef.js";
+export * from "./gridLongTextColDef.js";
 export * from "./gridBooleanOperators.js";
 export * from "./gridDateOperators.js";
 export * from "./gridNumericOperators.js";

package/esm/components/GridColumnHeaders.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import { type UseGridColumnHeadersProps } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, UseGridColumnHeadersProps {
   ref?: React.Ref<HTMLDivElement>;
 }

package/esm/components/GridColumnSortButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridSlotProps } from "../models/index.js";
-import { GridSortDirection } from "../models/gridSortModel.js";
+import type { GridSlotProps } from "../models/index.js";
+import type { GridSortDirection } from "../models/gridSortModel.js";
 export type GridColumnSortButtonProps = GridSlotProps['baseIconButton'] & {
   field: string;
   direction: GridSortDirection;

package/esm/components/GridColumnUnsortedIcon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
-import { GridSortDirection } from "../models/gridSortModel.js";
+import type { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
+import type { GridSortDirection } from "../models/gridSortModel.js";
 export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }

package/esm/components/GridFooter.d.ts

@@ -1,4 +1,4 @@
-import { GridFooterContainerProps } from "./containers/GridFooterContainer.js";
+import { type GridFooterContainerProps } from "./containers/GridFooterContainer.js";
 declare const GridFooter: import("react").ForwardRefExoticComponent<GridFooterContainerProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/esm/components/GridLoadingOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridOverlayProps } from "./containers/GridOverlay.js";
+import { type GridOverlayProps } from "./containers/GridOverlay.js";
 import type { GridLoadingOverlayVariant } from "../hooks/features/overlays/gridOverlaysInterfaces.js";
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**

package/esm/components/GridNoColumnsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { GridOverlayProps } from "./containers/GridOverlay.js";
+import { type GridOverlayProps } from "./containers/GridOverlay.js";
 declare const GridNoColumnsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/esm/components/GridNoResultsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { GridOverlayProps } from "./containers/GridOverlay.js";
+import { type GridOverlayProps } from "./containers/GridOverlay.js";
 export declare const GridNoResultsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/esm/components/GridNoRowsOverlay.d.ts

@@ -1,4 +1,4 @@
-import { GridOverlayProps } from "./containers/GridOverlay.js";
+import { type GridOverlayProps } from "./containers/GridOverlay.js";
 declare const GridNoRowsOverlay: import("react").ForwardRefExoticComponent<GridOverlayProps> | import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
   sx?: import("@mui/system").SxProps<import("@mui/system").Theme>;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/esm/components/GridRow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridRowId, GridRowModel } from "../models/gridRows.js";
-import { GridPinnedColumns } from "../hooks/features/columns/index.js";
+import type { GridRowId, GridRowModel } from "../models/gridRows.js";
+import type { GridPinnedColumns } from "../hooks/features/columns/index.js";
 import type { GridStateColDef } from "../models/colDef/gridColDef.js";
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   row: GridRowModel;

package/esm/components/GridRowCount.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
+import { type SxProps, type Theme } from '@mui/system';
 interface RowCountProps {
   rowCount: number;
   visibleRowCount: number;

package/esm/components/GridScrollArea.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridScrollParams } from "../models/params/gridScrollParams.js";
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridScrollParams } from "../models/params/gridScrollParams.js";
 interface ScrollAreaProps {
   scrollDirection: 'left' | 'right' | 'up' | 'down';
   scrollPosition: RefObject<GridScrollParams>;

package/esm/components/GridSelectedRowCount.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
+import { type SxProps, type Theme } from '@mui/system';
 interface SelectedRowCountProps {
   selectedRowCount: number;
 }

package/esm/components/GridSkeletonLoadingOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridColDef } from "../models/index.js";
+import type { GridColDef } from "../models/index.js";
 type GridSkeletonLoadingOverlayInnerProps = React.HTMLAttributes<HTMLDivElement> & {
   skeletonRowsCount: number;
   showFirstRowBorder?: boolean;

package/esm/components/cell/GridActionsCell.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridRowParams } from "../../models/params/gridRowParams.js";
-import { GridRenderCellParams } from "../../models/params/gridCellParams.js";
-import { GridMenuProps } from "../menu/GridMenu.js";
-import { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.js";
+import type { GridRowParams } from "../../models/params/gridRowParams.js";
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+import { type GridMenuProps } from "../menu/GridMenu.js";
+import type { GridValidRowModel, GridTreeNodeWithRender } from "../../models/gridRows.js";
 interface GridActionsCellProps<R extends GridValidRowModel = any, V = any, F = V, N extends GridTreeNodeWithRender = GridTreeNodeWithRender> extends Omit<GridRenderCellParams<R, V, F, N>, 'api'> {
   api?: GridRenderCellParams['api'];
   position?: GridMenuProps['position'];

package/esm/components/cell/GridActionsCellItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
+import type { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridActionsCellItemCommonProps {
   icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */

package/esm/components/cell/GridCell.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GridRowId } from "../../models/index.js";
-import { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.js";
-import { GridRowModel, GridTreeNode } from "../../models/gridRows.js";
+import { type GridRowId } from "../../models/index.js";
+import type { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridRowModel, GridTreeNode } from "../../models/gridRows.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
 export declare const gridPinnedColumnPositionLookup: {

package/esm/components/cell/GridEditBooleanCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+import type { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
 export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id' | 'tabIndex'> {
   /**
    * Callback called when the value is changed by the user.

package/esm/components/cell/GridEditDateCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridSlotProps } from "../../models/gridSlotsComponent.js";
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+import type { GridSlotProps } from "../../models/gridSlotsComponent.js";
+import type { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
 export interface GridEditDateCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.

package/esm/components/cell/GridEditInputCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridSlotProps } from "../../models/gridSlotsComponent.js";
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+import type { GridSlotProps } from "../../models/gridSlotsComponent.js";
+import type { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
 export interface GridEditInputCellProps extends GridRenderEditCellParams {
   debounceMs?: number;
   /**

package/esm/components/cell/GridEditLongTextCell.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+import type { GridSlotProps } from "../../models/gridSlotsComponent.js";
+export interface GridEditLongTextCellProps extends GridRenderEditCellParams<any, string | null> {
+  debounceMs?: number;
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
+   * @param {string} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, newValue: string) => Promise<void> | void;
+  /**
+   * Props passed to internal components.
+   */
+  slotProps?: {
+    /**
+     * Props passed to the root element.
+     */
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props passed to the value element.
+     */
+    value?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props passed to the popper element.
+     */
+    popper?: Partial<GridSlotProps['basePopper']>;
+    /**
+     * Props passed to the popper content element.
+     */
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props passed to the textarea element.
+     */
+    textarea?: Partial<GridSlotProps['baseTextarea']>;
+  };
+}
+declare function GridEditLongTextCell(props: GridEditLongTextCellProps): import("react/jsx-runtime").JSX.Element;
+export { GridEditLongTextCell };
+export declare const renderEditLongTextCell: (params: GridEditLongTextCellProps) => import("react/jsx-runtime").JSX.Element;

package/esm/components/cell/GridEditLongTextCell.js

@@ -0,0 +1,240 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowHeightSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { NotRendered } from "../../utils/assert.js";
+import { vars } from "../../constants/cssVariables.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editLongTextCell'],
+    value: ['editLongTextCellValue'],
+    popup: ['editLongTextCellPopup'],
+    popperContent: ['editLongTextCellPopperContent'],
+    textarea: ['editLongTextCellTextarea']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridEditLongTextCellTextarea = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellTextarea'
+})(({
+  theme
+}) => _extends({
+  width: '100%',
+  padding: 0
+}, theme.typography.body2, {
+  letterSpacing: 'normal',
+  outline: 'none',
+  background: 'transparent',
+  border: 'none',
+  resize: 'vertical'
+}));
+const GridEditLongTextCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCell'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+});
+const GridEditLongTextCellValue = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellValue'
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%',
+  paddingInline: 10
+});
+const GridEditLongTextCellPopper = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellPopper'
+})(({
+  theme
+}) => ({
+  zIndex: vars.zIndex.menu,
+  background: (theme.vars || theme).palette.background.paper,
+  '&[data-popper-reference-hidden]': {
+    opacity: 0 // use opacity to preserve focus.
+  }
+}));
+const GridEditLongTextCellPopperContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellPopperContent'
+})(({
+  theme
+}) => _extends({}, theme.typography.body2, {
+  letterSpacing: 'normal',
+  paddingBlock: 15.5,
+  paddingInline: 9,
+  height: 'max-content',
+  overflow: 'auto',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  width: 'var(--_width)',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  boxShadow: (theme.vars || theme).shadows[4],
+  boxSizing: 'border-box'
+}));
+function GridEditLongTextCell(props) {
+  const {
+    id,
+    value,
+    field,
+    colDef,
+    hasFocus,
+    cellMode,
+    slotProps
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const classes = useUtilityClasses(rootProps);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
+  const [valueState, setValueState] = React.useState(value);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  const popupId = `${id}-${field}-longtext-edit-popup`;
+
+  // Only show popup when this cell has focus
+  // This fixes editMode="row" where all cells enter edit mode simultaneously
+  const showPopup = hasFocus && Boolean(anchorEl);
+  React.useEffect(() => {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta, value]);
+  return /*#__PURE__*/_jsxs(GridEditLongTextCellRoot, _extends({
+    tabIndex: cellMode === 'edit' && rootProps.editMode === 'row' ? 0 : undefined,
+    ref: setAnchorEl,
+    "aria-controls": showPopup ? popupId : undefined,
+    "aria-expanded": showPopup
+  }, slotProps?.root, {
+    className: clsx(classes.root, slotProps?.root?.className),
+    children: [/*#__PURE__*/_jsx(GridEditLongTextCellValue, _extends({}, slotProps?.value, {
+      className: clsx(classes.value, slotProps?.value?.className),
+      children: valueState
+    })), /*#__PURE__*/_jsx(GridEditLongTextCellPopper, _extends({
+      as: rootProps.slots.basePopper,
+      ownerState: rootProps,
+      id: popupId,
+      role: "dialog",
+      "aria-label": colDef.headerName || field,
+      open: showPopup,
+      target: anchorEl,
+      placement: "bottom-start",
+      flip: true,
+      material: {
+        container: anchorEl?.closest('[role="row"]'),
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [-1, -rowHeight]
+          }
+        }]
+      }
+    }, slotProps?.popper, {
+      className: clsx(classes.popup, slotProps?.popper?.className),
+      children: /*#__PURE__*/_jsx(GridEditLongTextCellPopperContent, _extends({}, slotProps?.popperContent, {
+        className: clsx(classes.popperContent, slotProps?.popperContent?.className),
+        style: {
+          '--_width': `${colDef.computedWidth}px`
+        },
+        children: /*#__PURE__*/_jsx(GridEditLongTextarea, _extends({}, props, {
+          valueState: valueState,
+          setValueState: setValueState
+        }))
+      }))
+    }))]
+  }));
+}
+function GridEditLongTextarea(props) {
+  const {
+    id,
+    field,
+    colDef,
+    debounceMs = 200,
+    onValueChange,
+    valueState,
+    setValueState,
+    hasFocus,
+    slotProps
+  } = props;
+  const textareaRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  useEnhancedEffect(() => {
+    if (hasFocus && textareaRef.current) {
+      // preventScroll: the popper is portaled into the GridRow, so focusing
+      // without it triggers the browser to scroll the grid container which is undesirable.
+      textareaRef.current.focus({
+        preventScroll: true
+      });
+      // Move cursor to end of text
+      const length = textareaRef.current.value.length;
+      textareaRef.current.setSelectionRange(length, length);
+    }
+  }, [hasFocus]);
+  const handleChange = React.useCallback(async event => {
+    const newValue = event.target.value;
+    const column = apiRef.current.getColumn(field);
+    let parsedValue = newValue;
+    if (column.valueParser) {
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
+    }
+    setValueState(parsedValue);
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: parsedValue,
+      debounceMs,
+      unstable_skipValueParser: true
+    }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+  }, [apiRef, debounceMs, field, id, onValueChange, setValueState]);
+  const handleKeyDown = React.useCallback(event => {
+    if (event.key === 'Enter' && event.shiftKey) {
+      // Shift+Enter: let textarea handle newline, stop propagation to prevent grid from exiting edit
+      event.stopPropagation();
+    }
+    if (rootProps.editMode === 'cell' && event.key === 'Escape') {
+      apiRef.current.stopCellEditMode({
+        id,
+        field,
+        ignoreModifications: true
+      });
+    }
+  }, [apiRef, field, id, rootProps.editMode]);
+  return /*#__PURE__*/_jsx(GridEditLongTextCellTextarea, _extends({
+    ref: textareaRef,
+    as: rootProps.slots.baseTextarea,
+    ownerState: rootProps,
+    "aria-label": colDef.headerName || field,
+    value: valueState ?? '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, slotProps?.textarea, {
+    className: clsx(classes.textarea, slotProps?.textarea?.className)
+  }));
+}
+export { GridEditLongTextCell };
+export const renderEditLongTextCell = params => /*#__PURE__*/_jsx(GridEditLongTextCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditLongTextCell.displayName = "renderEditLongTextCell";

package/esm/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,5 +1,5 @@
 import type { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
-import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
+import type { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
 export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.

package/esm/components/cell/GridFooterCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
+import { type SxProps, type Theme } from '@mui/material/styles';
 import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
 interface GridFooterCellProps extends GridRenderCellParams {
   sx?: SxProps<Theme>;

package/esm/components/cell/GridLongTextCell.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+import type { GridSlotProps } from "../../models/gridSlotsComponent.js";
+export interface GridLongTextCellProps extends GridRenderCellParams<any, string | null> {
+  /**
+   * A function to customize the content rendered in the popup.
+   * @param {string | null} value The cell value.
+   * @returns {React.ReactNode} The content to render in the popup.
+   */
+  renderContent?: (value: string | null) => React.ReactNode;
+  /**
+   * Props passed to internal components.
+   */
+  slotProps?: {
+    /**
+     * Props passed to the root element.
+     */
+    root?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props passed to the content element.
+     */
+    content?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Props passed to the expand button element.
+     */
+    expandButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Props passed to the collapse button element.
+     */
+    collapseButton?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Props passed to the popper element.
+     */
+    popper?: Partial<GridSlotProps['basePopper']>;
+    /**
+     * Props passed to the popper content element.
+     */
+    popperContent?: React.HTMLAttributes<HTMLDivElement>;
+  };
+}
+declare function GridLongTextCell(props: GridLongTextCellProps): import("react/jsx-runtime").JSX.Element;
+export { GridLongTextCell };
+export declare const renderLongTextCell: (params: GridLongTextCellProps) => import("react/jsx-runtime").JSX.Element;