@mui/x-data-grid 6.0.3 → 6.1.0

package/locales/nbNO.js

@@ -37,7 +37,7 @@ const nbNOGrid = {
   columnsPanelHideAllButton: 'Skjul alle',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Fjern alle',
   filterPanelDeleteIconLabel: 'Slett',
   filterPanelLogicOperator: 'Logisk operator',
   filterPanelOperator: 'Operatører',
@@ -67,7 +67,7 @@ const nbNOGrid = {
   // Column menu text
   columnMenuLabel: 'Meny',
   columnMenuShowColumns: 'Vis kolonner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Skjul',
   columnMenuUnsort: 'Usorter',
@@ -107,19 +107,17 @@ const nbNOGrid = {
   groupColumn: name => `Grupper på ${name}`,
   unGroupColumn: name => `Stopp å grupper på ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Utvid/kollaps detalj panel',
   expandDetailPanel: 'Utvid',
   collapseDetailPanel: 'Kollaps',
   // Row reordering text
-  rowReorderingHeaderName: 'Rad reorganisering'
-
+  rowReorderingHeaderName: 'Rad reorganisering',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Aggregering',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'snitt',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'maks',
+  aggregationFunctionLabelSize: 'størrelse'
 };
-
 export const nbNO = getGridLocalization(nbNOGrid, nbNOCore);

package/locales/nlNL.js

@@ -37,7 +37,7 @@ const nlNLGrid = {
   columnsPanelHideAllButton: 'Alles verbergen',
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Alles verwijderen',
   filterPanelDeleteIconLabel: 'Verwijderen',
   filterPanelLogicOperator: 'Logische operator',
   filterPanelOperator: 'Operatoren',
@@ -67,7 +67,7 @@ const nlNLGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Toon kolommen',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Kolommen beheren',
   columnMenuFilter: 'Filteren',
   columnMenuHideColumn: 'Verbergen',
   columnMenuUnsort: 'Annuleer sortering',
@@ -107,7 +107,7 @@ const nlNLGrid = {
   groupColumn: name => `Groepeer op ${name}`,
   unGroupColumn: name => `Stop groeperen op ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Detailmenu in- of uitklappen',
   expandDetailPanel: 'Uitklappen',
   collapseDetailPanel: 'Inklappen',
   // Row reordering text

package/locales/ptBR.js

@@ -111,15 +111,13 @@ const ptBRGrid = {
   expandDetailPanel: 'Expandir',
   collapseDetailPanel: 'Esconder',
   // Row reordering text
-  rowReorderingHeaderName: 'Reorganizar linhas'
-
+  rowReorderingHeaderName: 'Reorganizar linhas',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Agrupar',
+  aggregationFunctionLabelSum: 'soma',
+  aggregationFunctionLabelAvg: 'média',
+  aggregationFunctionLabelMin: 'mín',
+  aggregationFunctionLabelMax: 'máx',
+  aggregationFunctionLabelSize: 'tamanho'
 };
-
 export const ptBR = getGridLocalization(ptBRGrid, ptBRCore);

package/locales/ruRU.js

@@ -76,7 +76,7 @@ const ruRUGrid = {
   // Column menu text
   columnMenuLabel: 'Меню',
   columnMenuShowColumns: 'Показать столбцы',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Управление колонками',
   columnMenuFilter: 'Фильтр',
   columnMenuHideColumn: 'Скрыть',
   columnMenuUnsort: 'Отменить сортировку',

package/locales/svSE.js

@@ -37,7 +37,7 @@ const svSEGrid = {
   columnsPanelHideAllButton: 'Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Ta bort alla',
   filterPanelDeleteIconLabel: 'Ta bort',
   filterPanelLogicOperator: 'Logisk operatör',
   filterPanelOperator: 'Operatör',
@@ -67,7 +67,7 @@ const svSEGrid = {
   // Column menu text
   columnMenuLabel: 'Meny',
   columnMenuShowColumns: 'Visa kolumner',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',
   columnMenuHideColumn: 'Dölj',
   columnMenuUnsort: 'Osortera',

package/models/api/gridCoreApi.d.ts

@@ -31,7 +31,9 @@ export interface GridCoreApi {
      * Unique identifier for each component instance in a page.
      * @ignore - do not document.
      */
-    instanceId: number;
+    instanceId: {
+        id: number;
+    };
 }
 export interface GridCorePrivateApi<GridPublicApi extends GridApiCommon, GridPrivateApi extends GridPrivateApiCommon> {
     /**

package/models/api/gridEditingApi.d.ts

@@ -18,6 +18,10 @@ export type GridRowModesModelProps = ({
 export type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;
 export interface GridEditCellMeta {
     changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+    /**
+     * Determines if `setEditCellValue` should be called on the first render to sync the value.
+     */
+    unstable_updateValueOnRender?: boolean;
 }
 export interface GridEditingSharedApi {
     /**

package/models/gridColumnGrouping.js

@@ -4,4 +4,8 @@ export function isLeaf(node) {
 
 /**
  * A function used to process headerClassName params.
+ */
+
+/**
+ * The union type representing the [[GridColDef]] column header class type.
  */

package/models/params/gridRowParams.js

@@ -32,5 +32,13 @@ var GridRowEditStopReasons = /*#__PURE__*/function (GridRowEditStopReasons) {
   GridRowEditStopReasons["shiftTabKeyDown"] = "shiftTabKeyDown";
   return GridRowEditStopReasons;
 }(GridRowEditStopReasons || {});
+/**
+ * Object passed as parameter in the row `getRowSpacing` callback prop.
+ * @demos
+ *   - [Row spacing](/x/react-data-grid/row-height/#row-spacing)
+ */
+/**
+ * The getRowSpacing return value.
+ */
 // https://github.com/mui/mui-x/pull/3738#discussion_r798504277
 export { GridRowEditStartReasons, GridRowEditStopReasons };

package/modern/components/GridAutoSizer.js

@@ -6,6 +6,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";
 const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
   const {

package/modern/components/GridRow.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _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';
@@ -48,7 +48,7 @@ function EmptyCell({
     width
   };
   return /*#__PURE__*/_jsx("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
@@ -210,6 +210,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     if (editCellState != null && column.renderEditCell) {
       const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
       const params = _extends({}, cellParams, {
         row: updatedRow

package/modern/components/cell/GridEditDateCell.js

@@ -63,22 +63,25 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const hasUpdatedEditValueOnMount = React.useRef(false);
+  const parseValueToDate = React.useCallback(value => {
+    if (value === '') {
+      return null;
+    }
+    const [date, time] = value.split('T');
+    const [year, month, day] = date.split('-');
+    const parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      const [hours, minutes] = time.split(':');
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
-    let newParsedDate;
-    if (newFormattedDate === '') {
-      newParsedDate = null;
-    } else {
-      const [date, time] = newFormattedDate.split('T');
-      const [year, month, day] = date.split('-');
-      newParsedDate = new Date();
-      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
-      newParsedDate.setHours(0, 0, 0, 0);
-      if (time) {
-        const [hours, minutes] = time.split(':');
-        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-      }
-    }
+    const newParsedDate = parseValueToDate(newFormattedDate);
     if (onValueChange) {
       await onValueChange(event, newParsedDate);
     }
@@ -91,7 +94,7 @@ function GridEditDateCell(props) {
       field,
       value: newParsedDate
     }, event);
-  }, [apiRef, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
       if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {
@@ -105,8 +108,26 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  const handleInputRef = el => {
+    inputRef.current = el;
+    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+      const inputValue = inputRef.current.value;
+      const parsedDate = parseValueToDate(inputValue);
+      setValueState({
+        parsed: parsedDate,
+        formatted: inputValue
+      });
+      apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: parsedDate
+      });
+      hasUpdatedEditValueOnMount.current = true;
+    }
+  };
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    inputRef: inputRef,
+    inputRef: handleInputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -37,22 +37,26 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: iconButtonRef,
-      tabIndex: -1,
-      className: classes.button,
-      "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
-      size: "small",
-      onClick: handleMenuIconClick,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      "aria-controls": columnMenuId,
-      id: columnMenuButtonId
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
-        fontSize: "small"
-      })
+      enterDelay: 1000
+    }, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-haspopup": "true",
+        "aria-controls": columnMenuId,
+        id: columnMenuButtonId
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
     }))
   });
 });

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -46,14 +46,13 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
 function GridColumnHeaderTitle(props) {
   const {
     label,
-    description,
-    columnWidth
+    description
   } = props;
   const rootProps = useGridRootProps();
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
-  React.useEffect(() => {
-    if (!description && titleRef && titleRef.current) {
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef?.current) {
       const isOver = isOverflown(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -61,11 +60,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

package/modern/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -20,8 +20,10 @@ function GridColumnHeaderMenu({
   const hideMenu = React.useCallback(event => {
     // Prevent triggering the sorting
     event.stopPropagation();
-    apiRef.current.hideColumnMenu();
-  }, [apiRef]);
+    if (!target?.contains(event.target)) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, target]);
   if (!target) {
     return null;
   }

package/modern/components/menu/columnMenu/GridColumnMenu.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
+const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridColumnMenuComponents } from '../../../hooks/features/columnMenu/useGridColumnMenuComponents';
+import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
 import { GridColumnMenuContainer } from './GridColumnMenuContainer';
 import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
 import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
 import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GRID_COLUMN_MENU_COMPONENTS = {
-  ColumnMenuSortItem: GridColumnMenuSortItem,
-  ColumnMenuFilterItem: GridColumnMenuFilterItem,
-  ColumnMenuColumnsItem: GridColumnMenuColumnsItem
+export const GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: GridColumnMenuSortItem,
+  columnMenuFilterItem: GridColumnMenuFilterItem,
+  columnMenuColumnsItem: GridColumnMenuColumnsItem
 };
-export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
+export const GRID_COLUMN_MENU_SLOT_PROPS = {
   columnMenuSortItem: {
     displayOrder: 10
   },
@@ -27,29 +27,29 @@ export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
 };
 const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
-      defaultComponents,
-      defaultComponentsProps,
-      components,
-      componentsProps
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const orderedComponents = useGridColumnMenuComponents(_extends({}, other, {
-    defaultComponents,
-    defaultComponentsProps,
-    components,
-    componentsProps
+  const orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
+    defaultSlots,
+    defaultSlotProps,
+    slots,
+    slotProps
   }));
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, other, {
-    children: orderedComponents.map(([Component, componentProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, componentProps), index))
+    children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
-    defaultComponents: GRID_COLUMN_MENU_COMPONENTS,
-    defaultComponentsProps: GRID_COLUMN_MENU_COMPONENTS_PROPS
+    defaultSlots: GRID_COLUMN_MENU_SLOTS,
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
@@ -58,20 +58,20 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
-  /**
-   * `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`
-   * or it will be placed in the end of the list
-   */
-  components: PropTypes.object,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
   /**
    * Could be used to pass new props or override props specific to a column menu component
    * e.g. `displayOrder`
    */
-  componentsProps: PropTypes.object,
-  hideMenu: PropTypes.func.isRequired,
-  id: PropTypes.string,
-  labelledby: PropTypes.string,
-  open: PropTypes.bool.isRequired
+  slotProps: PropTypes.object,
+  /**
+   * `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
+   */
+  slots: PropTypes.object
 } : void 0;
 export { GridColumnMenu, GridGenericColumnMenu };

package/modern/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';
@@ -71,7 +71,8 @@ function GridColumnsPanel(props) {
       searchPredicate = defaultSearchPredicate,
       autoFocusSearchField = true,
       disableHideAllButton = false,
-      disableShowAllButton = false
+      disableShowAllButton = false,
+      getTogglableColumns
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const sortedColumns = React.useMemo(() => {
@@ -109,12 +110,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) {
@@ -192,6 +196,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/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -143,7 +143,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/modern/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/modern/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]);