@mui/x-data-grid 8.0.0-beta.3 → 8.1.0

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -1,302 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridRowNodeSelector } from "./gridRowsSelector.js";
-export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
-export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
-export const buildRootGroup = () => ({
-  type: 'group',
-  id: GRID_ROOT_GROUP_ID,
-  depth: -1,
-  groupingField: null,
-  groupingKey: null,
-  isAutoGenerated: true,
-  children: [],
-  childrenFromPath: {},
-  childrenExpanded: true,
-  parent: null
-});
-
-/**
- * A helper function to check if the id provided is valid.
- * @param {GridRowId} id Id as [[GridRowId]].
- * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
- * @param {string} detailErrorMessage A custom error message to display for invalid IDs
- */
-export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
-  if (id == null) {
-    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
-  }
-}
-export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
-  const id = getRowId ? getRowId(rowModel) : rowModel.id;
-  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
-  return id;
-};
-export const getRowValue = (row, colDef, apiRef) => {
-  const field = colDef.field;
-  if (!colDef || !colDef.valueGetter) {
-    return row[field];
-  }
-  const value = row[colDef.field];
-  return colDef.valueGetter(value, row, colDef, apiRef);
-};
-export const createRowsInternalCache = ({
-  rows,
-  getRowId,
-  loading,
-  rowCount
-}) => {
-  const updates = {
-    type: 'full',
-    rows: []
-  };
-  const dataRowIdToModelLookup = {};
-  for (let i = 0; i < rows.length; i += 1) {
-    const model = rows[i];
-    const id = getRowIdFromRowModel(model, getRowId);
-    dataRowIdToModelLookup[id] = model;
-    updates.rows.push(id);
-  }
-  return {
-    rowsBeforePartialUpdates: rows,
-    loadingPropBeforePartialUpdates: loading,
-    rowCountPropBeforePartialUpdates: rowCount,
-    updates,
-    dataRowIdToModelLookup
-  };
-};
-export const getTopLevelRowCount = ({
-  tree,
-  rowCountProp = 0
-}) => {
-  const rootGroupNode = tree[GRID_ROOT_GROUP_ID];
-  return Math.max(rowCountProp, rootGroupNode.children.length + (rootGroupNode.footerId == null ? 0 : 1));
-};
-export const getRowsStateFromCache = ({
-  apiRef,
-  rowCountProp = 0,
-  loadingProp,
-  previousTree,
-  previousTreeDepths,
-  previousGroupsToFetch
-}) => {
-  const cache = apiRef.current.caches.rows;
-
-  // 1. Apply the "rowTreeCreation" family processing.
-  const {
-    tree: unProcessedTree,
-    treeDepths: unProcessedTreeDepths,
-    dataRowIds: unProcessedDataRowIds,
-    groupingName,
-    groupsToFetch = []
-  } = apiRef.current.applyStrategyProcessor('rowTreeCreation', {
-    previousTree,
-    previousTreeDepths,
-    updates: cache.updates,
-    dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
-    previousGroupsToFetch
-  });
-
-  // 2. Apply the "hydrateRows" pipe-processing.
-  const groupingParamsWithHydrateRows = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-    tree: unProcessedTree,
-    treeDepths: unProcessedTreeDepths,
-    dataRowIds: unProcessedDataRowIds,
-    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
-  });
-
-  // 3. Reset the cache updates
-  apiRef.current.caches.rows.updates = {
-    type: 'partial',
-    actions: {
-      insert: [],
-      modify: [],
-      remove: []
-    },
-    idToActionLookup: {}
-  };
-  return _extends({}, groupingParamsWithHydrateRows, {
-    totalRowCount: Math.max(rowCountProp, groupingParamsWithHydrateRows.dataRowIds.length),
-    totalTopLevelRowCount: getTopLevelRowCount({
-      tree: groupingParamsWithHydrateRows.tree,
-      rowCountProp
-    }),
-    groupingName,
-    loading: loadingProp,
-    groupsToFetch
-  });
-};
-export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
-export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
-export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
-  const node = tree[parentId];
-  if (node.type !== 'group') {
-    return [];
-  }
-  const validDescendants = [];
-  for (let i = 0; i < node.children.length; i += 1) {
-    const child = node.children[i];
-    if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[child])) {
-      validDescendants.push(child);
-    }
-    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);
-    for (let j = 0; j < childDescendants.length; j += 1) {
-      validDescendants.push(childDescendants[j]);
-    }
-  }
-  if (!skipAutoGeneratedRows && node.footerId != null) {
-    validDescendants.push(node.footerId);
-  }
-  return validDescendants;
-};
-export const updateCacheWithNewRows = ({
-  previousCache,
-  getRowId,
-  updates,
-  groupKeys
-}) => {
-  if (previousCache.updates.type === 'full') {
-    throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
-  }
-
-  // Remove duplicate updates.
-  // A server can batch updates, and send several updates for the same row in one fn call.
-  const uniqueUpdates = new Map();
-  updates.forEach(update => {
-    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
-    if (uniqueUpdates.has(id)) {
-      uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
-    } else {
-      uniqueUpdates.set(id, update);
-    }
-  });
-  const partialUpdates = {
-    type: 'partial',
-    actions: {
-      insert: [...(previousCache.updates.actions.insert ?? [])],
-      modify: [...(previousCache.updates.actions.modify ?? [])],
-      remove: [...(previousCache.updates.actions.remove ?? [])]
-    },
-    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup),
-    groupKeys
-  };
-  const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
-  const alreadyAppliedActionsToRemove = {
-    insert: {},
-    modify: {},
-    remove: {}
-  };
-
-  // Depending on the action already applied to the data row,
-  // We might want drop the already-applied-update.
-  // For instance:
-  // - if you delete then insert, then you don't want to apply the deletion in the tree.
-  // - if you insert, then modify, then you just want to apply the insertion in the tree.
-  uniqueUpdates.forEach((partialRow, id) => {
-    const actionAlreadyAppliedToRow = partialUpdates.idToActionLookup[id];
-
-    // Action === "delete"
-    // eslint-disable-next-line no-underscore-dangle
-    if (partialRow._action === 'delete') {
-      // If the data row has been removed since the last state update,
-      // Then do nothing.
-      if (actionAlreadyAppliedToRow === 'remove' || !dataRowIdToModelLookup[id]) {
-        return;
-      }
-
-      // If the data row has been inserted / modified since the last state update,
-      // Then drop this "insert" / "modify" update.
-      if (actionAlreadyAppliedToRow != null) {
-        alreadyAppliedActionsToRemove[actionAlreadyAppliedToRow][id] = true;
-      }
-
-      // Remove the data row from the lookups and add it to the "delete" update.
-      partialUpdates.actions.remove.push(id);
-      delete dataRowIdToModelLookup[id];
-      return;
-    }
-    const oldRow = dataRowIdToModelLookup[id];
-
-    // Action === "modify"
-    if (oldRow) {
-      // If the data row has been removed since the last state update,
-      // Then drop this "remove" update and add it to the "modify" update instead.
-      if (actionAlreadyAppliedToRow === 'remove') {
-        alreadyAppliedActionsToRemove.remove[id] = true;
-        partialUpdates.actions.modify.push(id);
-      }
-      // If the date has not been inserted / modified since the last state update,
-      // Then add it to the "modify" update (if it has been inserted it should just remain "inserted").
-      else if (actionAlreadyAppliedToRow == null) {
-        partialUpdates.actions.modify.push(id);
-      }
-
-      // Update the data row lookups.
-      dataRowIdToModelLookup[id] = _extends({}, oldRow, partialRow);
-      return;
-    }
-
-    // Action === "insert"
-    // If the data row has been removed since the last state update,
-    // Then drop the "remove" update and add it to the "insert" update instead.
-    if (actionAlreadyAppliedToRow === 'remove') {
-      alreadyAppliedActionsToRemove.remove[id] = true;
-      partialUpdates.actions.insert.push(id);
-    }
-    // If the data row has not been inserted since the last state update,
-    // Then add it to the "insert" update.
-    // `actionAlreadyAppliedToRow` can't be equal to "modify", otherwise we would have an `oldRow` above.
-    else if (actionAlreadyAppliedToRow == null) {
-      partialUpdates.actions.insert.push(id);
-    }
-
-    // Update the data row lookups.
-    dataRowIdToModelLookup[id] = partialRow;
-  });
-  const actionTypeWithActionsToRemove = Object.keys(alreadyAppliedActionsToRemove);
-  for (let i = 0; i < actionTypeWithActionsToRemove.length; i += 1) {
-    const actionType = actionTypeWithActionsToRemove[i];
-    const idsToRemove = alreadyAppliedActionsToRemove[actionType];
-    if (Object.keys(idsToRemove).length > 0) {
-      partialUpdates.actions[actionType] = partialUpdates.actions[actionType].filter(id => !idsToRemove[id]);
-    }
-  }
-  return {
-    dataRowIdToModelLookup,
-    updates: partialUpdates,
-    rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
-    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
-    rowCountPropBeforePartialUpdates: previousCache.rowCountPropBeforePartialUpdates
-  };
-};
-export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
-export function computeRowsUpdates(apiRef, updates, getRowId) {
-  const nonPinnedRowsUpdates = [];
-  updates.forEach(update => {
-    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
-    const rowNode = gridRowNodeSelector(apiRef, id);
-    if (rowNode?.type === 'pinnedRow') {
-      // @ts-ignore because otherwise `release:build` doesn't work
-      const pinnedRowsCache = apiRef.current.caches.pinnedRows;
-      const prevModel = pinnedRowsCache.idLookup[id];
-      if (prevModel) {
-        pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
-      }
-    } else {
-      nonPinnedRowsUpdates.push(update);
-    }
-  });
-  return nonPinnedRowsUpdates;
-}
-let warnedOnceInvalidRowHeight = false;
-export const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
-  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
-    return rowHeightProp;
-  }
-  if (process.env.NODE_ENV !== 'production' && !warnedOnceInvalidRowHeight && typeof rowHeightProp !== 'undefined' && rowHeightProp !== null) {
-    console.warn(warningMessage);
-    warnedOnceInvalidRowHeight = true;
-  }
-  return defaultRowHeight;
-};
-export const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
-export const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');

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

@@ -1,5 +0,0 @@
-export * from "./gridRowsMetaSelector.js";
-export * from "./gridRowsMetaState.js";
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
-export type { GridRowsState, GridRowIdToModelLookup } from './gridRowsInterfaces';
-export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from "./gridRowsUtils.js";

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

@@ -1,4 +0,0 @@
-export * from "./gridRowsMetaSelector.js";
-export * from "./gridRowsMetaState.js";
-export { gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridRowMaximumTreeDepthSelector, gridDataRowIdsSelector, gridRowNodeSelector } from "./gridRowsSelector.js";
-export { GRID_ROOT_GROUP_ID, checkGridRowIdIsValid, isAutogeneratedRow } from "./gridRowsUtils.js";

package/modern/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,13 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
-import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-export declare class MissingRowIdError extends Error {}
-/**
- * @requires useGridColumns (method)
- * @requires useGridRows (method)
- * @requires useGridFocus (state)
- * @requires useGridEditing (method)
- * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
- * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
- */
-export declare function useGridParamsApi(apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps): void;

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -1,137 +0,0 @@
-import * as React from 'react';
-import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from "../../../utils/domUtils.js";
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
-import { gridRowNodeSelector } from "./gridRowsSelector.js";
-import { getRowValue as getRowValueFn } from "./gridRowsUtils.js";
-export class MissingRowIdError extends Error {}
-
-/**
- * @requires useGridColumns (method)
- * @requires useGridRows (method)
- * @requires useGridFocus (state)
- * @requires useGridEditing (method)
- * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
- * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
- */
-export function useGridParamsApi(apiRef, props) {
-  const getColumnHeaderParams = React.useCallback(field => ({
-    field,
-    colDef: apiRef.current.getColumn(field)
-  }), [apiRef]);
-  const getRowParams = React.useCallback(id => {
-    const row = apiRef.current.getRow(id);
-    if (!row) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    const params = {
-      id,
-      columns: apiRef.current.getAllColumns(),
-      row
-    };
-    return params;
-  }, [apiRef]);
-  const getCellParamsForRow = React.useCallback((id, field, row, {
-    cellMode,
-    colDef,
-    hasFocus,
-    rowNode,
-    tabIndex
-  }) => {
-    const rawValue = row[field];
-    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
-    const params = {
-      id,
-      field,
-      row,
-      rowNode,
-      colDef,
-      cellMode,
-      hasFocus,
-      tabIndex,
-      value,
-      formattedValue: value,
-      isEditable: false,
-      api: null
-    };
-    if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
-    params.isEditable = colDef && apiRef.current.isCellEditable(params);
-    return params;
-  }, [apiRef]);
-  const getCellParams = React.useCallback((id, field) => {
-    const row = apiRef.current.getRow(id);
-    const rowNode = gridRowNodeSelector(apiRef, id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    const cellFocus = gridFocusCellSelector(apiRef);
-    const cellTabIndex = gridTabIndexCellSelector(apiRef);
-    const cellMode = apiRef.current.getCellMode(id, field);
-    return apiRef.current.getCellParamsForRow(id, field, row, {
-      colDef: props.listView && props.listViewColumn?.field === field ? gridListColumnSelector(apiRef) : apiRef.current.getColumn(field),
-      rowNode,
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
-      cellMode
-    });
-  }, [apiRef, props.listView, props.listViewColumn?.field]);
-  const getCellValue = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    if (!row) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    if (!colDef || !colDef.valueGetter) {
-      return row[field];
-    }
-    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
-  }, [apiRef]);
-  const getRowValue = React.useCallback((row, colDef) => getRowValueFn(row, colDef, apiRef), [apiRef]);
-  const getRowFormattedValue = React.useCallback((row, colDef) => {
-    const value = getRowValue(row, colDef);
-    if (!colDef || !colDef.valueFormatter) {
-      return value;
-    }
-    return colDef.valueFormatter(value, row, colDef, apiRef);
-  }, [apiRef, getRowValue]);
-  const getColumnHeaderElement = React.useCallback(field => {
-    if (!apiRef.current.rootElementRef.current) {
-      return null;
-    }
-    return getGridColumnHeaderElement(apiRef.current.rootElementRef.current, field);
-  }, [apiRef]);
-  const getRowElement = React.useCallback(id => {
-    if (!apiRef.current.rootElementRef.current) {
-      return null;
-    }
-    return getGridRowElement(apiRef.current.rootElementRef.current, id);
-  }, [apiRef]);
-  const getCellElement = React.useCallback((id, field) => {
-    if (!apiRef.current.rootElementRef.current) {
-      return null;
-    }
-    return getGridCellElement(apiRef.current.rootElementRef.current, {
-      id,
-      field
-    });
-  }, [apiRef]);
-  const paramsApi = {
-    getCellValue,
-    getCellParams,
-    getCellElement,
-    getRowValue,
-    getRowFormattedValue,
-    getRowParams,
-    getRowElement,
-    getColumnHeaderParams,
-    getColumnHeaderElement
-  };
-  const paramsPrivateApi = {
-    getCellParamsForRow
-  };
-  useGridApiMethod(apiRef, paramsApi, 'public');
-  useGridApiMethod(apiRef, paramsPrivateApi, 'private');
-}

package/modern/hooks/features/rows/useGridRowAriaAttributes.d.ts

@@ -1,2 +0,0 @@
-import { GetRowAriaAttributesFn } from "../../../models/configuration/gridRowConfiguration.js";
-export declare const useGridRowAriaAttributes: () => GetRowAriaAttributesFn;

package/modern/hooks/features/rows/useGridRowAriaAttributes.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
-import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
-export const useGridRowAriaAttributes = () => {
-  const apiRef = useGridPrivateApiContext();
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-  return React.useCallback((rowNode, index) => {
-    const ariaAttributes = {};
-    const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
-    ariaAttributes['aria-rowindex'] = ariaRowIndex;
-    if (apiRef.current.isRowSelectable(rowNode.id)) {
-      ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
-    }
-    return ariaAttributes;
-  }, [apiRef, headerGroupingMaxDepth]);
-};

package/modern/hooks/features/rows/useGridRowSpanning.d.ts

@@ -1,27 +0,0 @@
-import { RefObject } from '@mui/x-internals/types';
-import type { GridColDef } from '../../../models/colDef';
-import type { GridRowId } from '../../../models/gridRows';
-import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import type { GridStateInitializer } from '../../utils/useGridInitializeState';
-export interface GridRowSpanningState {
-  spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
-  hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
-  /**
-   * For each hidden cell, it contains the row index corresponding to the cell that is
-   * the origin of the hidden cell. i.e. the cell which is spanned.
-   * Used by the virtualization to properly keep the spanned cells in view.
-   */
-  hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
-}
-export type RowRange = {
-  firstRowIndex: number;
-  lastRowIndex: number;
-};
-/**
- * @requires columnsStateInitializer (method) - should be initialized before
- * @requires rowsStateInitializer (method) - should be initialized before
- * @requires filterStateInitializer (method) - should be initialized before
- */
-export declare const rowSpanningStateInitializer: GridStateInitializer;
-export declare const useGridRowSpanning: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowSpanning" | "pagination" | "paginationMode">) => void;