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

package/node/components/GridRow.js

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

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -0,0 +1,264 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnsManagement = GridColumnsManagement;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _styles = require("@mui/material/styles");
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _useLazyRef = require("../../hooks/utils/useLazyRef");
+var _utils2 = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @typescript-eslint/no-use-before-define */
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnsManagement'],
+    header: ['columnsManagementHeader'],
+    footer: ['columnsManagementFooter'],
+    row: ['columnsManagementRow']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const collator = new Intl.Collator();
+function GridColumnsManagement(props) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const searchInputRef = React.useRef(null);
+  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const initialColumnVisibilityModel = (0, _useLazyRef.useLazyRef)(() => (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef)).current;
+  const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [searchValue, setSearchValue] = React.useState('');
+  const classes = useUtilityClasses(rootProps);
+  const {
+    sort,
+    searchPredicate = _utils2.defaultSearchPredicate,
+    autoFocusSearchField = true,
+    disableShowHideToggle = false,
+    disableResetButton = false,
+    getTogglableColumns
+  } = props;
+  const isResetDisabled = React.useMemo(() => (0, _utils2.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 = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const newModel = (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+        placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
+        inputRef: searchInputRef,
+        value: searchValue,
+        onChange: handleSearchValueChange,
+        variant: "outlined",
+        size: "small",
+        InputProps: {
+          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
+          }),
+          sx: {
+            pl: 1.5
+          }
+        },
+        fullWidth: true
+      }, rootProps.slotProps?.baseTextField))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
+      className: classes.root,
+      ownerState: rootProps,
+      children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+        className: classes.row,
+        control: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+          disabled: column.hideable === false,
+          checked: columnVisibilityModel[column.field] !== false,
+          onClick: toggleColumn,
+          name: column.field,
+          sx: {
+            p: 0.5
+          },
+          inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
+        }, rootProps.slotProps?.baseCheckbox)),
+        label: column.headerName || column.field
+      }, column.field)), currentColumns.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementEmptyText, {
+        ownerState: rootProps,
+        children: apiRef.current.getLocaleText('columnsManagementNoColumns')
+      })]
+    }), !disableShowHideToggle && !disableResetButton && currentColumns.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementFooter, {
+      ownerState: rootProps,
+      className: classes.footer,
+      children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+        control: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+          disabled: hideableColumns.length === 0,
+          checked: allHideableColumnsVisible,
+          indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
+          onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+          name: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+        }, rootProps.slotProps?.baseCheckbox)),
+        sx: {
+          [`.MuiFormControlLabel-label`]: {
+            textTransform: 'uppercase',
+            fontSize: '14px'
+          }
+        },
+        label: apiRef.current.getLocaleText('columnsManagementShowHideAllText')
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
+        disabled: isResetDisabled
+      }, rootProps.slotProps?.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.default.bool,
+  /**
+   * If `true`, the `Reset` button will not be disabled
+   * @default false
+   */
+  disableResetButton: _propTypes.default.bool,
+  /**
+   * If `true`, the `Show/Hide all` toggle checkbox will not be displayed.
+   * @default false
+   */
+  disableShowHideToggle: _propTypes.default.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.default.func,
+  searchPredicate: _propTypes.default.func,
+  sort: _propTypes.default.oneOf(['asc', 'desc'])
+} : void 0;
+const GridColumnsManagementBody = (0, _styles.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 = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementHeader',
+  overridesResolver: (props, styles) => styles.columnsManagementHeader
+})(({
+  theme
+}) => ({
+  padding: theme.spacing(1.5, 3)
+}));
+const GridColumnsManagementFooter = (0, _styles.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 = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 0),
+  color: theme.palette.grey[500]
+}));

package/node/components/columnsManagement/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridColumnsManagement = require("./GridColumnsManagement");
+Object.keys(_GridColumnsManagement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnsManagement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnsManagement[key];
+    }
+  });
+});

package/node/components/columnsManagement/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSearchPredicate = exports.checkColumnVisibilityModelsSame = void 0;
+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;
+};
+exports.checkColumnVisibilityModelsSame = checkColumnVisibilityModelsSame;
+const defaultSearchPredicate = (column, searchValue) => (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+exports.defaultSearchPredicate = defaultSearchPredicate;

package/node/components/index.js

@@ -91,6 +91,17 @@ Object.keys(_panel).forEach(function (key) {
     }
   });
 });
+var _columnsManagement = require("./columnsManagement");
+Object.keys(_columnsManagement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnsManagement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnsManagement[key];
+    }
+  });
+});
 var _toolbar = require("./toolbar");
 Object.keys(_toolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/components/panel/GridColumnsPanel.js

@@ -6,195 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridColumnsPanel = GridColumnsPanel;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Switch = require("@mui/material/Switch");
-var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
-var _styles = require("@mui/material/styles");
-var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _GridPanelContent = require("./GridPanelContent");
-var _GridPanelFooter = require("./GridPanelFooter");
-var _GridPanelHeader = require("./GridPanelHeader");
 var _GridPanelWrapper = require("./GridPanelWrapper");
-var _envConstants = require("../../constants/envConstants");
+var _columnsManagement = require("../columnsManagement");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnsPanel'],
-    columnsPanelRow: ['columnsPanelRow']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
-const GridColumnsPanelRoot = (0, _styles.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanel',
-  overridesResolver: (props, styles) => styles.columnsPanel
-})({
-  padding: '8px 0px 8px 8px'
-});
-const GridColumnsPanelRowRoot = (0, _styles.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanelRow',
-  overridesResolver: (props, styles) => styles.columnsPanelRow
-})(({
-  theme
-}) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '1px 8px 1px 7px',
-  [`& .${_Switch.switchClasses.root}`]: {
-    marginRight: theme.spacing(0.5)
-  }
-}));
-const GridIconButtonRoot = (0, _styles.styled)(_IconButton.default)({
-  justifyContent: 'flex-end'
-});
-const collator = new Intl.Collator();
-const defaultSearchPredicate = (column, searchValue) => {
-  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
-};
 function GridColumnsPanel(props) {
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const searchInputRef = React.useRef(null);
-  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
-  const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const [searchValue, setSearchValue] = React.useState('');
-  const classes = useUtilityClasses(rootProps);
-  const {
-      sort,
-      searchPredicate = defaultSearchPredicate,
-      autoFocusSearchField = true,
-      disableHideAllButton = false,
-      disableShowAllButton = false,
-      getTogglableColumns
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
-    const newModel = (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelHeader.GridPanelHeader, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
-        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
-        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
-        inputRef: searchInputRef,
-        value: searchValue,
-        onChange: handleSearchValueChange,
-        variant: "standard",
-        fullWidth: true
-      }, rootProps.slotProps?.baseTextField))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsPanelRoot, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsPanelRowRoot, {
-          className: classes.columnsPanelRow,
-          ownerState: rootProps,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
-            control: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSwitch, (0, _extends2.default)({
-              disabled: column.hideable === false,
-              checked: columnVisibilityModel[column.field] !== false,
-              onClick: toggleColumn,
-              name: column.field,
-              size: "small",
-              inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-            }, rootProps.slotProps?.baseSwitch)),
-            label: column.headerName || column.field
-          }), !rootProps.disableColumnReorder && _envConstants.GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonRoot, {
-            draggable: true,
-            "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-            title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-            size: "small",
-            disabled: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {})
-          })]
-        }, column.field))
-      })
-    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
-      children: [!disableHideAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(false)
-      }, rootProps.slotProps?.baseButton, {
-        disabled: disableHideAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableShowAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(true)
-      }, rootProps.slotProps?.baseButton, {
-        disabled: disableShowAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
-      })) : null]
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsManagement.GridColumnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
@@ -202,32 +25,5 @@ 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.default.bool,
-  /**
-   * If `true`, the `Hide all` button will not be displayed.
-   * @default false
-   */
-  disableHideAllButton: _propTypes.default.bool,
-  /**
-   * If `true`, the `Show all` button will be disabled
-   * @default false
-   */
-  disableShowAllButton: _propTypes.default.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.default.func,
-  searchPredicate: _propTypes.default.func,
-  slotProps: _propTypes.default.object,
-  sort: _propTypes.default.oneOf(['asc', 'desc'])
+  slotProps: _propTypes.default.object
 } : void 0;