@mui/x-data-grid 8.0.0-alpha.6 → 8.0.0-alpha.7

package/CHANGELOG.md

@@ -5,6 +5,132 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.7
+
+_Jan 9, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts legend is now an HTML element which can be styled more easily
+- 💫 Support [aggregation with server-side data](/x/react-data-grid/server-side-data/aggregation/)
+- 🏎️ Improve Data Grid aggregation performance
+- 🌍 Add Chinese (Taiwan) (zh-TW) locale on the Date and Time Pickers
+- 🌍 Improve Norwegian (nb-NO) locale on the Date and Time Pickers
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@derek-0000, @josteinjhauge, @k-rajat19, @nusr, @tomashauser.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @arminmeh, @romgrk, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-alpha.7`
+
+- [DataGrid] Improve React 19 support (#15769) @LukasTy
+- [DataGrid] Add `name` attribute to the checkbox selection column (#15178) @derek-0000
+- [DataGrid] Fix number filter field formatting values while typing (#16062) @arminmeh
+- [DataGrid] Fix select all checkbox state reset with server side data (#16034) @MBilalShafi
+- [DataGrid] Refactor: create base button props (#15930) @romgrk
+- [DataGrid] Refactor: create tooltip props (#16086) @romgrk
+- [DataGrid] Fix TS error (#16046) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.7` [![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@8.0.0-alpha.7`, plus:
+
+- [DataGridPremium] Improve aggregation performance for multiple columns (#16097) @cherniavskii
+- [DataGridPremium] Make Aggregation keyboard accessible in the column menu (#15934) @k-rajat19
+- [DataGridPremium] Server-side aggregation with data source (#15741) @MBilalShafi
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `date-fns` and `date-fns-jalali` date library adapters have been renamed to better align with the current stable major versions — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#✅-rename-date-fns-adapter-imports)
+- Update default `closeOnSelect` and Action Bar `actions` values - [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#update-default-closeonselect-and-action-bar-actions-values)
+- The component passed to the `layout` slot no longer receives the `value`, `onChange` and `onSelectShortcut` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `value`, `onChange` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `shortcuts` slot no longer receives the `onChange`, `isValid` and `isLandscape` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-shortcuts).
+- The `PickerShortcutChangeImportance` type has been renamed `PickerChangeImportance` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables-and-types).
+- The component passed to the `layout` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-layout).
+- The component passed to the `toolbar` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-toolbar).
+- The component passed to the `tabs` slot no longer receives the `rangePosition` and `onRangePositionChange` on range pickers — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-tabs).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.7`
+
+- [fields] Handle focusing container with `inputRef.current.focus` on `accessibleFieldDOMStructure` (#15985) @LukasTy
+- [pickers] Always use `setValue` internally to update the picker value (#16056) @flaviendelangle
+- [pickers] Create a new context to pass the range position props to the layout components and to the views (#15846) @flaviendelangle
+- [pickers] Introduce a new concept of `manager` (#15339) @flaviendelangle
+- [pickers] Improve React 19 support (#15769) @LukasTy
+- [pickers] Memoize `<PickersActionBar />` (#16071) @LukasTy
+- [pickers] Remove `NonEmptyDateRange` type (#16035) @flaviendelangle
+- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns` (#16082) @LukasTy
+- [pickers] Rename `ctx.onViewChange` to `ctx.setView` and add it to the actions context (#16044) @flaviendelangle
+- [pickers] Support `date-fns-jalali` v4 (#16011) @LukasTy
+- [pickers] Update `closeOnSelect` and `actionBar.actions` default values (#15944) @LukasTy
+- [pickers] Use `usePickerContext()` and `usePickerActionsContext()` instead of passing props to the `shortcuts` and `toolbar` slots (#15948) @flaviendelangle
+- [l10n] Add Chinese (Taiwan) (zh-TW) locale (#16033) @nusr
+- [l10n] Improve Norwegian (nb-NO) locale (#16089) @josteinjhauge
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+### Charts
+
+#### Breaking changes
+
+- Removed `DefaultChartsLegend` component, since it is now easier to create custom legends — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- The default legend is now an HTML element and can be styled more easily.
+- The `width` and `height` properties of the charts now only apply to the `svg` element, and not their wrappers, this might cause some layout shifts.
+- `slotProps.legend.direction` now accepts `'horizontal' | 'vertical'` instead of `'row' | 'column'` — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#legend-direction-value-change-✅).
+- The `getSeriesToDisplay` function was removed in favor of the `useLegend` hook. — [Learn more](https://next.mui.com/x/migration/migration-charts-v7/#the-getseriestodisplay-function-was-removed).
+
+#### `@mui/x-charts@8.0.0-alpha.7`
+
+- [charts] New HTML legend & styles (#15733) @JCQuintas
+- [charts] Improve React 19 support (#15769) @LukasTy
+- [charts] Fix 301 redirection in the API documentation @oliviertassinari
+
+#### `@mui/x-charts-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.7`
+
+- [TreeView] Improve React 19 support (#15769) @LukasTy
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.7` [![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@8.0.0-alpha.7`.
+
+### Docs
+
+- [docs] Fix `EditingWithDatePickers` demo (#15967) @k-rajat19
+- [docs] Fix inconsistent multi input range field separators (#16043) @flaviendelangle
+- [docs] Fix non-existing "adapter" property of `LocalizationProvider` (#16084) @tomashauser
+- [docs] Refactor Data Grid with Date Pickers example (#15992) @LukasTy
+- [docs] Unify the wording of the pickers slots breaking changes (#16036) @flaviendelangle
+
+### Core
+
+- [core] Clarify the release strategy (#16014) @MBilalShafi
+- [core] Small fixes on docs @oliviertassinari
+- [core] Sync with other repos @oliviertassinari
+- [core] Update the `release:version` docs (#16038) @cherniavskii
+- [code-infra] Add `testSkipIf` and `describeSkipIf` (#16049) @JCQuintas
+- [test] Stabilize flaky Data Grid tests (#16053) @LukasTy
+
 ## 8.0.0-alpha.6
 
 _Dec 26, 2024_
@@ -104,7 +230,7 @@ Following are all team members who have contributed to this release:
 
 #### Breaking changes
 
-- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
 
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.

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

@@ -1,16 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { MenuItemProps } from '@mui/material/MenuItem';
+import { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 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;
-} & Omit<IconButtonProps, 'component'>) | ({
+    icon: React.ReactElement<any>;
+} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -18,11 +17,17 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & Omit<MenuItemProps, 'component'>));
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
     showInMenu?: false;
-    icon: React.ReactElement;
-} & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+    icon: React.ReactElement<any>;
+} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+    label?: string;
+    color?: "default" | "inherit" | "primary";
+    edge?: "start" | "end" | false;
+} & import("../..").BaseIconButtonPropsOverrides & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "tabIndex" | "className" | "style" | "classes" | "color" | "sx" | "disabled" | "size" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+    component?: React.ElementType;
+}, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -30,5 +35,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<import("../../models/gridBaseSlots").MenuItemProps & import("../..").BaseMenuItemPropsOverrides & import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children" | "tabIndex" | "className" | "style" | "classes" | "sx" | "autoFocus" | "disabled" | "dense" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters" | "divider" | "selected"> & {
+    component?: React.ElementType;
+}, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.js

@@ -6,6 +6,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+
+// FIXME(v8:romgrk): Make parametric
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();

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/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -57,7 +57,6 @@ function GridColumnHeaderFilterIconButton(props) {
   const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
     id: labelId,
     onClick: toggleFilter,
-    color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
     tabIndex: -1,

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -87,7 +87,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(() => {
@@ -103,7 +106,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/columnsManagement/GridColumnsManagement.js

@@ -140,11 +140,11 @@ function GridColumnsManagement(props) {
           endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
             "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
             size: "small",
-            sx: [searchValue ? {
+            style: searchValue ? {
               visibility: 'visible'
             } : {
               visibility: 'hidden'
-            }],
+            },
             tabIndex: -1,
             onClick: handleSearchReset
           }, rootProps.slotProps?.baseIconButton, {

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" | "ref" | "className" | "style" | "color" | "componentsProps" | "components" | "slotProps" | "slots" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "content" | "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" | "container" | "transition" | "component" | "open" | "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/components/toolbar/GridToolbarQuickFilter.js

@@ -109,11 +109,11 @@ function GridToolbarQuickFilter(props) {
           "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
           size: "small",
           edge: "end",
-          sx: [searchValue ? {
+          style: searchValue ? {
             visibility: 'visible'
           } : {
             visibility: 'hidden'
-          }],
+          },
           onClick: handleSearchReset
         }, rootProps.slotProps?.baseIconButton, {
           children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {

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

@@ -6,7 +6,7 @@ import { GridHydrateColumnsValue, GridPinnedColumnPosition } from '../../feature
 import { GridRowEntry, GridRowId } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
-import { GridGetRowsParams } from '../../../models/gridDataSource';
+import { GridGetRowsParams, GridGetRowsResponse } from '../../../models/gridDataSource';
 import { HeightEntry } from '../../features/rows/gridRowsMetaInterfaces';
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
@@ -29,7 +29,7 @@ export interface GridPipeProcessingLookup {
     };
     exportMenu: {
         value: {
-            component: React.ReactElement;
+            component: React.ReactElement<any>;
             componentName: string;
         }[];
         context: any;
@@ -84,6 +84,13 @@ export interface GridPipeProcessingLookup {
         value: GridPinnedColumnPosition | false;
         context: string;
     };
+    processDataSourceRows: {
+        value: {
+            params: GridGetRowsParams;
+            response: GridGetRowsResponse;
+        };
+        context: boolean;
+    };
 }
 export type GridPipeProcessor<P extends GridPipeProcessorGroup> = (value: GridPipeProcessingLookup[P]['value'], context: GridPipeProcessingLookup[P] extends {
     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

@@ -42,4 +42,4 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
  * There are two active groups named `rowTree` and `dataSource`.
  */
-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;