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

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

@@ -1,117 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  gridRowCountSelector: true,
-  gridRowsLoadingSelector: true,
-  gridTopLevelRowCountSelector: true,
-  gridRowsLookupSelector: true,
-  gridRowTreeSelector: true,
-  gridRowGroupingNameSelector: true,
-  gridRowTreeDepthsSelector: true,
-  gridRowMaximumTreeDepthSelector: true,
-  gridDataRowIdsSelector: true,
-  GRID_ROOT_GROUP_ID: true,
-  checkGridRowIdIsValid: true,
-  isAutogeneratedRow: true
-};
-Object.defineProperty(exports, "GRID_ROOT_GROUP_ID", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsUtils.GRID_ROOT_GROUP_ID;
-  }
-});
-Object.defineProperty(exports, "checkGridRowIdIsValid", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsUtils.checkGridRowIdIsValid;
-  }
-});
-Object.defineProperty(exports, "gridDataRowIdsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridDataRowIdsSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowCountSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowCountSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowGroupingNameSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowGroupingNameSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowMaximumTreeDepthSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowMaximumTreeDepthSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowTreeDepthsSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowTreeDepthsSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowTreeSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowTreeSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowsLoadingSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowsLoadingSelector;
-  }
-});
-Object.defineProperty(exports, "gridRowsLookupSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridRowsLookupSelector;
-  }
-});
-Object.defineProperty(exports, "gridTopLevelRowCountSelector", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsSelector.gridTopLevelRowCountSelector;
-  }
-});
-Object.defineProperty(exports, "isAutogeneratedRow", {
-  enumerable: true,
-  get: function () {
-    return _gridRowsUtils.isAutogeneratedRow;
-  }
-});
-var _gridRowsMetaSelector = require("./gridRowsMetaSelector");
-Object.keys(_gridRowsMetaSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridRowsMetaSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridRowsMetaSelector[key];
-    }
-  });
-});
-var _gridRowsMetaState = require("./gridRowsMetaState");
-Object.keys(_gridRowsMetaState).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridRowsMetaState[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridRowsMetaState[key];
-    }
-  });
-});
-var _gridRowsSelector = require("./gridRowsSelector");
-var _gridRowsUtils = require("./gridRowsUtils");

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

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MissingRowIdError = void 0;
-exports.useGridParamsApi = useGridParamsApi;
-var React = _interopRequireWildcard(require("react"));
-var _domUtils = require("../../../utils/domUtils");
-var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
-var _gridListViewSelectors = require("../listView/gridListViewSelectors");
-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
- */
-exports.MissingRowIdError = MissingRowIdError;
-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 getCellParams = React.useCallback((id, field) => {
-    const colDef = props.unstable_listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    const rawValue = row[field];
-    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
-    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
-    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
-    const params = {
-      id,
-      field,
-      row,
-      rowNode,
-      colDef,
-      cellMode: apiRef.current.getCellMode(id, field),
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
-      value,
-      formattedValue: value,
-      isEditable: false,
-      api: {}
-    };
-    if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
-    params.isEditable = colDef && apiRef.current.isCellEditable(params);
-    return params;
-  }, [apiRef, props.unstable_listView]);
-  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) => {
-    const field = colDef.field;
-    if (!colDef || !colDef.valueGetter) {
-      return row[field];
-    }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, 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 (0, _domUtils.getGridColumnHeaderElement)(apiRef.current.rootElementRef.current, field);
-  }, [apiRef]);
-  const getRowElement = React.useCallback(id => {
-    if (!apiRef.current.rootElementRef.current) {
-      return null;
-    }
-    return (0, _domUtils.getGridRowElement)(apiRef.current.rootElementRef.current, id);
-  }, [apiRef]);
-  const getCellElement = React.useCallback((id, field) => {
-    if (!apiRef.current.rootElementRef.current) {
-      return null;
-    }
-    return (0, _domUtils.getGridCellElement)(apiRef.current.rootElementRef.current, {
-      id,
-      field
-    });
-  }, [apiRef]);
-  const paramsApi = {
-    getCellValue,
-    getCellParams,
-    getCellElement,
-    getRowValue,
-    getRowFormattedValue,
-    getRowParams,
-    getRowElement,
-    getColumnHeaderParams,
-    getColumnHeaderElement
-  };
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsApi, 'public');
-}

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

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useGridRowAriaAttributes = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _rowSelection = require("../rowSelection");
-var _useGridSelector = require("../../utils/useGridSelector");
-var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
-var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
-const useGridRowAriaAttributes = () => {
-  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const selectedIdsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.selectedIdsLookupSelector);
-  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.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'] = selectedIdsLookup[rowNode.id] !== undefined;
-    }
-    return ariaAttributes;
-  }, [apiRef, selectedIdsLookup, headerGroupingMaxDepth]);
-};
-exports.useGridRowAriaAttributes = useGridRowAriaAttributes;

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -1,266 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useGridRowSpanning = exports.rowSpanningStateInitializer = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _constants = require("../../../internals/constants");
-var _gridColumnsSelector = require("../columns/gridColumnsSelector");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
-var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
-var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
-var _utils = require("../../../utils/utils");
-const EMPTY_STATE = {
-  spannedCells: {},
-  hiddenCells: {},
-  hiddenCellOriginMap: {}
-};
-const EMPTY_RANGE = {
-  firstRowIndex: 0,
-  lastRowIndex: 0
-};
-const skippedFields = new Set([_gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
-/**
- * Default number of rows to process during state initialization to avoid flickering.
- * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without
- * compromising performance.
- */
-const DEFAULT_ROWS_TO_PROCESS = 20;
-const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange) => {
-  const spannedCells = resetState ? {} : (0, _extends2.default)({}, apiRef.current.state.rowSpanning.spannedCells);
-  const hiddenCells = resetState ? {} : (0, _extends2.default)({}, apiRef.current.state.rowSpanning.hiddenCells);
-  const hiddenCellOriginMap = resetState ? {} : (0, _extends2.default)({}, apiRef.current.state.rowSpanning.hiddenCellOriginMap);
-  if (resetState) {
-    processedRange = EMPTY_RANGE;
-  }
-  colDefs.forEach(colDef => {
-    if (skippedFields.has(colDef.field)) {
-      return;
-    }
-    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
-      const row = visibleRows[index];
-      if (hiddenCells[row.id]?.[colDef.field]) {
-        continue;
-      }
-      const cellValue = (0, _gridRowSpanningUtils.getCellValue)(row.model, colDef, apiRef);
-      if (cellValue == null) {
-        continue;
-      }
-      let spannedRowId = row.id;
-      let spannedRowIndex = index;
-      let rowSpan = 0;
-
-      // For first index, also scan in the previous rows to handle the reset state case e.g by sorting
-      const backwardsHiddenCells = [];
-      if (index === rangeToProcess.firstRowIndex) {
-        let prevIndex = index - 1;
-        let prevRowEntry = visibleRows[prevIndex];
-        while (prevIndex >= range.firstRowIndex && prevRowEntry && (0, _gridRowSpanningUtils.getCellValue)(prevRowEntry.model, colDef, apiRef) === cellValue) {
-          const currentRow = visibleRows[prevIndex + 1];
-          if (hiddenCells[currentRow.id]) {
-            hiddenCells[currentRow.id][colDef.field] = true;
-          } else {
-            hiddenCells[currentRow.id] = {
-              [colDef.field]: true
-            };
-          }
-          backwardsHiddenCells.push(index);
-          rowSpan += 1;
-          spannedRowId = prevRowEntry.id;
-          spannedRowIndex = prevIndex;
-          prevIndex -= 1;
-          prevRowEntry = visibleRows[prevIndex];
-        }
-      }
-      backwardsHiddenCells.forEach(hiddenCellIndex => {
-        if (hiddenCellOriginMap[hiddenCellIndex]) {
-          hiddenCellOriginMap[hiddenCellIndex][colDef.field] = spannedRowIndex;
-        } else {
-          hiddenCellOriginMap[hiddenCellIndex] = {
-            [colDef.field]: spannedRowIndex
-          };
-        }
-      });
-
-      // Scan the next rows
-      let relativeIndex = index + 1;
-      while (relativeIndex <= range.lastRowIndex && visibleRows[relativeIndex] && (0, _gridRowSpanningUtils.getCellValue)(visibleRows[relativeIndex].model, colDef, apiRef) === cellValue) {
-        const currentRow = visibleRows[relativeIndex];
-        if (hiddenCells[currentRow.id]) {
-          hiddenCells[currentRow.id][colDef.field] = true;
-        } else {
-          hiddenCells[currentRow.id] = {
-            [colDef.field]: true
-          };
-        }
-        if (hiddenCellOriginMap[relativeIndex]) {
-          hiddenCellOriginMap[relativeIndex][colDef.field] = spannedRowIndex;
-        } else {
-          hiddenCellOriginMap[relativeIndex] = {
-            [colDef.field]: spannedRowIndex
-          };
-        }
-        relativeIndex += 1;
-        rowSpan += 1;
-      }
-      if (rowSpan > 0) {
-        if (spannedCells[spannedRowId]) {
-          spannedCells[spannedRowId][colDef.field] = rowSpan + 1;
-        } else {
-          spannedCells[spannedRowId] = {
-            [colDef.field]: rowSpan + 1
-          };
-        }
-      }
-    }
-    processedRange = {
-      firstRowIndex: Math.min(processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
-      lastRowIndex: Math.max(processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
-    };
-  });
-  return {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap,
-    processedRange
-  };
-};
-
-/**
- * @requires columnsStateInitializer (method) - should be initialized before
- * @requires rowsStateInitializer (method) - should be initialized before
- * @requires filterStateInitializer (method) - should be initialized before
- */
-const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (!props.rowSpanning) {
-    return (0, _extends2.default)({}, state, {
-      rowSpanning: EMPTY_STATE
-    });
-  }
-  const rowIds = state.rows.dataRowIds || [];
-  const orderedFields = state.columns.orderedFields || [];
-  const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
-  const columnsLookup = state.columns.lookup;
-  const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
-  if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
-    return (0, _extends2.default)({}, state, {
-      rowSpanning: EMPTY_STATE
-    });
-  }
-  const rangeToProcess = {
-    firstRowIndex: 0,
-    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
-  };
-  const rows = rowIds.map(id => ({
-    id,
-    model: dataRowIdToModelLookup[id]
-  }));
-  const colDefs = orderedFields.map(field => columnsLookup[field]);
-  const {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap
-  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
-  return (0, _extends2.default)({}, state, {
-    rowSpanning: {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    }
-  });
-};
-exports.rowSpanningStateInitializer = rowSpanningStateInitializer;
-const useGridRowSpanning = (apiRef, props) => {
-  const processedRange = (0, _useLazyRef.default)(() => {
-    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
-    } : EMPTY_RANGE;
-  });
-  const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
-    const {
-      range,
-      rows: visibleRows
-    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    if (range === null || !(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
-      return;
-    }
-    if (resetState) {
-      processedRange.current = EMPTY_RANGE;
-    }
-    const rangeToProcess = (0, _gridRowSpanningUtils.getUnprocessedRange)({
-      firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
-    }, processedRange.current);
-    if (rangeToProcess === null) {
-      return;
-    }
-    const colDefs = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
-    const {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap,
-      processedRange: newProcessedRange
-    } = computeRowSpanningState(apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange.current);
-    processedRange.current = newProcessedRange;
-    const newSpannedCellsCount = Object.keys(spannedCells).length;
-    const newHiddenCellsCount = Object.keys(hiddenCells).length;
-    const currentSpannedCellsCount = Object.keys(apiRef.current.state.rowSpanning.spannedCells).length;
-    const currentHiddenCellsCount = Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length;
-    const shouldUpdateState = resetState || newSpannedCellsCount !== currentSpannedCellsCount || newHiddenCellsCount !== currentHiddenCellsCount;
-    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
-    if (!shouldUpdateState || hasNoSpannedCells) {
-      return;
-    }
-    apiRef.current.setState(state => {
-      return (0, _extends2.default)({}, state, {
-        rowSpanning: {
-          spannedCells,
-          hiddenCells,
-          hiddenCellOriginMap
-        }
-      });
-    });
-  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
-
-  // Reset events trigger a full re-computation of the row spanning state:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
-  // - The filtering is applied
-  // - The sorting is applied
-  // - The `paginationModel` is updated
-  // - The rows are updated
-  const resetRowSpanningState = React.useCallback(() => {
-    const renderContext = (0, _gridVirtualizationSelectors.gridRenderContextSelector)(apiRef);
-    if (!(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
-      return;
-    }
-    updateRowSpanningState(renderContext, true);
-  }, [apiRef, updateRowSpanningState]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'renderedRowsIntervalChange', (0, _utils.runIf)(props.rowSpanning, updateRowSpanningState));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
-  React.useEffect(() => {
-    if (!props.rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
-      }
-    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
-      resetRowSpanningState();
-    }
-  }, [apiRef, resetRowSpanningState, props.rowSpanning]);
-};
-exports.useGridRowSpanning = useGridRowSpanning;