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

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "headerFilterMenu", "InputProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridFilterInputValue(props) {
   const {
       item,
@@ -17,8 +17,9 @@ function GridFilterInputValue(props) {
       tabIndex,
       disabled,
       clearButton,
+      headerFilterMenu,
       InputProps,
-      variant = 'standard'
+      variant = 'outlined'
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterTimeout = useTimeout();
@@ -45,31 +46,35 @@ function GridFilterInputValue(props) {
       setFilterValueState(sanitizeFilterItemValue(item.value));
     }
   }, [id, item]);
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState ?? '',
-    onChange: onFilterChange,
-    variant: variant,
-    type: type || 'text',
-    InputProps: _extends({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: _extends({
-        tabIndex
-      }, InputProps?.inputProps)
-    }),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState ?? '',
+      onChange: onFilterChange,
+      variant: variant,
+      type: type || 'text',
+      disabled: disabled,
+      InputProps: _extends({
+        endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+          position: "end",
+          children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+            fontSize: "small",
+            color: "action"
+          })
+        }) : null
+      }, InputProps, {
+        inputProps: _extends({
+          tabIndex
+        }, InputProps?.inputProps)
+      }),
+      InputLabelProps: {
+        shrink: true
+      },
+      inputRef: focusElementRef
+    }, rootProps.slotProps?.baseTextField, others)), headerFilterMenu, clearButton]
+  });
 }
 function sanitizeFilterItemValue(value) {
   if (value == null || value === '') {
@@ -88,6 +93,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

package/components/panel/filterPanel/GridFilterInputValueProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { GridFilterItem } from '../../../models/gridFilterItem';
 import type { GridApiCommon } from '../../../models/api/gridApiCommon';
@@ -6,6 +7,6 @@ import type { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 export type GridFilterInputValueProps<Api extends GridApiCommon = GridApiCommunity> = {
     item: GridFilterItem;
     applyValue: (value: GridFilterItem) => void;
-    apiRef: React.MutableRefObject<Api>;
+    apiRef: RefObject<Api>;
     focusElementRef?: React.Ref<any>;
 } & Pick<TextFieldProps, 'color' | 'error' | 'helperText' | 'size' | 'variant'>;

package/components/toolbar/GridToolbarColumnsButton.js

@@ -46,7 +46,12 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
-      onClick: showColumns
+      onClick: showColumns,
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+      }
     }, rootProps.slotProps?.baseButton, buttonProps, {
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')

package/components/toolbar/GridToolbarFilterButton.js

@@ -113,7 +113,12 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
       }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
       })),
-      onClick: toggleFilter
+      onClick: toggleFilter,
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+      }
     }, rootProps.slotProps?.baseButton, buttonProps, {
       ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')

package/components/virtualization/GridVirtualScrollbar.js

@@ -22,6 +22,9 @@ const Scrollbar = styled('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
+  '&:hover': {
+    zIndex: 7
+  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -103,19 +106,15 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
   useOnMount(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;
     const scrollbar = scrollbarRef.current;
-    scroller.addEventListener('scroll', onScrollerScroll, {
-      capture: true
-    });
-    scrollbar.addEventListener('scroll', onScrollbarScroll, {
-      capture: true
-    });
+    const options = {
+      capture: true,
+      passive: true
+    };
+    scroller.addEventListener('scroll', onScrollerScroll, options);
+    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
     return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, {
-        capture: true
-      });
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, {
-        capture: true
-      });
+      scroller.removeEventListener('scroll', onScrollerScroll, options);
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
     };
   });
   React.useEffect(() => {

package/components/virtualization/GridVirtualScroller.js

@@ -100,11 +100,11 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
-      position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), props.children]
+    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), props.children]
   }));
 }
 export { GridVirtualScroller };

package/constants/gridClasses.d.ts

@@ -168,6 +168,14 @@ export interface GridClasses {
      * @ignore - do not document.
      */
     'columnHeader--siblingFocused': string;
+    /**
+     * Styles applied to the header filter input element.
+     */
+    columnHeaderFilterInput: string;
+    /**
+     * Styles applied to the header filter operator label element.
+     */
+    columnHeaderFilterOperatorLabel: string;
     /**
      * Styles applied to the header checkbox cell element.
      */
@@ -200,6 +208,10 @@ export interface GridClasses {
      * Styles applied to the empty column group header cell.
      */
     'columnHeader--emptyGroup': string;
+    /**
+     * Styles applied to the header filter cell.
+     */
+    'columnHeader--filter': string;
     /**
      * Styles applied to the column headers.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -98,6 +98,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/context/GridContextProvider.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
 import { GridConfiguration } from '../models/configuration/gridConfiguration';
 type GridContextProviderProps = {
-    privateApiRef: React.MutableRefObject<GridPrivateApiCommunity>;
+    privateApiRef: RefObject<GridPrivateApiCommunity>;
     configuration: GridConfiguration;
     props: {};
     children: React.ReactNode;

package/context/GridRootPropsContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 const GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 /**
  * Implement the Pipeline Pattern
@@ -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.RefObject<GridPrivateApiCommon>) => void;
+export declare const useGridPipeProcessing: (apiRef: RefObject<GridPrivateApiCommon>) => void;

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
 import { GridStrategyProcessorName, GridStrategyGroupValue } from './gridStrategyProcessingApi';
 export declare const GRID_DEFAULT_STRATEGY = "none";
@@ -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.RefObject<GridPrivateApiCommon>) => void;
+export declare const useGridStrategyProcessing: (apiRef: RefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridApiInitialization.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 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.RefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): React.RefObject<PrivateApi>;
+export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): RefObject<PrivateApi>;

package/hooks/core/useGridInitialization.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 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.RefObject<Api> | undefined, props: DataGridProcessedProps) => React.RefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api> | undefined, props: DataGridProcessedProps) => import("react").RefObject<PrivateApi>;

package/hooks/core/useGridIsRtl.d.ts

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

package/hooks/core/useGridLocaleText.d.ts

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

package/hooks/core/useGridLoggerFactory.d.ts

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

package/hooks/core/useGridRefs.d.ts

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

package/hooks/core/useGridStateInitialization.d.ts

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

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;
+export declare const useGridClipboard: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -7,4 +7,4 @@ export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;
+export declare const useGridColumnGrouping: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -6,8 +6,9 @@ import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
 import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
 import { GridColumnMenuState } from '../columnMenu';
-import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
+import { GridColumnVisibilityModel, gridColumnPositionsSelector } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
+import { PinnedColumnPosition } from '../../../internals/constants';
 export interface UseGridColumnHeadersProps {
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
@@ -23,7 +24,7 @@ export interface UseGridColumnHeadersProps {
     hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    position?: GridPinnedColumnPosition;
+    position?: PinnedColumnPosition;
     renderContext?: GridColumnsRenderContext;
     maxLastColumn?: number;
 }
@@ -46,11 +47,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         right: GridStateColDef[];
     };
     visibleColumns: GridStateColDef[];
-    getCellOffsetStyle: ({ pinnedPosition, columnIndex, computedWidth, }: {
-        pinnedPosition?: GridPinnedColumnPosition;
-        columnIndex: number;
-        computedWidth: number;
-    }) => React.CSSProperties | undefined;
+    columnPositions: number[];
     getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
     getColumnHeadersRow: () => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
@@ -59,6 +56,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         lastColumnToRender: number;
     };
     getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
+    getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;
     isDragging: boolean;
     getInnerProps: () => {
         role: string;