@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-alpha.9

package/models/colDef/gridColDef.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridCellClassNamePropType } from '../gridCellClass';
 import { GridColumnHeaderClassNamePropType } from '../gridColumnHeaderClass';
 import type { GridFilterOperator } from '../gridFilterOperator';
@@ -24,13 +25,13 @@ export type ValueOptions = string | number | {
  * Value that can be used as a key for grouping rows
  */
 export type GridKeyValue = string | number | boolean;
-export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: React.RefObject<GridApiCommunity>) => boolean;
-export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: React.RefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
-export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => V;
-export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => F;
-export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => R;
-export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => V;
-export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => number | undefined;
+export type GridApplyQuickFilter<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: V, row: R, column: GridColDef, apiRef: RefObject<GridApiCommunity>) => boolean;
+export type GetApplyQuickFilterFn<R extends GridValidRowModel = GridValidRowModel, V = any> = (value: any, colDef: GridStateColDef<R, V>, apiRef: RefObject<GridApiCommunity>) => null | GridApplyQuickFilter<R, V>;
+export type GridValueGetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V;
+export type GridValueFormatter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V, TValue = never> = (value: TValue, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => F;
+export type GridValueSetter<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => R;
+export type GridValueParser<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: F | undefined, row: R | undefined, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => V;
+export type GridColSpanFn<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => number | undefined;
 /**
  * Column Definition base interface.
  */
@@ -217,7 +218,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * This function can return `null` to skip filtering for this value and column.
      * @param {any} value The value with which we want to filter the column.
      * @param {GridStateColDef} colDef The column from which we want to filter the rows.
-     * @param {React.RefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
+     * @param {RefObject<GridApiCommunity>} apiRef Deprecated: The API of the grid.
      * @returns {null | GridApplyQuickFilter} The function to call to check if a row pass this filter value or not.
      */
     getApplyQuickFilterFn?: GetApplyQuickFilterFn<R, V>;

package/models/gridExport.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowId } from './gridRows';
 import type { GridApiCommon } from './api';
 import type { GridApiCommunity } from './api/gridApiCommunity';
@@ -49,7 +49,7 @@ export interface GridGetRowsToExportParams<Api extends GridApiCommon = GridApiCo
     /**
      * The API of the grid.
      */
-    apiRef: React.RefObject<Api>;
+    apiRef: RefObject<Api>;
 }
 export interface GridCsvGetRowsToExportParams<Api extends GridApiCommon = GridApiCommunity> extends GridGetRowsToExportParams<Api> {
 }

package/models/gridFilterOperator.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridFilterItem } from './gridFilterItem';
 import type { GridColDef } from './colDef/gridColDef';
 import type { GridValidRowModel } from './gridRows';
 import type { GridApiCommunity } from './api/gridApiCommunity';
-type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: React.RefObject<GridApiCommunity>) => boolean;
+type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => boolean;
 export type GetApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFn<R, V, F>;
 /**
  * Filter operator definition interface.

package/models/props/DataGridProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { CommonProps } from '@mui/material/OverridableComponent';
@@ -369,7 +370,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.RefObject<GridApiCommunity>;
+    apiRef?: RefObject<GridApiCommunity>;
     /**
      * Signal to the underlying logic what version of the public component API
      * of the Data Grid is exposed [[GridSignature]].

package/modern/components/GridApiContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/modern/components/GridConfigurationContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/modern/components/GridRow.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];

package/modern/components/GridScrollArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { useGridSelector } from "../../hooks/index.js";
-import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { gridPreferencePanelSelectorWithLabel, gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -19,6 +19,21 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridColumnHeaderFilterIconButton, _extends({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -31,8 +46,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const labelId = useId();
+  const isOpen = useGridSelector(apiRef, gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = useId();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -53,7 +68,6 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     id: labelId,
     onClick: toggleFilter,
@@ -61,8 +75,8 @@ function GridColumnHeaderFilterIconButton(props) {
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,
@@ -91,4 +105,4 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTyp
   field: PropTypes.string.isRequired,
   onClick: PropTypes.func
 } : void 0;
-export { GridColumnHeaderFilterIconButton };
+export { GridColumnHeaderFilterIconButtonWrapped as GridColumnHeaderFilterIconButton };

package/modern/components/panel/GridPanel.js

@@ -91,7 +91,8 @@ const GridPanel = forwardRef((props, ref) => {
   }, other, {
     ref: ref,
     children: /*#__PURE__*/_jsx(ClickAwayListener, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/_jsx(GridPaperRoot, {
         className: classes.paper,

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -46,7 +46,12 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns
+      onClick: showColumns,
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+      }
     }, rootProps.slotProps?.baseButton, buttonProps, {
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -113,7 +113,12 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
       })),
-      onClick: toggleFilter
+      onClick: toggleFilter,
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+      }
     }, rootProps.slotProps?.baseButton, buttonProps, {
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')

package/modern/context/GridRootPropsContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 const GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -40,7 +40,6 @@ export const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -82,7 +81,6 @@ export const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -15,6 +15,7 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -220,9 +221,6 @@ export function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

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

@@ -19,7 +19,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -133,7 +133,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -181,7 +181,7 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {

package/modern/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -1 +1,8 @@
-export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+export const gridPreferencePanelSelectorWithLabel = createSelector(gridPreferencePanelStateSelector, (panel, labelId) => {
+  if (panel.open && panel.labelId === labelId) {
+    return true;
+  }
+  return false;
+});

package/modern/hooks/features/preferencesPanel/index.js

@@ -1,3 +1,3 @@
-export * from "./gridPreferencePanelSelector.js";
+export { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
 export * from "./gridPreferencePanelState.js";
 export * from "./gridPreferencePanelsValue.js";

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,42 +15,29 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef(undefined);
-  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS
    */
   const hidePreferences = React.useCallback(() => {
-    logger.debug('Hiding Preferences Panel');
-    const preferencePanelState = gridPreferencePanelStateSelector(apiRef.current.state);
-    if (preferencePanelState.openedPanelValue) {
+    apiRef.current.setState(state => {
+      if (!state.preferencePanel.open) {
+        return state;
+      }
+      logger.debug('Hiding Preferences Panel');
+      const preferencePanelState = gridPreferencePanelStateSelector(state);
       apiRef.current.publishEvent('preferencePanelClose', {
         openedPanelValue: preferencePanelState.openedPanelValue
       });
-    }
-    apiRef.current.setState(state => _extends({}, state, {
-      preferencePanel: {
-        open: false
-      }
-    }));
-    apiRef.current.forceUpdate();
+      return _extends({}, state, {
+        preferencePanel: {
+          open: false
+        }
+      });
+    });
   }, [apiRef, logger]);
-
-  // This is to prevent the preferences from closing when you open a select box or another panel,
-  // The issue is in MUI core V4 => Fixed in V5
-  const doNotHidePanel = React.useCallback(() => {
-    immediateTimeout.current = setTimeout(() => clearTimeout(hideTimeout.current), 0);
-  }, []);
-
-  // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
-  // we can cancel the action if the trigger element still need the panel...
-  const hidePreferencesDelayed = React.useCallback(() => {
-    hideTimeout.current = setTimeout(hidePreferences, 100);
-  }, [hidePreferences]);
   const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
-    doNotHidePanel();
     apiRef.current.setState(state => _extends({}, state, {
       preferencePanel: _extends({}, state.preferencePanel, {
         open: true,
@@ -62,11 +49,10 @@ export const useGridPreferencesPanel = (apiRef, props) => {
     apiRef.current.publishEvent('preferencePanelOpen', {
       openedPanelValue: newValue
     });
-    apiRef.current.forceUpdate();
-  }, [logger, doNotHidePanel, apiRef]);
+  }, [logger, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences,
-    hidePreferences: hidePreferencesDelayed
+    hidePreferences
   }, 'public');
 
   /**
@@ -99,14 +85,4 @@ export const useGridPreferencesPanel = (apiRef, props) => {
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(hideTimeout.current);
-      clearTimeout(immediateTimeout.current);
-    };
-  }, []);
 };

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -19,7 +19,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -72,7 +72,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 export const buildAggregatedSortingApplier = (sortModel, apiRef) => {

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

@@ -26,6 +26,7 @@ import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpan
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
 import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -45,14 +46,6 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();

package/modern/hooks/utils/useGridApiRef.js

@@ -2,4 +2,6 @@ import * as React from 'react';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export const useGridApiRef = () => React.useRef({});
+export const useGridApiRef = () =>
+// TODO v8: initialize with null (see https://github.com/mui/mui-x/issues/16135#issuecomment-2589395230 and https://github.com/mui/mui-x/issues/16000#issuecomment-2567820735)
+React.useRef({});

package/modern/index.js

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

package/modern/locales/faIR.js

@@ -45,8 +45,7 @@ const faIRGrid = {
   columnsManagementNoColumns: 'بدون سطر',
   columnsManagementShowHideAllText: 'نمایش/مخفی کردن همه',
   columnsManagementReset: 'بازنشانی',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'پاک کردن',
   // Filter panel text
   filterPanelAddFilter: 'افزودن فیلتر',
   filterPanelRemoveAll: 'حذف همه',
@@ -60,9 +59,9 @@ const faIRGrid = {
   filterPanelInputPlaceholder: 'فیلتر مقدار',
   // Filter operators text
   filterOperatorContains: 'شامل',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'شامل نمیشود',
   filterOperatorEquals: 'مساوی',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'برابر نیست',
   filterOperatorStartsWith: 'شروع با',
   filterOperatorEndsWith: 'پایان با',
   filterOperatorIs: 'هست',
@@ -82,9 +81,9 @@ const faIRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'شامل نمیشود',
   headerFilterOperatorEquals: 'مساوی',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'برابر نیست',
   headerFilterOperatorStartsWith: 'شروع با',
   headerFilterOperatorEndsWith: 'پایان با',
   headerFilterOperatorIs: 'هست',

package/modern/locales/urPK.js

@@ -41,12 +41,11 @@ const urPKGrid = {
   toolbarExportPrint: 'پرنٹ کریں',
   toolbarExportExcel: 'ایکسل کے طور پر ڈاوٴنلوڈ کریں',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'تلاش',
+  columnsManagementNoColumns: 'کوئی کالم نہیں',
+  columnsManagementShowHideAllText: 'تمام دکھائیں/چھپائیں',
+  columnsManagementReset: 'ریسیٹ',
+  columnsManagementDeleteIconLabel: 'کلئیر',
   // Filter panel text
   filterPanelAddFilter: 'نیا فلٹر',
   filterPanelRemoveAll: 'سارے ختم کریں',
@@ -60,9 +59,9 @@ const urPKGrid = {
   filterPanelInputPlaceholder: 'ویلیو کو فلٹر کریں',
   // Filter operators text
   filterOperatorContains: 'شامل ہے',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'موجود نہیں ہے',
   filterOperatorEquals: 'برابر ہے',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'برابر نہیں ہے',
   filterOperatorStartsWith: 'شروع ہوتا ہے',
   filterOperatorEndsWith: 'ختم ہوتا ہے',
   filterOperatorIs: 'ہے',
@@ -82,9 +81,9 @@ const urPKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'شامل ہے',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'موجود نہیں ہے',
   headerFilterOperatorEquals: 'برابر ہے',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'برابر نہیں ہے',
   headerFilterOperatorStartsWith: 'شروع ہوتا ہے',
   headerFilterOperatorEndsWith: 'ختم ہوتا ہے',
   headerFilterOperatorIs: 'ہے',

package/modern/utils/isJSDOM.js

@@ -0,0 +1 @@
+export const isJSDOM = typeof window !== 'undefined' && /jsdom|HappyDOM/.test(window.navigator.userAgent);

package/node/components/GridApiContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/components/GridConfigurationContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/components/GridRow.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/components/GridScrollArea.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapped;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -27,6 +27,21 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderFilterIconButton, (0, _extends2.default)({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -39,8 +54,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const labelId = (0, _utils.unstable_useId)();
+  const isOpen = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = (0, _utils.unstable_useId)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -61,7 +76,6 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
     id: labelId,
     onClick: toggleFilter,
@@ -69,8 +83,8 @@ function GridColumnHeaderFilterIconButton(props) {
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/node/components/panel/GridPanel.js

@@ -99,7 +99,8 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   }, other, {
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
         className: classes.paper,