@mui/x-data-grid 5.4.0 → 5.6.0

package/legacy/components/cell/GridEditBooleanCell.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editBooleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export function GridEditBooleanCell(props) {
+  var _rootProps$components;
+
+  var idProp = props.id,
+      value = props.value,
+      formattedValue = props.formattedValue,
+      api = props.api,
+      field = props.field,
+      row = props.row,
+      rowNode = props.rowNode,
+      colDef = props.colDef,
+      cellMode = props.cellMode,
+      isEditable = props.isEditable,
+      tabIndex = props.tabIndex,
+      className = props.className,
+      getValue = props.getValue,
+      hasFocus = props.hasFocus,
+      isValidating = props.isValidating,
+      error = props.error,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var inputRef = React.useRef(null);
+  var id = useId();
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      valueState = _React$useState2[0],
+      setValueState = _React$useState2[1];
+
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var handleChange = React.useCallback(function (event) {
+    var newValue = event.target.checked;
+    setValueState(newValue);
+    api.setEditCellValue({
+      id: idProp,
+      field: field,
+      value: newValue
+    }, event);
+  }, [api, field, idProp]);
+  React.useEffect(function () {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx("label", _extends({
+    htmlFor: id,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
+      id: id,
+      inputRef: inputRef,
+      checked: Boolean(valueState),
+      onChange: handleChange,
+      size: "small"
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseCheckbox))
+  }));
+}
+export var renderEditBooleanCell = function renderEditBooleanCell(params) {
+  return /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+};

package/legacy/components/cell/GridEditDateCell.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export function GridEditDateCell(props) {
+  var id = props.id,
+      valueProp = props.value,
+      formattedValue = props.formattedValue,
+      api = props.api,
+      field = props.field,
+      row = props.row,
+      rowNode = props.rowNode,
+      colDef = props.colDef,
+      cellMode = props.cellMode,
+      isEditable = props.isEditable,
+      tabIndex = props.tabIndex,
+      hasFocus = props.hasFocus,
+      getValue = props.getValue,
+      inputProps = props.inputProps,
+      isValidating = props.isValidating,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var isDateTime = colDef.type === 'dateTime';
+  var inputRef = React.useRef();
+  var valueTransformed = React.useMemo(function () {
+    var parsedDate;
+
+    if (valueProp == null) {
+      parsedDate = null;
+    } else if (valueProp instanceof Date) {
+      parsedDate = valueProp;
+    } else {
+      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+    }
+
+    var formattedDate;
+
+    if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
+      formattedDate = '';
+    } else {
+      var localDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60 * 1000);
+      formattedDate = localDate.toISOString().substr(0, isDateTime ? 16 : 10);
+    }
+
+    return {
+      parsed: parsedDate,
+      formatted: formattedDate
+    };
+  }, [valueProp, isDateTime]);
+
+  var _React$useState = React.useState(valueTransformed),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      valueState = _React$useState2[0],
+      setValueState = _React$useState2[1];
+
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var handleChange = React.useCallback(function (event) {
+    var newFormattedDate = event.target.value;
+    var newParsedDate;
+
+    if (newFormattedDate === '') {
+      newParsedDate = null;
+    } else {
+      var _newFormattedDate$spl = newFormattedDate.split('T'),
+          _newFormattedDate$spl2 = _slicedToArray(_newFormattedDate$spl, 2),
+          date = _newFormattedDate$spl2[0],
+          time = _newFormattedDate$spl2[1];
+
+      var _date$split = date.split('-'),
+          _date$split2 = _slicedToArray(_date$split, 3),
+          year = _date$split2[0],
+          month = _date$split2[1],
+          day = _date$split2[2];
+
+      newParsedDate = new Date();
+      newParsedDate.setFullYear(year, Number(month) - 1, day);
+      newParsedDate.setHours(0, 0, 0, 0);
+
+      if (time) {
+        var _time$split = time.split(':'),
+            _time$split2 = _slicedToArray(_time$split, 2),
+            hours = _time$split2[0],
+            minutes = _time$split2[1];
+
+        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+      }
+    }
+
+    setValueState({
+      parsed: newParsedDate,
+      formatted: newFormattedDate
+    });
+    api.setEditCellValue({
+      id: id,
+      field: field,
+      value: newParsedDate
+    }, event);
+  }, [api, field, id]);
+  React.useEffect(function () {
+    setValueState(function (state) {
+      var _valueTransformed$par, _state$parsed;
+
+      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+        return valueTransformed;
+      }
+
+      return state;
+    });
+  }, [valueTransformed]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(InputBase, _extends({
+    inputRef: inputRef,
+    fullWidth: true,
+    className: classes.root,
+    type: isDateTime ? 'datetime-local' : 'date',
+    inputProps: _extends({
+      max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
+    }, inputProps),
+    value: valueState.formatted,
+    onChange: handleChange
+  }, other));
+}
+export var renderEditDateCell = function renderEditDateCell(params) {
+  return /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+};

package/legacy/components/cell/GridEditInputCell.js

@@ -0,0 +1,117 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+var GridEditInputCellRoot = styled(InputBase, {
+  name: 'MuiDataGrid',
+  slot: 'EditInputCell',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.editInputCell;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return _extends({}, theme.typography.body2, {
+    padding: '1px 0',
+    '& input': {
+      padding: '0 16px',
+      height: '100%'
+    }
+  });
+});
+
+function GridEditInputCell(props) {
+  var id = props.id,
+      value = props.value,
+      formattedValue = props.formattedValue,
+      api = props.api,
+      field = props.field,
+      row = props.row,
+      rowNode = props.rowNode,
+      colDef = props.colDef,
+      cellMode = props.cellMode,
+      isEditable = props.isEditable,
+      tabIndex = props.tabIndex,
+      hasFocus = props.hasFocus,
+      getValue = props.getValue,
+      isValidating = props.isValidating,
+      _props$debounceMs = props.debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var inputRef = React.useRef();
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      valueState = _React$useState2[0],
+      setValueState = _React$useState2[1];
+
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var handleChange = React.useCallback(function (event) {
+    var newValue = event.target.value;
+    setValueState(newValue);
+    api.setEditCellValue({
+      id: id,
+      field: field,
+      value: newValue,
+      debounceMs: debounceMs
+    }, event);
+  }, [api, debounceMs, field, id]);
+  React.useEffect(function () {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    inputRef: inputRef,
+    className: classes.root,
+    fullWidth: true,
+    type: colDef.type === 'number' ? colDef.type : 'text',
+    value: valueState != null ? valueState : '',
+    onChange: handleChange
+  }, other));
+}
+
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+  debounceMs: PropTypes.number,
+  isValidating: PropTypes.bool
+} : void 0;
+export { GridEditInputCell };
+export var renderEditInputCell = function renderEditInputCell(params) {
+  return /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+};

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -0,0 +1,199 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import MenuItem from '@mui/material/MenuItem';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridEditModes } from '../../models/gridEditRowModel';
+import { GridEvents } from '../../models/events/gridEvents';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var renderSingleSelectOptions = function renderSingleSelectOptions(option) {
+  return _typeof(option) === 'object' ? /*#__PURE__*/_jsx(MenuItem, {
+    value: option.value,
+    children: option.label
+  }, option.value) : /*#__PURE__*/_jsx(MenuItem, {
+    value: option,
+    children: option
+  }, option);
+};
+
+function GridEditSingleSelectCell(props) {
+  var _rootProps$components;
+
+  var id = props.id,
+      value = props.value,
+      formattedValue = props.formattedValue,
+      api = props.api,
+      field = props.field,
+      row = props.row,
+      rowNode = props.rowNode,
+      colDef = props.colDef,
+      cellMode = props.cellMode,
+      isEditable = props.isEditable,
+      tabIndex = props.tabIndex,
+      className = props.className,
+      getValue = props.getValue,
+      hasFocus = props.hasFocus,
+      isValidating = props.isValidating,
+      error = props.error,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var ref = React.useRef();
+  var inputRef = React.useRef();
+  var rootProps = useGridRootProps();
+
+  var _React$useState = React.useState(rootProps.editMode === 'cell'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  var valueOptionsFormatted;
+
+  if (typeof colDef.valueOptions === 'function') {
+    valueOptionsFormatted = colDef.valueOptions({
+      id: id,
+      row: row,
+      field: field
+    });
+  } else {
+    valueOptionsFormatted = colDef.valueOptions;
+  }
+
+  if (colDef.valueFormatter) {
+    valueOptionsFormatted = valueOptionsFormatted.map(function (option) {
+      if (_typeof(option) === 'object') {
+        return option;
+      }
+
+      var params = {
+        field: field,
+        api: api,
+        value: option
+      };
+      return {
+        value: option,
+        label: String(colDef.valueFormatter(params))
+      };
+    });
+  }
+
+  var handleChange = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var isValid, canCommit, params;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setOpen(false);
+              _context.next = 3;
+              return api.setEditCellValue({
+                id: id,
+                field: field,
+                value: event.target.value
+              }, event);
+
+            case 3:
+              isValid = _context.sent;
+
+              if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 6:
+              _context.next = 8;
+              return Promise.resolve(api.commitCellChange({
+                id: id,
+                field: field
+              }, event));
+
+            case 8:
+              canCommit = _context.sent;
+
+              if (canCommit) {
+                api.setCellMode(id, field, 'view');
+
+                if (event.key) {
+                  // TODO v6: remove once we stop ignoring events fired from portals
+                  params = api.getCellParams(id, field);
+                  api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+                }
+              }
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleChange(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var handleClose = function handleClose(event, reason) {
+    if (rootProps.editMode === GridEditModes.Row) {
+      setOpen(false);
+      return;
+    }
+
+    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+      api.setCellMode(id, field, 'view');
+    }
+  };
+
+  var handleOpen = function handleOpen() {
+    setOpen(true);
+  };
+
+  useEnhancedEffect(function () {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
+    ref: ref,
+    inputRef: inputRef,
+    value: value,
+    onChange: handleChange,
+    open: open,
+    onOpen: handleOpen,
+    MenuProps: {
+      onClose: handleClose
+    },
+    error: error,
+    fullWidth: true
+  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect, {
+    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+  isValidating: PropTypes.bool
+} : void 0;
+export { GridEditSingleSelectCell };
+export var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {
+  return /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+};

package/legacy/components/cell/index.js

@@ -0,0 +1,5 @@
+export * from './GridCell';
+export * from './GridEditInputCell';
+export * from './GridEditSingleSelectCell';
+export * from './GridActionsCell';
+export * from './GridActionsCellItem';

package/legacy/components/columnHeaders/ColumnHeaderFilterIcon.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Badge from '@mui/material/Badge';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    icon: ['filterIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export function ColumnHeaderFilterIcon(props) {
+  var _rootProps$components;
+
+  var counter = props.counter;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+
+  var classes = useUtilityClasses(ownerState);
+  var toggleFilter = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    var _gridPreferencePanelS = gridPreferencePanelStateSelector(apiRef.current.state),
+        open = _gridPreferencePanelS.open,
+        openedPanelValue = _gridPreferencePanelS.openedPanelValue;
+
+    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
+      apiRef.current.hideFilterPanel();
+    } else {
+      apiRef.current.showFilterPanel();
+    }
+  }, [apiRef]);
+
+  if (!counter) {
+    return null;
+  }
+
+  var iconButton = /*#__PURE__*/_jsx(IconButton, {
+    onClick: toggleFilter,
+    color: "default",
+    "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
+    size: "small",
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(rootProps.components.ColumnFilteredIcon, {
+      className: classes.icon,
+      fontSize: "small"
+    })
+  });
+
+  return /*#__PURE__*/_jsx(rootProps.components.BaseTooltip, _extends({
+    title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
+    enterDelay: 1000
+  }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTooltip, {
+    children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
+        badgeContent: counter,
+        color: "default",
+        children: iconButton
+      }), counter === 1 && iconButton]
+    })
+  }));
+}

package/legacy/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      open = ownerState.open;
+  var slots = {
+    root: ['menuIcon', open && 'menuOpen'],
+    button: ['menuIconButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+export var ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(function (props) {
+  var column = props.column,
+      open = props.open,
+      columnMenuId = props.columnMenuId,
+      columnMenuButtonId = props.columnMenuButtonId,
+      iconButtonRef = props.iconButtonRef;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+
+  var classes = useUtilityClasses(ownerState);
+  var handleMenuIconClick = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    apiRef.current.toggleColumnMenu(column.field);
+  }, [apiRef, column.field]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      ref: iconButtonRef,
+      tabIndex: -1,
+      className: classes.button,
+      "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+      title: apiRef.current.getLocaleText('columnMenuLabel'),
+      size: "small",
+      onClick: handleMenuIconClick,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-haspopup": "true",
+      "aria-controls": columnMenuId,
+      id: columnMenuButtonId,
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuIcon, {
+        fontSize: "small"
+      })
+    })
+  });
+});