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

package/modern/locales/zhHK.js

@@ -23,6 +23,18 @@ const zhHKGrid = {
   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/zhTW.js

@@ -23,6 +23,18 @@ const zhTWGrid = {
   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/material/index.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
 import MUIDivider from '@mui/material/Divider';
+import MUIMenuList from '@mui/material/MenuList';
+import MUIMenuItem from '@mui/material/MenuItem';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
@@ -56,6 +58,8 @@ const materialSlots = _extends({}, iconSlots, {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
   baseDivider: MUIDivider,
+  baseMenuList: MUIMenuList,
+  baseMenuItem: MUIMenuItem,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,

package/node/components/GridLoadingOverlay.js

@@ -38,8 +38,8 @@ const LOADING_VARIANTS = {
 };
 const GridLoadingOverlay = exports.GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   const {
-      variant = 'circular-progress',
-      noRowsVariant = 'circular-progress',
+      variant = 'linear-progress',
+      noRowsVariant = 'skeleton',
       style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -60,13 +60,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.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The variant of the overlay.
-   * @default 'circular-progress'
+   * @default 'linear-progress'
    */
   variant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton'])
 } : void 0;

package/node/components/GridRow.js

@@ -34,27 +34,6 @@ var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
-function EmptyCell({
-  width
-}) {
-  if (!width) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "presentation",
-    className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.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.default.number.isRequired
-} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -297,8 +276,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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: handleRef,
     "data-id": rowId,
@@ -313,11 +290,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       style: {
         width: offsetLeft
       }
-    }), cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
-      width: emptyCellWidth
-    }), rightCells.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), cells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
-      className: _gridClasses.gridClasses.filler
+      className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
     }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
       pinnedRight: pinnedColumns.right.length > 0
     })]

package/node/components/base/GridOverlays.js

@@ -22,11 +22,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _system.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' ? {
@@ -35,6 +36,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,
@@ -72,6 +74,7 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root)
   }, props, {
+    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: (0, _clsx.default)(classes.inner),
       style: {

package/node/components/cell/GridActionsCell.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
@@ -181,7 +180,7 @@ function GridActionsCell(props) {
       target: buttonRef.current,
       position: position,
       onClose: hideMenu,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: menuId,
         className: _gridClasses.gridClasses.menuList,
         onKeyDown: handleListKeyDown,

package/node/components/cell/GridActionsCellItem.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -55,7 +54,7 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     ref: ref
   }, other, {
     onClick: handleClick,

package/node/components/cell/GridCell.js

@@ -237,6 +237,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/node/components/containers/GridRootStyles.js

@@ -551,6 +551,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       lineHeight: 'inherit'
     },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
+      flex: 1,
       padding: 0,
       height: 'unset'
     },

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuFilterItem = GridColumnMenuFilterItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -28,7 +27,7 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuHideItem = GridColumnMenuHideItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -44,7 +43,7 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuManageItem = GridColumnMenuManageItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _gridPreferencePanelsValue = require("../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -28,7 +27,7 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuSortItem = GridColumnMenuSortItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridSelector = require("../../../../hooks/utils/useGridSelector");
@@ -45,7 +44,7 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -55,7 +54,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: getLabel('columnMenuSortAsc')
       })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -65,7 +64,7 @@ function GridColumnMenuSortItem(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: getLabel('columnMenuSortDesc')
       })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
         children: apiRef.current.getLocaleText('columnMenuUnsort')

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -9,7 +9,7 @@ exports.GridToolbarColumnsButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/material/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -22,8 +22,8 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
-  const columnButtonId = (0, _utils.unstable_useId)();
-  const columnPanelId = (0, _utils.unstable_useId)();
+  const columnButtonId = (0, _useId.default)();
+  const columnPanelId = (0, _useId.default)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -10,8 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -82,7 +80,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
@@ -113,7 +111,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
       position: "bottom-start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": densityButtonId,

package/node/components/toolbar/GridToolbarExport.js

@@ -12,7 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,12 +21,13 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 function GridCsvExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       hideMenu,
       options
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu?.();
@@ -57,12 +58,13 @@ process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
 } : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       hideMenu,
       options
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu?.();

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../menu/GridMenu");
@@ -71,7 +70,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
       target: buttonRef.current,
       onClose: handleMenuClose,
       position: "bottom-start",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": exportButtonId,

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/node/constants/localeTextConstants.js

@@ -27,6 +27,17 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.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/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -291,7 +291,7 @@ 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/node/hooks/features/columnResize/useGridColumnResize.js

@@ -202,8 +202,10 @@ 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/node/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/node/internals/index.js

@@ -11,6 +11,8 @@ var _exportNames = {
   GridBaseColumnHeaders: true,
   DATA_GRID_DEFAULT_SLOTS_COMPONENTS: true,
   getGridFilter: true,
+  getValueOptions: true,
+  isSingleSelectColDef: true,
   useGridRegisterPipeProcessor: true,
   useGridRegisterStrategyProcessor: true,
   GRID_DEFAULT_STRATEGY: true,
@@ -35,7 +37,6 @@ var _exportNames = {
   passFilterLogic: true,
   gridFilteredChildrenCountLookupSelector: true,
   gridExpandedSortedRowTreeLevelPositionLookupSelector: true,
-  isSingleSelectColDef: true,
   useGridFocus: true,
   focusStateInitializer: true,
   useGridKeyboardNavigation: true,
@@ -302,6 +303,12 @@ Object.defineProperty(exports, "getTreeNodeDescendants", {
     return _gridRowsUtils.getTreeNodeDescendants;
   }
 });
+Object.defineProperty(exports, "getValueOptions", {
+  enumerable: true,
+  get: function () {
+    return _filterPanelUtils.getValueOptions;
+  }
+});
 Object.defineProperty(exports, "getVisibleRows", {
   enumerable: true,
   get: function () {
@@ -705,6 +712,7 @@ var _GridHeaders = require("../components/GridHeaders");
 var _GridBaseColumnHeaders = require("../components/columnHeaders/GridBaseColumnHeaders");
 var _defaultGridSlotsComponents = require("../constants/defaultGridSlotsComponents");
 var _GridFilterPanel = require("../components/panel/filterPanel/GridFilterPanel");
+var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
 var _pipeProcessing = require("../hooks/core/pipeProcessing");
 var _strategyProcessing = require("../hooks/core/strategyProcessing");
 var _useGridInitialization = require("../hooks/core/useGridInitialization");
@@ -757,7 +765,6 @@ var _useGridPrintExport = require("../hooks/features/export/useGridPrintExport")
 var _useGridFilter = require("../hooks/features/filter/useGridFilter");
 var _gridFilterUtils = require("../hooks/features/filter/gridFilterUtils");
 var _gridFilterSelector = require("../hooks/features/filter/gridFilterSelector");
-var _filterPanelUtils = require("../components/panel/filterPanel/filterPanelUtils");
 var _useGridFocus = require("../hooks/features/focus/useGridFocus");
 var _useGridKeyboardNavigation = require("../hooks/features/keyboardNavigation/useGridKeyboardNavigation");
 var _useGridPagination = require("../hooks/features/pagination/useGridPagination");

package/node/joy/joySlots.js

@@ -30,7 +30,7 @@ var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
 var _GridOverlay = require("../components/containers/GridOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-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"],
@@ -72,10 +72,15 @@ function convertVariant(variant, defaultVariant = 'plain') {
 const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       color,
-      sx
+      sx,
+      anchorOrigin
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, props, {
+    anchorOrigin: anchorOrigin?.horizontal && anchorOrigin?.vertical ? anchorOrigin : {
+      vertical: 'top',
+      horizontal: 'right'
+    },
     color: convertColor(color),
     variant: "plain",
     sx: sx,

package/node/locales/arSD.js

@@ -29,6 +29,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/node/locales/beBY.js

@@ -43,6 +43,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: 'Экспарт',