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

package/components/GridRowReorderCell.js

@@ -1,20 +1,11 @@
-"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.GridRowReorderCell = GridRowReorderCell;
-exports.renderRowReorderCell = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _xDataGrid = require("@mui/x-data-grid");
-var _internals = require("@mui/x-data-grid/internals");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _jsxRuntime = require("react/jsx-runtime");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     isDraggable,
@@ -24,14 +15,14 @@ const useUtilityClasses = ownerState => {
     root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
     placeholder: ['rowReorderCellPlaceholder']
   };
-  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+  return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridRowReorderCell(params) {
-  const apiRef = (0, _xDataGrid.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
-  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowMaximumTreeDepthSelector);
-  const editRowsState = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridEditRowsStateSelector);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   // eslint-disable-next-line no-underscore-dangle
   const cellValue = params.row.__reorder__ || params.id;
 
@@ -44,7 +35,7 @@ function GridRowReorderCell(params) {
   const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
-    if ((0, _internals.isEventTargetInPortal)(event)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
 
@@ -65,11 +56,11 @@ function GridRowReorderCell(params) {
   if (params.rowNode.type === 'footer') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+  return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.rowReorderIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.rowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
       className: classes.placeholder,
       children: cellValue
     })]
@@ -83,67 +74,67 @@ process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
   /**
    * GridApi that let you manipulate the grid.
    */
-  api: _propTypes.default.object.isRequired,
+  api: PropTypes.object.isRequired,
   /**
    * The mode of the cell.
    */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: _propTypes.default.object.isRequired,
+  colDef: PropTypes.object.isRequired,
   /**
    * The column field of the cell that triggered the event.
    */
-  field: _propTypes.default.string.isRequired,
+  field: PropTypes.string.isRequired,
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the element that should receive focus.
    * @ignore - do not document.
    */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
     })
   })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any,
+  formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: _propTypes.default.bool.isRequired,
+  hasFocus: PropTypes.bool.isRequired,
   /**
    * The grid row id.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If true, the cell is editable.
    */
-  isEditable: _propTypes.default.bool,
+  isEditable: PropTypes.bool,
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: PropTypes.any.isRequired,
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: _propTypes.default.object.isRequired,
+  rowNode: PropTypes.object.isRequired,
   /**
    * the tabIndex value.
    */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
   /**
    * The cell value.
    * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
-  value: _propTypes.default.any
+  value: PropTypes.any
 } : void 0;
-const renderRowReorderCell = params => {
+export { GridRowReorderCell };
+export const renderRowReorderCell = params => {
   if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
-};
-exports.renderRowReorderCell = renderRowReorderCell;
+  return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
+};

package/components/GridTreeDataGroupingCell.js

@@ -1,20 +1,12 @@
-"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.GridTreeDataGroupingCell = GridTreeDataGroupingCell;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _xDataGrid = require("@mui/x-data-grid");
-var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _jsxRuntime = require("react/jsx-runtime");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import Box from '@mui/material/Box';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -23,7 +15,7 @@ const useUtilityClasses = ownerState => {
     root: ['treeDataGroupingCell'],
     toggle: ['treeDataGroupingCellToggle']
   };
-  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+  return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridTreeDataGroupingCell(props) {
   const {
@@ -34,10 +26,10 @@ function GridTreeDataGroupingCell(props) {
     hideDescendantCount,
     offsetMultiplier = 2
   } = props;
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
   const classes = useUtilityClasses(rootProps);
-  const filteredDescendantCountLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilteredDescendantCountLookupSelector);
+  const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
   const handleClick = event => {
@@ -45,24 +37,24 @@ function GridTreeDataGroupingCell(props) {
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+  return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {
       ml: rowNode.depth * offsetMultiplier
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         size: "small",
         onClick: handleClick,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
       }, rootProps?.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })
       }))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    }), /*#__PURE__*/_jsxs("span", {
       children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
     })]
   });
@@ -75,66 +67,67 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * GridApi that let you manipulate the grid.
    */
-  api: _propTypes.default.object.isRequired,
+  api: PropTypes.object.isRequired,
   /**
    * The mode of the cell.
    */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: _propTypes.default.object.isRequired,
+  colDef: PropTypes.object.isRequired,
   /**
    * The column field of the cell that triggered the event.
    */
-  field: _propTypes.default.string.isRequired,
+  field: PropTypes.string.isRequired,
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the element that should receive focus.
    * @ignore - do not document.
    */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
     })
   })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any,
+  formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: _propTypes.default.bool.isRequired,
-  hideDescendantCount: _propTypes.default.bool,
+  hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If true, the cell is editable.
    */
-  isEditable: _propTypes.default.bool,
+  isEditable: PropTypes.bool,
   /**
    * The cell offset multiplier used for calculating cell offset (`rowNode.depth * offsetMultiplier` px).
    * @default 2
    */
-  offsetMultiplier: _propTypes.default.number,
+  offsetMultiplier: PropTypes.number,
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: PropTypes.any.isRequired,
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: _propTypes.default.object.isRequired,
+  rowNode: PropTypes.object.isRequired,
   /**
    * the tabIndex value.
    */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
   /**
    * The cell value.
    * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
-  value: _propTypes.default.any
-} : void 0;
+  value: PropTypes.any
+} : void 0;
+export { GridTreeDataGroupingCell };

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,27 +1,19 @@
-"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");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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,
@@ -31,9 +23,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 === _internals.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _internals.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 === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+  return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 const emptyFieldSx = {
   [`& input[value=""]:not(:focus)`]: {
@@ -41,16 +33,16 @@ const emptyFieldSx = {
   }
 };
 const defaultInputComponents = {
-  string: _xDataGrid.GridFilterInputValue,
-  number: _xDataGrid.GridFilterInputValue,
-  date: _xDataGrid.GridFilterInputDate,
-  dateTime: _xDataGrid.GridFilterInputDate,
-  boolean: _xDataGrid.GridFilterInputBoolean,
-  singleSelect: _xDataGrid.GridFilterInputSingleSelect,
+  string: GridFilterInputValue,
+  number: GridFilterInputValue,
+  date: GridFilterInputDate,
+  dateTime: GridFilterInputDate,
+  boolean: GridFilterInputBoolean,
+  singleSelect: GridFilterInputSingleSelect,
   actions: null,
   custom: null
 };
-const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
+const GridHeaderFilterCell = forwardRef((props, ref) => {
   const {
       colIndex,
       height,
@@ -68,18 +60,18 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
       showLeftBorder,
       showRightBorder
     } = props,
-    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)();
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const isRtl = useRtl();
+  const columnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
+  const rootProps = useGridRootProps();
   const cellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
+  const handleRef = useForkRef(ref, cellRef);
   const inputRef = React.useRef(null);
   const buttonRef = React.useRef(null);
-  const editingField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringEditFieldSelector);
+  const editingField = useGridSelector(apiRef, gridHeaderFilteringEditFieldSelector);
   const isEditing = editingField === colDef.field;
-  const menuOpenField = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilteringMenuSelector);
+  const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
   const isMenuOpen = menuOpenField === colDef.field;
 
   // TODO: Support for `isAnyOf` operator
@@ -89,8 +81,8 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     }
     return colDef.filterOperators.filter(operator => operator.value !== 'isAnyOf');
   }, [colDef.filterOperators]);
-  const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
-  const filterableColumnsLookup = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterableColumnLookupSelector);
+  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
+  const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   const isFilterReadOnly = React.useMemo(() => {
     if (!filterModel?.items.length) {
       return false;
@@ -105,7 +97,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
   }, [apiRef, item]);
   let headerFilterComponent;
   if (colDef.renderHeaderFilter) {
-    headerFilterComponent = colDef.renderHeaderFilter((0, _extends2.default)({}, props, {
+    headerFilterComponent = colDef.renderHeaderFilter(_extends({}, props, {
       inputRef
     }));
   }
@@ -123,7 +115,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   const onKeyDown = React.useCallback(event => {
-    if (isMenuOpen || (0, _internals.isNavigationKey)(event.key) || isFilterReadOnly) {
+    if (isMenuOpen || isNavigationKey(event.key) || isFilterReadOnly) {
       return;
     }
     switch (event.key) {
@@ -185,7 +177,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     onMouseDown: publish('headerFilterMouseDown', onMouseDown),
     onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
-  const ownerState = (0, _extends2.default)({}, rootProps, {
+  const ownerState = _extends({}, rootProps, {
     pinnedPosition,
     colDef,
     showLeftBorder,
@@ -194,11 +186,11 @@ const GridHeaderFilterCell = (0, _forwardRef.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${(0, _utils.unstable_capitalize)(item.operator)}`);
+  const label = currentOperator.headerLabel ?? apiRef.current.getLocaleText(`headerFilterOperator${capitalize(item.operator)}`);
   const isFilterActive = isApplied || hasFocus;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, headerClassName),
-    style: (0, _internals.attachPinnedStyle)((0, _extends2.default)({
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: clsx(classes.root, headerClassName),
+    style: attachPinnedStyle(_extends({
       height,
       width
     }, styleProp), isRtl, pinnedPosition, pinnedOffset),
@@ -207,8 +199,8 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
     "aria-label": headerFilterComponent == null ? colDef.headerName ?? colDef.field : undefined
   }, other, mouseEventsHandlers, {
     ref: handleRef,
-    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputComponent, _extends({
         apiRef: apiRef,
         item: item,
         inputRef: inputRef,
@@ -218,7 +210,7 @@ const GridHeaderFilterCell = (0, _forwardRef.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 => (0, _extends2.default)({}, state, {
+            apiRef.current.setState(state => _extends({}, state, {
               focus: {
                 cell: null,
                 columnHeader: null,
@@ -228,10 +220,10 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
             }));
           }
         },
-        label: (0, _utils.unstable_capitalize)(label),
+        label: capitalize(label),
         placeholder: "",
         isFilterActive: isFilterActive,
-        clearButton: showClearIcon && isApplied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterClearButton.GridHeaderFilterClearButton, {
+        clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
           onClick: clearFilterItem,
           disabled: isFilterReadOnly
         }) : null,
@@ -241,7 +233,7 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
         sx: colDef.type === 'date' || colDef.type === 'dateTime' || colDef.type === 'number' ? emptyFieldSx : undefined
       }, isNoInputOperator ? {
         value: ''
-      } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderFilterMenuContainer.GridHeaderFilterMenuContainer, {
+      } : {}, currentOperator?.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,
@@ -258,32 +250,33 @@ 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.default.object.isRequired,
-  colIndex: _propTypes.default.number.isRequired,
-  hasFocus: _propTypes.default.bool,
+  colDef: PropTypes.object.isRequired,
+  colIndex: PropTypes.number.isRequired,
+  hasFocus: PropTypes.bool,
   /**
    * Class name added to the column header cell.
    */
-  headerClassName: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
-  headerFilterMenuRef: _propTypes.default.shape({
-    current: _propTypes.default.object
+  headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  headerFilterMenuRef: PropTypes.shape({
+    current: PropTypes.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
+  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
   }).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
+  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
 } : void 0;
-const Memoized = exports.GridHeaderFilterCell = (0, _fastMemo.fastMemo)(GridHeaderFilterCell);
+const Memoized = fastMemo(GridHeaderFilterCell);
+export { Memoized as GridHeaderFilterCell };

package/components/headerFiltering/GridHeaderFilterClearButton.js

@@ -1,28 +1,21 @@
-"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");
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "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)({
+  const rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     tabIndex: -1,
     "aria-label": "Clear filter",
     size: "small",
     sx: sx
   }, props, rootProps.slotProps?.baseIconButton, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuClearIcon, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuClearIcon, {
       fontSize: "inherit"
     })
   }));
-}
+}
+export { GridHeaderFilterClearButton };