@mui/x-data-grid 6.16.0 → 6.16.2

package/locales/roRO.js

@@ -74,7 +74,7 @@ const roROGrid = {
   headerFilterOperatorIs: 'Este',
   headerFilterOperatorNot: 'Nu este',
   headerFilterOperatorAfter: 'Este după',
-  headerFilterOperatorOnOrAfter: 'Este la sau „după”',
+  headerFilterOperatorOnOrAfter: 'Este la sau după',
   headerFilterOperatorBefore: 'Este înainte de',
   headerFilterOperatorOnOrBefore: 'este la sau înainte de',
   headerFilterOperatorIsEmpty: 'Este gol',

package/models/events/gridEventLookup.d.ts

@@ -43,6 +43,20 @@ export interface GridRowEventLookup {
         params: GridRowParams;
         event: React.MouseEvent<HTMLElement>;
     };
+    /**
+     * @ignore - do not document.
+     */
+    rowMouseOut: {
+        params: GridRowParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
+    /**
+     * @ignore - do not document.
+     */
+    rowMouseOver: {
+        params: GridRowParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
     /**
      * Fired when the user starts dragging a row. It's mapped to the `dragstart` DOM event.
      * @ignore - do not document.

package/models/props/DataGridProps.d.ts

@@ -329,7 +329,7 @@ export interface DataGridPropsWithDefaultValues {
     /**
      * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
      * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-     * @default: false
+     * @default false
      */
     unstable_ignoreValueFormatterDuringExport: boolean | {
         csvExport?: boolean;

package/modern/DataGrid/DataGrid.js

@@ -27,6 +27,13 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     }))
   });
 });
+/**
+ * Demos:
+ * - [DataGrid](https://mui.com/x/react-data-grid/demo/)
+ *
+ * API:
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ */
 export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
 
 /**
@@ -660,7 +667,7 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-   * @default: false
+   * @default false
    */
   unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
     clipboardExport: PropTypes.bool,

package/modern/colDef/gridDateColDef.js

@@ -51,8 +51,6 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });
@@ -62,8 +60,6 @@ export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -76,7 +76,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onClick,
       onDoubleClick,
       onMouseEnter,
-      onMouseLeave
+      onMouseLeave,
+      onMouseOut,
+      onMouseOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -321,7 +323,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     onClick: publishClick,
     onDoubleClick: publish('rowDoubleClick', onDoubleClick),
     onMouseEnter: publish('rowMouseEnter', onMouseEnter),
-    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave),
+    onMouseOut: publish('rowMouseOut', onMouseOut),
+    onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: handleRef,

package/modern/components/cell/GridCell.js

@@ -48,10 +48,11 @@ const useUtilityClasses = ownerState => {
     showRightBorder,
     isEditable,
     isSelected,
+    isSelectionMode,
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${capitalize(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', 'withBorderColor'],
+    root: ['cell', `cell--text${capitalize(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
     content: ['cellContent']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -458,12 +459,15 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
+  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
+  const isSelectionMode = rootProps.unstable_cellSelection ?? false;
   const ownerState = {
     align,
     showRightBorder,
     isEditable,
     classes: rootProps.classes,
-    isSelected
+    isSelected,
+    isSelectionMode
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {

package/modern/components/containers/GridRootStyles.js

@@ -43,6 +43,8 @@ export const GridRootStyles = styled('div', {
     [`&.${gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
   }, {
     [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]: styles['root--disableUserSelection']
+  }, {
+    [`&.${gridClasses.autosizing}`]: styles.autosizing
   }, {
     [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {
@@ -184,6 +186,14 @@ export const GridRootStyles = styled('div', {
         borderBottomColor: 'transparent'
       }
     },
+    [`&.${gridClasses.autosizing}`]: {
+      [`& .${gridClasses.columnHeaderTitleContainerContent} > *`]: {
+        overflow: 'visible !important'
+      },
+      [`& .${gridClasses.cell} > *`]: {
+        overflow: 'visible !important'
+      }
+    },
     [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
       borderBottomColor: 'transparent'
     },
@@ -385,6 +395,9 @@ export const GridRootStyles = styled('div', {
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     },
+    [`& .${gridClasses.cell}.${gridClasses['cell--selectionMode']}`]: {
+      cursor: 'default'
+    },
     [`& .${gridClasses.cell}.${gridClasses['cell--editing']}`]: {
       padding: 1,
       display: 'flex',

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -428,4 +428,12 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   valueInputProps: PropTypes.any
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/)
+ */
 export { GridFilterForm };

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -211,4 +211,12 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
+ */
 export { GridFilterPanel, getGridFilter };

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -132,4 +132,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   quickFilterParser: PropTypes.func
 } : void 0;
+
+/**
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ * - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
+ *
+ * API:
+ * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
+ */
 export { GridToolbarQuickFilter };

package/modern/components/virtualization/GridVirtualScroller.js

@@ -26,8 +26,10 @@ const VirtualScrollerRoot = styled('div', {
   position: 'relative',
   '@media print': {
     overflow: 'hidden'
-  }
+  },
+  zIndex: 0 // See https://github.com/mui/mui-x/issues/10547
 });
+
 const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualScroller(props, ref) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);

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', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', '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--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -34,11 +34,20 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
   });
   return unwrappedSubTree;
 };
-export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel) => {
+export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveDifferentContainers = (field1, field2) => {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
       const groupId = getParents(newField)[depth] ?? null;
@@ -51,7 +60,9 @@ export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGrouping
       const lastGroup = structure[structure.length - 1];
       const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
       const prevGroupId = lastGroup.groupId;
-      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth)) {
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
+      // Fix for https://github.com/mui/mui-x/issues/7041
+      haveDifferentContainers(prevField, newField)) {
         // It's a new group
         return [...structure, {
           columnFields: [newField],

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -46,7 +46,9 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel,
+  // @ts-expect-error Move this part to `Pro` package
+  apiRef.current.state.pinnedColumns ?? {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return _extends({}, state, {
     columnGrouping: {
@@ -83,7 +85,10 @@ export const useGridColumnGrouping = (apiRef, props) => {
     const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
       const orderedFields = state.columns?.orderedFields ?? [];
-      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel);
+
+      // @ts-expect-error Move this logic to `Pro` package
+      const pinnedColumns = state.pinnedColumns ?? {};
+      const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
         columnGrouping: _extends({}, state.columnGrouping, {
           headerStructure: columnGroupsHeaderStructure
@@ -95,11 +100,13 @@ export const useGridColumnGrouping = (apiRef, props) => {
     if (!props.experimentalFeatures?.columnGrouping) {
       return;
     }
+    // @ts-expect-error Move this logic to `Pro` package
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
     const groupLookup = createGroupLookup(columnGroupingModel ?? []);
     const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
-    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
+    const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
       return _extends({}, state, {

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -50,7 +50,6 @@ export function computeFlexColumnsWidth({
     for (let i = 0; i < flexColumns.length; i += 1) {
       const column = flexColumns[i];
       if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
-        // eslint-disable-next-line no-continue
         continue;
       }
 

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -160,7 +160,7 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.
-  const filterItemTemplate = `(function filterItem$$(appliers, row, shouldApplyFilter) {
+  const filterItemTemplate = `(function filterItem$$(getRowId, appliers, row, shouldApplyFilter) {
       ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 
       const result$$ = {
@@ -174,7 +174,7 @@ export const buildAggregatedFilterItemsApplier = (getRowId, filterModel, apiRef,
     })`;
   const filterItemCore = evalCode(filterItemTemplate.replaceAll('$$', String(filterItemsApplierId)));
   const filterItem = (row, shouldApplyItem) => {
-    return filterItemCore(appliers, row, shouldApplyItem);
+    return filterItemCore(getRowId, appliers, row, shouldApplyItem);
   };
   filterItemsApplierId += 1;
   return filterItem;
@@ -223,7 +223,7 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
     const result = {};
     const usedCellParams = {};
 
-    /* eslint-disable no-restricted-syntax, no-labels, no-continue */
+    /* eslint-disable no-restricted-syntax, no-labels */
     outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
       const filterValue = quickFilterValues[v];
       for (let i = 0; i < appliersPerField.length; i += 1) {
@@ -260,7 +260,7 @@ export const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef)
       }
       result[filterValue] = false;
     }
-    /* eslint-enable no-restricted-syntax, no-labels, no-continue */
+    /* eslint-enable no-restricted-syntax, no-labels */
 
     return result;
   };

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -348,10 +348,16 @@ export const useGridVirtualScroller = props => {
     }
     return -1;
   }, [cellFocus, currentPage.rows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', params => {
+  useGridApiEventHandler(apiRef, 'rowMouseOver', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(params.id ?? null);
   });
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', () => {
+  useGridApiEventHandler(apiRef, 'rowMouseOut', (params, event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
     setHoveredRowId(null);
   });
   const getRows = (params = {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.16.0
+ * @mui/x-data-grid v6.16.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locales/arSD.js

@@ -37,7 +37,7 @@ const arSDGrid = {
   columnsPanelHideAllButton: 'إخفاء الكل',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'حذف الكل',
   filterPanelDeleteIconLabel: 'حذف',
   filterPanelLogicOperator: 'عامل منطقي',
   filterPanelOperator: 'عامل',
@@ -60,34 +60,32 @@ const arSDGrid = {
   filterOperatorIsEmpty: 'خالي',
   filterOperatorIsNotEmpty: 'غير خالي',
   filterOperatorIsAnyOf: 'أي من',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: 'يحتوي على',
+  headerFilterOperatorEquals: 'يساوي',
+  headerFilterOperatorStartsWith: 'يبدأ ب',
+  headerFilterOperatorEndsWith: 'ينتهي ب',
+  headerFilterOperatorIs: 'هو',
+  headerFilterOperatorNot: 'هو ليس',
+  headerFilterOperatorAfter: 'يقع بعد',
+  headerFilterOperatorOnOrAfter: 'هو على او بعد',
+  headerFilterOperatorBefore: 'يقع قبل',
+  headerFilterOperatorOnOrBefore: 'هو على او بعد',
+  headerFilterOperatorIsEmpty: 'هو فارغ',
+  headerFilterOperatorIsNotEmpty: 'هو ليس فارغ',
+  headerFilterOperatorIsAnyOf: 'هو أي من',
+  'headerFilterOperator=': 'يساوي',
+  'headerFilterOperator!=': 'لا يساوي',
+  'headerFilterOperator>': 'أكبر من',
+  'headerFilterOperator>=': 'أكبر من او يساوي',
+  'headerFilterOperator<': 'اصغر من',
+  'headerFilterOperator<=': 'اصغر من او يساوي',
   // Filter values text
   filterValueAny: 'أي',
   filterValueTrue: 'صائب',

package/modern/locales/roRO.js

@@ -74,7 +74,7 @@ const roROGrid = {
   headerFilterOperatorIs: 'Este',
   headerFilterOperatorNot: 'Nu este',
   headerFilterOperatorAfter: 'Este după',
-  headerFilterOperatorOnOrAfter: 'Este la sau „după”',
+  headerFilterOperatorOnOrAfter: 'Este la sau după',
   headerFilterOperatorBefore: 'Este înainte de',
   headerFilterOperatorOnOrBefore: 'este la sau înainte de',
   headerFilterOperatorIsEmpty: 'Este gol',

package/node/DataGrid/DataGrid.js

@@ -35,22 +35,26 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
     }))
   });
 });
-const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+/**
+ * Demos:
+ * - [DataGrid](https://mui.com/x/react-data-grid/demo/)
+ *
+ * API:
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ */
+const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
 
 /**
  * Remove at v7
  * @deprecated
  */
-exports.DataGrid = DataGrid;
-const SUBMIT_FILTER_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
+const SUBMIT_FILTER_STROKE_TIME = exports.SUBMIT_FILTER_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 
 /**
  * Remove at v7
  * @deprecated
  */
-exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
-const SUBMIT_FILTER_DATE_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
-exports.SUBMIT_FILTER_DATE_STROKE_TIME = SUBMIT_FILTER_DATE_STROKE_TIME;
+const SUBMIT_FILTER_DATE_STROKE_TIME = exports.SUBMIT_FILTER_DATE_STROKE_TIME = _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -671,7 +675,7 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-   * @default: false
+   * @default false
    */
   unstable_ignoreValueFormatterDuringExport: _propTypes.default.oneOfType([_propTypes.default.shape({
     clipboardExport: _propTypes.default.bool,

package/node/DataGrid/useDataGridProps.js

@@ -31,7 +31,7 @@ const DATA_GRID_FORCED_PROPS = {
 /**
  * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
  */
-const DATA_GRID_PROPS_DEFAULT_VALUES = {
+const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES = {
   autoHeight: false,
   autoPageSize: false,
   checkboxSelection: false,
@@ -79,7 +79,6 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   unstable_ignoreValueFormatterDuringExport: false,
   clipboardCopyCellDelimiter: '\t'
 };
-exports.DATA_GRID_PROPS_DEFAULT_VALUES = DATA_GRID_PROPS_DEFAULT_VALUES;
 const defaultSlots = (0, _utils.uncapitalizeObjectKeys)(_defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 const useDataGridProps = inProps => {
   const [components, componentsProps, themedProps] = (0, _utils.useProps)((0, _styles.useThemeProps)({

package/node/colDef/gridActionsColDef.js

@@ -8,9 +8,8 @@ exports.GRID_ACTIONS_COL_DEF = exports.GRID_ACTIONS_COLUMN_TYPE = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _gridStringColDef = require("./gridStringColDef");
 var _GridActionsCell = require("../components/cell/GridActionsCell");
-const GRID_ACTIONS_COLUMN_TYPE = 'actions';
-exports.GRID_ACTIONS_COLUMN_TYPE = GRID_ACTIONS_COLUMN_TYPE;
-const GRID_ACTIONS_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
+const GRID_ACTIONS_COLUMN_TYPE = exports.GRID_ACTIONS_COLUMN_TYPE = 'actions';
+const GRID_ACTIONS_COL_DEF = exports.GRID_ACTIONS_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   sortable: false,
   filterable: false,
   // @ts-ignore
@@ -24,5 +23,4 @@ const GRID_ACTIONS_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   renderCell: _GridActionsCell.renderActionsCell,
   getApplyQuickFilterFn: undefined,
   getApplyQuickFilterFnV7: undefined
-});
-exports.GRID_ACTIONS_COL_DEF = GRID_ACTIONS_COL_DEF;
+});

package/node/colDef/gridBooleanColDef.js

@@ -33,7 +33,7 @@ const stringToBoolean = value => {
       return undefined;
   }
 };
-const GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
+const GRID_BOOLEAN_COL_DEF = exports.GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
   headerAlign: 'center',
@@ -48,5 +48,4 @@ const GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   aggregable: false,
   // @ts-ignore
   pastedValueParser: value => stringToBoolean(value)
-});
-exports.GRID_BOOLEAN_COL_DEF = GRID_BOOLEAN_COL_DEF;
+});

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -14,9 +14,8 @@ var _gridBooleanColDef = require("./gridBooleanColDef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
-exports.GRID_CHECKBOX_SELECTION_FIELD = GRID_CHECKBOX_SELECTION_FIELD;
-const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
+const GRID_CHECKBOX_SELECTION_FIELD = exports.GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
   field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
@@ -36,5 +35,4 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanC
   },
   renderHeader: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderCheckbox.GridHeaderCheckbox, (0, _extends2.default)({}, params)),
   renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridCellCheckboxRenderer.GridCellCheckboxRenderer, (0, _extends2.default)({}, params))
-});
-exports.GRID_CHECKBOX_SELECTION_COL_DEF = GRID_CHECKBOX_SELECTION_COL_DEF;
+});

package/node/colDef/gridDateColDef.js

@@ -54,27 +54,21 @@ function gridDateTimeFormatter({
   });
   return value.toLocaleString();
 }
-const GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
+const GRID_DATE_COL_DEF = exports.GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: _gridSortingUtils.gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
 });
-exports.GRID_DATE_COL_DEF = GRID_DATE_COL_DEF;
-const GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
+const GRID_DATETIME_COL_DEF = exports.GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'dateTime',
   sortComparator: _gridSortingUtils.gridDateComparator,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(true),
   renderEditCell: _GridEditDateCell.renderEditDateCell,
-  getApplyQuickFilterFn: undefined,
-  getApplyQuickFilterFnV7: undefined,
   // @ts-ignore
   pastedValueParser: value => new Date(value)
-});
-exports.GRID_DATETIME_COL_DEF = GRID_DATETIME_COL_DEF;
+});