@mui/x-data-grid 7.0.0-alpha.9 → 7.0.0-beta.1

package/colDef/gridBooleanColDef.js

@@ -4,12 +4,9 @@ import { renderBooleanCell } from '../components/cell/GridBooleanCell';
 import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
 import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridBooleanOperators } from './gridBooleanOperators';
-function gridBooleanFormatter({
-  value,
-  api
-}) {
-  return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
-}
+const gridBooleanFormatter = (value, row, column, apiRef) => {
+  return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
+};
 const stringToBoolean = value => {
   switch (value.toLowerCase().trim()) {
     case 'true':

package/colDef/gridCheckboxSelectionColDef.js

@@ -19,9 +19,10 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
-  valueGetter: params => {
-    const selectionLookup = selectedIdsLookupSelector(params.api.state, params.api.instanceId);
-    return selectionLookup[params.id] !== undefined;
+  valueGetter: (value, row, column, apiRef) => {
+    const selectionLookup = selectedIdsLookupSelector(apiRef);
+    const rowId = apiRef.current.getRowId(row);
+    return selectionLookup[rowId] !== undefined;
   },
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))

package/colDef/gridDateColDef.d.ts

@@ -1,6 +1,5 @@
-import { GridColTypeDef } from '../models/colDef/gridColDef';
-import { GridValueFormatterParams } from '../models/params/gridCellParams';
-export declare function gridDateFormatter({ value, field, id }: GridValueFormatterParams<Date>): string;
-export declare function gridDateTimeFormatter({ value, field, id }: GridValueFormatterParams<Date>): string;
+import { GridColTypeDef, GridValueFormatter } from '../models/colDef/gridColDef';
+export declare const gridDateFormatter: GridValueFormatter;
+export declare const gridDateTimeFormatter: GridValueFormatter;
 export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date, string>;
 export declare const GRID_DATETIME_COL_DEF: GridColTypeDef<Date, string>;

package/colDef/gridDateColDef.js

@@ -13,38 +13,32 @@ function throwIfNotDateObject({
     throw new Error([`MUI X: \`${columnType}\` column type only accepts \`Date\` objects as values.`, 'Use `valueGetter` to transform the value into a `Date` object.', `Row ID: ${rowId}, field: "${field}".`].join('\n'));
   }
 }
-export function gridDateFormatter({
-  value,
-  field,
-  id
-}) {
+export const gridDateFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'date',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleDateString();
-}
-export function gridDateTimeFormatter({
-  value,
-  field,
-  id
-}) {
+};
+export const gridDateTimeFormatter = (value, row, column, apiRef) => {
   if (!value) {
     return '';
   }
+  const rowId = apiRef.current.getRowId(row);
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',
-    rowId: id,
-    field
+    rowId,
+    field: column.field
   });
   return value.toLocaleString();
-}
+};
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',
   sortComparator: gridDateComparator,

package/colDef/gridNumericColDef.js

@@ -9,9 +9,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   headerAlign: 'right',
   sortComparator: gridNumberComparator,
   valueParser: value => value === '' ? null : Number(value),
-  valueFormatter: ({
-    value
-  }) => isNumber(value) ? value.toLocaleString() : value || '',
+  valueFormatter: value => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/colDef/gridSingleSelectColDef.js

@@ -17,20 +17,15 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
-  valueFormatter(params) {
-    const {
-      id,
-      field,
-      value,
-      api
-    } = params;
-    const colDef = params.api.getColumn(field);
+  valueFormatter(value, row, colDef, apiRef) {
+    // const { id, field, value, api } = params;
+    const rowId = apiRef.current.getRowId(row);
     if (!isSingleSelectColDef(colDef)) {
       return '';
     }
     const valueOptions = getValueOptions(colDef, {
-      id,
-      row: id ? api.getRow(id) : null
+      id: rowId,
+      row
     });
     if (value == null) {
       return '';
@@ -47,8 +42,8 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   renderEditCell: renderEditSingleSelectCell,
   filterOperators: getGridSingleSelectOperators(),
   // @ts-ignore
-  pastedValueParser: (value, params) => {
-    const colDef = params.colDef;
+  pastedValueParser: (value, row, column) => {
+    const colDef = column;
     const valueOptions = getValueOptions(colDef) || [];
     const getOptionValue = colDef.getOptionValue;
     const valueOption = valueOptions.find(option => {

package/components/GridRow.js

@@ -436,106 +436,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   onDoubleClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  pinnedColumns: PropTypes.shape({
-    left: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired,
-    right: PropTypes.arrayOf(PropTypes.shape({
-      align: PropTypes.oneOf(['center', 'left', 'right']),
-      cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      colSpan: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
-      computedWidth: PropTypes.number.isRequired,
-      description: PropTypes.string,
-      disableColumnMenu: PropTypes.bool,
-      disableExport: PropTypes.bool,
-      disableReorder: PropTypes.bool,
-      editable: PropTypes.bool,
-      field: PropTypes.string.isRequired,
-      filterable: PropTypes.bool,
-      filterOperators: PropTypes.arrayOf(PropTypes.shape({
-        getApplyFilterFn: PropTypes.func.isRequired,
-        getValueAsString: PropTypes.func,
-        headerLabel: PropTypes.string,
-        InputComponent: PropTypes.elementType,
-        InputComponentProps: PropTypes.object,
-        label: PropTypes.string,
-        requiresFilterValue: PropTypes.bool,
-        value: PropTypes.string.isRequired
-      })),
-      flex: PropTypes.number,
-      getApplyQuickFilterFn: PropTypes.func,
-      groupable: PropTypes.bool,
-      hasBeenResized: PropTypes.bool,
-      headerAlign: PropTypes.oneOf(['center', 'left', 'right']),
-      headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-      headerName: PropTypes.string,
-      hideable: PropTypes.bool,
-      hideSortIcons: PropTypes.bool,
-      maxWidth: PropTypes.number,
-      minWidth: PropTypes.number,
-      pinnable: PropTypes.bool,
-      preProcessEditCellProps: PropTypes.func,
-      renderCell: PropTypes.func,
-      renderEditCell: PropTypes.func,
-      renderHeader: PropTypes.func,
-      resizable: PropTypes.bool,
-      sortable: PropTypes.bool,
-      sortComparator: PropTypes.func,
-      sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])),
-      type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
-      valueFormatter: PropTypes.func,
-      valueGetter: PropTypes.func,
-      valueParser: PropTypes.func,
-      valueSetter: PropTypes.func,
-      width: PropTypes.number
-    })).isRequired
-  }).isRequired,
+  pinnedColumns: PropTypes.object.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,

package/components/cell/GridEditInputCell.js

@@ -57,7 +57,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     const column = apiRef.current.getColumn(field);
     let parsedValue = newValue;
     if (column.valueParser) {
-      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+      parsedValue = column.valueParser(newValue, apiRef.current.getRow(id), column, apiRef);
     }
     setValueState(parsedValue);
     apiRef.current.setEditCellValue({

package/components/columnsManagement/GridColumnsManagement.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { GridColDef } from '../../models/colDef/gridColDef';
+export interface GridColumnsManagementProps {
+    sort?: 'asc' | 'desc';
+    searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
+    /**
+     * If `true`, the column search field will be focused automatically.
+     * If `false`, the first column switch input will be focused automatically.
+     * This helps to avoid input keyboard panel to popup automatically on touch devices.
+     * @default true
+     */
+    autoFocusSearchField?: boolean;
+    /**
+     * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+     * @default false
+     */
+    disableShowHideToggle?: boolean;
+    /**
+     * If `true`, the `Reset` button will not be disabled
+     * @default false
+     */
+    disableResetButton?: boolean;
+    /**
+     * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+     * - `all`: Will toggle all columns.
+     * - `filteredOnly`: Will only toggle columns that match the search criteria.
+     * @default 'all'
+     */
+    toggleAllMode?: 'all' | 'filteredOnly';
+    /**
+     * 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?: (columns: GridColDef[]) => GridColDef['field'][];
+}
+declare function GridColumnsManagement(props: GridColumnsManagementProps): React.JSX.Element;
+declare namespace GridColumnsManagement {
+    var propTypes: any;
+}
+export { GridColumnsManagement };

package/components/columnsManagement/GridColumnsManagement.js

@@ -0,0 +1,265 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useLazyRef } from '../../hooks/utils/useLazyRef';
+import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnsManagement'],
+    header: ['columnsManagementHeader'],
+    footer: ['columnsManagementFooter'],
+    row: ['columnsManagementRow']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const collator = new Intl.Collator();
+function GridColumnsManagement(props) {
+  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
+  const apiRef = useGridApiContext();
+  const searchInputRef = React.useRef(null);
+  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const initialColumnVisibilityModel = useLazyRef(() => gridColumnVisibilityModelSelector(apiRef)).current;
+  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const rootProps = useGridRootProps();
+  const [searchValue, setSearchValue] = React.useState('');
+  const classes = useUtilityClasses(rootProps);
+  const {
+    sort,
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true,
+    disableShowHideToggle = false,
+    disableResetButton = false,
+    toggleAllMode = 'all',
+    getTogglableColumns
+  } = props;
+  const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+  const toggleColumn = event => {
+    const {
+      name: field
+    } = event.target;
+    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
+  };
+  const currentColumns = React.useMemo(() => {
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
+    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
+      field
+    }) => togglableColumns.includes(field)) : sortedColumns;
+    if (!searchValue) {
+      return togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  const toggleAllColumns = React.useCallback(isVisible => {
+    const currentModel = gridColumnVisibilityModelSelector(apiRef);
+    const newModel = _extends({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    (toggleAllMode === 'filteredOnly' ? currentColumns : columns).forEach(col => {
+      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
+        if (isVisible) {
+          // delete the key from the model instead of setting it to `true`
+          delete newModel[col.field];
+        } else {
+          newModel[col.field] = false;
+        }
+      }
+    });
+    return apiRef.current.setColumnVisibilityModel(newModel);
+  }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
+  const handleSearchValueChange = React.useCallback(event => {
+    setSearchValue(event.target.value);
+  }, []);
+  const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
+  const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
+  const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
+  const firstSwitchRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+    return false;
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+        placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "outlined",
+        size: "small",
+        InputProps: {
+          startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {})
+          }),
+          sx: {
+            pl: 1.5
+          }
+        },
+        fullWidth: true
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
+    }), /*#__PURE__*/_jsxs(GridColumnsManagementBody, {
+      className: classes.root,
+      ownerState: rootProps,
+      children: [currentColumns.map(column => {
+        var _rootProps$slotProps2;
+        return /*#__PURE__*/_jsx(FormControlLabel, {
+          className: classes.row,
+          control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+            disabled: column.hideable === false,
+            checked: columnVisibilityModel[column.field] !== false,
+            onClick: toggleColumn,
+            name: column.field,
+            sx: {
+              p: 0.5
+            },
+            inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
+          }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseCheckbox)),
+          label: column.headerName || column.field
+        }, column.field);
+      }), currentColumns.length === 0 && /*#__PURE__*/_jsx(GridColumnsManagementEmptyText, {
+        ownerState: rootProps,
+        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+      })]
+    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/_jsxs(GridColumnsManagementFooter, {
+      ownerState: rootProps,
+      className: classes.footer,
+      children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(FormControlLabel, {
+        control: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+          disabled: hideableColumns.length === 0,
+          checked: allHideableColumnsVisible,
+          indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
+          onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
+          sx: {
+            p: 0.5
+          }
+        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+      }) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
+        disabled: isResetDisabled
+      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
+        children: "Reset"
+      })) : null]
+    }) : null]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the column search field will be focused automatically.
+   * If `false`, the first column switch input will be focused automatically.
+   * This helps to avoid input keyboard panel to popup automatically on touch devices.
+   * @default true
+   */
+  autoFocusSearchField: PropTypes.bool,
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton: PropTypes.bool,
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle: 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,
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Changes the behavior of the `Show/Hide All` toggle when the search field is used:
+   * - `all`: Will toggle all columns.
+   * - `filteredOnly`: Will only toggle columns that match the search criteria.
+   * @default 'all'
+   */
+  toggleAllMode: PropTypes.oneOf(['all', 'filteredOnly'])
+} : void 0;
+const GridColumnsManagementBody = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagement',
+  overridesResolver: (props, styles) => styles.columnsManagement
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(0, 3, 1.5),
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  flex: '1 1',
+  maxHeight: 400,
+  alignItems: 'flex-start'
+}));
+const GridColumnsManagementHeader = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementHeader',
+  overridesResolver: (props, styles) => styles.columnsManagementHeader
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5, 3)
+}));
+const GridColumnsManagementFooter = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementFooter',
+  overridesResolver: (props, styles) => styles.columnsManagementFooter
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1, 0.5, 3),
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderTop: `1px solid ${theme.palette.divider}`
+}));
+const GridColumnsManagementEmptyText = styled('div')(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 0),
+  color: theme.palette.grey[500]
+}));
+export { GridColumnsManagement };

package/components/columnsManagement/index.d.ts

@@ -0,0 +1 @@
+export * from './GridColumnsManagement';

package/components/columnsManagement/index.js

@@ -0,0 +1 @@
+export * from './GridColumnsManagement';

package/components/columnsManagement/utils.d.ts

@@ -0,0 +1,4 @@
+import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
+import { GridColumnsManagementProps } from './GridColumnsManagement';
+export declare const checkColumnVisibilityModelsSame: (a: GridColumnVisibilityModel, b: GridColumnVisibilityModel) => boolean;
+export declare const defaultSearchPredicate: NonNullable<GridColumnsManagementProps['searchPredicate']>;

package/components/columnsManagement/utils.js

@@ -0,0 +1,16 @@
+export const checkColumnVisibilityModelsSame = (a, b) => {
+  // Filter `false` values only, as `true` and not having a key are the same
+  const aFalseValues = new Set(Object.keys(a).filter(key => a[key] === false));
+  const bFalseValues = new Set(Object.keys(b).filter(key => b[key] === false));
+  if (aFalseValues.size !== bFalseValues.size) {
+    return false;
+  }
+  let result = true;
+  aFalseValues.forEach(key => {
+    if (!bFalseValues.has(key)) {
+      result = false;
+    }
+  });
+  return result;
+};
+export const defaultSearchPredicate = (column, searchValue) => (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;

package/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';

package/components/index.js

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';

package/components/panel/GridColumnsPanel.d.ts

@@ -1,34 +1,6 @@
 import * as React from 'react';
 import { GridPanelWrapperProps } from './GridPanelWrapper';
-import type { GridColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
-    sort?: 'asc' | 'desc';
-    searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
-    /**
-     * If `true`, the column search field will be focused automatically.
-     * If `false`, the first column switch input will be focused automatically.
-     * This helps to avoid input keyboard panel to popup automatically on touch devices.
-     * @default true
-     */
-    autoFocusSearchField?: boolean;
-    /**
-     * If `true`, the `Hide all` button will not be displayed.
-     * @default false
-     */
-    disableHideAllButton?: boolean;
-    /**
-     * If `true`, the `Show all` button will be disabled
-     * @default false
-     */
-    disableShowAllButton?: boolean;
-    /**
-     * 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?: (columns: GridColDef[]) => GridColDef['field'][];
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): React.JSX.Element;
 declare namespace GridColumnsPanel {