@mui/x-data-grid 8.26.0 → 8.27.0

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>;
 };

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+import type { Theme } from '@mui/material/styles';
 export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

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

@@ -1,4 +1,4 @@
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;

package/esm/components/containers/GridToolbarContainer.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 GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };

package/esm/components/export/ExportCsv.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-import { GridCsvExportOptions } from "../../models/gridExport.js";
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridCsvExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportCsvProps = GridSlotProps['baseButton'] & {
   /**

package/esm/components/export/ExportPrint.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RenderProp } from '@mui/x-internals/useComponentRenderer';
-import { GridPrintExportOptions } from "../../models/gridExport.js";
+import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { GridPrintExportOptions } from "../../models/gridExport.js";
 import type { GridSlotProps } from "../../models/index.js";
 export type ExportPrintProps = GridSlotProps['baseButton'] & {
   /**

package/esm/components/filterPanel/FilterPanelTrigger.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 FilterPanelState {
   /**

package/esm/components/menu/GridMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PopperProps } from "../../models/gridBaseSlots.js";
+import type { PopperProps } from "../../models/gridBaseSlots.js";
 type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | undefined;
 export interface GridMenuProps extends Pick<PopperProps, 'className' | 'onExited'> {
   open: boolean;

package/esm/components/menu/columnMenu/GridColumnHeaderMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridMenuProps } from "../GridMenu.js";
+import { type GridMenuProps } from "../GridMenu.js";
 export interface GridColumnHeaderMenuProps {
   columnMenuId?: string;
   columnMenuButtonId?: string;

package/esm/components/menu/columnMenu/GridColumnMenu.d.ts

@@ -1,7 +1,7 @@
 import { GridColumnMenuColumnsItem } from "./menuItems/GridColumnMenuColumnsItem.js";
 import { GridColumnMenuFilterItem } from "./menuItems/GridColumnMenuFilterItem.js";
 import { GridColumnMenuSortItem } from "./menuItems/GridColumnMenuSortItem.js";
-import { GridColumnMenuProps, GridGenericColumnMenuProps } from "./GridColumnMenuProps.js";
+import type { GridColumnMenuProps, GridGenericColumnMenuProps } from "./GridColumnMenuProps.js";
 export declare const GRID_COLUMN_MENU_SLOTS: {
   columnMenuSortItem: typeof GridColumnMenuSortItem;
   columnMenuFilterItem: typeof GridColumnMenuFilterItem;

package/esm/components/menu/columnMenu/GridColumnMenuContainer.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridColumnMenuContainerProps } from "./GridColumnMenuProps.js";
+import type { GridColumnMenuContainerProps } from "./GridColumnMenuProps.js";
 declare const GridColumnMenuContainer: React.ForwardRefExoticComponent<GridColumnMenuContainerProps> | React.ForwardRefExoticComponent<GridColumnMenuContainerProps & React.RefAttributes<HTMLUListElement>>;
 export { GridColumnMenuContainer };

package/esm/components/menu/columnMenu/GridColumnMenuItemProps.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { GridColDef } from "../../../models/colDef/gridColDef.js";
+import type * as React from 'react';
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export interface GridColumnMenuItemProps {
   colDef: GridColDef;
   onClick: (event: React.MouseEvent<any>) => void;

package/esm/components/menu/columnMenu/GridColumnMenuProps.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { GridColDef } from "../../../models/colDef/gridColDef.js";
-import { GridColumnMenuRootProps } from "../../../hooks/features/columnMenu/index.js";
+import type * as React from 'react';
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColumnMenuRootProps } from "../../../hooks/features/columnMenu/index.js";
 export interface GridColumnMenuContainerProps extends React.HTMLAttributes<HTMLUListElement> {
   hideMenu: (event: React.SyntheticEvent) => void;
   colDef: GridColDef;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuColumnsItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridColumnMenuColumnsItem {
   var propTypes: any;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuFilterItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuFilterItem {
   var propTypes: any;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuHideItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuHideItem {
   var propTypes: any;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuManageItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuManageItem {
   var propTypes: any;

package/esm/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
+import type { GridColumnMenuItemProps } from "../GridColumnMenuItemProps.js";
 declare function GridColumnMenuSortItem(props: GridColumnMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridColumnMenuSortItem {
   var propTypes: any;

package/esm/components/panel/GridColumnsPanel.d.ts

@@ -1,4 +1,4 @@
-import { GridPanelWrapperProps } from "./GridPanelWrapper.js";
+import { type GridPanelWrapperProps } from "./GridPanelWrapper.js";
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {}
 declare function GridColumnsPanel(props: GridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
 export { GridColumnsPanel };

package/esm/components/panel/GridPanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridSlotProps } from "../../models/gridSlotsComponent.js";
+import type { GridSlotProps } from "../../models/gridSlotsComponent.js";
 export interface GridPanelClasses {
   /** Styles applied to the root element. */
   panel: string;

package/esm/components/panel/GridPanelContent.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';
 declare function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }): import("react/jsx-runtime").JSX.Element;

package/esm/components/panel/GridPanelFooter.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';
 declare function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }): import("react/jsx-runtime").JSX.Element;

package/esm/components/panel/GridPanelHeader.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';
 declare function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }): import("react/jsx-runtime").JSX.Element;

package/esm/components/panel/GridPanelWrapper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Theme } from '@mui/material/styles';
-import { MUIStyledCommonProps } from '@mui/system';
+import { type Theme } from '@mui/material/styles';
+import type { MUIStyledCommonProps } from '@mui/system';
 export interface GridPanelWrapperProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>, MUIStyledCommonProps<Theme> {}
 declare const GridPanelWrapper: React.ForwardRefExoticComponent<GridPanelWrapperProps> | React.ForwardRefExoticComponent<GridPanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
 export { GridPanelWrapper };

package/esm/components/panel/filterPanel/GridFilterForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GridFilterItem, GridLogicOperator } from "../../../models/gridFilterItem.js";
-import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import { type GridFilterItem, GridLogicOperator } from "../../../models/gridFilterItem.js";
+import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
 export interface FilterColumnsArgs {
   field: GridColDef['field'];
   columns: GridStateColDef[];

package/esm/components/panel/filterPanel/GridFilterInputBoolean.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from "../../../models/gridBaseSlots.js";
-import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputBooleanProps = GridFilterInputValueProps<TextFieldProps>;
 declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridFilterInputBoolean {

package/esm/components/panel/filterPanel/GridFilterInputDate.d.ts

@@ -1,5 +1,5 @@
-import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
-import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { TextFieldProps } from "../../../models/gridBaseSlots.js";
 export type GridFilterInputDateProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'date' | 'datetime-local';
 };

package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
-import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { AutocompleteProps } from "../../../models/gridBaseSlots.js";
+import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';

package/esm/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,5 +1,5 @@
-import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
-import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { AutocompleteProps } from "../../../models/gridBaseSlots.js";
+import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };

package/esm/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from "../../../models/gridBaseSlots.js";
-import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+import type { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import type { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'singleSelect';
 };