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

package/esm/hooks/features/focus/useGridFocus.js

@@ -0,0 +1,406 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
+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, {
+  focus: {
+    cell: null,
+    columnHeader: null,
+    columnHeaderFilter: null,
+    columnGroupHeader: null
+  },
+  tabIndex: {
+    cell: null,
+    columnHeader: null,
+    columnHeaderFilter: null,
+    columnGroupHeader: null
+  }
+});
+
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridRows (method)
+ * @requires useGridEditing (event)
+ */
+export const useGridFocus = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridFocus');
+  const lastClickedCell = React.useRef(null);
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
+  const publishCellFocusOut = React.useCallback((cell, event) => {
+    if (cell) {
+      // The row might have been deleted
+      if (apiRef.current.getRow(cell.id)) {
+        apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+      }
+    }
+  }, [apiRef]);
+  const setCellFocus = React.useCallback((id, field) => {
+    const focusedCell = 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, {
+        tabIndex: {
+          cell: {
+            id,
+            field
+          },
+          columnHeader: null,
+          columnHeaderFilter: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          cell: {
+            id,
+            field
+          },
+          columnHeader: null,
+          columnHeaderFilter: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+
+    // The row might have been deleted
+    if (!apiRef.current.getRow(id)) {
+      return;
+    }
+    if (focusedCell) {
+      // There's a focused cell but another cell was clicked
+      // Publishes an event to notify that the focus was lost
+      publishCellFocusOut(focusedCell, {});
+    }
+    apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
+  }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header with colIndex=${field}`);
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: {
+            field
+          },
+          columnHeaderFilter: null,
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: {
+            field
+          },
+          columnHeaderFilter: null,
+          cell: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+  }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+    publishCellFocusOut(cell, event);
+    apiRef.current.setState(state => {
+      logger.debug(`Focusing on column header filter with colIndex=${field}`);
+      return _extends({}, state, {
+        tabIndex: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
+          cell: null,
+          columnGroupHeader: null
+        },
+        focus: {
+          columnHeader: null,
+          columnHeaderFilter: {
+            field
+          },
+          cell: null,
+          columnGroupHeader: null
+        }
+      });
+    });
+  }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+    if (cell) {
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        tabIndex: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          columnHeaderFilter: null,
+          cell: null
+        },
+        focus: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          columnHeaderFilter: null,
+          cell: null
+        }
+      });
+    });
+  }, [apiRef]);
+  const getColumnGroupHeaderFocus = React.useCallback(() => gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
+  const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
+    let columnIndexToFocus = apiRef.current.getColumnIndex(field);
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const pinnedRows = gridPinnedRowsSelector(apiRef);
+
+    // Include pinned rows as well
+    const currentPageRows = [].concat(pinnedRows.top || [], currentPage.rows, pinnedRows.bottom || []);
+    let rowIndexToFocus = currentPageRows.findIndex(row => row.id === id);
+    if (direction === 'right') {
+      columnIndexToFocus += 1;
+    } else if (direction === 'left') {
+      columnIndexToFocus -= 1;
+    } else {
+      rowIndexToFocus += 1;
+    }
+    if (columnIndexToFocus >= visibleColumns.length) {
+      // Go to next row if we are after the last column
+      rowIndexToFocus += 1;
+      if (rowIndexToFocus < currentPageRows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
+    } else if (columnIndexToFocus < 0) {
+      // Go to previous row if we are before the first column
+      rowIndexToFocus -= 1;
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
+    }
+    rowIndexToFocus = clamp(rowIndexToFocus, 0, currentPageRows.length - 1);
+    const rowToFocus = currentPageRows[rowIndexToFocus];
+    if (!rowToFocus) {
+      return;
+    }
+    const colSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowToFocus.id, columnIndexToFocus);
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      if (direction === 'left' || direction === 'below') {
+        columnIndexToFocus = colSpanInfo.leftVisibleCellIndex;
+      } else if (direction === 'right') {
+        columnIndexToFocus = colSpanInfo.rightVisibleCellIndex;
+      }
+    }
+    columnIndexToFocus = clamp(columnIndexToFocus, 0, visibleColumns.length - 1);
+    const columnToFocus = visibleColumns[columnIndexToFocus];
+    apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);
+  }, [apiRef, props.pagination, props.paginationMode]);
+  const handleCellDoubleClick = React.useCallback(({
+    id,
+    field
+  }) => {
+    apiRef.current.setCellFocus(id, field);
+  }, [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)) {
+      return;
+    }
+    apiRef.current.setCellFocus(params.id, params.field);
+  }, [apiRef]);
+  const handleColumnHeaderFocus = React.useCallback(({
+    field
+  }, event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    apiRef.current.setColumnHeaderFocus(field, event);
+  }, [apiRef]);
+  const handleColumnGroupHeaderFocus = React.useCallback(({
+    fields,
+    depth
+  }, event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
+    if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
+      // This group cell has already been focused
+      return;
+    }
+    apiRef.current.setColumnGroupHeaderFocus(fields[0], depth, event);
+  }, [apiRef]);
+  const handleBlur = React.useCallback((_, event) => {
+    if (event.relatedTarget?.getAttribute('class')?.includes(gridClasses.columnHeader)) {
+      return;
+    }
+    logger.debug(`Clearing focus`);
+    apiRef.current.setState(state => _extends({}, state, {
+      focus: {
+        cell: null,
+        columnHeader: null,
+        columnHeaderFilter: null,
+        columnGroupHeader: null
+      }
+    }));
+  }, [logger, apiRef]);
+  const handleCellMouseDown = React.useCallback(params => {
+    lastClickedCell.current = params;
+  }, []);
+  const handleDocumentClick = React.useCallback(event => {
+    const cellParams = lastClickedCell.current;
+    lastClickedCell.current = null;
+    const focusedCell = gridFocusCellSelector(apiRef);
+    const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
+      event,
+      cell: cellParams
+    });
+    if (!canUpdateFocus) {
+      return;
+    }
+    if (!focusedCell) {
+      if (cellParams) {
+        apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+      }
+      return;
+    }
+    if (cellParams?.id === focusedCell.id && cellParams?.field === focusedCell.field) {
+      return;
+    }
+    const cellElement = apiRef.current.getCellElement(focusedCell.id, focusedCell.field);
+    if (cellElement?.contains(event.target)) {
+      return;
+    }
+    if (cellParams) {
+      apiRef.current.setCellFocus(cellParams.id, cellParams.field);
+    } else {
+      apiRef.current.setState(state => _extends({}, state, {
+        focus: {
+          cell: null,
+          columnHeader: null,
+          columnHeaderFilter: null,
+          columnGroupHeader: null
+        }
+      }));
+
+      // There's a focused cell but another element (not a cell) was clicked
+      // Publishes an event to notify that the focus was lost
+      publishCellFocusOut(focusedCell, event);
+    }
+  }, [apiRef, publishCellFocusOut]);
+  const handleCellModeChange = React.useCallback(params => {
+    if (params.cellMode === 'view') {
+      return;
+    }
+    const cell = 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);
+
+    // If the focused cell is in a row which does not exist anymore,
+    // focus previous row or remove the focus
+    if (cell && !apiRef.current.getRow(cell.id)) {
+      const lastFocusedRowId = cell.id;
+      let nextRowId = null;
+      if (typeof lastFocusedRowId !== 'undefined') {
+        const rowEl = apiRef.current.getRowElement(lastFocusedRowId);
+        const lastFocusedRowIndex = rowEl?.dataset.rowindex ? Number(rowEl?.dataset.rowindex) : 0;
+        const currentPage = getVisibleRows(apiRef, {
+          pagination: props.pagination,
+          paginationMode: props.paginationMode
+        });
+        const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        nextRowId = nextRow?.id ?? null;
+      }
+      apiRef.current.setState(state => _extends({}, state, {
+        focus: {
+          cell: nextRowId === null ? null : {
+            id: nextRowId,
+            field: cell.field
+          },
+          columnHeader: null,
+          columnHeaderFilter: null,
+          columnGroupHeader: null
+        }
+      }));
+    }
+  }, [apiRef, props.pagination, props.paginationMode]);
+  const handlePaginationModelChange = useEventCallback(() => {
+    const currentFocusedCell = gridFocusCellSelector(apiRef);
+    if (!currentFocusedCell) {
+      return;
+    }
+    const currentPage = getVisibleRows(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+    const rowIsInCurrentPage = currentPage.rows.find(row => row.id === currentFocusedCell.id);
+    if (rowIsInCurrentPage) {
+      return;
+    }
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        tabIndex: {
+          cell: {
+            id: currentPage.rows[0].id,
+            field: visibleColumns[0].field
+          },
+          columnGroupHeader: null,
+          columnHeader: null,
+          columnHeaderFilter: null
+        }
+      });
+    });
+  });
+  const focusApi = {
+    setCellFocus,
+    setColumnHeaderFocus,
+    setColumnHeaderFilterFocus
+  };
+  const focusPrivateApi = {
+    moveFocusToRelativeCell,
+    setColumnGroupHeaderFocus,
+    getColumnGroupHeaderFocus
+  };
+  useGridApiMethod(apiRef, focusApi, 'public');
+  useGridApiMethod(apiRef, focusPrivateApi, 'private');
+  React.useEffect(() => {
+    const doc = ownerDocument(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);
+};

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

@@ -0,0 +1,5 @@
+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>;

package/esm/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -0,0 +1,7 @@
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+export const gridHeaderFilteringStateSelector = createRootSelector(state => state.headerFiltering);
+export const gridHeaderFilteringEnabledSelector = 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);

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

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

package/esm/hooks/features/headerFiltering/index.js

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

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

@@ -0,0 +1,6 @@
+import { RefObject } from '@mui/x-internals/types';
+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;

package/esm/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -0,0 +1,105 @@
+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, {
+  headerFiltering: {
+    enabled: props.headerFilters ?? false,
+    editing: null,
+    menuOpen: null
+  }
+});
+export const useGridHeaderFiltering = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+  const setHeaderFilterState = React.useCallback(headerFilterState => {
+    apiRef.current.setState(state => {
+      // Safety check to avoid MIT users from using it
+      // This hook should ultimately be moved to the Pro package
+      if (props.signature === 'DataGrid') {
+        return state;
+      }
+      return _extends({}, state, {
+        headerFiltering: {
+          enabled: props.headerFilters ?? false,
+          editing: headerFilterState.editing ?? null,
+          menuOpen: headerFilterState.menuOpen ?? null
+        }
+      });
+    });
+  }, [apiRef, props.signature, props.headerFilters]);
+  const startHeaderFilterEditMode = React.useCallback(field => {
+    logger.debug(`Starting edit mode on header filter for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      editing: field
+    });
+  }, [apiRef, logger]);
+  const stopHeaderFilterEditMode = React.useCallback(() => {
+    logger.debug(`Stopping edit mode on header filter`);
+    apiRef.current.setHeaderFilterState({
+      editing: null
+    });
+  }, [apiRef, logger]);
+  const showHeaderFilterMenu = React.useCallback(field => {
+    logger.debug(`Opening header filter menu for field: ${field}`);
+    apiRef.current.setHeaderFilterState({
+      menuOpen: field
+    });
+  }, [apiRef, logger]);
+  const hideHeaderFilterMenu = React.useCallback(() => {
+    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);
+
+      // If the column was removed from the grid, we need to find the closest visible field
+      if (!columnLookup[fieldToFocus]) {
+        fieldToFocus = orderedFields[0];
+      }
+
+      // If the field to focus is hidden, we need to find the closest visible field
+      if (columnVisibilityModel[fieldToFocus] === false) {
+        // contains visible column fields + the field that was just hidden
+        const visibleOrderedFields = orderedFields.filter(field => {
+          if (field === fieldToFocus) {
+            return true;
+          }
+          return columnVisibilityModel[field] !== false;
+        });
+        const fieldIndex = visibleOrderedFields.indexOf(fieldToFocus);
+        fieldToFocus = visibleOrderedFields[fieldIndex + 1] || visibleOrderedFields[fieldIndex - 1];
+      }
+      apiRef.current.setHeaderFilterState({
+        menuOpen: null
+      });
+      apiRef.current.setColumnHeaderFilterFocus(fieldToFocus);
+    }
+  }, [apiRef, logger]);
+  const headerFilterPrivateApi = {
+    setHeaderFilterState
+  };
+  const headerFilterApi = {
+    startHeaderFilterEditMode,
+    stopHeaderFilterEditMode,
+    showHeaderFilterMenu,
+    hideHeaderFilterMenu
+  };
+  useGridApiMethod(apiRef, headerFilterApi, 'public');
+  useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+
+  /*
+   * EFFECTS
+   */
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      apiRef.current.setHeaderFilterState({
+        enabled: props.headerFilters ?? false
+      });
+    }
+  }, [apiRef, props.headerFilters]);
+};

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

@@ -0,0 +1,19 @@
+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";

package/esm/hooks/features/index.js

@@ -0,0 +1,20 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+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";

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

@@ -0,0 +1,13 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+/**
+ * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridFocus (method) - can be after
+ * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
+ */
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;