@mui/x-data-grid 6.0.3 → 6.1.0

package/components/panel/GridColumnsPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -72,7 +72,8 @@ function GridColumnsPanel(props) {
       searchPredicate = defaultSearchPredicate,
       autoFocusSearchField = true,
       disableHideAllButton = false,
-      disableShowAllButton = false
+      disableShowAllButton = false,
+      getTogglableColumns
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const sortedColumns = React.useMemo(() => {
@@ -110,12 +111,15 @@ function GridColumnsPanel(props) {
     setSearchValue(event.target.value);
   }, []);
   const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
     if (!searchValue) {
-      return sortedColumns;
+      return togglableSortedColumns;
     }
-    const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
-  }, [sortedColumns, searchValue, searchPredicate]);
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
   const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
     if (autoFocusSearchField) {
@@ -196,6 +200,14 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   autoFocusSearchField: PropTypes.bool,
   disableHideAllButton: PropTypes.bool,
   disableShowAllButton: PropTypes.bool,
+  /**
+   * Returns the list of togglable columns.
+   * If used, only those columns will be displayed in the panel
+   * which are passed as the return value of the function.
+   * @param {GridColDef[]} columns The `ColDef` list of all columns.
+   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+   */
+  getTogglableColumns: PropTypes.func,
   searchPredicate: PropTypes.func,
   slotProps: PropTypes.object,
   sort: PropTypes.oneOf(['asc', 'desc'])

package/components/panel/GridPanel.d.ts

@@ -24,7 +24,7 @@ declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit
         root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnerState> | undefined;
     } | undefined;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "ownerState" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+} & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "ownerState" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/filterPanel/GridFilterPanel.js

@@ -147,7 +147,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         logicOperators: logicOperators,
         columnsSort: columnsSort
       }, filterFormProps), item.id == null ? index : item.id))
-    }), !rootProps.disableMultipleColumnsFiltering && !disableAddFilterButton && !disableRemoveAllButton ? /*#__PURE__*/_jsxs(GridPanelFooter, {
+    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})

package/components/reexportable.d.ts

@@ -1 +1 @@
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS, } from './menu/columnMenu/GridColumnMenu';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, } from './menu/columnMenu/GridColumnMenu';

package/components/reexportable.js

@@ -1 +1 @@
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './menu/columnMenu/GridColumnMenu';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './menu/columnMenu/GridColumnMenu';

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/hooks/core/useGridApiInitialization.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
-import { unstable_resetCreateSelectorCache } from '../../utils/createSelector';
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };
@@ -38,7 +37,9 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!publicApiRef.current) {
     publicApiRef.current = {
       state: {},
-      instanceId: globalId
+      instanceId: {
+        id: globalId
+      }
     };
     globalId += 1;
   }
@@ -76,7 +77,6 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = privateApiRef.current;
     return () => {
-      unstable_resetCreateSelectorCache(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [privateApiRef]);

package/hooks/features/columnMenu/columnMenuInterfaces.d.ts

@@ -3,7 +3,7 @@ export interface GridColumnMenuState {
     open: boolean;
     field?: string;
 }
-export interface GridColumnMenuComponentProps {
+export interface GridColumnMenuSlotProps {
     /**
      * Every item has a `displayOrder` based which it will be placed before or after other
      * items in the column menu, `array.prototype.sort` is applied to sort the items.
@@ -16,32 +16,32 @@ export interface GridColumnMenuComponentProps {
 }
 export interface GridColumnMenuRootProps {
     /**
-     * Initial `components` - it is internal, to be overridden by Pro or Premium packages
+     * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
      * @ignore - do not document.
      */
-    defaultComponents: {
+    defaultSlots: {
         [key: string]: React.JSXElementConstructor<any>;
     };
     /**
-     * Initial `componentsProps` - it is internal, to be overridden by Pro or Premium packages
+     * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
      * @ignore - do not document.
      */
-    defaultComponentsProps: {
-        [key: string]: GridColumnMenuComponentProps;
+    defaultSlotProps: {
+        [key: string]: GridColumnMenuSlotProps;
     };
     /**
-     * `components` could be used to add new and (or) override default column menu items
-     * If you register a nee component you must pass it's `displayOrder` in `componentsProps`
+     * `slots` could be used to add new and (or) override default column menu items
+     * If you register a nee component you must pass it's `displayOrder` in `slotProps`
      * or it will be placed in the end of the list
      */
-    components?: {
+    slots?: {
         [key: string]: React.JSXElementConstructor<any> | null;
     };
     /**
      * Could be used to pass new props or override props specific to a column menu component
      * e.g. `displayOrder`
      */
-    componentsProps?: {
-        [key: string]: GridColumnMenuComponentProps;
+    slotProps?: {
+        [key: string]: GridColumnMenuSlotProps;
     };
 }

package/hooks/features/columnMenu/{useGridColumnMenuComponents.d.ts → useGridColumnMenuSlots.d.ts}

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { GridColumnMenuRootProps } from './columnMenuInterfaces';
 import { GridColDef } from '../../../models/colDef/gridColDef';
-interface UseGridColumnMenuComponentsProps extends GridColumnMenuRootProps {
+interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps {
     colDef: GridColDef;
     hideMenu: (event: React.SyntheticEvent) => void;
     addDividers?: boolean;
 }
-type UseGridColumnMenuComponentsResponse = Array<[
+type UseGridColumnMenuSlotsResponse = Array<[
     React.JSXElementConstructor<any>,
     {
         [key: string]: any;
     }
 ]>;
-declare const useGridColumnMenuComponents: (props: UseGridColumnMenuComponentsProps) => UseGridColumnMenuComponentsResponse;
-export { useGridColumnMenuComponents };
+declare const useGridColumnMenuSlots: (props: UseGridColumnMenuSlotsProps) => UseGridColumnMenuSlotsResponse;
+export { useGridColumnMenuSlots };

package/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js}

@@ -4,44 +4,39 @@ const _excluded = ["displayOrder"];
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-const camelize = pascalCase => {
-  const camelCase = pascalCase.split('');
-  camelCase[0] = camelCase[0].toLowerCase();
-  return camelCase.join('');
-};
-const useGridColumnMenuComponents = props => {
+const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
   const {
-    defaultComponents,
-    defaultComponentsProps,
-    components = {},
-    componentsProps = {},
+    defaultSlots,
+    defaultSlotProps,
+    slots = {},
+    slotProps = {},
     hideMenu,
     colDef,
     addDividers = true
   } = props;
-  const processedComponents = React.useMemo(() => _extends({}, defaultComponents, components), [defaultComponents, components]);
-  const processedComponentsProps = React.useMemo(() => {
-    if (!componentsProps || Object.keys(componentsProps).length === 0) {
-      return defaultComponentsProps;
+  const processedComponents = React.useMemo(() => _extends({}, defaultSlots, slots), [defaultSlots, slots]);
+  const processedSlotProps = React.useMemo(() => {
+    if (!slotProps || Object.keys(slotProps).length === 0) {
+      return defaultSlotProps;
     }
-    const mergedProps = _extends({}, componentsProps);
-    Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => {
-      mergedProps[key] = _extends({}, currentComponentProps, componentsProps[key] || {});
+    const mergedProps = _extends({}, slotProps);
+    Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
+      mergedProps[key] = _extends({}, currentSlotProps, slotProps[key] || {});
     });
     return mergedProps;
-  }, [defaultComponentsProps, componentsProps]);
+  }, [defaultSlotProps, slotProps]);
   const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], props.colDef);
   const userItems = React.useMemo(() => {
-    const defaultComponentKeys = Object.keys(defaultComponents);
-    return Object.keys(components).filter(key => !defaultComponentKeys.includes(key));
-  }, [components, defaultComponents]);
+    const defaultComponentKeys = Object.keys(defaultSlots);
+    return Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
+  }, [slots, defaultSlots]);
   return React.useMemo(() => {
     const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
     const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
     const sorted = cleansedItems.sort((a, b) => {
-      const leftItemProps = processedComponentsProps[camelize(a)];
-      const rightItemProps = processedComponentsProps[camelize(b)];
+      const leftItemProps = processedSlotProps[a];
+      const rightItemProps = processedSlotProps[b];
       const leftDisplayOrder = Number.isFinite(leftItemProps == null ? void 0 : leftItemProps.displayOrder) ? leftItemProps.displayOrder : 100;
       const rightDisplayOrder = Number.isFinite(rightItemProps == null ? void 0 : rightItemProps.displayOrder) ? rightItemProps.displayOrder : 100;
       return leftDisplayOrder - rightDisplayOrder;
@@ -51,13 +46,13 @@ const useGridColumnMenuComponents = props => {
         colDef,
         onClick: hideMenu
       };
-      const processedComponentProps = processedComponentsProps[camelize(key)];
+      const processedComponentProps = processedSlotProps[key];
       if (processedComponentProps) {
         const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
         itemProps = _extends({}, itemProps, customProps);
       }
       return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [Divider, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedComponentsProps, userItems]);
+  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
 };
-export { useGridColumnMenuComponents };
+export { useGridColumnMenuSlots };

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -19,7 +19,7 @@ export declare const gridColumnLookupSelector: import("../../../utils/createSele
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef<any, any, any>[]>;
+export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
@@ -30,7 +30,7 @@ export declare const gridColumnVisibilityModelSelector: import("../../../utils/c
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef<any, any, any>[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
@@ -50,7 +50,7 @@ export declare const gridColumnsTotalWidthSelector: import("../../../utils/creat
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef<any, any, any>[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns

package/hooks/features/columns/useGridColumns.js

@@ -232,7 +232,7 @@ export function useGridColumns(apiRef, props) {
     if (props.disableColumnSelector) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuColumnsItem'];
+    return [...columnMenuItems, 'columnMenuColumnsItem'];
   }, [props.disableColumnSelector]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);

package/hooks/features/editing/useGridCellEditing.js

@@ -242,13 +242,17 @@ export const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    let unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
+      unstable_updateValueOnRender = true;
     }
     const newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false
+      isProcessingProps: false,
+      unstable_updateValueOnRender
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);

package/hooks/features/editing/useGridEditing.js

@@ -110,9 +110,7 @@ export const useGridEditing = (apiRef, props) => {
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return {
-      changeReason: editingState[id][field].changeReason
-    };
+    return editingState[id][field];
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/editing/useGridRowEditing.js

@@ -311,13 +311,17 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
       let newValue = apiRef.current.getCellValue(id, field);
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      let unstable_updateValueOnRender = false;
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         newValue = deleteValue ? '' : initialValue;
+        unstable_updateValueOnRender = true;
       }
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: false,
+        unstable_updateValueOnRender
       };
       return acc;
     }, {});

package/hooks/features/filter/gridFilterState.js

@@ -4,4 +4,9 @@ export const getDefaultGridFilterModel = () => ({
   logicOperator: GridLogicOperator.And,
   quickFilterValues: [],
   quickFilterLogicOperator: GridLogicOperator.And
-});
+});
+
+/**
+ * @param {GridRowId} rowId The id of the row we want to filter.
+ * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */

package/hooks/features/filter/useGridFilter.js

@@ -59,7 +59,7 @@ export const useGridFilter = (apiRef, props) => {
     if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
       return columnMenuItems;
     }
-    return [...columnMenuItems, 'ColumnMenuFilterItem'];
+    return [...columnMenuItems, 'columnMenuFilterItem'];
   }, [props.disableColumnFilter]);
 
   /**
@@ -114,6 +114,11 @@ export const useGridFilter = (apiRef, props) => {
       const filterItemsWithValue = filterModel.items.filter(item => {
         var _column$filterOperato;
         if (item.value !== undefined) {
+          // Some filters like `isAnyOf` support array as `item.value`.
+          // If array is empty, we want to remove it from the filter model.
+          if (Array.isArray(item.value) && item.value.length === 0) {
+            return false;
+          }
           return true;
         }
         const column = apiRef.current.getColumn(item.field);

package/hooks/features/sorting/useGridSorting.js

@@ -74,7 +74,7 @@ export const useGridSorting = (apiRef, props) => {
     }
     const sortingOrder = colDef.sortingOrder || props.sortingOrder;
     if (sortingOrder.some(item => !!item)) {
-      return [...columnMenuItems, 'ColumnMenuSortItem'];
+      return [...columnMenuItems, 'columnMenuSortItem'];
     }
     return columnMenuItems;
   }, [props.sortingOrder]);

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -429,7 +429,7 @@ export const useGridVirtualScroller = props => {
     prevRootRowStyle.current = rootRowStyle;
     return rows;
   };
-  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
+  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth >= containerDimensions.width;
   const contentSize = React.useMemo(() => {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.

package/index.d.ts

@@ -19,7 +19,7 @@ export { GridColumnHeaders } from './components/GridColumnHeaders';
 /**
  * Reexportable components.
  */
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS, } from './components/reexportable';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, } from './components/reexportable';
 /**
  * The full grid API.
  * @demos

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.3
+ * @mui/x-data-grid v6.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,10 +22,18 @@ export { GridColumnHeaders } from './components/GridColumnHeaders';
 /**
  * Reexportable components.
  */
-export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexportable';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './components/reexportable';
 
 /**
  * The full grid API.
  * @demos
  *   - [API object](/x/react-data-grid/api-object/)
+ */
+
+/**
+ * The state of `DataGrid`.
+ */
+
+/**
+ * The initial state of `DataGrid`.
  */

package/legacy/components/GridAutoSizer.js

@@ -7,6 +7,9 @@ import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import createDetectElementResize from '../lib/createDetectElementResize';
 // TODO replace with https://caniuse.com/resizeobserver.
+
+// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
+// for the sources.
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
   var children = props.children,

package/legacy/components/GridRow.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason"];
+  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -47,7 +47,7 @@ function EmptyCell(_ref) {
     width: width
   };
   return /*#__PURE__*/_jsx("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: "".concat(gridClasses.cell, " ").concat(gridClasses.withBorderColor),
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
@@ -213,7 +213,10 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     if (editCellState != null && column.renderEditCell) {
       var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       var changeReason = editCellState.changeReason,
+        unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
         editCellStateRest = _objectWithoutProperties(editCellState, _excluded2);
       var params = _extends({}, cellParams, {
         row: updatedRow

package/legacy/components/cell/GridEditBooleanCell.js

@@ -55,28 +55,26 @@ function GridEditBooleanCell(props) {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var newValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              newValue = event.target.checked;
-              if (!onValueChange) {
-                _context.next = 4;
-                break;
-              }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            newValue = event.target.checked;
+            if (!onValueChange) {
               _context.next = 4;
-              return onValueChange(event, newValue);
-            case 4:
-              setValueState(newValue);
-              _context.next = 7;
-              return apiRef.current.setEditCellValue({
-                id: idProp,
-                field: field,
-                value: newValue
-              }, event);
-            case 7:
-            case "end":
-              return _context.stop();
-          }
+              break;
+            }
+            _context.next = 4;
+            return onValueChange(event, newValue);
+          case 4:
+            setValueState(newValue);
+            _context.next = 7;
+            return apiRef.current.setEditCellValue({
+              id: idProp,
+              field: field,
+              value: newValue
+            }, event);
+          case 7:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));