@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

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

@@ -1,250 +0,0 @@
-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/modern/hooks/features/statePersistence/gridStatePersistenceInterface.d.ts

@@ -1,40 +0,0 @@
-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/modern/hooks/features/statePersistence/gridStatePersistenceInterface.js

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

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -1,6 +0,0 @@
-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/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -1,32 +0,0 @@
-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/modern/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -1,36 +0,0 @@
-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/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -1,43 +0,0 @@
-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/modern/hooks/features/virtualization/index.d.ts

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

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

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

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

@@ -1,56 +0,0 @@
-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>;
-    scrollPosition: React.RefObject<{
-      top: number;
-      left: number;
-    }>;
-  };
-  getScrollbarHorizontalProps: () => {
-    ref: React.RefObject<HTMLDivElement | null>;
-    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;