@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.3

package/modern/models/gridBaseSlots.d.ts

@@ -1,4 +1,10 @@
 type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+type CommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+};
 export interface AutocompleteFilterOptionsState<Value> {
   inputValue: string;
   getOptionLabel: (option: Value) => string;
@@ -54,7 +60,7 @@ export type AutocompleteProps<Value = string, Multiple extends boolean = false,
     textField: TextFieldProps;
   };
 };
-export type BadgeProps = {
+export type BadgeProps = CommonProps & {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
   color?: 'primary' | 'default' | 'error';
@@ -63,23 +69,19 @@ export type BadgeProps = {
   variant?: 'dot';
   style?: React.CSSProperties;
 };
-export type ButtonProps = {
-  ref?: Ref;
+export type ButtonProps = CommonProps & {
+  ref?: Ref<HTMLButtonElement>;
   children?: React.ReactNode;
-  className?: string;
   disabled?: boolean;
   id?: string;
-  onClick?: React.MouseEventHandler<HTMLElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
   role?: string;
   size?: 'small' | 'medium' | 'large';
   startIcon?: React.ReactNode;
-  style?: React.CSSProperties;
   tabIndex?: number;
   title?: string;
   touchRippleRef?: any;
 };
-export type CheckboxProps = {
+export type CheckboxProps = CommonProps & {
   ref?: Ref<HTMLButtonElement>;
   id?: string;
   autoFocus?: boolean;
@@ -91,9 +93,7 @@ export type CheckboxProps = {
   inputRef?: React.Ref<HTMLInputElement>;
   name?: string;
   label?: React.ReactNode;
-  onClick?: React.MouseEventHandler;
   onChange?: React.ChangeEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   size?: 'small' | 'medium';
   density?: 'standard' | 'compact';
   slotProps?: {
@@ -109,24 +109,22 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   edge?: 'start' | 'end' | false;
 };
 export type DividerProps = {
+  className?: string;
   orientation?: 'horizontal' | 'vertical';
 };
-export type MenuListProps = {
+export type MenuListProps = CommonProps & {
   ref?: Ref<HTMLUListElement>;
   id?: string;
-  className?: string;
   children?: React.ReactNode;
   autoFocus?: boolean;
   autoFocusItem?: boolean;
-  onKeyDown?: React.KeyboardEventHandler;
 };
-export type MenuItemProps = {
+export type MenuItemProps = CommonProps & {
   autoFocus?: boolean;
   children?: React.ReactNode;
   /** For items that aren't interactive themselves (but may contain an interactive widget) */
   inert?: boolean;
   disabled?: boolean;
-  onClick?: React.MouseEventHandler<HTMLElement>;
   iconStart?: React.ReactNode;
   iconEnd?: React.ReactNode;
   selected?: boolean;
@@ -139,7 +137,7 @@ type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
 type Placement = AutoPlacement | BasePlacement | VariationPlacement;
 type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
 type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
-export type PaginationProps = {
+export type PaginationProps = CommonProps & {
   count: number;
   page: number;
   rowsPerPage: number;
@@ -151,10 +149,10 @@ export type PaginationProps = {
   onRowsPerPageChange?: (rowsPerPage: number) => void;
   disabled?: boolean;
 };
-export type PopperProps = {
+export type PopperProps = CommonProps & {
+  ref?: Ref<HTMLDivElement>;
   open: boolean;
   children?: React.ReactNode;
-  className?: string;
   clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
   clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
   flip?: boolean;
@@ -164,13 +162,12 @@ export type PopperProps = {
   onDidShow?: () => void;
   onDidHide?: () => void;
   id?: string;
-  ref?: Ref;
   target?: Element | null;
   transition?: boolean;
   /** @default 'bottom' */
   placement?: Placement;
 };
-export type CircularProgressProps = {
+export type CircularProgressProps = CommonProps & {
   /**
    * Pixels or CSS value.
    * @default 40
@@ -179,11 +176,10 @@ export type CircularProgressProps = {
   /** @default 'primary' */
   color?: 'inherit' | 'primary';
 };
-export type LinearProgressProps = {};
-export type InputProps = {
+export type LinearProgressProps = CommonProps & {};
+export type InputProps = CommonProps & {
   ref?: React.Ref<HTMLElement>;
   inputRef?: React.Ref<HTMLInputElement>;
-  className?: string;
   fullWidth?: boolean;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
@@ -195,7 +191,7 @@ export type InputProps = {
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
 };
-export type SelectProps = {
+export type SelectProps = CommonProps & {
   ref?: Ref;
   id?: string;
   value?: any;
@@ -203,9 +199,6 @@ export type SelectProps = {
   error?: boolean;
   disabled?: boolean;
   onChange?: React.ChangeEventHandler;
-  onFocus?: React.FocusEventHandler;
-  onBlur?: React.FocusEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   onOpen?: (event: React.SyntheticEvent) => void;
   onClose?: (event: React.KeyboardEvent, reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
   label?: React.ReactNode;
@@ -218,28 +211,26 @@ export type SelectProps = {
       ref?: Ref;
     } & React.InputHTMLAttributes<HTMLInputElement>;
   };
-  style?: React.CSSProperties;
   children?: React.ReactNode;
 };
-export type SelectOptionProps = {
+export type SelectOptionProps = CommonProps & {
   native: boolean;
   value: any;
   children?: React.ReactNode;
 };
-export type SkeletonProps = {
+export type SkeletonProps = CommonProps & {
   variant?: 'circular' | 'text';
   width?: number | string;
   height?: number | string;
 };
-export type SwitchProps = {
+export type SwitchProps = CommonProps & {
   checked?: boolean;
   onChange?: React.ChangeEventHandler;
   size?: 'small' | 'medium';
 };
-export type TextFieldProps = {
+export type TextFieldProps = CommonProps & {
   role?: string;
   autoComplete?: string;
-  className?: string;
   color?: 'primary' | 'error';
   disabled?: boolean;
   error?: boolean;
@@ -249,7 +240,6 @@ export type TextFieldProps = {
   inputRef?: React.Ref<HTMLInputElement>;
   label?: React.ReactNode;
   onChange?: React.ChangeEventHandler;
-  onKeyDown?: React.KeyboardEventHandler;
   placeholder?: string;
   size?: 'small' | 'medium';
   slotProps?: {
@@ -257,13 +247,12 @@ export type TextFieldProps = {
     inputLabel?: {};
     htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
   };
-  style?: React.CSSProperties;
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
   ref?: Ref<HTMLInputElement>;
 };
-export type TooltipProps = {
+export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;

package/modern/models/gridSlotsComponentsProps.d.ts

@@ -1,11 +1,4 @@
 import * as React from 'react';
-import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
-import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
-import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
-import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
-import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
-import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
-import type { TooltipProps as MUITooltipProps } from '@mui/material/Tooltip';
 import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -91,15 +84,6 @@ interface BaseSlotProps {
   baseSelectOption: SelectOptionProps & BaseSelectOptionPropsOverrides;
   baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
 }
-interface MaterialSlotProps {
-  baseBadge: MUIBadgeProps;
-  baseButton: MUIButtonProps;
-  baseIconButton: MUIIconButtonProps;
-  baseLinearProgress: MUILinearProgressProps;
-  baseCircularProgress: MUICircularProgressProps;
-  baseMenuItem: MUIMenuItemProps;
-  baseTooltip: MUITooltipProps;
-}
 interface ElementSlotProps {
   bottomContainer: GridBottomContainerProps & BottomContainerPropsOverrides;
   cell: GridCellProps & CellPropsOverrides;
@@ -132,9 +116,7 @@ interface ElementSlotProps {
    */
   root: RootProps;
 }
-type Select<A, B, K> = K extends keyof A ? A[K] : K extends keyof B ? B[K] : never;
-type Merge<A, B> = { [K in keyof A | keyof B]: K extends 'ref' ? Select<A, B, 'ref'> : K extends keyof A & keyof B ? A[K] & B[K] : K extends keyof B ? B[K] : K extends keyof A ? A[K] : never };
-export type GridSlotProps = Merge<BaseSlotProps, MaterialSlotProps> & ElementSlotProps;
+export type GridSlotProps = BaseSlotProps & ElementSlotProps;
 /**
  * Overridable components props dynamically passed to the component at rendering.
  */

package/modern/models/props/DataGridProps.d.ts

@@ -2,7 +2,6 @@ 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';
 import { GridDensity } from "../gridDensity.js";
 import { GridEditMode } from "../gridEditRowModel.js";
 import { GridFeatureMode } from "../gridFeatureMode.js";
@@ -13,7 +12,7 @@ import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from "../
 import { GridEventListener } from "../events/index.js";
 import { GridCallbackDetails, GridLocaleText } from "../api/index.js";
 import { GridApiCommunity } from "../api/gridApiCommunity.js";
-import type { GridColDef, GridListColDef } from '../colDef/gridColDef';
+import type { GridColDef, GridListViewColDef } from '../colDef/gridColDef';
 import { GridClasses } from "../../constants/gridClasses.js";
 import { GridRowHeightParams, GridRowHeightReturnValue, GridRowParams, GridRowSpacing, GridRowSpacingParams, GridRowClassNameParams } from "../params/index.js";
 import { GridCellParams } from "../params/gridCellParams.js";
@@ -29,6 +28,10 @@ import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 import type { GridDataSource, GridDataSourceCache } from '../gridDataSource';
 import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
 import type { GridGetRowsError, GridUpdateRowError } from '../../hooks/features/dataSource/gridDataSourceError';
+type CommonProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
 export interface GridExperimentalFeatures {
   /**
    * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -46,7 +49,7 @@ export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<Data
  * The props of the Data Grid component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
  */
-export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature' | 'unstable_listView';
+export type DataGridForcedPropsKey = 'checkboxSelectionVisibleOnly' | 'disableMultipleColumnsFiltering' | 'disableMultipleColumnsSorting' | 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'throttleRowsMs' | 'hideFooterRowCount' | 'pagination' | 'signature' | 'listView';
 /**
  * The Data Grid options with a default value that must be merged with the value given through props.
  */
@@ -721,13 +724,19 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    */
   onSortModelChange?: (model: GridSortModel, details: GridCallbackDetails) => void;
   /**
-   * The label of the Data Grid.
+   * The `aria-label` of the Data Grid.
    */
   'aria-label'?: string;
   /**
-   * The id of the element containing a label for the Data Grid.
+   * The `id` of the element containing a label for the Data Grid.
    */
   'aria-labelledby'?: string;
+  /**
+   * The label of the Data Grid.
+   * If the `showToolbar` prop is `true`, the label will be displayed in the toolbar and applied to the `aria-label` attribute of the grid.
+   * If the `showToolbar` prop is `false`, the label will not be visible but will be applied to the `aria-label` attribute of the grid.
+   */
+  label?: string;
   /**
    * Set of columns of type [[GridColDef]][].
    */
@@ -828,10 +837,10 @@ export interface DataGridProSharedPropsWithDefaultValue {
   rowSelectionPropagation: GridRowSelectionPropagation;
   /**
    * If `true`, displays the data in a list view.
-   * Use in combination with `unstable_listColumn`.
+   * Use in combination with `listViewColumn`.
    * @default false
    */
-  unstable_listView: boolean;
+  listView: boolean;
 }
 export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
   /**
@@ -839,9 +848,9 @@ export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRo
    */
   headerFilterHeight?: number;
   /**
-   * Definition of the column rendered when the `unstable_listView` prop is enabled.
+   * Definition of the column rendered when the `listView` prop is enabled.
    */
-  unstable_listColumn?: GridListColDef<R>;
+  listViewColumn?: GridListViewColDef<R>;
 }
 export interface DataGridPremiumSharedPropsWithDefaultValue {
   /**
@@ -853,4 +862,5 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
 /**
  * The props of the Data Grid component after the pre-processing phase.
  */
-export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {}
+export {};

package/modern/utils/utils.d.ts

@@ -12,33 +12,6 @@ export declare const clamp: (value: number, min: number, max: number) => number;
  * Create an array containing the range [from, to[
  */
 export declare function range(from: number, to: number): number[];
-/**
- * Based on `fast-deep-equal`
- *
- * MIT License
- *
- * Copyright (c) 2017 Evgeny Poberezkin
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * We only type the public interface to avoid dozens of `as` in the function.
- */
-export declare function isDeepEqual<T>(actual: any, expected: T): actual is T;
 /**
  * Create a random number generator from a seed. The seed
  * ensures that the random number generator produces the

package/modern/utils/utils.js

@@ -39,128 +39,6 @@ export function range(from, to) {
   }).map((_, i) => from + i);
 }
 
-/**
- * Based on `fast-deep-equal`
- *
- * MIT License
- *
- * Copyright (c) 2017 Evgeny Poberezkin
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * We only type the public interface to avoid dozens of `as` in the function.
- */
-
-export function isDeepEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a && b && typeof a === 'object' && typeof b === 'object') {
-    if (a.constructor !== b.constructor) {
-      return false;
-    }
-    if (Array.isArray(a)) {
-      const length = a.length;
-      if (length !== b.length) {
-        return false;
-      }
-      for (let i = 0; i < length; i += 1) {
-        if (!isDeepEqual(a[i], b[i])) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a instanceof Map && b instanceof Map) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      const entriesA = Array.from(a.entries());
-      for (let i = 0; i < entriesA.length; i += 1) {
-        if (!b.has(entriesA[i][0])) {
-          return false;
-        }
-      }
-      for (let i = 0; i < entriesA.length; i += 1) {
-        const entryA = entriesA[i];
-        if (!isDeepEqual(entryA[1], b.get(entryA[0]))) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a instanceof Set && b instanceof Set) {
-      if (a.size !== b.size) {
-        return false;
-      }
-      const entries = Array.from(a.entries());
-      for (let i = 0; i < entries.length; i += 1) {
-        if (!b.has(entries[i][0])) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      const length = a.length;
-      if (length !== b.length) {
-        return false;
-      }
-      for (let i = 0; i < length; i += 1) {
-        if (a[i] !== b[i]) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (a.constructor === RegExp) {
-      return a.source === b.source && a.flags === b.flags;
-    }
-    if (a.valueOf !== Object.prototype.valueOf) {
-      return a.valueOf() === b.valueOf();
-    }
-    if (a.toString !== Object.prototype.toString) {
-      return a.toString() === b.toString();
-    }
-    const keys = Object.keys(a);
-    const length = keys.length;
-    if (length !== Object.keys(b).length) {
-      return false;
-    }
-    for (let i = 0; i < length; i += 1) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
-        return false;
-      }
-    }
-    for (let i = 0; i < length; i += 1) {
-      const key = keys[i];
-      if (!isDeepEqual(a[key], b[key])) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  // true if both NaN, false otherwise
-  // eslint-disable-next-line no-self-compare
-  return a !== a && b !== b;
-}
-
 // Pseudo random number. See https://stackoverflow.com/a/47593316
 function mulberry32(a) {
   return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.3",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -37,19 +37,19 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.10",
-    "@mui/utils": "^7.0.0 || ^7.0.0-beta",
+    "@babel/runtime": "^7.27.0",
+    "@mui/utils": "^7.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-beta.0"
+    "@mui/x-internals": "8.0.0-beta.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },