@mui/x-data-grid 5.12.1 → 5.13.0

package/modern/locales/viVN.js

@@ -106,6 +106,7 @@ const viVNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/zhCN.js

@@ -106,6 +106,7 @@ const zhCNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/utils/keyboardUtils.js

@@ -8,9 +8,10 @@ export const isSpaceKey = key => key === ' ';
 export const isArrowKeys = key => key.indexOf('Arrow') === 0;
 export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
 export const isPageKeys = key => key.indexOf('Page') === 0;
-export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
-const printableCharRegex = /^(\p{L}|\p{M}\p{L}|\p{M}|\p{N}|\p{Z}|\p{S}|\p{P})$/iu;
-export const isPrintableKey = key => printableCharRegex.test(key);
+export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace'; // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
+// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+
+export const isPrintableKey = key => key.length === 1;
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];

package/node/DataGrid/DataGrid.js

@@ -109,7 +109,7 @@ DataGridRaw.propTypes = {
   columns: (0, _utils.chainPropTypes)(_propTypes.default.array.isRequired, props => {
     // @ts-ignore because otherwise `build:api` doesn't work
     if (props.columns && props.columns.some(column => column.resizable)) {
-      return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
@@ -679,14 +679,14 @@ DataGridRaw.propTypes = {
    */
   pageSize: (0, _utils.chainPropTypes)(_propTypes.default.number, props => {
     if (props.pageSize && props.pageSize > _useDataGridProps.MAX_PAGE_SIZE) {
-      return new Error([`MUI: \`<DataGrid pageSize={${props.pageSize}} />\` is not a valid prop.`, `Only page size below ${_useDataGridProps.MAX_PAGE_SIZE} is available in the MIT version.`, '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
+      return new Error([`MUI: \`<DataGrid pageSize={${props.pageSize}} />\` is not a valid prop.`, `Only page size below ${_useDataGridProps.MAX_PAGE_SIZE} is available in the MIT version.`, '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
 
     return null;
   }),
   pagination: props => {
     if (props.pagination === false) {
-      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to disable the pagination.'].join('\n'));
+      return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));
     }
 
     return null;
@@ -766,7 +766,7 @@ DataGridRaw.propTypes = {
    */
   selectionModel: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]), props => {
     if (!props.checkboxSelection && Array.isArray(props.selectionModel) && props.selectionModel.length > 1) {
-      return new Error([`MUI: \`<DataGrid selectionModel={${JSON.stringify(props.selectionModel)}} />\` is not a valid prop.`, 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to the DataGridPro component to unlock multiple selection.'].join('\n'));
+      return new Error([`MUI: \`<DataGrid selectionModel={${JSON.stringify(props.selectionModel)}} />\` is not a valid prop.`, 'selectionModel can only be of 1 item in DataGrid.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
 
     return null;

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
+exports.GRID_CHECKBOX_SELECTION_FIELD = exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,8 +25,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+exports.GRID_CHECKBOX_SELECTION_FIELD = GRID_CHECKBOX_SELECTION_FIELD;
 const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/node/colDef/gridNumericColDef.js

@@ -25,7 +25,7 @@ const GRID_NUMERIC_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   valueParser: value => value === '' ? null : Number(value),
   valueFormatter: ({
     value
-  }) => value && (0, _utils.isNumber)(value) && value.toLocaleString() || value,
+  }) => (0, _utils.isNumber)(value) ? value.toLocaleString() : value || '',
   filterOperators: (0, _gridNumericOperators.getGridNumericOperators)(),
   getApplyQuickFilterFn: _gridNumericOperators.getGridNumericQuickFilterFn
 });

package/node/colDef/gridStringOperators.js

@@ -26,14 +26,15 @@ const getGridStringQuickFilterFn = value => {
 
 exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
 
-const getGridStringOperators = () => [{
+const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {
     if (!filterItem.value) {
       return null;
     }
 
-    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItem.value), 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp((0, _utils.escapeRegExp)(filterItemValue), 'i');
     return ({
       value
     }) => {
@@ -48,6 +49,7 @@ const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
@@ -55,7 +57,7 @@ const getGridStringOperators = () => [{
     return ({
       value
     }) => {
-      return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
     };
   },
   InputComponent: _GridFilterInputValue.GridFilterInputValue
@@ -66,7 +68,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItem.value)}.*$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`^${(0, _utils.escapeRegExp)(filterItemValue)}.*$`, 'i');
     return ({
       value
     }) => {
@@ -81,7 +84,8 @@ const getGridStringOperators = () => [{
       return null;
     }
 
-    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItem.value)}$`, 'i');
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(`.*${(0, _utils.escapeRegExp)(filterItemValue)}$`, 'i');
     return ({
       value
     }) => {
@@ -114,13 +118,14 @@ const getGridStringOperators = () => [{
       return null;
     }
 
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.map(val => val.trim());
     const collator = new Intl.Collator(undefined, {
       sensitivity: 'base',
       usage: 'search'
     });
     return ({
       value
-    }) => value != null ? filterItem.value.some(filterValue => {
+    }) => value != null ? filterItemValue.some(filterValue => {
       return collator.compare(filterValue, value.toString() || '') === 0;
     }) : false;
   },

package/node/components/GridRow.js

@@ -139,7 +139,7 @@ function GridRow(props) {
       // Fallback for IE
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
     }
-  });
+  }, [apiRef, rowHeight, rowId]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the

package/node/components/cell/GridBooleanCell.js

@@ -19,6 +19,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "getValue"];
@@ -39,10 +41,10 @@ const useUtilityClasses = ownerState => {
 
 const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   const {
-    value,
-    api
+    value
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
     classes: rootProps.classes
@@ -52,7 +54,7 @@ const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/node/components/cell/GridEditBooleanCell.js

@@ -26,6 +26,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
@@ -50,13 +52,13 @@ function GridEditBooleanCell(props) {
   const {
     id: idProp,
     value,
-    api,
     field,
     className,
     hasFocus,
     onValueChange
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const inputRef = React.useRef(null);
   const id = (0, _utils.unstable_useId)();
   const [valueState, setValueState] = React.useState(value);
@@ -73,12 +75,12 @@ function GridEditBooleanCell(props) {
     }
 
     setValueState(newValue);
-    await api.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp, onValueChange]);
+  }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/node/components/cell/GridEditDateCell.js

@@ -26,6 +26,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
@@ -48,7 +50,6 @@ function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
-    api,
     field,
     colDef,
     hasFocus,
@@ -57,6 +58,7 @@ function GridEditDateCell(props) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isDateTime = colDef.type === 'dateTime';
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const inputRef = React.useRef();
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
@@ -116,12 +118,12 @@ function GridEditDateCell(props) {
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       var _valueTransformed$par, _state$parsed;

package/node/components/cell/GridEditInputCell.js

@@ -32,6 +32,8 @@ var _index = require("../icons/index");
 
 var _GridFilterInputValue = require("../panel/filterPanel/GridFilterInputValue");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
@@ -71,7 +73,6 @@ function GridEditInputCell(props) {
   const {
     id,
     value,
-    api,
     field,
     colDef,
     hasFocus,
@@ -80,6 +81,7 @@ function GridEditInputCell(props) {
     onValueChange
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
   const ownerState = {
@@ -94,13 +96,13 @@ function GridEditInputCell(props) {
     }
 
     setValueState(newValue);
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id, onValueChange]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/node/components/cell/GridEditSingleSelectCell.js

@@ -28,6 +28,8 @@ var _gridEditRowModel = require("../../models/gridEditRowModel");
 
 var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
@@ -62,6 +64,7 @@ function GridEditSingleSelectCell(props) {
     onValueChange
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const ref = React.useRef();
   const inputRef = React.useRef();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -110,7 +113,7 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await api.setEditCellValue({
+    const isValid = await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
@@ -125,18 +128,18 @@ function GridEditSingleSelectCell(props) {
       return;
     }
 
-    const canCommit = await Promise.resolve(api.commitCellChange({
+    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
       id,
       field
     }, event));
 
     if (canCommit) {
-      api.setCellMode(id, field, 'view');
+      apiRef.current.setCellMode(id, field, 'view');
 
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
-        const params = api.getCellParams(id, field);
-        api.publishEvent('cellNavigationKeyDown', params, event);
+        const params = apiRef.current.getCellParams(id, field);
+        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -151,13 +154,13 @@ function GridEditSingleSelectCell(props) {
       var _rootProps$experiment2;
 
       if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id,
           field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -187,6 +187,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: headerCellRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
@@ -199,7 +200,8 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
@@ -209,8 +211,8 @@ function GridColumnHeaderItem(props) {
         className: classes.titleContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -108,7 +108,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -138,7 +138,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/node/components/containers/GridRootStyles.js

@@ -176,7 +176,7 @@ const GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/node/components/panel/GridColumnsPanel.js

@@ -112,7 +112,7 @@ function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
     } // TODO v6: Remove
 
 
@@ -166,7 +166,6 @@ function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -183,13 +182,11 @@ function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -45,7 +45,8 @@ var _gridClasses = require("../../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+      _excluded2 = ["InputComponentProps"];
 
 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); }
 
@@ -175,6 +176,10 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
   const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const OptionComponent = isBaseSelectNative ? 'option' : _MenuItem.default;
+  const {
+    InputComponentProps
+  } = valueInputProps,
+        valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(valueInputProps, _excluded2);
   const sortedFilterableColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -345,14 +350,14 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({
       variant: "standard",
       as: rootProps.components.BaseFormControl
-    }, baseFormControlProps, valueInputProps, {
-      className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputProps.className),
+    }, baseFormControlProps, valueInputPropsOther, {
+      className: (0, _clsx.default)(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
       children: currentOperator != null && currentOperator.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef
-      }, currentOperator.InputComponentProps)) : null
+      }, currentOperator.InputComponentProps, InputComponentProps)) : null
     }))]
   }));
 });

package/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -54,8 +54,8 @@ function GridFilterInputBoolean(props) {
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
-    variant: "standard",
     select: true,
+    variant: "standard",
     SelectProps: (0, _extends2.default)({
       native: isSelectNative,
       displayEmpty: true

package/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -79,8 +79,8 @@ function GridFilterInputDate(props) {
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
     value: filterValueState,
     onChange: onFilterChange,
-    type: type || 'text',
     variant: "standard",
+    type: type || 'text',
     InputLabelProps: {
       shrink: true
     },
@@ -100,7 +100,9 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: _propTypes.default.any.isRequired,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object.isRequired
+  }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */