@mui/x-data-grid-pro 6.4.0 → 6.6.0

package/node/components/headerFiltering/GridHeaderFilterCell.js

@@ -0,0 +1,230 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterCell = void 0;
+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 _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridHeaderFilterAdornment = require("./GridHeaderFilterAdornment");
+var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const useUtilityClasses = ownerState => {
+  const {
+    colDef,
+    classes,
+    showColumnVerticalBorder
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showColumnVerticalBorder && 'columnHeader--withRightBorder']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      colIndex,
+      height,
+      hasFocus,
+      headerFilterComponent,
+      filterOperators,
+      width,
+      headerClassName,
+      colDef,
+      item,
+      headerFilterMenuRef,
+      InputComponentProps,
+      showClearIcon = true
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const columnFields = (0, _xDataGrid.gridVisibleColumnFieldsSelector)(apiRef);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const cellRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
+  const inputRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const isEditing = (0, _internals.unstable_gridHeaderFilteringEditFieldSelector)(apiRef) === colDef.field;
+  const isMenuOpen = (0, _internals.unstable_gridHeaderFilteringMenuSelector)(apiRef) === colDef.field;
+  const currentOperator = filterOperators[0];
+  const InputComponent = colDef.filterable ? currentOperator.InputComponent : null;
+  const applyFilterChanges = React.useCallback(updatedItem => {
+    if (item.value && !updatedItem.value) {
+      apiRef.current.deleteFilterItem(updatedItem);
+      return;
+    }
+    apiRef.current.upsertFilterItem(updatedItem);
+  }, [apiRef, item]);
+  const clearFilterItem = React.useCallback(() => {
+    apiRef.current.deleteFilterItem(item);
+  }, [apiRef, item]);
+  React.useLayoutEffect(() => {
+    if (hasFocus && !isMenuOpen) {
+      let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      if (isEditing && InputComponent) {
+        focusableElement = inputRef.current;
+      }
+      const elementToFocus = focusableElement || cellRef.current;
+      elementToFocus?.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
+  const onKeyDown = React.useCallback(event => {
+    if (isMenuOpen || (0, _internals.isNavigationKey)(event.key)) {
+      return;
+    }
+    switch (event.key) {
+      case 'Escape':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+        }
+        break;
+      case 'Enter':
+        if (isEditing) {
+          apiRef.current.stopHeaderFilterEditMode();
+          break;
+        }
+        if (event.metaKey || event.ctrlKey) {
+          headerFilterMenuRef.current = buttonRef.current;
+          apiRef.current.showHeaderFilterMenu(colDef.field);
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+      case 'Tab':
+        {
+          if (isEditing) {
+            const fieldToFocus = columnFields[colIndex + (event.shiftKey ? -1 : 1)] ?? null;
+            if (fieldToFocus) {
+              apiRef.current.startHeaderFilterEditMode(fieldToFocus);
+              apiRef.current.setColumnHeaderFilterFocus(fieldToFocus, event);
+            }
+          }
+          break;
+        }
+      default:
+        if (isEditing || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+          break;
+        }
+        apiRef.current.startHeaderFilterEditMode(colDef.field);
+        break;
+    }
+  }, [apiRef, colDef.field, colIndex, columnFields, headerFilterMenuRef, isEditing, isMenuOpen]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, colDef.field]);
+  const onMouseDown = React.useCallback(event => {
+    if (!hasFocus) {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+      apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
+    }
+  }, [apiRef, colDef.field, hasFocus]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onKeyDown: publish('headerFilterKeyDown', onKeyDown),
+    onClick: publish('headerFilterClick'),
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+  }), [onMouseDown, onKeyDown, publish]);
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    colDef
+  });
+  const classes = useUtilityClasses(ownerState);
+  const isNoInputOperator = filterOperators?.find(({
+    value
+  }) => item.operator === value)?.requiresFilterValue === false;
+  const isApplied = Boolean(item?.value) || isNoInputOperator;
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(item.operator)}`);
+  const isFilterActive = isApplied || hasFocus;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, headerClassName),
+    ref: handleRef,
+    style: {
+      height,
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    "aria-colindex": colIndex + 1,
+    "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
+  }, other, mouseEventsHandlers, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({
+      apiRef: apiRef,
+      item: item,
+      inputRef: inputRef,
+      applyValue: applyFilterChanges,
+      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
+      label: isFilterActive ? (0, _utils.unstable_capitalize)(label) : ' ',
+      isFilterActive: isFilterActive,
+      headerFilterMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterAdornment.GridHeaderFilterAdornment, {
+        operators: filterOperators,
+        item: item,
+        field: colDef.field,
+        applyFilterChanges: applyFilterChanges,
+        headerFilterMenuRef: headerFilterMenuRef,
+        buttonRef: buttonRef
+      }),
+      clearButton: showClearIcon && isApplied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterClearButton.GridHeaderFilterClearButton, {
+        onClick: clearFilterItem
+      }) : null,
+      disabled: isNoInputOperator,
+      tabIndex: -1
+    }, currentOperator?.InputComponentProps, InputComponentProps)) : null]
+  }));
+});
+exports.GridHeaderFilterCell = GridHeaderFilterCell;
+process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: _propTypes.default.object.isRequired,
+  colIndex: _propTypes.default.number.isRequired,
+  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
+  })),
+  hasFocus: _propTypes.default.bool,
+  /**
+   * Class name that will be added in the column header cell.
+   */
+  headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  headerFilterComponent: _propTypes.default.node,
+  headerFilterMenuRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }).isRequired,
+  height: _propTypes.default.number.isRequired,
+  InputComponentProps: _propTypes.default.object,
+  item: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    operator: _propTypes.default.string.isRequired,
+    value: _propTypes.default.any
+  }).isRequired,
+  showClearIcon: _propTypes.default.bool,
+  sortIndex: _propTypes.default.number,
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  width: _propTypes.default.number.isRequired
+} : void 0;

package/node/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterClearButton = GridHeaderFilterClearButton;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const sx = {
+  padding: '2px'
+};
+function GridHeaderFilterClearButton({
+  onClick
+}) {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    tabIndex: -1,
+    "aria-label": "Clear filter",
+    size: "small",
+    onClick: onClick,
+    sx: sx
+  }, rootProps.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterClearIcon, {
+      fontSize: "inherit"
+    })
+  }));
+}

package/node/components/headerFiltering/GridHeaderFilterMenu.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterMenu = GridHeaderFilterMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _utils = require("@mui/utils");
+var _xDataGrid = require("@mui/x-data-grid");
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function GridHeaderFilterMenu({
+  open,
+  field,
+  targetRef,
+  applyFilterChanges,
+  operators,
+  item,
+  id,
+  labelledBy
+}) {
+  const apiRef = (0, _xDataGrid.useGridApiContext)();
+  const hideMenu = React.useCallback(() => {
+    apiRef.current.hideHeaderFilterMenu();
+  }, [apiRef]);
+  const handleListKeyDown = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      hideMenu();
+    }
+  }, [hideMenu]);
+  if (!targetRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridMenu, {
+    placement: "bottom-start",
+    open: open,
+    target: targetRef.current,
+    onClickAway: hideMenu,
+    onExited: hideMenu,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+      "aria-labelledby": labelledBy,
+      id: id,
+      onKeyDown: handleListKeyDown,
+      children: operators.map((op, i) => {
+        const label = op?.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(op.value)}`);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+          onClick: () => {
+            applyFilterChanges((0, _extends2.default)({}, item, {
+              operator: op.value
+            }));
+            hideMenu();
+          },
+          autoFocus: i === 0 ? open : false,
+          selected: op.value === item.operator,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+            children: _constants.OPERATOR_SYMBOL_MAPPING[op.value]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+            children: label
+          })]
+        }, `${field}-${op.value}`);
+      })
+    })
+  });
+}

package/node/components/headerFiltering/constants.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPERATOR_SYMBOL_MAPPING = void 0;
+const OPERATOR_SYMBOL_MAPPING = {
+  contains: '∋',
+  equals: '=',
+  '=': '=',
+  '!=': '≠',
+  '>': '>',
+  '>=': '≥',
+  '<': '<',
+  '<=': '≤',
+  startsWith: '⊃',
+  endsWith: '⊂',
+  is: '=',
+  not: '≠',
+  isNot: '≠',
+  isEmpty: '∅',
+  isNotEmpty: '∉',
+  isIn: '∈',
+  isNotIn: '∉',
+  isLessThan: '<',
+  isLessThanOrEqual: '≤',
+  isGreaterThan: '>',
+  isGreaterThanOrEqual: '≥',
+  isBetween: '∈',
+  isNotBetween: '∉',
+  isAnyOf: '∈',
+  after: '>',
+  onOrAfter: '≥',
+  before: '<',
+  onOrBefore: '≤'
+};
+exports.OPERATOR_SYMBOL_MAPPING = OPERATOR_SYMBOL_MAPPING;

package/node/components/headerFiltering/index.js

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

package/node/components/index.js

@@ -46,4 +46,15 @@ Object.keys(_icons).forEach(function (key) {
       return _icons[key];
     }
   });
+});
+var _headerFiltering = require("./headerFiltering");
+Object.keys(_headerFiltering).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _headerFiltering[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _headerFiltering[key];
+    }
+  });
 });

package/node/constants/dataGridProDefaultSlotsComponents.js

@@ -9,9 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _internals = require("@mui/x-data-grid/internals");
 var _GridProColumnMenu = require("../components/GridProColumnMenu");
 var _GridColumnHeaders = require("../components/GridColumnHeaders");
+var _GridHeaderFilterMenu = require("../components/headerFiltering/GridHeaderFilterMenu");
+var _GridHeaderFilterCell = require("../components/headerFiltering/GridHeaderFilterCell");
 var _material = _interopRequireDefault(require("../material"));
 const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_DEFAULT_SLOTS_COMPONENTS, _material.default, {
   ColumnMenu: _GridProColumnMenu.GridProColumnMenu,
-  ColumnHeaders: _GridColumnHeaders.GridColumnHeaders
+  ColumnHeaders: _GridColumnHeaders.GridColumnHeaders,
+  HeaderFilterCell: _GridHeaderFilterCell.GridHeaderFilterCell,
+  HeaderFilterMenu: _GridHeaderFilterMenu.GridHeaderFilterMenu
 });
 exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["getColumnsToRender", "getRootProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const GridHeaderFilterRow = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'HeaderFilterRow',
+  overridesResolver: (props, styles) => styles.headerFilterRow
+})(() => ({
+  display: 'flex',
+  borderTop: '1px solid rgba(224, 224, 224, 1)'
+}));
+const useGridColumnHeaders = props => {
+  const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const {
+    headerGroupingMaxDepth,
+    hasOtherElementInTabSequence
+  } = props;
+  const columnHeaderFilterTabIndexState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridTabIndexColumnHeaderFilterSelector);
+  const _useGridColumnHeaders = (0, _internals.useGridColumnHeaders)((0, _extends2.default)({}, props, {
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence || columnHeaderFilterTabIndexState !== null
+    })),
+    {
+      getColumnsToRender,
+      getRootProps
+    } = _useGridColumnHeaders,
+    otherProps = (0, _objectWithoutPropertiesLoose2.default)(_useGridColumnHeaders, _excluded);
+  const headerFiltersRef = React.useRef(null);
+  apiRef.current.register('private', {
+    headerFiltersElementRef: headerFiltersRef
+  });
+  const headerFilterMenuRef = React.useRef(null);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const disableHeaderFiltering = !rootProps.unstable_headerFilters;
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * props.densityFactor);
+  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
+  const totalHeaderHeight = (0, _internals.getTotalHeaderHeight)(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
+  const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.unstable_gridFocusColumnHeaderFilterSelector);
+  const getColumnFilters = (params, other = {}) => {
+    if (disableHeaderFiltering) {
+      return null;
+    }
+    const columnsToRender = getColumnsToRender(params);
+    if (columnsToRender == null) {
+      return null;
+    }
+    const {
+      renderedColumns,
+      firstColumnToRender
+    } = columnsToRender;
+    const filters = [];
+    for (let i = 0; i < renderedColumns.length; i += 1) {
+      const colDef = renderedColumns[i];
+      const columnIndex = firstColumnToRender + i;
+      const hasFocus = columnHeaderFilterFocus?.field === colDef.field;
+      const isFirstColumn = columnIndex === 0;
+      const tabIndexField = columnHeaderFilterTabIndexState?.field;
+      const tabIndex = tabIndexField === colDef.field || isFirstColumn && !props.hasOtherElementInTabSequence ? 0 : -1;
+      let headerFilterComponent;
+      if (colDef.renderHeaderFilter) {
+        headerFilterComponent = colDef.renderHeaderFilter(apiRef.current.getColumnHeaderParams(colDef.field));
+      }
+      const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
+        field: colDef.field,
+        colDef
+      }) : colDef.headerClassName;
+
+      // TODO: Support for `isAnyOf` operator
+      const filterOperators = colDef.filterOperators?.filter(operator => operator.value !== 'isAnyOf') ?? [];
+      const item = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf') ?? (0, _internals.getGridFilter)(colDef);
+      filters.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
+        colIndex: columnIndex,
+        height: headerHeight,
+        width: colDef.computedWidth,
+        colDef: colDef,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        headerFilterMenuRef: headerFilterMenuRef,
+        headerFilterComponent: headerFilterComponent,
+        headerClassName: headerClassName,
+        filterOperators: filterOperators,
+        "data-field": colDef.field,
+        item: item
+      }, rootProps.slotProps?.headerFilterCell, other), `${colDef.field}-filter`));
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridHeaderFilterRow, {
+      ref: headerFiltersRef,
+      ownerState: rootProps,
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 2,
+      children: filters
+    });
+  };
+  const rootStyle = {
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
+    lineHeight: `${headerHeight}px`
+  };
+  return (0, _extends2.default)({}, otherProps, {
+    getColumnFilters,
+    getRootProps: disableHeaderFiltering ? getRootProps : (other = {}) => (0, _extends2.default)({
+      style: rootStyle
+    }, other)
+  });
+};
+exports.useGridColumnHeaders = useGridColumnHeaders;

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -97,6 +97,7 @@ const useGridColumnResize = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const headerFilterElementRef = React.useRef();
   const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = (0, _styles.useTheme)();
@@ -118,6 +119,12 @@ const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
+    const headerFilterElement = headerFilterElementRef.current;
+    if (headerFilterElement) {
+      headerFilterElement.style.width = `${newWidth}px`;
+      headerFilterElement.style.minWidth = `${newWidth}px`;
+      headerFilterElement.style.maxWidth = `${newWidth}px`;
+    }
     [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
@@ -133,7 +140,7 @@ const useGridColumnResize = (apiRef, props) => {
       div.style.maxWidth = finalWidth;
     });
   };
-  const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(nativeEvent => {
+  const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
     apiRef.current.updateColumns([colDefRef.current]);
@@ -149,7 +156,8 @@ const useGridColumnResize = (apiRef, props) => {
       }
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
-  });
+  };
+  const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(finishResize);
   const handleResizeMouseMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
@@ -187,6 +195,10 @@ const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
+    const headerFilterRowElement = apiRef.current.headerFiltersElementRef?.current;
+    if (headerFilterRowElement) {
+      headerFilterElementRef.current = headerFilterRowElement.querySelector(`[data-field="${colDef.field}"]`);
+    }
     colGroupingElementRef.current = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerElementRef?.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
@@ -195,21 +207,16 @@ const useGridColumnResize = (apiRef, props) => {
     initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    colElementRef.current.style.pointerEvents = 'none';
   });
   const handleTouchEnd = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-    apiRef.current.updateColumns([colDefRef.current]);
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    finishResize(nativeEvent);
   });
   const handleTouchMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
@@ -271,7 +278,10 @@ const useGridColumnResize = (apiRef, props) => {
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
-  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+    if (colElementRef.current) {
+      colElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, colElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {

package/node/hooks/features/detailPanel/useGridDetailPanel.js

@@ -176,15 +176,13 @@ const useGridDetailPanel = (apiRef, props) => {
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   const addDetailHeight = React.useCallback((initialValue, row) => {
     if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return (0, _extends2.default)({}, initialValue, {
-        detail: 0
-      });
+      initialValue.detail = 0;
+      return initialValue;
     }
     updateCachesIfNeeded();
     const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef);
-    return (0, _extends2.default)({}, initialValue, {
-      detail: heightCache[row.id] ?? 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
-    });
+    initialValue.detail = heightCache[row.id] ?? 0; // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+    return initialValue;
   }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
   const isFirstRender = React.useRef(true);