@mui/x-data-grid 7.15.0 → 7.17.0

package/modern/colDef/gridBooleanColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderBooleanCell } from '../components/cell/GridBooleanCell';
-import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
-import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridBooleanOperators } from './gridBooleanOperators';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderBooleanCell } from "../components/cell/GridBooleanCell.js";
+import { renderEditBooleanCell } from "../components/cell/GridEditBooleanCell.js";
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridBooleanOperators } from "./gridBooleanOperators.js";
 const gridBooleanFormatter = (value, row, column, apiRef) => {
   return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
 };

package/modern/colDef/gridBooleanOperators.js

@@ -1,4 +1,4 @@
-import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
+import { GridFilterInputBoolean } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
 export const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridCellCheckboxRenderer } from '../components/columnSelection/GridCellCheckboxRenderer';
-import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderCheckbox';
-import { selectedIdsLookupSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
-import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCellCheckboxRenderer.js";
+import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
+import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {

package/modern/colDef/gridDateColDef.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridDateComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridDateOperators } from './gridDateOperators';
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderEditDateCell } from '../components/cell/GridEditDateCell';
+import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridDateOperators } from "./gridDateOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
 function throwIfNotDateObject({
   value,
   columnType,

package/modern/colDef/gridDateOperators.js

@@ -1,4 +1,4 @@
-import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
+import { GridFilterInputDate } from "../components/panel/filterPanel/GridFilterInputDate.js";
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (!filterItem.value) {
     return null;

package/modern/colDef/gridDefaultColumnTypes.js

@@ -1,9 +1,9 @@
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { GRID_NUMERIC_COL_DEF } from "./gridNumericColDef.js";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.js";
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.js";
 export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {

package/modern/colDef/gridNumericColDef.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { isNumber } from '../utils/utils';
-import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { isNumber } from "../utils/utils.js";
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from "./gridNumericOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
   align: 'right',

package/modern/colDef/gridNumericOperators.js

@@ -1,5 +1,5 @@
-import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
-import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.js";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.js";
 const parseNumericValue = value => {
   if (value == null) {
     return null;

package/modern/colDef/gridSingleSelectColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
-import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { getValueOptions, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
-import { isObject } from '../utils/utils';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSelectCell.js";
+import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.js";
+import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
+import { isObject } from "../utils/utils.js";
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };

package/modern/colDef/gridSingleSelectOperators.js

@@ -1,6 +1,6 @@
-import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
-import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
-import { isObject } from '../utils/utils';
+import { GridFilterInputSingleSelect } from "../components/panel/filterPanel/GridFilterInputSingleSelect.js";
+import { GridFilterInputMultipleSingleSelect } from "../components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js";
+import { isObject } from "../utils/utils.js";
 const parseObjectValue = value => {
   if (value == null || !isObject(value)) {
     return value;

package/modern/colDef/gridStringColDef.js

@@ -1,6 +1,6 @@
-import { renderEditInputCell } from '../components/cell/GridEditInputCell';
-import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+import { renderEditInputCell } from "../components/cell/GridEditInputCell.js";
+import { gridStringOrNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridStringOperators, getGridStringQuickFilterFn } from "./gridStringOperators.js";
 
 /**
  * TODO: Move pro and premium properties outside of this Community file

package/modern/colDef/gridStringOperators.js

@@ -1,7 +1,7 @@
-import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
-import { escapeRegExp } from '../utils/utils';
-import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
-import { removeDiacritics } from '../hooks/features/filter/gridFilterUtils';
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.js";
+import { escapeRegExp } from "../utils/utils.js";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.js";
+import { removeDiacritics } from "../hooks/features/filter/gridFilterUtils.js";
 export const getGridStringQuickFilterFn = value => {
   if (!value) {
     return null;
@@ -15,34 +15,58 @@ export const getGridStringQuickFilterFn = value => {
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 };
+const createContainsFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const filterRegex = new RegExp(escapeRegExp(trimmedValue), 'i');
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const matches = filterRegex.test(String(value));
+    return negate ? !matches : matches;
+  };
+};
+const createEqualityFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const collator = new Intl.Collator(undefined, {
+    sensitivity: 'base',
+    usage: 'search'
+  });
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const isEqual = collator.compare(trimmedValue, value.toString()) === 0;
+    return negate ? !isEqual : isEqual;
+  };
+};
+const createEmptyFilterFn = negate => () => {
+  return value => {
+    const isEmpty = value === '' || value == null;
+    return negate ? !isEmpty : isEmpty;
+  };
+};
 export const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
-    return value => {
-      return value != null ? filterRegex.test(String(value)) : false;
-    };
-  },
+  getApplyFilterFn: createContainsFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotContain',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, true),
   InputComponent: GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const collator = new Intl.Collator(undefined, {
-      sensitivity: 'base',
-      usage: 'search'
-    });
-    return value => {
-      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
-    };
-  },
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotEqual',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, true),
   InputComponent: GridFilterInputValue
 }, {
   value: 'startsWith',
@@ -72,19 +96,11 @@ export const getGridStringOperators = (disableTrim = false) => [{
   InputComponent: GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value === '' || value == null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(false),
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value !== '' && value != null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(true),
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',

package/modern/colDef/index.js

@@ -1,13 +1,13 @@
-export * from './gridActionsColDef';
-export * from './gridBooleanColDef';
-export * from './gridCheckboxSelectionColDef';
-export * from './gridDateColDef';
-export * from './gridNumericColDef';
-export * from './gridSingleSelectColDef';
-export * from './gridStringColDef';
-export * from './gridBooleanOperators';
-export * from './gridDateOperators';
-export * from './gridNumericOperators';
-export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
-export * from './gridDefaultColumnTypes';
+export * from "./gridActionsColDef.js";
+export * from "./gridBooleanColDef.js";
+export * from "./gridCheckboxSelectionColDef.js";
+export * from "./gridDateColDef.js";
+export * from "./gridNumericColDef.js";
+export * from "./gridSingleSelectColDef.js";
+export * from "./gridStringColDef.js";
+export * from "./gridBooleanOperators.js";
+export * from "./gridDateOperators.js";
+export * from "./gridNumericOperators.js";
+export * from "./gridSingleSelectOperators.js";
+export * from "./gridStringOperators.js";
+export * from "./gridDefaultColumnTypes.js";

package/modern/components/GridColumnHeaders.js

@@ -4,8 +4,8 @@ const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterCol
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {

package/modern/components/GridFooter.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
-import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
-import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridSelectedRowCount } from './GridSelectedRowCount';
-import { GridFooterContainer } from './containers/GridFooterContainer';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { gridFilteredTopLevelRowCountSelector } from "../hooks/features/filter/gridFilterSelector.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
+import { GridFooterContainer } from "./containers/GridFooterContainer.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridHeader.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { GridPreferencesPanel } from "./panel/GridPreferencesPanel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();

package/modern/components/GridHeaders.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { gridFilterActiveItemsLookupSelector } from '../hooks/features/filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from '../hooks/features/focus/gridFocusStateSelector';
-import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { gridFilterActiveItemsLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
+import { gridSortColumnLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from "../hooks/features/focus/gridFocusStateSelector.js";
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from "../hooks/features/columnGrouping/gridColumnGroupsSelector.js";
+import { gridColumnMenuSelector } from "../hooks/features/columnMenu/columnMenuSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridHeaders() {
   const apiRef = useGridPrivateApiContext();

package/modern/components/GridLoadingOverlay.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
-import { GridOverlay } from './containers/GridOverlay';
-import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridRowCountSelector, useGridSelector } from '../hooks';
+import { GridOverlay } from "./containers/GridOverlay.js";
+import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridRowCountSelector, useGridSelector } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LOADING_VARIANTS = {
   'circular-progress': {

package/modern/components/GridNoResultsOverlay.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridOverlay } from './containers/GridOverlay';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridNoRowsOverlay.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridOverlay } from './containers/GridOverlay';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridPagination.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from "../hooks/features/pagination/gridPaginationSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme

package/modern/components/GridRow.js

@@ -6,25 +6,25 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridClasses } from '../constants/gridClasses';
-import { composeGridClasses } from '../utils/composeGridClasses';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
-import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
-import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
-import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
-import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
-import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
-import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
-import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
+import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridClasses } from "../constants/gridClasses.js";
+import { composeGridClasses } from "../utils/composeGridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridColumnPositionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector, objectShallowCompare } from "../hooks/utils/useGridSelector.js";
+import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
+import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
+import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
+import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
+import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.js";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
+import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
+import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width

package/modern/components/GridRowCount.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../constants/gridClasses';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../constants/gridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/GridScrollArea.js

@@ -4,16 +4,16 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass, gridClasses } from '../constants';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { gridDimensionsSelector } from '../hooks/features/dimensions/gridDimensionsSelectors';
-import { gridDensityFactorSelector } from '../hooks/features/density/densitySelector';
-import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useTimeout } from '../hooks/utils/useTimeout';
-import { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridDimensionsSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { useTimeout } from "../hooks/utils/useTimeout.js";
+import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;

package/modern/components/GridScrollbarFillerCell.js

@@ -1,21 +1,23 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { gridClasses } from '../constants';
+import { gridClasses } from "../constants/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
   root: gridClasses.scrollbarFiller,
   header: gridClasses['scrollbarFiller--header'],
   borderTop: gridClasses['scrollbarFiller--borderTop'],
+  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
   pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
+  borderBottom,
   pinnedRight
 }) {
   return /*#__PURE__*/_jsx("div", {
     role: "presentation",
-    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, borderBottom && classes.borderBottom, pinnedRight && classes.pinnedRight)
   });
 }
 export { GridScrollbarFillerCell };

package/modern/components/GridSelectedRowCount.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../constants/gridClasses';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../constants/gridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -4,14 +4,14 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from '../hooks';
-import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
-import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../utils/cellBorderUtils';
-import { escapeOperandAttributeSelector } from '../utils/domUtils';
-import { GridScrollbarFillerCell } from './GridScrollbarFillerCell';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
+import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
+import { escapeOperandAttributeSelector } from "../utils/domUtils.js";
+import { GridScrollbarFillerCell } from "./GridScrollbarFillerCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
@@ -101,7 +101,7 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
         }
-        rowCells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
+        rowCells.push(/*#__PURE__*/_jsx(slots.skeletonCell, {
           field: column.field,
           type: column.type,
           align: column.align,
@@ -117,12 +117,12 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
           rowCells.push(emptyCell);
         }
         if (hasScrollbarFiller) {
-          rowCells.push( /*#__PURE__*/_jsx(GridScrollbarFillerCell, {
+          rowCells.push(/*#__PURE__*/_jsx(GridScrollbarFillerCell, {
             pinnedRight: pinnedColumns.right.length > 0
           }, `skeleton-scrollbar-filler-${i}`));
         }
       }
-      array.push( /*#__PURE__*/_jsx("div", {
+      array.push(/*#__PURE__*/_jsx("div", {
         className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && gridClasses['row--firstVisible']),
         children: rowCells
       }, `skeleton-row-${i}`));

package/modern/components/base/GridBody.js

@@ -1,2 +1,2 @@
-import { GridVirtualScroller } from '../virtualization/GridVirtualScroller';
+import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.js";
 export { GridVirtualScroller as GridBody };