@mui/x-data-grid-pro 7.29.0 → 7.29.2

package/{esm → node}/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,19 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 _fastMemo = require("@mui/x-internals/fastMemo");
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
+var _GridHeaderFilterClearButton = require("./GridHeaderFilterClearButton");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["colIndex", "height", "hasFocus", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon", "pinnedPosition", "pinnedOffset", "style", "showLeftBorder", "showRightBorder"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import { fastMemo } from '@mui/x-internals/fastMemo';
-import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass, useGridSelector, GridFilterInputValue, GridFilterInputDate, GridFilterInputBoolean, GridFilterInputSingleSelect, gridFilterModelSelector, gridFilterableColumnLookupSelector } from '@mui/x-data-grid';
-import { PinnedColumnPosition, useGridPrivateApiContext, gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector, isNavigationKey, attachPinnedStyle } from '@mui/x-data-grid/internals';
-import { useRtl } from '@mui/system/RtlProvider';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { GridHeaderFilterMenuContainer } from "./GridHeaderFilterMenuContainer.js";
-import { GridHeaderFilterClearButton } from "./GridHeaderFilterClearButton.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     colDef,
@@ -23,9 +31,9 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _internals.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _internals.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
 const emptyFieldSx = {
   [`& input[value=""]:not(:focus)`]: {
@@ -33,16 +41,16 @@ const emptyFieldSx = {
   }
 };
 const defaultInputComponents = {
-  string: GridFilterInputValue,
-  number: GridFilterInputValue,
-  date: GridFilterInputDate,
-  dateTime: GridFilterInputDate,
-  boolean: GridFilterInputBoolean,
-  singleSelect: GridFilterInputSingleSelect,
+  string: _xDataGrid.GridFilterInputValue,
+  number: _xDataGrid.GridFilterInputValue,
+  date: _xDataGrid.GridFilterInputDate,
+  dateTime: _xDataGrid.GridFilterInputDate,
+  boolean: _xDataGrid.GridFilterInputBoolean,
+  singleSelect: _xDataGrid.GridFilterInputSingleSelect,
   actions: null,
   custom: null
 };
-const GridHeaderFilterCell = forwardRef((props, ref) => {
+const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       colIndex,
       height,
@@ -60,18 +68,18 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
       showLeftBorder,
       showRightBorder
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridPrivateApiContext();
-  const isRtl = useRtl();
-  const columnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  const rootProps = useGridRootProps();
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _internals.useGridPrivateApiContext)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const columnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const cellRef = React.useRef(null);
-  const handleRef = useForkRef(ref, cellRef);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
-  const editingField = useGridSelector(apiRef, gridHeaderFilteringEditFieldSelector);
+  const editingField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringEditFieldSelector);
   const isEditing = editingField === colDef.field;
-  const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
+  const menuOpenField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringMenuSelector);
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
@@ -81,8 +89,8 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     }
     return colDef.filterOperators.filter(operator => operator.value !== 'isAnyOf');
   }, [colDef.filterOperators]);
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
+  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
+  const filterableColumnsLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
     if (!filterModel?.items.length) {
       return false;
@@ -97,7 +105,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
   }, [apiRef, item]);
   let headerFilterComponent;
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter(_extends({}, props, {
+    headerFilterComponent = colDef.renderHeaderFilter((0, _extends2.default)({}, props, {
       inputRef
     }));
   }
@@ -115,7 +123,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   const onKeyDown = React.useCallback(event => {
-    if (isMenuOpen || isNavigationKey(event.key) || isFilterReadOnly) {
+    if (isMenuOpen || (0, _internals.isNavigationKey)(event.key) || isFilterReadOnly) {
       return;
     }
     switch (event.key) {
@@ -177,7 +185,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const ownerState = _extends({}, rootProps, {
+  const ownerState = (0, _extends2.default)({}, rootProps, {
     pinnedPosition,
     colDef,
     showLeftBorder,
@@ -186,11 +194,11 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
   const classes = useUtilityClasses(ownerState);
   const isNoInputOperator = currentOperator.requiresFilterValue === false;
   const isApplied = item?.value !== undefined || isNoInputOperator;
-  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${(0, _utils.unstable_capitalize)(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
-  return /*#__PURE__*/_jsxs("div", _extends({
-    className: clsx(classes.root, headerClassName),
-    style: attachPinnedStyle(_extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, headerClassName),
+    style: (0, _internals.attachPinnedStyle)((0, _extends2.default)({
       height,
       width
     }, styleProp), isRtl, pinnedPosition, pinnedOffset),
@@ -199,8 +207,8 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
     ref: handleRef,
-    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(InputComponent, _extends({
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,
         inputRef: inputRef,
@@ -210,7 +218,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
           apiRef.current.stopHeaderFilterEditMode();
           // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
           if (!event.relatedTarget?.className.includes('columnHeader')) {
-            apiRef.current.setState(state => _extends({}, state, {
+            apiRef.current.setState(state => (0, _extends2.default)({}, state, {
               focus: {
                 cell: null,
                 columnHeader: null,
@@ -220,10 +228,10 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
             }));
           }
         },
-        label: capitalize(label),
+        label: (0, _utils.unstable_capitalize)(label),
         placeholder: "",
         isFilterActive: isFilterActive,
-        clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+        clearButton: showClearIcon && isApplied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterClearButton.GridHeaderFilterClearButton, {
           onClick: clearFilterItem,
           disabled: isFilterReadOnly
         }) : null,
@@ -233,7 +241,7 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
         sx: colDef.type === 'date' || colDef.type === 'dateTime' || colDef.type === 'number' ? emptyFieldSx : undefined
       }, isNoInputOperator ? {
         value: ''
-      } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
+      } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterMenuContainer.GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,
@@ -250,33 +258,32 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  colDef: PropTypes.object.isRequired,
-  colIndex: PropTypes.number.isRequired,
-  hasFocus: PropTypes.bool,
+  colDef: _propTypes.default.object.isRequired,
+  colIndex: _propTypes.default.number.isRequired,
+  hasFocus: _propTypes.default.bool,
   /**
    * Class name added to the column header cell.
    */
-  headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  headerFilterMenuRef: PropTypes.shape({
-    current: PropTypes.object
+  headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  headerFilterMenuRef: _propTypes.default.shape({
+    current: _propTypes.default.object
   }).isRequired,
-  height: PropTypes.number.isRequired,
-  InputComponentProps: PropTypes.object,
-  item: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    operator: PropTypes.string.isRequired,
-    value: PropTypes.any
+  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,
-  pinnedOffset: PropTypes.number,
-  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]),
-  showClearIcon: PropTypes.bool,
-  showLeftBorder: PropTypes.bool.isRequired,
-  showRightBorder: PropTypes.bool.isRequired,
-  sortIndex: PropTypes.number,
-  style: PropTypes.object,
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  width: PropTypes.number.isRequired
+  pinnedOffset: _propTypes.default.number,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]),
+  showClearIcon: _propTypes.default.bool,
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
+  sortIndex: _propTypes.default.number,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  width: _propTypes.default.number.isRequired
 } : void 0;
-const Memoized = fastMemo(GridHeaderFilterCell);
-export { Memoized as GridHeaderFilterCell };
+const Memoized = exports.GridHeaderFilterCell = (0, _fastMemo.fastMemo)(GridHeaderFilterCell);

package/node/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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");
+const sx = {
+  padding: '2px'
+};
+function GridHeaderFilterClearButton(props) {
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    tabIndex: -1,
+    "aria-label": "Clear filter",
+    size: "small",
+    sx: sx
+  }, props, rootProps.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuClearIcon, {
+      fontSize: "inherit"
+    })
+  }));
+}

package/node/components/headerFiltering/GridHeaderFilterMenu.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterMenu = GridHeaderFilterMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _utils = require("@mui/utils");
+var _xDataGrid = require("@mui/x-data-grid");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridHeaderFilterMenu({
+  open,
+  field,
+  target,
+  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 (!target) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridMenu, {
+    placement: "bottom-end",
+    open: open,
+    target: target,
+    onClose: 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.jsx)(_MenuItem.default, {
+          onClick: () => {
+            applyFilterChanges((0, _extends2.default)({}, item, {
+              operator: op.value
+            }));
+            hideMenu();
+          },
+          autoFocus: i === 0 ? open : false,
+          selected: op.value === item.operator,
+          children: label
+        }, `${field}-${op.value}`);
+      })
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: _propTypes.default.func.isRequired,
+  field: _propTypes.default.string.isRequired,
+  id: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  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,
+  labelledBy: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
+  open: _propTypes.default.bool.isRequired,
+  operators: _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
+  })).isRequired,
+  target: _utils.HTMLElementType
+} : void 0;

package/node/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridHeaderFilterMenuContainer = GridHeaderFilterMenuContainer;
+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 _xDataGrid = require("@mui/x-data-grid");
+var _utils = require("@mui/utils");
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuRef", "disabled"];
+const sx = {
+  width: 22,
+  height: 22,
+  margin: 'auto 0 10px 5px'
+};
+function GridHeaderFilterMenuContainer(props) {
+  const {
+      operators,
+      item,
+      field,
+      buttonRef,
+      headerFilterMenuRef,
+      disabled = false
+    } = props,
+    others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const buttonId = (0, _utils.unstable_useId)();
+  const menuId = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _xDataGrid.useGridApiContext)();
+  const menuOpenField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringMenuSelector);
+  const open = Boolean(menuOpenField === field && headerFilterMenuRef.current);
+  const handleClick = event => {
+    headerFilterMenuRef.current = event.currentTarget;
+    apiRef.current.showHeaderFilterMenu(field);
+  };
+  if (!rootProps.slots.headerFilterMenu) {
+    return null;
+  }
+  const label = apiRef.current.getLocaleText('filterPanelOperator');
+  const labelString = label ? String(label) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+      id: buttonId,
+      ref: buttonRef,
+      "aria-label": labelString,
+      title: labelString,
+      "aria-controls": menuId,
+      "aria-expanded": open ? 'true' : undefined,
+      "aria-haspopup": "true",
+      tabIndex: -1,
+      size: "small",
+      onClick: handleClick,
+      sx: sx,
+      disabled: disabled
+    }, rootProps.slotProps?.baseIconButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
+        fontSize: "small"
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterMenu, (0, _extends2.default)({
+      field: field,
+      open: open,
+      item: item,
+      target: headerFilterMenuRef.current,
+      operators: operators,
+      labelledBy: buttonId,
+      id: menuId
+    }, others))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  applyFilterChanges: _propTypes.default.func.isRequired,
+  buttonRef: _utils.refType,
+  disabled: _propTypes.default.bool,
+  field: _propTypes.default.string.isRequired,
+  headerFilterMenuRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }).isRequired,
+  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,
+  operators: _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
+  })).isRequired
+} : void 0;

package/node/components/headerFiltering/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridHeaderFilterMenuContainer = require("./GridHeaderFilterMenuContainer");
+Object.keys(_GridHeaderFilterMenuContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridHeaderFilterMenuContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridHeaderFilterMenuContainer[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];
+    }
+  });
+});
+var _GridHeaderFilterMenu = require("./GridHeaderFilterMenu");
+Object.keys(_GridHeaderFilterMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridHeaderFilterMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridHeaderFilterMenu[key];
+    }
+  });
+});

package/node/components/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridTreeDataGroupingCell = require("./GridTreeDataGroupingCell");
+Object.keys(_GridTreeDataGroupingCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridTreeDataGroupingCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridTreeDataGroupingCell[key];
+    }
+  });
+});
+var _GridColumnMenuPinningItem = require("./GridColumnMenuPinningItem");
+Object.keys(_GridColumnMenuPinningItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnMenuPinningItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnMenuPinningItem[key];
+    }
+  });
+});
+var _GridDetailPanelToggleCell = require("./GridDetailPanelToggleCell");
+Object.keys(_GridDetailPanelToggleCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridDetailPanelToggleCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridDetailPanelToggleCell[key];
+    }
+  });
+});
+var _GridRowReorderCell = require("./GridRowReorderCell");
+Object.keys(_GridRowReorderCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridRowReorderCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridRowReorderCell[key];
+    }
+  });
+});
+var _icons = require("../material/icons");
+Object.keys(_icons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _icons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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/components/reexports.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GRID_COLUMN_MENU_SLOTS", {
+  enumerable: true,
+  get: function () {
+    return _GridProColumnMenu.GRID_COLUMN_MENU_SLOTS_PRO;
+  }
+});
+Object.defineProperty(exports, "GRID_COLUMN_MENU_SLOT_PROPS", {
+  enumerable: true,
+  get: function () {
+    return _GridProColumnMenu.GRID_COLUMN_MENU_SLOT_PROPS_PRO;
+  }
+});
+Object.defineProperty(exports, "GridColumnMenu", {
+  enumerable: true,
+  get: function () {
+    return _GridProColumnMenu.GridProColumnMenu;
+  }
+});
+var _GridProColumnMenu = require("./GridProColumnMenu");

package/node/constants/dataGridProDefaultSlotsComponents.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = void 0;
+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 _GridDetailPanels = require("../components/GridDetailPanels");
+var _GridPinnedRows = require("../components/GridPinnedRows");
+var _material = _interopRequireDefault(require("../material"));
+const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, _internals.DATA_GRID_DEFAULT_SLOTS_COMPONENTS, _material.default, {
+  columnMenu: _GridProColumnMenu.GridProColumnMenu,
+  columnHeaders: _GridColumnHeaders.GridColumnHeaders,
+  detailPanels: _GridDetailPanels.GridDetailPanels,
+  headerFilterCell: _GridHeaderFilterCell.GridHeaderFilterCell,
+  headerFilterMenu: _GridHeaderFilterMenu.GridHeaderFilterMenu,
+  pinnedRows: _GridPinnedRows.GridPinnedRows
+});