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

package/components/columnsManagement/GridColumnsManagement.js

@@ -0,0 +1,260 @@
+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,
+    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 toggleAllColumns = React.useCallback(isVisible => {
+    const currentModel = gridColumnVisibilityModelSelector(apiRef);
+    const newModel = _extends({}, currentModel);
+    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
+    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]);
+  const handleSearchValueChange = React.useCallback(event => {
+    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 togglableSortedColumns;
+    }
+    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
+  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
+  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')
+        }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseCheckbox)),
+        sx: {
+          [`.MuiFormControlLabel-label`]: {
+            textTransform: 'uppercase',
+            fontSize: '14px'
+          }
+        },
+        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'])
+} : 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, 2.4),
+  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 {

package/components/panel/GridColumnsPanel.js

@@ -1,196 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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';
-import IconButton from '@mui/material/IconButton';
-import { switchClasses } from '@mui/material/Switch';
-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 { GridPanelContent } from './GridPanelContent';
-import { GridPanelFooter } from './GridPanelFooter';
-import { GridPanelHeader } from './GridPanelHeader';
 import { GridPanelWrapper } from './GridPanelWrapper';
-import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
+import { GridColumnsManagement } from '../columnsManagement';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
 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: ['columnsPanel'],
-    columnsPanelRow: ['columnsPanelRow']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnsPanelRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanel',
-  overridesResolver: (props, styles) => styles.columnsPanel
-})({
-  padding: '8px 0px 8px 8px'
-});
-const GridColumnsPanelRowRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanelRow',
-  overridesResolver: (props, styles) => styles.columnsPanelRow
-})(({
-  theme
-}) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '1px 8px 1px 7px',
-  [`& .${switchClasses.root}`]: {
-    marginRight: theme.spacing(0.5)
-  }
-}));
-const GridIconButtonRoot = styled(IconButton)({
-  justifyContent: 'flex-end'
-});
-const collator = new Intl.Collator();
-const defaultSearchPredicate = (column, searchValue) => {
-  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
-};
 function GridColumnsPanel(props) {
-  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
-  const apiRef = useGridApiContext();
-  const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
-  const classes = useUtilityClasses(rootProps);
-  const {
-      sort,
-      searchPredicate = defaultSearchPredicate,
-      autoFocusSearchField = true,
-      disableHideAllButton = false,
-      disableShowAllButton = false,
-      getTogglableColumns
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  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 toggleAllColumns = React.useCallback(isVisible => {
-    const currentModel = gridColumnVisibilityModelSelector(apiRef);
-    const newModel = _extends({}, currentModel);
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    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]);
-  const handleSearchValueChange = React.useCallback(event => {
-    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 togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
-  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(GridPanelWrapper, _extends({}, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelHeader, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
-        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
-        inputRef: searchInputRef,
-        value: searchValue,
-        onChange: handleSearchValueChange,
-        variant: "standard",
-        fullWidth: true
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
-    }), /*#__PURE__*/_jsx(GridPanelContent, {
-      children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: currentColumns.map(column => {
-          var _rootProps$slotProps2;
-          return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
-            className: classes.columnsPanelRow,
-            ownerState: rootProps,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              control: /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
-                disabled: column.hideable === false,
-                checked: columnVisibilityModel[column.field] !== false,
-                onClick: toggleColumn,
-                name: column.field,
-                size: "small",
-                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-              }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSwitch)),
-              label: column.headerName || column.field
-            }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
-              draggable: true,
-              "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              size: "small",
-              disabled: true,
-              children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
-            })]
-          }, column.field);
-        })
-      })
-    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/_jsxs(GridPanelFooter, {
-      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: () => toggleAllColumns(false)
-      }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseButton, {
-        disabled: disableHideAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: () => toggleAllColumns(true)
-      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
-        disabled: disableShowAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
-      })) : null]
-    })]
+  return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
@@ -198,33 +17,6 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | 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 `Hide all` button will not be displayed.
-   * @default false
-   */
-  disableHideAllButton: PropTypes.bool,
-  /**
-   * If `true`, the `Show all` button will be disabled
-   * @default false
-   */
-  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'])
+  slotProps: PropTypes.object
 } : void 0;
 export { GridColumnsPanel };

package/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
 import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -27,6 +27,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   pagination: GridPagination,
   filterPanel: GridFilterPanel,
   columnsPanel: GridColumnsPanel,
+  columnsManagement: GridColumnsManagement,
   panel: GridPanel,
   row: GridRow
 });

package/constants/gridClasses.d.ts

@@ -228,13 +228,21 @@ export interface GridClasses {
      */
     columnSeparator: string;
     /**
-     * Styles applied to the columns panel element.
+     * Styles applied to the columns management body.
      */
-    columnsPanel: string;
+    columnsManagement: string;
     /**
-     * Styles applied to the columns panel row element.
+     * Styles applied to the columns management row element.
      */
-    columnsPanelRow: string;
+    columnsManagementRow: string;
+    /**
+     * Styles applied to the columns management header element.
+     */
+    columnsManagementHeader: string;
+    /**
+     * Styles applied to the columns management footer element.
+     */
+    columnsManagementFooter: string;
     /**
      * Styles applied to the top container.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -27,12 +27,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
-  // Columns panel text
-  columnsPanelTextFieldLabel: 'Find column',
-  columnsPanelTextFieldPlaceholder: 'Column title',
-  columnsPanelDragIconLabel: 'Reorder column',
-  columnsPanelShowAllButton: 'Show all',
-  columnsPanelHideAllButton: 'Hide all',
+  // Columns management text
+  columnsManagementSearchTitle: 'Search',
+  columnsManagementNoColumns: 'No columns',
+  columnsManagementShowHideAllText: 'Show/Hide All',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
   filterPanelRemoveAll: 'Remove all',