@mui/x-data-grid 7.22.3 → 8.0.0-alpha.1

package/models/gridSlotsComponent.d.ts

@@ -23,6 +23,16 @@ export interface GridBaseSlots {
      * @default Divider
      */
     baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+    /**
+     * The custom MenuList component used in the grid.
+     * @default MenuList
+     */
+    baseMenuList: React.JSXElementConstructor<GridSlotProps['baseMenuList']>;
+    /**
+     * The custom MenuItem component used in the grid.
+     * @default MenuItem
+     */
+    baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
     /**
      * The custom InputAdornment component used in the grid.
      * @default InputAdornment

package/models/gridSlotsComponentsProps.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { BadgeProps } from '@mui/material/Badge';
 import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { MenuListProps } from '@mui/material/MenuList';
+import type { MenuItemProps } from '@mui/material/MenuItem';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
@@ -38,6 +40,10 @@ export interface BaseCheckboxPropsOverrides {
 }
 export interface BaseDividerPropsOverrides {
 }
+export interface BaseMenuListPropsOverrides {
+}
+export interface BaseMenuItemPropsOverrides {
+}
 export interface BaseTextFieldPropsOverrides {
 }
 export interface BaseFormControlPropsOverrides {
@@ -104,6 +110,8 @@ export interface GridSlotProps {
     baseBadge: BadgeProps & BaseBadgePropsOverrides;
     baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
     baseDivider: DividerProps & BaseDividerPropsOverrides;
+    baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
+    baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
     baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
     baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
     baseSelect: SelectProps & BaseSelectPropsOverrides;

package/modern/components/GridLoadingOverlay.js

@@ -30,8 +30,8 @@ const LOADING_VARIANTS = {
 };
 const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   const {
-      variant = 'circular-progress',
-      noRowsVariant = 'circular-progress',
+      variant = 'linear-progress',
+      noRowsVariant = 'skeleton',
       style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -52,13 +52,13 @@ process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The variant of the overlay when no rows are displayed.
-   * @default 'circular-progress'
+   * @default 'skeleton'
    */
   noRowsVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The variant of the overlay.
-   * @default 'circular-progress'
+   * @default 'linear-progress'
    */
   variant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton'])
 } : void 0;

package/modern/components/GridRow.js

@@ -26,27 +26,6 @@ import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EmptyCell({
-  width
-}) {
-  if (!width) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    role: "presentation",
-    className: clsx(gridClasses.cell, gridClasses.cellEmpty),
-    style: {
-      '--width': `${width}px`
-    }
-  });
-}
-process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  width: PropTypes.number.isRequired
-} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -289,8 +268,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
-  const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth - scrollbarWidth;
-  const emptyCellWidth = Math.max(0, expandedWidth);
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,
     "data-id": rowId,
@@ -305,11 +282,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       style: {
         width: offsetLeft
       }
-    }), cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
-      width: emptyCellWidth
-    }), rightCells.length > 0 && /*#__PURE__*/_jsx("div", {
+    }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
-      className: gridClasses.filler
+      className: clsx(gridClasses.cell, gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
       pinnedRight: pinnedColumns.right.length > 0
     })]

package/modern/components/base/GridOverlays.js

@@ -14,11 +14,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
   overridesResolver: (props, styles) => styles.overlayWrapper
 })(({
   overlayType,
-  loadingOverlayVariant
+  loadingOverlayVariant,
+  right
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
@@ -27,6 +28,7 @@ loadingOverlayVariant !== 'skeleton' ? {
   top: 'var(--DataGrid-headersTotalHeight)',
   // TODO: take pinned rows into account
   left: 0,
+  right: `${right}px`,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -64,6 +66,7 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
     className: clsx(classes.root)
   }, props, {
+    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: clsx(classes.inner),
       style: {

package/modern/components/cell/GridActionsCell.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuList from '@mui/material/MenuList';
 import { useRtl } from '@mui/system/RtlProvider';
 import { unstable_useId as useId } from '@mui/utils';
 import { gridClasses } from "../../constants/gridClasses.js";
@@ -172,7 +171,7 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: menuId,
         className: gridClasses.menuList,
         onKeyDown: handleListKeyDown,

package/modern/components/cell/GridActionsCellItem.js

@@ -4,7 +4,6 @@ const _excluded = ["label", "icon", "showInMenu", "onClick"],
   _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +46,7 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, _extends({
     ref: ref
   }, other, {
     onClick: handleClick,

package/modern/components/cell/GridCell.js

@@ -229,6 +229,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
+      if (isLeftPinned || isRightPinned) {
+        cellStyle.zIndex = 6;
+      }
     }
     return cellStyle;
   }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);

package/modern/components/containers/GridRootStyles.js

@@ -544,6 +544,7 @@ export const GridRootStyles = styled('div', {
       lineHeight: 'inherit'
     },
     [`& .${c.cellEmpty}`]: {
+      flex: 1,
       padding: 0,
       height: 'unset'
     },

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -20,7 +19,7 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuFilterIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
@@ -36,7 +35,7 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
@@ -20,7 +19,7 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuManageColumnsIcon, {

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
@@ -37,7 +36,7 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(MenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -47,7 +46,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/_jsx(ListItemText, {
         children: getLabel('columnMenuSortAsc')
       })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(MenuItem, {
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -57,7 +56,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/_jsx(ListItemText, {
         children: getLabel('columnMenuSortDesc')
       })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(MenuItem, {
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {}), /*#__PURE__*/_jsx(ListItemText, {
         children: apiRef.current.getLocaleText('columnMenuUnsort')

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/material/utils';
+import useId from '@mui/utils/useId';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
@@ -74,7 +72,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(MenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -105,7 +103,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
       position: "bottom-start",
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: gridClasses.menuList,
         "aria-labelledby": densityButtonId,

package/modern/components/toolbar/GridToolbarExport.js

@@ -5,18 +5,19 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const {
       hideMenu,
       options
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(MenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu?.();
@@ -47,12 +48,13 @@ process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
 } : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const {
       hideMenu,
       options
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  return /*#__PURE__*/_jsx(MenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu?.();

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import MenuList from '@mui/material/MenuList';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../menu/GridMenu.js";
@@ -63,7 +62,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       target: buttonRef.current,
       onClose: handleMenuClose,
       position: "bottom-start",
-      children: /*#__PURE__*/_jsx(MenuList, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: gridClasses.menuList,
         "aria-labelledby": exportButtonId,

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/constants/localeTextConstants.js

@@ -21,6 +21,17 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
+  // Prompt toolbar field
+  toolbarPromptControlPlaceholder: 'Type a prompt…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  toolbarPromptControlLabel: 'Prompt input',
+  toolbarPromptControlDeleteIconLabel: 'Clear',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  toolbarPromptControlSendActionLabel: 'Send',
+  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -283,7 +283,7 @@ export const useGridColumnHeaders = props => {
         fields: headerInfo.fields,
         colIndex: headerInfo.colIndex,
         depth: depth,
-        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
         height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -193,8 +193,10 @@ export const useGridColumnResize = (apiRef, props) => {
     const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
     const columnWidthDiff = newWidth - refs.initialColWidth;
-    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
-    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    if (columnWidthDiff > 0) {
+      const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+      apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    }
     refs.colDef.computedWidth = newWidth;
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.3
+ * @mui/x-data-grid v8.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -5,6 +5,7 @@ export { GridHeaders } from "../components/GridHeaders.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export { getGridFilter } from "../components/panel/filterPanel/GridFilterPanel.js";
+export { getValueOptions } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridRegisterPipeProcessor } from "../hooks/core/pipeProcessing/index.js";
 export { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../hooks/core/strategyProcessing/index.js";
 export { useGridInitialization } from "../hooks/core/useGridInitialization.js";

package/modern/joy/joySlots.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slotProps", "variant", "color", "sx"],
+const _excluded = ["slotProps", "variant", "color", "sx", "anchorOrigin"],
   _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
   _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
   _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
@@ -64,10 +64,15 @@ function convertVariant(variant, defaultVariant = 'plain') {
 const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       color,
-      sx
+      sx,
+      anchorOrigin
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/_jsx(JoyBadge, _extends({}, props, {
+    anchorOrigin: anchorOrigin?.horizontal && anchorOrigin?.vertical ? anchorOrigin : {
+      vertical: 'top',
+      horizontal: 'right'
+    },
     color: convertColor(color),
     variant: "plain",
     sx: sx,

package/modern/locales/arSD.js

@@ -23,6 +23,18 @@ const arSDGrid = {
   toolbarQuickFilterPlaceholder: 'بحث...',
   toolbarQuickFilterLabel: 'بحث',
   toolbarQuickFilterDeleteIconLabel: 'أزال',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'تصدير',
   toolbarExportLabel: 'تصدير',

package/modern/locales/beBY.js

@@ -37,6 +37,18 @@ const beBYGrid = {
   toolbarQuickFilterPlaceholder: 'Пошук…',
   toolbarQuickFilterLabel: 'Пошук',
   toolbarQuickFilterDeleteIconLabel: 'Ачысціць',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'Экспарт',
   toolbarExportLabel: 'Экспарт',

package/modern/locales/bgBG.js

@@ -23,6 +23,18 @@ const bgBGGrid = {
   toolbarQuickFilterPlaceholder: 'Търси…',
   toolbarQuickFilterLabel: 'Търсене',
   toolbarQuickFilterDeleteIconLabel: 'Изчисти',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'Изтегли',
   toolbarExportLabel: 'Изтегли',

package/modern/locales/csCZ.js

@@ -31,6 +31,18 @@ const csCZGrid = {
   toolbarQuickFilterPlaceholder: 'Hledat…',
   toolbarQuickFilterLabel: 'Hledat',
   toolbarQuickFilterDeleteIconLabel: 'Vymazat',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',

package/modern/locales/daDK.js

@@ -23,6 +23,18 @@ const daDKGrid = {
   toolbarQuickFilterPlaceholder: 'Søg…',
   toolbarQuickFilterLabel: 'Søg',
   toolbarQuickFilterDeleteIconLabel: 'Ryd',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'Eksport',
   toolbarExportLabel: 'Eksporter',

package/modern/locales/deDE.js

@@ -23,6 +23,18 @@ const deDEGrid = {
   toolbarQuickFilterPlaceholder: 'Suchen…',
   toolbarQuickFilterLabel: 'Suchen',
   toolbarQuickFilterDeleteIconLabel: 'Löschen',
+  // Prompt toolbar field
+  // toolbarPromptControlPlaceholder: 'Type a prompt…',
+  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
+  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
+  // toolbarPromptControlLabel: 'Prompt input',
+  // toolbarPromptControlDeleteIconLabel: 'Clear',
+  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
+  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
+  // toolbarPromptControlSendActionLabel: 'Send',
+  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
+  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
+
   // Export selector toolbar button text
   toolbarExport: 'Exportieren',
   toolbarExportLabel: 'Exportieren',