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

package/esm/hooks/features/sorting/useGridSorting.js

@@ -0,0 +1,250 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
+import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from "./gridSortingSelector.js";
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from "../rows/index.js";
+import { useFirstRender } from "../../utils/useFirstRender.js";
+import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from "../../core/strategyProcessing/index.js";
+import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from "./gridSortingUtils.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { getTreeNodeDescendants } from "../rows/gridRowsUtils.js";
+export const sortingStateInitializer = (state, props) => {
+  const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
+  return _extends({}, state, {
+    sorting: {
+      sortModel: sanitizeSortModel(sortModel, props.disableMultipleColumnsSorting),
+      sortedRows: []
+    }
+  });
+};
+
+/**
+ * @requires useGridRows (event)
+ * @requires useGridColumns (event)
+ */
+export const useGridSorting = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridSorting');
+  apiRef.current.registerControlState({
+    stateId: 'sortModel',
+    propModel: props.sortModel,
+    propOnChange: props.onSortModelChange,
+    stateSelector: gridSortModelSelector,
+    changeEvent: 'sortModelChange'
+  });
+  const upsertSortModel = React.useCallback((field, sortItem) => {
+    const sortModel = gridSortModelSelector(apiRef);
+    const existingIdx = sortModel.findIndex(c => c.field === field);
+    let newSortModel = [...sortModel];
+    if (existingIdx > -1) {
+      if (sortItem?.sort == null) {
+        newSortModel.splice(existingIdx, 1);
+      } else {
+        newSortModel.splice(existingIdx, 1, sortItem);
+      }
+    } else {
+      newSortModel = [...sortModel, sortItem];
+    }
+    return newSortModel;
+  }, [apiRef]);
+  const createSortItem = React.useCallback((col, directionOverride) => {
+    const sortModel = gridSortModelSelector(apiRef);
+    const existing = sortModel.find(c => c.field === col.field);
+    if (existing) {
+      const nextSort = directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder, existing.sort) : directionOverride;
+      return nextSort === undefined ? undefined : _extends({}, existing, {
+        sort: nextSort
+      });
+    }
+    return {
+      field: col.field,
+      sort: directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder) : directionOverride
+    };
+  }, [apiRef, props.sortingOrder]);
+  const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
+    if (colDef == null || colDef.sortable === false || props.disableColumnSorting) {
+      return columnMenuItems;
+    }
+    const sortingOrder = colDef.sortingOrder || props.sortingOrder;
+    if (sortingOrder.some(item => !!item)) {
+      return [...columnMenuItems, 'columnMenuSortItem'];
+    }
+    return columnMenuItems;
+  }, [props.sortingOrder, props.disableColumnSorting]);
+
+  /**
+   * API METHODS
+   */
+  const applySorting = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      if (props.sortingMode === 'server') {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return _extends({}, state, {
+          sorting: _extends({}, state.sorting, {
+            sortedRows: getTreeNodeDescendants(gridRowTreeSelector(apiRef), GRID_ROOT_GROUP_ID, false)
+          })
+        });
+      }
+      const sortModel = gridSortModelSelector(apiRef);
+      const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
+      const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
+        sortRowList
+      });
+      return _extends({}, state, {
+        sorting: _extends({}, state.sorting, {
+          sortedRows
+        })
+      });
+    });
+    apiRef.current.publishEvent('sortedRowsSet');
+  }, [apiRef, logger, props.sortingMode]);
+  const setSortModel = React.useCallback(model => {
+    const currentModel = gridSortModelSelector(apiRef);
+    if (currentModel !== model) {
+      logger.debug(`Setting sort model`);
+      apiRef.current.setState(mergeStateWithSortModel(model, props.disableMultipleColumnsSorting));
+      apiRef.current.applySorting();
+    }
+  }, [apiRef, logger, props.disableMultipleColumnsSorting]);
+  const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
+    const column = apiRef.current.getColumn(field);
+    const sortItem = createSortItem(column, direction);
+    let sortModel;
+    if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
+    } else {
+      sortModel = upsertSortModel(column.field, sortItem);
+    }
+    apiRef.current.setSortModel(sortModel);
+  }, [apiRef, upsertSortModel, createSortItem, props.disableMultipleColumnsSorting]);
+  const getSortModel = React.useCallback(() => gridSortModelSelector(apiRef), [apiRef]);
+  const getSortedRows = React.useCallback(() => {
+    const sortedRows = gridSortedRowEntriesSelector(apiRef);
+    return sortedRows.map(row => row.model);
+  }, [apiRef]);
+  const getSortedRowIds = React.useCallback(() => gridSortedRowIdsSelector(apiRef), [apiRef]);
+  const getRowIdFromRowIndex = React.useCallback(index => apiRef.current.getSortedRowIds()[index], [apiRef]);
+  const sortApi = {
+    getSortModel,
+    getSortedRows,
+    getSortedRowIds,
+    getRowIdFromRowIndex,
+    setSortModel,
+    sortColumn,
+    applySorting
+  };
+  useGridApiMethod(apiRef, sortApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const sortModelToExport = gridSortModelSelector(apiRef);
+    const shouldExportSortModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the model is controlled
+    props.sortModel != null ||
+    // Always export if the model has been initialized
+    props.initialState?.sorting?.sortModel != null ||
+    // Export if the model is not empty
+    sortModelToExport.length > 0;
+    if (!shouldExportSortModel) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      sorting: {
+        sortModel: sortModelToExport
+      }
+    });
+  }, [apiRef, props.sortModel, props.initialState?.sorting?.sortModel]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const sortModel = context.stateToRestore.sorting?.sortModel;
+    if (sortModel == null) {
+      return params;
+    }
+    apiRef.current.setState(mergeStateWithSortModel(sortModel, props.disableMultipleColumnsSorting));
+    return _extends({}, params, {
+      callbacks: [...params.callbacks, apiRef.current.applySorting]
+    });
+  }, [apiRef, props.disableMultipleColumnsSorting]);
+  const flatSortingMethod = React.useCallback(params => {
+    const rowTree = gridRowTreeSelector(apiRef);
+    const rootGroupNode = rowTree[GRID_ROOT_GROUP_ID];
+    const sortedChildren = params.sortRowList ? params.sortRowList(rootGroupNode.children.map(childId => rowTree[childId])) : [...rootGroupNode.children];
+    if (rootGroupNode.footerId != null) {
+      sortedChildren.push(rootGroupNode.footerId);
+    }
+    return sortedChildren;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
+
+  /**
+   * EVENTS
+   */
+  const handleColumnHeaderClick = React.useCallback(({
+    field,
+    colDef
+  }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
+    const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
+    sortColumn(field, undefined, allowMultipleSorting);
+  }, [sortColumn, props.disableColumnSorting]);
+  const handleColumnHeaderKeyDown = React.useCallback(({
+    field,
+    colDef
+  }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
+    // Ctrl + Enter opens the column menu
+    if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
+      sortColumn(field, undefined, event.shiftKey);
+    }
+  }, [sortColumn, props.disableColumnSorting]);
+  const handleColumnsChange = React.useCallback(() => {
+    // When the columns change we check that the sorted columns are still part of the dataset
+    const sortModel = gridSortModelSelector(apiRef);
+    const latestColumns = gridColumnLookupSelector(apiRef);
+    if (sortModel.length > 0) {
+      const newModel = sortModel.filter(sortItem => latestColumns[sortItem.field]);
+      if (newModel.length < sortModel.length) {
+        apiRef.current.setSortModel(newModel);
+      }
+    }
+  }, [apiRef]);
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'sorting') {
+      apiRef.current.applySorting();
+    }
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
+  useGridApiEventHandler(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'rowsSet', apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+
+  /**
+   * 1ST RENDER
+   */
+  useFirstRender(() => {
+    apiRef.current.applySorting();
+  });
+
+  /**
+   * EFFECTS
+   */
+  useEnhancedEffect(() => {
+    if (props.sortModel !== undefined) {
+      apiRef.current.setSortModel(props.sortModel);
+    }
+  }, [apiRef, props.sortModel]);
+};

package/esm/hooks/features/statePersistence/gridStatePersistenceInterface.d.ts

@@ -0,0 +1,40 @@
+import { GridInitialStateCommunity } from "../../../models/gridStateCommunity.js";
+export interface GridStatePersistenceApi<InitialState extends GridInitialStateCommunity> {
+  /**
+   * Generates a serializable object containing the exportable parts of the DataGrid state.
+   * These values can then be passed to the `initialState` prop or injected using the `restoreState` method.
+   * @param {GridExportStateParams} params With all properties from [[GridExportStateParams]]
+   * @returns {GridInitialState} The exported state.
+   */
+  exportState: (params?: GridExportStateParams) => InitialState;
+  /**
+   * Inject the given values into the state of the DataGrid.
+   * @param {GridInitialState} stateToRestore The exported state to restore.
+   */
+  restoreState: (stateToRestore: InitialState) => void;
+}
+export interface GridRestoreStatePreProcessingValue {
+  /**
+   * Functions to run after the state has been updated but before re-rendering.
+   * This is usually used to apply derived states like `applyFilters` or `applySorting`
+   */
+  callbacks: (() => void)[];
+}
+/**
+ * Object passed as parameter in the `exportState()` grid API method.
+ * @demos
+ *   - [Restore state with `apiRef`](/x/react-data-grid/state/#restore-the-state-with-apiref)
+ */
+export interface GridExportStateParams {
+  /**
+   * By default, the grid exports all the models.
+   * You can switch this property to `true` to only exports models that are either controlled, initialized or modified.
+   * For instance, with this property, if you don't control or initialize the `filterModel` and you did not apply any filter, the model won't be exported.
+   * Note that the column dimensions are not a model. The grid only exports the dimensions of the modified columns even when `exportOnlyDirtyModels` is false.
+   * @default false
+   */
+  exportOnlyDirtyModels?: boolean;
+}
+export interface GridRestoreStatePreProcessingContext<I extends GridInitialStateCommunity> {
+  stateToRestore: I;
+}

package/esm/hooks/features/statePersistence/gridStatePersistenceInterface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export type { GridStatePersistenceApi, GridExportStateParams } from './gridStatePersistenceInterface';

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

@@ -0,0 +1 @@
+export {};

package/esm/hooks/features/statePersistence/useGridStatePersistence.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const useGridStatePersistence: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/esm/hooks/features/statePersistence/useGridStatePersistence.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useGridApiMethod } from "../../utils/index.js";
+export const useGridStatePersistence = apiRef => {
+  const exportState = React.useCallback((params = {}) => {
+    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {}, params);
+    return stateToExport;
+  }, [apiRef]);
+  const restoreState = React.useCallback(stateToRestore => {
+    const response = apiRef.current.unstable_applyPipeProcessors('restoreState', {
+      callbacks: []
+    }, {
+      stateToRestore
+    });
+    response.callbacks.forEach(callback => {
+      callback();
+    });
+  }, [apiRef]);
+  const statePersistenceApi = {
+    exportState,
+    restoreState
+  };
+  useGridApiMethod(apiRef, statePersistenceApi, 'public');
+};

package/esm/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -0,0 +1,6 @@
+export declare const gridFocusedVirtualCellSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridCellCoordinates | null, {
+  rowIndex: number;
+  columnIndex: number;
+  id?: import("../../..").GridRowId | undefined;
+  field?: string | undefined;
+} | null>;

package/esm/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
+import { gridFocusCellSelector } from "../focus/index.js";
+import { gridVisibleRowsSelector } from "../pagination/index.js";
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, (focusedCell, renderContext, currentPage, visibleColumns) => {
+  if (!focusedCell) {
+    return false;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  const columnIndex = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex).findIndex(column => column.field === focusedCell.field);
+  const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
+  return !isInRenderContext;
+});
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  if (rowIndex === undefined) {
+    return null;
+  }
+  const columnIndex = visibleColumns.findIndex(column => column.field === focusedCell.field);
+  if (columnIndex === -1) {
+    return null;
+  }
+  return _extends({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});

package/esm/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -0,0 +1,36 @@
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export declare const gridVirtualizationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./useGridVirtualization").GridVirtualizationState>;
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
+ */
+export declare const gridVirtualizationEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the enabled state for column virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationColumnEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the enabled state for row virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationRowEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, import("../../..").GridRenderContext>;
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, number, GridColumnsRenderContext>;

package/esm/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -0,0 +1,43 @@
+import { createRootSelector, createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export const gridVirtualizationSelector = createRootSelector(state => state.virtualization);
+
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
+ */
+export const gridVirtualizationEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabled);
+
+/**
+ * Get the enabled state for column virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);
+
+/**
+ * Get the enabled state for row virtualization
+ * @category Virtualization
+ */
+export const gridVirtualizationRowEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForRows);
+
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
+
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridRenderContextColumnsSelector = createSelectorMemoized(apiRef => apiRef.current.state.virtualization.renderContext.firstColumnIndex, apiRef => apiRef.current.state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
+  firstColumnIndex,
+  lastColumnIndex
+}));

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

@@ -0,0 +1,2 @@
+export * from "./useGridVirtualization.js";
+export * from "./gridVirtualizationSelectors.js";

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

@@ -0,0 +1,2 @@
+export * from "./useGridVirtualization.js";
+export * from "./gridVirtualizationSelectors.js";

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { GridPinnedRowsPosition } from "../rows/gridRowsInterfaces.js";
+import { type GridRenderContext, type GridColumnsRenderContext, type GridRowEntry, type GridRowId } from "../../../models/index.js";
+export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
+export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
+export declare const useGridVirtualScroller: () => {
+  renderContext: GridRenderContext;
+  setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;
+  getRows: (params?: {
+    rows?: GridRowEntry[];
+    position?: GridPinnedRowsPosition;
+    renderContext?: GridRenderContext;
+  }) => React.ReactNode[];
+  getContainerProps: () => {
+    ref: (node: HTMLDivElement | null) => (() => void) | undefined;
+  };
+  getScrollerProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    onScroll: () => void;
+    onWheel: (event: React.WheelEvent) => void;
+    onTouchMove: (event: React.TouchEvent) => void;
+    style: React.CSSProperties;
+    role: string;
+    tabIndex: number | undefined;
+  };
+  getContentProps: () => {
+    style: React.CSSProperties;
+    role: string;
+    ref: (node: HTMLDivElement | null) => void;
+  };
+  getRenderZoneProps: () => {
+    role: string;
+  };
+  getScrollbarVerticalProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    role: string;
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+  getScrollbarHorizontalProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    role: string;
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+  getScrollAreaProps: () => {
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+};
+export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, pinnedLeftLength: number): number;