@mui/x-data-grid 8.25.0 → 8.27.0

package/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/components/cell/GridEditLongTextCell.js

@@ -0,0 +1,248 @@
+"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.GridEditLongTextCell = GridEditLongTextCell;
+exports.renderEditLongTextCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _styles = require("@mui/material/styles");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editLongTextCell'],
+    value: ['editLongTextCellValue'],
+    popup: ['editLongTextCellPopup'],
+    popperContent: ['editLongTextCellPopperContent'],
+    textarea: ['editLongTextCellTextarea']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridEditLongTextCellTextarea = (0, _styles.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellTextarea'
+})(({
+  theme
+}) => (0, _extends2.default)({
+  width: '100%',
+  padding: 0
+}, theme.typography.body2, {
+  letterSpacing: 'normal',
+  outline: 'none',
+  background: 'transparent',
+  border: 'none',
+  resize: 'vertical'
+}));
+const GridEditLongTextCellRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCell'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+});
+const GridEditLongTextCellValue = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellValue'
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%',
+  paddingInline: 10
+});
+const GridEditLongTextCellPopper = (0, _styles.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellPopper'
+})(({
+  theme
+}) => ({
+  zIndex: _cssVariables.vars.zIndex.menu,
+  background: (theme.vars || theme).palette.background.paper,
+  '&[data-popper-reference-hidden]': {
+    opacity: 0 // use opacity to preserve focus.
+  }
+}));
+const GridEditLongTextCellPopperContent = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'EditLongTextCellPopperContent'
+})(({
+  theme
+}) => (0, _extends2.default)({}, 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 = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const classes = useUtilityClasses(rootProps);
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.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__*/(0, _jsxRuntime.jsxs)(GridEditLongTextCellRoot, (0, _extends2.default)({
+    tabIndex: cellMode === 'edit' && rootProps.editMode === 'row' ? 0 : undefined,
+    ref: setAnchorEl,
+    "aria-controls": showPopup ? popupId : undefined,
+    "aria-expanded": showPopup
+  }, slotProps?.root, {
+    className: (0, _clsx.default)(classes.root, slotProps?.root?.className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditLongTextCellValue, (0, _extends2.default)({}, slotProps?.value, {
+      className: (0, _clsx.default)(classes.value, slotProps?.value?.className),
+      children: valueState
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditLongTextCellPopper, (0, _extends2.default)({
+      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: (0, _clsx.default)(classes.popup, slotProps?.popper?.className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditLongTextCellPopperContent, (0, _extends2.default)({}, slotProps?.popperContent, {
+        className: (0, _clsx.default)(classes.popperContent, slotProps?.popperContent?.className),
+        style: {
+          '--_width': `${colDef.computedWidth}px`
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditLongTextarea, (0, _extends2.default)({}, 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 = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  (0, _useEnhancedEffect.default)(() => {
+    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__*/(0, _jsxRuntime.jsx)(GridEditLongTextCellTextarea, (0, _extends2.default)({
+    ref: textareaRef,
+    as: rootProps.slots.baseTextarea,
+    ownerState: rootProps,
+    "aria-label": colDef.headerName || field,
+    value: valueState ?? '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
+  }, slotProps?.textarea, {
+    className: (0, _clsx.default)(classes.textarea, slotProps?.textarea?.className)
+  }));
+}
+const renderEditLongTextCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditLongTextCell, (0, _extends2.default)({}, params));
+exports.renderEditLongTextCell = renderEditLongTextCell;
+if (process.env.NODE_ENV !== "production") renderEditLongTextCell.displayName = "renderEditLongTextCell";

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

package/components/cell/GridLongTextCell.js

@@ -0,0 +1,254 @@
+"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.GridLongTextCell = GridLongTextCell;
+exports.renderLongTextCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['longTextCell'],
+    content: ['longTextCellContent'],
+    expandButton: ['longTextCellExpandButton'],
+    collapseButton: ['longTextCellCollapseButton'],
+    popup: ['longTextCellPopup'],
+    popperContent: ['longTextCellPopperContent']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridLongTextCellRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCell'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+});
+const GridLongTextCellContent = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellContent'
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flex: 1
+});
+const GridLongTextCellPopperContent = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopperContent'
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.body2, {
+  letterSpacing: 'normal',
+  paddingBlock: 15.5,
+  paddingInline: 9,
+  maxHeight: 52 * 3,
+  overflow: 'auto',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  width: 'var(--_width)',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  boxSizing: 'border-box'
+}));
+const GridLongTextCellCornerButton = (0, _styles.styled)('button', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellCornerButton'
+})(({
+  theme
+}) => ({
+  lineHeight: 0,
+  position: 'absolute',
+  bottom: 1,
+  right: 0,
+  border: '1px solid',
+  color: (theme.vars || theme).palette.text.secondary,
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  borderRadius: 0,
+  fontSize: '0.875rem',
+  padding: 2,
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary
+  },
+  [`&.${_gridClasses.gridClasses.longTextCellExpandButton}`]: {
+    right: -9,
+    opacity: 0,
+    [`.${_gridClasses.gridClasses.longTextCell}:hover &, .${_gridClasses.gridClasses.longTextCell}.Mui-focused &`]: {
+      opacity: 1
+    }
+  },
+  [`&.${_gridClasses.gridClasses.longTextCellCollapseButton}`]: {
+    bottom: 2,
+    right: 2,
+    border: 'none'
+  }
+}));
+const GridLongTextCellPopper = (0, _styles.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopper'
+})(({
+  theme
+}) => ({
+  zIndex: _cssVariables.vars.zIndex.menu,
+  background: (theme.vars || theme).palette.background.paper,
+  '&[data-popper-reference-hidden]': {
+    visibility: 'hidden',
+    pointerEvents: 'none'
+  }
+}));
+function GridLongTextCell(props) {
+  const {
+    id,
+    value = '',
+    colDef,
+    hasFocus,
+    slotProps,
+    renderContent
+  } = props;
+  const popupId = `${id}-${colDef.field}-longtext-popup`;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const classes = useUtilityClasses(rootProps);
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridRowHeightSelector);
+  const [popupOpen, setPopupOpen] = React.useState(false);
+  const cellRef = React.useRef(null);
+  const cornerButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (hasFocus && !popupOpen) {
+      if (cornerButtonRef.current && cornerButtonRef.current !== document.activeElement) {
+        cornerButtonRef.current.focus();
+      }
+    }
+    if (!hasFocus) {
+      setPopupOpen(false);
+    }
+  }, [hasFocus, popupOpen]);
+  const handleExpandClick = event => {
+    // event.detail === 0 means keyboard-triggered click (Enter keyup on focused button)
+    // Ignore these to prevent popup from opening when focus moves to this cell via Enter
+    if (event.detail === 0) {
+      return;
+    }
+    event.stopPropagation();
+    setPopupOpen(true);
+  };
+  const handleExpandKeyDown = event => {
+    if (event.key === ' ' && !event.shiftKey) {
+      event.preventDefault(); // Prevent native button click on keyup
+      event.stopPropagation(); // Prevent grid row selection
+      setPopupOpen(prev => !prev);
+    }
+    if (event.key === 'Escape' && popupOpen) {
+      event.stopPropagation(); // Prevent grid cell navigation
+      setPopupOpen(false);
+    }
+  };
+  const handleClickAway = () => {
+    setPopupOpen(false);
+  };
+  const handleCollapseClick = event => {
+    event.stopPropagation();
+    setPopupOpen(false);
+    apiRef.current.getCellElement(id, colDef.field)?.focus();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridLongTextCellRoot, (0, _extends2.default)({
+    ref: cellRef
+  }, slotProps?.root, {
+    className: (0, _clsx.default)(classes.root, slotProps?.root?.className, hasFocus && 'Mui-focused'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellContent, (0, _extends2.default)({}, slotProps?.content, {
+      className: (0, _clsx.default)(classes.content, slotProps?.content?.className),
+      children: value
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellCornerButton, (0, _extends2.default)({
+      ref: cornerButtonRef,
+      "aria-label": `${value}, ${apiRef.current.getLocaleText('longTextCellExpandLabel')}`,
+      "aria-haspopup": "dialog",
+      "aria-controls": popupOpen ? popupId : undefined,
+      "aria-expanded": popupOpen,
+      "aria-keyshortcuts": "Space",
+      tabIndex: 0
+    }, slotProps?.expandButton, {
+      className: (0, _clsx.default)(classes.expandButton, slotProps?.expandButton?.className),
+      onClick: handleExpandClick,
+      onKeyDown: handleExpandKeyDown,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.longTextCellExpandIcon, {
+        fontSize: "inherit"
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellPopper, (0, _extends2.default)({
+      id: popupId,
+      role: "dialog",
+      "aria-label": colDef.headerName || colDef.field,
+      as: rootProps.slots.basePopper,
+      ownerState: rootProps,
+      open: popupOpen,
+      target: cellRef.current,
+      placement: "bottom-start",
+      onClickAway: handleClickAway,
+      clickAwayMouseEvent: "onMouseDown",
+      flip: true,
+      material: {
+        container: cellRef.current?.closest('[role="row"]'),
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [-10, -rowHeight]
+          }
+        }]
+      }
+    }, slotProps?.popper, {
+      className: (0, _clsx.default)(classes.popup, slotProps?.popper?.className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridLongTextCellPopperContent, (0, _extends2.default)({
+        tabIndex: -1,
+        onKeyDown: event => {
+          if (event.key === 'Escape') {
+            event.stopPropagation();
+            setPopupOpen(false);
+            apiRef.current.getCellElement(id, colDef.field)?.focus();
+          }
+        }
+      }, slotProps?.popperContent, {
+        className: (0, _clsx.default)(classes.popperContent, slotProps?.popperContent?.className),
+        style: (0, _extends2.default)({
+          '--_width': `${colDef.computedWidth}px`
+        }, slotProps?.popperContent?.style),
+        children: [renderContent ? renderContent(value) : value, /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCellCornerButton, (0, _extends2.default)({
+          "aria-label": apiRef.current.getLocaleText('longTextCellCollapseLabel'),
+          "aria-keyshortcuts": "Escape"
+        }, slotProps?.collapseButton, {
+          className: (0, _clsx.default)(classes.collapseButton, slotProps?.collapseButton?.className),
+          onClick: handleCollapseClick,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.longTextCellCollapseIcon, {
+            fontSize: "inherit"
+          })
+        }))]
+      }))
+    }))]
+  }));
+}
+const renderLongTextCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLongTextCell, (0, _extends2.default)({}, params));
+exports.renderLongTextCell = renderLongTextCell;
+if (process.env.NODE_ENV !== "production") renderLongTextCell.displayName = "renderLongTextCell";

package/components/cell/GridSkeletonCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridColType } from "../../models/index.js";
+import type { GridColType } from "../../models/index.js";
 export interface GridSkeletonCellProps extends React.HTMLAttributes<HTMLDivElement> {
   type?: GridColType;
   width?: number | string;

package/components/cell/index.d.ts

@@ -7,4 +7,6 @@ export * from "./GridEditInputCell.js";
 export * from "./GridEditSingleSelectCell.js";
 export * from "./GridActionsCell.js";
 export * from "./GridActionsCellItem.js";
-export * from "./GridSkeletonCell.js";
+export * from "./GridSkeletonCell.js";
+export * from "./GridLongTextCell.js";
+export * from "./GridEditLongTextCell.js";

package/components/cell/index.js

@@ -108,4 +108,28 @@ Object.keys(_GridSkeletonCell).forEach(function (key) {
       return _GridSkeletonCell[key];
     }
   });
+});
+var _GridLongTextCell = require("./GridLongTextCell");
+Object.keys(_GridLongTextCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridLongTextCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridLongTextCell[key];
+    }
+  });
+});
+var _GridEditLongTextCell = require("./GridEditLongTextCell");
+Object.keys(_GridEditLongTextCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridEditLongTextCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridEditLongTextCell[key];
+    }
+  });
 });

package/components/columnHeaders/ColumnHeaderMenuIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
 export interface ColumnHeaderMenuIconProps {
   colDef: GridStateColDef;
   columnMenuId: string;

package/components/columnHeaders/GridBaseColumnHeaders.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 GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
   sx?: SxProps<Theme>;
 }

package/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridColumnHeaderParams } from "../../models/params/gridColumnHeaderParams.js";
+import type { GridColumnHeaderParams } from "../../models/params/gridColumnHeaderParams.js";
 export interface ColumnHeaderFilterIconButtonProps {
   field: string;
   counter?: number;