@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/hooks/features/focus/index.js

@@ -1,2 +1,27 @@
-export * from "./gridFocusStateSelector.js";
-export * from "./gridFocusState.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridFocusStateSelector = require("./gridFocusStateSelector");
+Object.keys(_gridFocusStateSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridFocusStateSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridFocusStateSelector[key];
+    }
+  });
+});
+var _gridFocusState = require("./gridFocusState");
+Object.keys(_gridFocusState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridFocusState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridFocusState[key];
+    }
+  });
+});

package/hooks/features/focus/useGridFocus.d.ts

@@ -1,11 +1,11 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 export declare const focusStateInitializer: GridStateInitializer;
 /**
  * @requires useGridParamsApi (method)
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;
+export declare const useGridFocus: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;

package/hooks/features/focus/useGridFocus.js

@@ -1,17 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventcallback } from '@mui/utils';
-import { gridClasses } from "../../../constants/gridClasses.js";
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { useGridLogger } from "../../utils/useGridLogger.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-import { isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from "./gridFocusStateSelector.js";
-import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
-import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { clamp } from "../../../utils/utils.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
-export const focusStateInitializer = state => _extends({}, state, {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridFocus = exports.focusStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _gridClasses = require("../../../constants/gridClasses");
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _useGridLogger = require("../../utils/useGridLogger");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+var _gridFocusStateSelector = require("./gridFocusStateSelector");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
+var _utils = require("../../../utils/utils");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+const focusStateInitializer = state => (0, _extends2.default)({}, state, {
   focus: {
     cell: null,
     columnHeader: null,
@@ -31,8 +40,9 @@ export const focusStateInitializer = state => _extends({}, state, {
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export const useGridFocus = (apiRef, props) => {
-  const logger = useGridLogger(apiRef, 'useGridFocus');
+exports.focusStateInitializer = focusStateInitializer;
+const useGridFocus = (apiRef, props) => {
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const publishCellFocusOut = React.useCallback((cell, event) => {
@@ -44,13 +54,13 @@ export const useGridFocus = (apiRef, props) => {
     }
   }, [apiRef]);
   const setCellFocus = React.useCallback((id, field) => {
-    const focusedCell = gridFocusCellSelector(apiRef);
+    const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     if (focusedCell?.id === id && focusedCell?.field === field) {
       return;
     }
     apiRef.current.setState(state => {
       logger.debug(`Focusing on cell with id=${id} and field=${field}`);
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         tabIndex: {
           cell: {
             id,
@@ -71,7 +81,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
 
     // The row might have been deleted
     if (!apiRef.current.getRow(id)) {
@@ -85,11 +94,11 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
-    const cell = gridFocusCellSelector(apiRef);
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     publishCellFocusOut(cell, event);
     apiRef.current.setState(state => {
       logger.debug(`Focusing on column header with colIndex=${field}`);
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         tabIndex: {
           columnHeader: {
             field
@@ -108,14 +117,13 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
-    const cell = gridFocusCellSelector(apiRef);
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     publishCellFocusOut(cell, event);
     apiRef.current.setState(state => {
       logger.debug(`Focusing on column header filter with colIndex=${field}`);
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         tabIndex: {
           columnHeader: null,
           columnHeaderFilter: {
@@ -134,15 +142,14 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
-    const cell = gridFocusCellSelector(apiRef);
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     if (cell) {
       apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
     }
     apiRef.current.setState(state => {
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         tabIndex: {
           columnGroupHeader: {
             field,
@@ -163,17 +170,16 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
-  const getColumnGroupHeaderFocus = React.useCallback(() => gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
+  const getColumnGroupHeaderFocus = React.useCallback(() => (0, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector)(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
-    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
-    const currentPage = getVisibleRows(apiRef, {
+    const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
       pagination: props.pagination,
       paginationMode: props.paginationMode
     });
-    const pinnedRows = gridPinnedRowsSelector(apiRef);
+    const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
 
     // Include pinned rows as well
     const currentPageRows = [].concat(pinnedRows.top || [], currentPage.rows, pinnedRows.bottom || []);
@@ -200,7 +206,7 @@ export const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = visibleColumns.length - 1;
       }
     }
-    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPageRows.length - 1);
+    rowIndexToFocus = (0, _utils.clamp)(rowIndexToFocus, 0, currentPageRows.length - 1);
     const rowToFocus = currentPageRows[rowIndexToFocus];
     if (!rowToFocus) {
       return;
@@ -213,7 +219,7 @@ export const useGridFocus = (apiRef, props) => {
         columnIndexToFocus = colSpanInfo.rightVisibleCellIndex;
       }
     }
-    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
+    columnIndexToFocus = (0, _utils.clamp)(columnIndexToFocus, 0, visibleColumns.length - 1);
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
   }, [apiRef, props.pagination, props.paginationMode]);
@@ -225,7 +231,7 @@ export const useGridFocus = (apiRef, props) => {
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
-    if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || isNavigationKey(event.key)) {
+    if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || (0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }
     apiRef.current.setCellFocus(params.id, params.field);
@@ -245,7 +251,7 @@ export const useGridFocus = (apiRef, props) => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
+    const focusedColumnGroup = (0, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;
@@ -253,11 +259,11 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
   }, [apiRef]);
   const handleBlur = React.useCallback((_, event) => {
-    if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
+    if (event.relatedTarget?.getAttribute('class')?.includes(_gridClasses.gridClasses.columnHeader)) {
       return;
     }
     logger.debug(`Clearing focus`);
-    apiRef.current.setState(state => _extends({}, state, {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       focus: {
         cell: null,
         columnHeader: null,
@@ -272,7 +278,7 @@ export const useGridFocus = (apiRef, props) => {
   const handleDocumentClick = React.useCallback(event => {
     const cellParams = lastClickedCell.current;
     lastClickedCell.current = null;
-    const focusedCell = gridFocusCellSelector(apiRef);
+    const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
       event,
       cell: cellParams
@@ -296,7 +302,7 @@ export const useGridFocus = (apiRef, props) => {
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
     } else {
-      apiRef.current.setState(state => _extends({}, state, {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         focus: {
           cell: null,
           columnHeader: null,
@@ -304,7 +310,6 @@ export const useGridFocus = (apiRef, props) => {
           columnGroupHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
 
       // There's a focused cell but another element (not a cell) was clicked
       // Publishes an event to notify that the focus was lost
@@ -315,13 +320,13 @@ export const useGridFocus = (apiRef, props) => {
     if (params.cellMode === 'view') {
       return;
     }
-    const cell = gridFocusCellSelector(apiRef);
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     if (cell?.id !== params.id || cell?.field !== params.field) {
       apiRef.current.setCellFocus(params.id, params.field);
     }
   }, [apiRef]);
   const handleRowSet = React.useCallback(() => {
-    const cell = gridFocusCellSelector(apiRef);
+    const cell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
     // If the focused cell is in a row which does not exist anymore,
     // focus previous row or remove the focus
@@ -331,14 +336,14 @@ export const useGridFocus = (apiRef, props) => {
       if (typeof lastFocusedRowId !== 'undefined') {
         const rowEl = apiRef.current.getRowElement(lastFocusedRowId);
         const lastFocusedRowIndex = rowEl?.dataset.rowindex ? Number(rowEl?.dataset.rowindex) : 0;
-        const currentPage = getVisibleRows(apiRef, {
+        const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
           pagination: props.pagination,
           paginationMode: props.paginationMode
         });
-        const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        const nextRow = currentPage.rows[(0, _utils.clamp)(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
         nextRowId = nextRow?.id ?? null;
       }
-      apiRef.current.setState(state => _extends({}, state, {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         focus: {
           cell: nextRowId === null ? null : {
             id: nextRowId,
@@ -351,12 +356,12 @@ export const useGridFocus = (apiRef, props) => {
       }));
     }
   }, [apiRef, props.pagination, props.paginationMode]);
-  const handlePaginationModelChange = useEventcallback(() => {
-    const currentFocusedCell = gridFocusCellSelector(apiRef);
+  const handlePaginationModelChange = (0, _useEventCallback.default)(() => {
+    const currentFocusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
     if (!currentFocusedCell) {
       return;
     }
-    const currentPage = getVisibleRows(apiRef, {
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
       pagination: props.pagination,
       paginationMode: props.paginationMode
     });
@@ -364,9 +369,9 @@ export const useGridFocus = (apiRef, props) => {
     if (rowIsInCurrentPage) {
       return;
     }
-    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     apiRef.current.setState(state => {
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         tabIndex: {
           cell: {
             id: currentPage.rows[0].id,
@@ -389,22 +394,23 @@ export const useGridFocus = (apiRef, props) => {
     setColumnGroupHeaderFocus,
     getColumnGroupHeaderFocus
   };
-  useGridApiMethod(apiRef, focusApi, 'public');
-  useGridApiMethod(apiRef, focusPrivateApi, 'private');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, focusApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, focusPrivateApi, 'private');
   React.useEffect(() => {
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     doc.addEventListener('mouseup', handleDocumentClick);
     return () => {
       doc.removeEventListener('mouseup', handleDocumentClick);
     };
   }, [apiRef, hasRootReference, handleDocumentClick]);
-  useGridApiEventHandler(apiRef, 'columnHeaderBlur', handleBlur);
-  useGridApiEventHandler(apiRef, 'cellDoubleClick', handleCellDoubleClick);
-  useGridApiEventHandler(apiRef, 'cellMouseDown', handleCellMouseDown);
-  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
-  useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
-  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
-  useGridApiEventHandler(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
-  useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
-  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
-};
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', handleCellMouseDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellModeChange', handleCellModeChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', handleRowSet);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
+};
+exports.useGridFocus = useGridFocus;

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -1,5 +1,5 @@
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const gridHeaderFilteringStateSelector: (state: GridStateCommunity) => import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState;
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridHeaderFilteringStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState>;
 export declare const gridHeaderFilteringEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, boolean>;
 export declare const gridHeaderFilteringEditFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;
-export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;
+export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -1,7 +1,13 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
-export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridHeaderFilteringStateSelector = exports.gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringEnabledSelector = exports.gridHeaderFilteringEditFieldSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+const gridHeaderFilteringStateSelector = exports.gridHeaderFilteringStateSelector = (0, _createSelector.createRootSelector)(state => state.headerFiltering);
+const gridHeaderFilteringEnabledSelector = exports.gridHeaderFilteringEnabledSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector,
 // No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
 headerFilteringState => headerFilteringState?.enabled ?? false);
-export const gridHeaderFilteringEditFieldSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
-export const gridHeaderFilteringMenuSelector = createSelector(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);
+const gridHeaderFilteringEditFieldSelector = exports.gridHeaderFilteringEditFieldSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.editing);
+const gridHeaderFilteringMenuSelector = exports.gridHeaderFilteringMenuSelector = (0, _createSelector.createSelector)(gridHeaderFilteringStateSelector, headerFilteringState => headerFilteringState.menuOpen);

package/hooks/features/headerFiltering/index.d.ts

@@ -1 +1 @@
-export * from './gridHeaderFilteringSelectors';
+export * from "./gridHeaderFilteringSelectors.js";

package/hooks/features/headerFiltering/index.js

@@ -1 +1,16 @@
-export * from "./gridHeaderFilteringSelectors.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridHeaderFilteringSelectors = require("./gridHeaderFilteringSelectors");
+Object.keys(_gridHeaderFilteringSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridHeaderFilteringSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridHeaderFilteringSelectors[key];
+    }
+  });
+});

package/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 export declare const headerFilteringStateInitializer: GridStateInitializer;
-export declare const useGridHeaderFiltering: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;
+export declare const useGridHeaderFiltering: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;

package/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -1,17 +1,26 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { useGridLogger } from "../../utils/index.js";
-import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-export const headerFilteringStateInitializer = (state, props) => _extends({}, state, {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridHeaderFiltering = exports.headerFilteringStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _utils = require("../../utils");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+const headerFilteringStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
   headerFiltering: {
     enabled: props.headerFilters ?? false,
     editing: null,
     menuOpen: null
   }
 });
-export const useGridHeaderFiltering = (apiRef, props) => {
-  const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+exports.headerFilteringStateInitializer = headerFilteringStateInitializer;
+const useGridHeaderFiltering = (apiRef, props) => {
+  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridHeaderFiltering');
   const setHeaderFilterState = React.useCallback(headerFilterState => {
     apiRef.current.setState(state => {
       // Safety check to avoid MIT users from using it
@@ -19,7 +28,7 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       if (props.signature === 'DataGrid') {
         return state;
       }
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         headerFiltering: {
           enabled: props.headerFilters ?? false,
           editing: headerFilterState.editing ?? null,
@@ -27,7 +36,6 @@ export const useGridHeaderFiltering = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, props.signature, props.headerFilters]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);
@@ -51,9 +59,9 @@ export const useGridHeaderFiltering = (apiRef, props) => {
     logger.debug(`Hiding header filter menu for active field`);
     let fieldToFocus = apiRef.current.state.headerFiltering.menuOpen;
     if (fieldToFocus) {
-      const columnLookup = gridColumnLookupSelector(apiRef);
-      const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
-      const orderedFields = gridColumnFieldsSelector(apiRef);
+      const columnLookup = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
+      const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      const orderedFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
 
       // If the column was removed from the grid, we need to find the closest visible field
       if (!columnLookup[fieldToFocus]) {
@@ -87,8 +95,8 @@ export const useGridHeaderFiltering = (apiRef, props) => {
     showHeaderFilterMenu,
     hideHeaderFilterMenu
   };
-  useGridApiMethod(apiRef, headerFilterApi, 'public');
-  useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, headerFilterPrivateApi, 'private');
 
   /*
    * EFFECTS
@@ -103,4 +111,5 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       });
     }
   }, [apiRef, props.headerFilters]);
-};
+};
+exports.useGridHeaderFiltering = useGridHeaderFiltering;

package/hooks/features/index.d.ts

@@ -1,18 +1,19 @@
-export * from './columnMenu';
-export * from './columns';
-export * from './columnGrouping';
-export * from './columnResize';
-export * from './density';
-export * from './editing';
-export * from './filter';
-export * from './focus';
-export * from './listView';
-export * from './pagination';
-export * from './preferencesPanel';
-export * from './rows';
-export * from './rowSelection';
-export * from './sorting';
-export * from './dimensions';
-export * from './statePersistence';
-export * from './headerFiltering';
-export * from './virtualization';
+export * from "./columnMenu/index.js";
+export * from "./columns/index.js";
+export * from "./columnGrouping/index.js";
+export * from "./columnResize/index.js";
+export * from "./density/index.js";
+export * from "./editing/index.js";
+export * from "./filter/index.js";
+export * from "./focus/index.js";
+export * from "./listView/index.js";
+export * from "./pagination/index.js";
+export * from "./preferencesPanel/index.js";
+export * from "./rows/index.js";
+export * from "./rowSelection/index.js";
+export * from "./sorting/index.js";
+export * from "./dimensions/index.js";
+export * from "./statePersistence/index.js";
+export * from "./headerFiltering/index.js";
+export * from "./virtualization/index.js";
+export * from "./dataSource/index.js";