@mui/x-data-grid 8.25.0 → 8.27.0

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;

package/esm/components/cell/GridLongTextCell.js

@@ -0,0 +1,246 @@
+'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 { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses } 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: ['longTextCell'],
+    content: ['longTextCellContent'],
+    expandButton: ['longTextCellExpandButton'],
+    collapseButton: ['longTextCellCollapseButton'],
+    popup: ['longTextCellPopup'],
+    popperContent: ['longTextCellPopperContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridLongTextCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCell'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+});
+const GridLongTextCellContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellContent'
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flex: 1
+});
+const GridLongTextCellPopperContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopperContent'
+})(({
+  theme
+}) => _extends({}, 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 = 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.longTextCellExpandButton}`]: {
+    right: -9,
+    opacity: 0,
+    [`.${gridClasses.longTextCell}:hover &, .${gridClasses.longTextCell}.Mui-focused &`]: {
+      opacity: 1
+    }
+  },
+  [`&.${gridClasses.longTextCellCollapseButton}`]: {
+    bottom: 2,
+    right: 2,
+    border: 'none'
+  }
+}));
+const GridLongTextCellPopper = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'LongTextCellPopper'
+})(({
+  theme
+}) => ({
+  zIndex: 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 = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const classes = useUtilityClasses(rootProps);
+  const rowHeight = useGridSelector(apiRef, 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__*/_jsxs(GridLongTextCellRoot, _extends({
+    ref: cellRef
+  }, slotProps?.root, {
+    className: clsx(classes.root, slotProps?.root?.className, hasFocus && 'Mui-focused'),
+    children: [/*#__PURE__*/_jsx(GridLongTextCellContent, _extends({}, slotProps?.content, {
+      className: clsx(classes.content, slotProps?.content?.className),
+      children: value
+    })), /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
+      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: clsx(classes.expandButton, slotProps?.expandButton?.className),
+      onClick: handleExpandClick,
+      onKeyDown: handleExpandKeyDown,
+      children: /*#__PURE__*/_jsx(rootProps.slots.longTextCellExpandIcon, {
+        fontSize: "inherit"
+      })
+    })), /*#__PURE__*/_jsx(GridLongTextCellPopper, _extends({
+      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: clsx(classes.popup, slotProps?.popper?.className),
+      children: /*#__PURE__*/_jsxs(GridLongTextCellPopperContent, _extends({
+        tabIndex: -1,
+        onKeyDown: event => {
+          if (event.key === 'Escape') {
+            event.stopPropagation();
+            setPopupOpen(false);
+            apiRef.current.getCellElement(id, colDef.field)?.focus();
+          }
+        }
+      }, slotProps?.popperContent, {
+        className: clsx(classes.popperContent, slotProps?.popperContent?.className),
+        style: _extends({
+          '--_width': `${colDef.computedWidth}px`
+        }, slotProps?.popperContent?.style),
+        children: [renderContent ? renderContent(value) : value, /*#__PURE__*/_jsx(GridLongTextCellCornerButton, _extends({
+          "aria-label": apiRef.current.getLocaleText('longTextCellCollapseLabel'),
+          "aria-keyshortcuts": "Escape"
+        }, slotProps?.collapseButton, {
+          className: clsx(classes.collapseButton, slotProps?.collapseButton?.className),
+          onClick: handleCollapseClick,
+          children: /*#__PURE__*/_jsx(rootProps.slots.longTextCellCollapseIcon, {
+            fontSize: "inherit"
+          })
+        }))]
+      }))
+    }))]
+  }));
+}
+export { GridLongTextCell };
+export const renderLongTextCell = params => /*#__PURE__*/_jsx(GridLongTextCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderLongTextCell.displayName = "renderLongTextCell";

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

@@ -6,4 +6,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/esm/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/esm/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/esm/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;

package/esm/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GridStateColDef } from "../../models/colDef/gridColDef.js";
-import { GridSortDirection } from "../../models/gridSortModel.js";
-import { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridSortDirection } from "../../models/gridSortModel.js";
+import type { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
 interface GridColumnHeaderItemProps {
   colIndex: number;

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridColumnSortButtonProps } from "../GridColumnSortButton.js";
+import { type GridColumnSortButtonProps } from "../GridColumnSortButton.js";
 export interface GridColumnHeaderSortIconProps extends GridColumnSortButtonProps {}
 declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnHeaderSortIconRaw {

package/esm/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridStateColDef } from "../../models/colDef/gridColDef.js";
-import { GridSortDirection } from "../../models/gridSortModel.js";
-import { GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
-import { GridColumnGroup } from "../../models/gridColumnGrouping.js";
+import type { GridStateColDef } from "../../models/colDef/gridColDef.js";
+import type { GridSortDirection } from "../../models/gridSortModel.js";
+import { type GridColumnHeaderSeparatorProps } from "./GridColumnHeaderSeparator.js";
+import type { GridColumnGroup } from "../../models/gridColumnGrouping.js";
 interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
   classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;
   colIndex: number;

package/esm/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import type { TextFieldProps } from "../../models/gridBaseSlots.js";
 import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridColDef } from "../../models/colDef/gridColDef.js";
 export interface GridColumnsManagementProps {

package/esm/components/columnsManagement/utils.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import type { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import type { GridColumnsManagementProps } from "./GridColumnsManagement.js";
 export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
 export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/esm/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export interface ColumnsPanelState {
   /**

package/esm/components/containers/GridFooterContainer.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';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/esm/components/containers/GridOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Theme, SxProps } from '@mui/system';
+import { type Theme, type SxProps } from '@mui/system';
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };