@mui/x-data-grid 7.23.5 → 7.23.6

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.23.6
+
+_Jan 9, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🌍 Improve Dutch (nl-NL) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@josteinjhauge, @derek-0000, @nusr, @k-rajat19, @tomashauser.
+Following are all team members who have contributed to this release:
+@flaviendelangle, @LukasTy, @MBilalShafi, @arminmeh, @oliviertassinari, @cherniavskii.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.23.6`
+
+- [DataGrid] Improve React 19 support (#16048) @LukasTy
+- [DataGrid] Add `name` attribute to selection checkboxes (#16041) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16068) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16039) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.23.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.23.6`.
+
+#### `@mui/x-data-grid-premium@7.23.6` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.23.6`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.23.6`
+
+- [pickers] Improve React 19 support (#16048) @LukasTy
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16057) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16083) @josteinjhauge
+- [pickers] Support `date-fns-jalali` v4 (#16013) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.23.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.23.6`.
+
+### Charts
+
+#### `@mui/x-charts@7.23.6`
+
+- [charts] Improve React 19 support (#16048) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@7.23.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.23.6`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.23.6`
+
+- [TreeView] Improve React 19 support (#16048) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.23.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.23.6`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#16047) @k-rajat19
+- [docs] Fix doc warning for automatic children selection on tree view (#16037) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16088) @tomashauser
+
+### Core
+
+- [core] Clarify the release strategy (#16012) @MBilalShafi
+- [core] Update the `release:version` docs (#16040) @cherniavskii
+
 ## 7.23.5
 
 _Dec 27, 2024_

package/DataGrid/useDataGridComponent.d.ts

@@ -1,3 +1,3 @@
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-export declare const useDataGridComponent: (inputApiRef: React.MutableRefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").MutableRefObject<GridPrivateApiCommunity>;
+export declare const useDataGridComponent: (inputApiRef: React.RefObject<GridApiCommunity> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;

package/components/cell/GridActionsCellItem.d.ts

@@ -3,13 +3,13 @@ import { IconButtonProps } from '@mui/material/IconButton';
 import { MenuItemProps } from '@mui/material/MenuItem';
 interface GridActionsCellItemCommonProps {
     label: string;
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
     component?: React.ElementType;
 }
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
     showInMenu?: false;
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
 } & Omit<IconButtonProps, 'component'>) | ({
     showInMenu: true;
     /**
@@ -21,7 +21,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
 } & Omit<MenuItemProps, 'component'>));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
     showInMenu?: false;
-    icon: React.ReactElement;
+    icon: React.ReactElement<any>;
 } & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
     /**

package/components/cell/GridEditDateCell.js

@@ -35,7 +35,7 @@ function GridEditDateCell(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isDateTime = colDef.type === 'dateTime';
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
     if (valueProp == null) {

package/components/cell/GridEditInputCell.js

@@ -47,7 +47,7 @@ const GridEditInputCell = forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const [valueState, setValueState] = React.useState(value);
   const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {

package/components/cell/GridEditSingleSelectCell.js

@@ -30,8 +30,8 @@ function GridEditSingleSelectCell(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
-  const ref = React.useRef();
-  const inputRef = React.useRef();
+  const ref = React.useRef(null);
+  const inputRef = React.useRef(null);
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;

package/components/columnHeaders/ColumnHeaderMenuIcon.d.ts

@@ -5,6 +5,6 @@ export interface ColumnHeaderMenuIconProps {
     columnMenuId: string;
     columnMenuButtonId: string;
     open: boolean;
-    iconButtonRef: React.RefObject<HTMLButtonElement>;
+    iconButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
 export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => React.JSX.Element>;

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -88,7 +88,8 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_row'
     },
     onKeyDown: handleKeyDown,
     indeterminate: isIndeterminate,

package/components/columnSelection/GridHeaderCheckbox.js

@@ -42,13 +42,16 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
       return selection;
     }
     return selection.filter(id => {
+      if (rootProps.keepNonExistentRowsSelected) {
+        return true;
+      }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
         return false;
       }
       return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
     });
-  }, [apiRef, rootProps.isRowSelectable, selection]);
+  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
@@ -101,7 +104,8 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_all_rows'
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,

package/components/panel/GridPanel.d.ts

@@ -16,7 +16,7 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "component" | "sx" | "components" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps & React.RefAttributes<HTMLDivElement>, "id" | "children" | "tabIndex" | "color" | "content" | "translate" | "container" | "transition" | "slot" | "style" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "components" | "componentsProps" | "slotProps" | "slots" | "open" | "component" | "disablePortal" | "anchorEl" | "keepMounted" | "modifiers" | "placement" | "popperOptions" | "popperRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -22,17 +22,17 @@ function GridFilterInputValue(props) {
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value, type));
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
   const onFilterChange = React.useCallback(event => {
-    const value = sanitizeFilterItemValue(event.target.value, type);
+    const value = sanitizeFilterItemValue(event.target.value);
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = _extends({}, item, {
-        value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -42,14 +42,14 @@ function GridFilterInputValue(props) {
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value == null) {
-      setFilterValueState(sanitizeFilterItemValue(item.value, type));
+      setFilterValueState(sanitizeFilterItemValue(item.value));
     }
-  }, [id, item, type]);
+  }, [id, item]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState === undefined ? '' : String(filterValueState),
+    value: filterValueState ?? '',
     onChange: onFilterChange,
     variant: variant,
     type: type || 'text',
@@ -71,13 +71,10 @@ function GridFilterInputValue(props) {
     inputRef: focusElementRef
   }, others, rootProps.slotProps?.baseTextField));
 }
-function sanitizeFilterItemValue(value, type) {
+function sanitizeFilterItemValue(value) {
   if (value == null || value === '') {
     return undefined;
   }
-  if (type === 'number') {
-    return Number(value);
-  }
   return String(value);
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -29,7 +29,7 @@ export interface GridPipeProcessingLookup {
     };
     exportMenu: {
         value: {
-            component: React.ReactElement;
+            component: React.ReactElement<any>;
             componentName: string;
         }[];
         context: any;

package/hooks/core/pipeProcessing/useGridPipeProcessing.d.ts

@@ -29,4 +29,4 @@ import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
  *   * a processor is registered.
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
-export declare const useGridPipeProcessing: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;
+export declare const useGridPipeProcessing: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: () => void) => void;
+export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.RefObject<PrivateApi>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeApplier(group, id.current, callback);

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.RefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessorName, GridStrategyProcessor } from './gridStrategyProcessingApi';
-export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends GridStrategyProcessorName>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;
+export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends GridStrategyProcessorName>(apiRef: React.RefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -45,4 +45,4 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * - sorting algorithm.
  * - filtering algorithm.
  */
-export declare const useGridStrategyProcessing: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;
+export declare const useGridStrategyProcessing: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridApiInitialization.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 export declare function unwrapPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(publicApi: Api): PrivateApi;
-export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): React.MutableRefObject<PrivateApi>;
+export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.RefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): React.RefObject<PrivateApi>;

package/hooks/core/useGridApiInitialization.js

@@ -68,8 +68,8 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  const publicApiRef = React.useRef();
-  const privateApiRef = React.useRef();
+  const publicApiRef = React.useRef(null);
+  const privateApiRef = React.useRef(null);
   if (!privateApiRef.current) {
     privateApiRef.current = createPrivateAPI(publicApiRef);
   }

package/hooks/core/useGridInitialization.d.ts

@@ -4,4 +4,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: DataGridProcessedProps) => React.MutableRefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.RefObject<Api> | undefined, props: DataGridProcessedProps) => React.RefObject<PrivateApi>;

package/hooks/core/useGridIsRtl.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridIsRtl: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;
+export declare const useGridIsRtl: (apiRef: React.RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridLocaleText.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLocaleText: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "localeText">) => void;
+export declare const useGridLocaleText: (apiRef: React.RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "localeText">) => void;

package/hooks/core/useGridLoggerFactory.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLoggerFactory: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "logger" | "logLevel">) => void;
+export declare const useGridLoggerFactory: (apiRef: React.RefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "logger" | "logLevel">) => void;

package/hooks/core/useGridRefs.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.MutableRefObject<PrivateApi>) => void;
+export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.RefObject<PrivateApi>) => void;

package/hooks/core/useGridStateInitialization.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.MutableRefObject<PrivateApi>) => void;
+export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.RefObject<PrivateApi>) => void;

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;
+export declare const useGridColumnResize: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -70,7 +70,7 @@ function preventClick(event) {
  * is disabled.
  */
 function useColumnVirtualizationDisabled(apiRef) {
-  const promise = React.useRef();
+  const promise = React.useRef(undefined);
   const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
   const value = useGridSelector(apiRef, selector);
   React.useEffect(() => {
@@ -184,10 +184,10 @@ export const useGridColumnResize = (apiRef, props) => {
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef();
-  const resizeDirection = React.useRef();
+  const initialOffsetToSeparator = React.useRef(null);
+  const resizeDirection = React.useRef(null);
   const stopResizeEventTimeout = useTimeout();
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
     const prevWidth = refs.columnHeaderElement.offsetWidth;

package/hooks/features/dimensions/useGridDimensions.js

@@ -67,7 +67,7 @@ export function useGridDimensions(apiRef, props) {
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
   React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
-  const previousSize = React.useRef();
+  const previousSize = React.useRef(undefined);
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {
     apiRef.current.setState(state => _extends({}, state, {

package/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,

package/hooks/features/export/useGridPrintExport.js

@@ -44,7 +44,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,8 +15,8 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
+  const hideTimeout = React.useRef(undefined);
+  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS

package/hooks/features/rowSelection/useGridRowSelectionPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridRowSelectionPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+export declare const useGridRowSelectionPreProcessors: (apiRef: React.RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/hooks/features/rows/useGridRowsPreProcessors.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-export declare const useGridRowsPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => void;
+export declare const useGridRowsPreProcessors: (apiRef: React.RefObject<GridPrivateApiCommunity>) => void;

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -15,7 +15,7 @@ export declare const useGridVirtualScroller: () => {
         ref: (node: HTMLDivElement | null) => (() => void) | undefined;
     };
     getScrollerProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;
@@ -31,11 +31,11 @@ export declare const useGridVirtualScroller: () => {
         role: string;
     };
     getScrollbarVerticalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
     getScrollbarHorizontalProps: () => {
-        ref: React.RefObject<HTMLDivElement>;
+        ref: React.RefObject<HTMLDivElement | null>;
         role: string;
     };
 };

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -86,6 +86,7 @@ export const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
+  const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
     if (!node) {
@@ -93,7 +94,10 @@ export const useGridVirtualScroller = () => {
     }
     const initialRect = node.getBoundingClientRect();
     let lastSize = roundDimensions(initialRect);
-    apiRef.current.publishEvent('resize', lastSize);
+    if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
+      previousSize.current = lastSize;
+      apiRef.current.publishEvent('resize', lastSize);
+    }
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }

package/hooks/utils/useGridApiEventHandler.js

@@ -24,7 +24,7 @@ export function createUseGridApiEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(null);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/hooks/utils/useGridApiMethod.d.ts

@@ -3,5 +3,5 @@ import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 type GetPublicApiType<PrivateApi> = PrivateApi extends {
     getPublicApi: () => infer PublicApi;
 } ? PublicApi : never;
-export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.MutableRefObject<PrivateApi>, apiMethods: T, visibility: V): void;
+export declare function useGridApiMethod<PrivateApi extends GridPrivateApiCommon, PublicApi extends GetPublicApiType<PrivateApi>, PrivateOnlyApi extends Omit<PrivateApi, keyof PublicApi>, V extends 'public' | 'private', T extends V extends 'public' ? Partial<PublicApi> : Partial<PrivateOnlyApi>>(privateApiRef: React.RefObject<PrivateApi>, apiMethods: T, visibility: V): void;
 export {};

package/hooks/utils/useGridApiRef.d.ts

@@ -4,4 +4,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.MutableRefObject<Api>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.RefObject<Api>;

package/hooks/utils/useGridInitializeState.d.ts

@@ -5,6 +5,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
-export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.MutableRefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.MutableRefObject<PrivateApi>, props: P) => void;
+export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.RefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.RefObject<PrivateApi>, props: P) => void;
 export {};

package/hooks/utils/useGridLogger.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Logger } from '../../models/logger';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.MutableRefObject<PrivateApi>, name: string): Logger;
+export declare function useGridLogger<PrivateApi extends GridPrivateApiCommon>(privateApiRef: React.RefObject<PrivateApi>, name: string): Logger;