@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.6

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

@@ -13,10 +13,10 @@ var _constants = require("../../../internals/constants");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
-var _useGridSelector = require("../../utils/useGridSelector");
-var _gridRowsSelector = require("./gridRowsSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _utils = require("../../../utils/utils");
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -61,8 +61,8 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       const backwardsHiddenCells = [];
       if (index === rangeToProcess.firstRowIndex) {
         let prevIndex = index - 1;
-        const prevRowEntry = visibleRows[prevIndex];
-        while (prevIndex >= range.firstRowIndex && (0, _gridRowSpanningUtils.getCellValue)(prevRowEntry.model, colDef, apiRef) === cellValue) {
+        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;
@@ -76,6 +76,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
           spannedRowId = prevRowEntry.id;
           spannedRowIndex = prevIndex;
           prevIndex -= 1;
+          prevRowEntry = visibleRows[prevIndex];
         }
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
@@ -138,75 +139,59 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.rowSpanning) {
-    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);
+  if (!props.rowSpanning) {
     return (0, _extends2.default)({}, state, {
-      rowSpanning: {
-        spannedCells,
-        hiddenCells,
-        hiddenCellOriginMap
-      }
+      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: EMPTY_STATE
+    rowSpanning: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    }
   });
 };
 exports.rowSpanningStateInitializer = rowSpanningStateInitializer;
 const useGridRowSpanning = (apiRef, props) => {
-  const {
-    range,
-    rows: visibleRows
-  } = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
-  const colDefs = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
-  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   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 lastRange = React.useRef(EMPTY_RANGE);
-  const updateRowSpanningState = React.useCallback(
-  // A reset needs to occur when:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
-  // - The filtering is applied
-  // - The sorting is applied
-  // - The `paginationModel` is updated
-  // - The rows are updated
-  (resetState = true) => {
-    if (!props.rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
-      }
-      return;
-    }
+  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;
     }
@@ -220,6 +205,7 @@ const useGridRowSpanning = (apiRef, props) => {
     if (rangeToProcess === null) {
       return;
     }
+    const colDefs = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const {
       spannedCells,
       hiddenCells,
@@ -232,7 +218,8 @@ const useGridRowSpanning = (apiRef, props) => {
     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;
-    if (!shouldUpdateState) {
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    if (!shouldUpdateState || hasNoSpannedCells) {
       return;
     }
     apiRef.current.setState(state => {
@@ -244,34 +231,36 @@ const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
-  const prevRenderContext = React.useRef(renderContext);
-  const isFirstRender = React.useRef(true);
-  const shouldResetState = React.useRef(false);
-  const previousTree = React.useRef(tree);
-  React.useEffect(() => {
-    const firstRender = isFirstRender.current;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-    if (tree !== previousTree.current) {
-      previousTree.current = tree;
-      updateRowSpanningState(true);
+  }, [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;
     }
-    if (range && lastRange.current && (0, _gridRowSpanningUtils.isRowRangeUpdated)(range, lastRange.current)) {
-      lastRange.current = range;
-      shouldResetState.current = true;
-    }
-    if (!firstRender && prevRenderContext.current !== renderContext) {
-      if ((0, _gridRowSpanningUtils.isRowRangeUpdated)(prevRenderContext.current, renderContext)) {
-        updateRowSpanningState(shouldResetState.current);
-        shouldResetState.current = false;
+    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
+        }));
       }
-      prevRenderContext.current = renderContext;
-      return;
+    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+      resetRowSpanningState();
     }
-    updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
+  }, [apiRef, resetRowSpanningState, props.rowSpanning]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.4
+ * @mui/x-data-grid v8.0.0-alpha.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/utils/index.js

@@ -14,17 +14,6 @@ Object.keys(_computeSlots).forEach(function (key) {
     }
   });
 });
-var _useProps = require("./useProps");
-Object.keys(_useProps).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useProps[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useProps[key];
-    }
-  });
-});
 var _propValidation = require("./propValidation");
 Object.keys(_propValidation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/locales/koKR.js

@@ -30,16 +30,15 @@ const koKRGrid = {
   toolbarQuickFilterLabel: '검색',
   toolbarQuickFilterDeleteIconLabel: '초기화',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: '프롬프트 입력…',
+  toolbarPromptControlWithRecordingPlaceholder: '프롬프트 입력 또는 녹음…',
+  toolbarPromptControlRecordingPlaceholder: '녹음 중…',
+  toolbarPromptControlLabel: '프롬프트 입력',
+  toolbarPromptControlRecordButtonDefaultLabel: '녹음',
+  toolbarPromptControlRecordButtonActiveLabel: '녹음 정지',
+  toolbarPromptControlSendActionLabel: '전송',
+  toolbarPromptControlSendActionAriaLabel: '프롬프트 전송',
+  toolbarPromptControlErrorMessage: '요청을 처리하는 동안 오류가 발생했습니다. 다른 프롬프트로 다시 시도하십시오.',
   // Export selector toolbar button text
   toolbarExport: '내보내기',
   toolbarExportLabel: '내보내기',
@@ -47,15 +46,14 @@ const koKRGrid = {
   toolbarExportPrint: '프린트',
   toolbarExportExcel: 'Excel로 내보내기',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '검색',
+  columnsManagementNoColumns: '열이 없습니다.',
+  columnsManagementShowHideAllText: '모두 보기/숨기기',
+  columnsManagementReset: '초기화',
+  columnsManagementDeleteIconLabel: '제거',
   // Filter panel text
   filterPanelAddFilter: '필터 추가',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: '모두 삭제',
   filterPanelDeleteIconLabel: '삭제',
   filterPanelLogicOperator: '논리 연산자',
   filterPanelOperator: '연산자',
@@ -66,9 +64,9 @@ const koKRGrid = {
   filterPanelInputPlaceholder: '값 입력',
   // Filter operators text
   filterOperatorContains: '포함하는',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '포함하지 않는',
   filterOperatorEquals: '값이 같은',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '값이 다른',
   filterOperatorStartsWith: '시작하는',
   filterOperatorEndsWith: '끝나는',
   filterOperatorIs: '~인',
@@ -80,36 +78,34 @@ const koKRGrid = {
   filterOperatorIsEmpty: '값이 없는',
   filterOperatorIsNotEmpty: '값이 있는',
   filterOperatorIsAnyOf: '값 중 하나인',
-  // 'filterOperator=': '=',
-  // 'filterOperator!=': '!=',
-  // 'filterOperator>': '>',
-  // 'filterOperator>=': '>=',
-  // 'filterOperator<': '<',
-  // 'filterOperator<=': '<=',
-
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
-  // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorContains: '포함하는',
+  headerFilterOperatorDoesNotContain: '포함하지 않는',
+  headerFilterOperatorEquals: '값이 같은',
+  headerFilterOperatorDoesNotEqual: '값이 다른',
+  headerFilterOperatorStartsWith: '시작하는',
+  headerFilterOperatorEndsWith: '끝나는',
+  headerFilterOperatorIs: '~인',
+  headerFilterOperatorNot: '~아닌',
+  headerFilterOperatorAfter: '더 이후',
+  headerFilterOperatorOnOrAfter: '이후',
+  headerFilterOperatorBefore: '더 이전',
+  headerFilterOperatorOnOrBefore: '이전',
+  headerFilterOperatorIsEmpty: '값이 없는',
+  headerFilterOperatorIsNotEmpty: '값이 있는',
+  headerFilterOperatorIsAnyOf: '값 중 하나인',
+  'headerFilterOperator=': '값이 같은',
+  'headerFilterOperator!=': '값이 다른',
+  'headerFilterOperator>': '더 큰',
+  'headerFilterOperator>=': '같거나 더 큰',
+  'headerFilterOperator<': '더 작은',
+  'headerFilterOperator<=': '같거나 더 작은',
   // Filter values text
   filterValueAny: '아무값',
   filterValueTrue: '참',
@@ -117,7 +113,7 @@ const koKRGrid = {
   // Column menu text
   columnMenuLabel: '메뉴',
   columnMenuShowColumns: '열 표시',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
   columnMenuHideColumn: '열 숨기기',
   columnMenuUnsort: '정렬 해제',

package/node/locales/nlNL.js

@@ -51,8 +51,7 @@ const nlNLGrid = {
   columnsManagementNoColumns: 'Geen kolommen',
   columnsManagementShowHideAllText: 'Toon/Verberg Alle',
   columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Verwijderen',
   // Filter panel text
   filterPanelAddFilter: 'Filter toevoegen',
   filterPanelRemoveAll: 'Alles verwijderen',
@@ -66,9 +65,9 @@ const nlNLGrid = {
   filterPanelInputPlaceholder: 'Filter waarde',
   // Filter operators text
   filterOperatorContains: 'bevat',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'bevat niet',
   filterOperatorEquals: 'gelijk aan',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'niet gelijk aan',
   filterOperatorStartsWith: 'begint met',
   filterOperatorEndsWith: 'eindigt met',
   filterOperatorIs: 'is',
@@ -88,9 +87,9 @@ const nlNLGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Bevat',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Bevat niet',
   headerFilterOperatorEquals: 'Gelijk aan',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Niet gelijk aan',
   headerFilterOperatorStartsWith: 'Begint met',
   headerFilterOperatorEndsWith: 'Eindigt met',
   headerFilterOperatorIs: 'Is',

package/node/material/index.js

@@ -1,14 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
 var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -21,9 +28,12 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _GridColumnUnsortedIcon = require("./icons/GridColumnUnsortedIcon");
 var _icons = require("./icons");
 var _MUISelectOption = _interopRequireDefault(require("./components/MUISelectOption"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["inert", "iconStart", "iconEnd", "children"];
 const iconSlots = {
   booleanCellTrueIcon: _icons.GridCheckIcon,
   booleanCellFalseIcon: _icons.GridCloseIcon,
@@ -61,12 +71,14 @@ const iconSlots = {
   filterPanelRemoveAllIcon: _icons.GridDeleteForeverIcon,
   columnReorderIcon: _icons.GridDragIcon
 };
-const materialSlots = (0, _extends2.default)({}, iconSlots, {
+const baseSlots = {
   baseBadge: _Badge.default,
   baseCheckbox: _Checkbox.default,
+  baseCircularProgress: _CircularProgress.default,
   baseDivider: _Divider.default,
+  baseLinearProgress: _LinearProgress.default,
   baseMenuList: _MenuList.default,
-  baseMenuItem: _MenuItem.default,
+  baseMenuItem: BaseMenuItem,
   baseTextField: _TextField.default,
   baseFormControl: _FormControl.default,
   baseSelect: _Select.default,
@@ -77,6 +89,27 @@ const materialSlots = (0, _extends2.default)({}, iconSlots, {
   basePopper: _Popper.default,
   baseInputLabel: _InputLabel.default,
   baseSelectOption: _MUISelectOption.default,
+  baseSkeleton: _Skeleton.default,
   baseChip: _Chip.default
-});
-var _default = exports.default = materialSlots;
+};
+const materialSlots = (0, _extends2.default)({}, baseSlots, iconSlots);
+var _default = exports.default = materialSlots;
+function BaseMenuItem(props) {
+  const {
+      inert,
+      iconStart,
+      iconEnd,
+      children
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (inert) {
+    other.disableRipple = true;
+  }
+  return /*#__PURE__*/React.createElement(_MenuItem.default, other, [iconStart && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+    children: iconStart
+  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+    children: children
+  }, "2"), iconEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+    children: iconEnd
+  }, "3")]);
+}

package/node/models/gridBaseSlots.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/utils/utils.js

@@ -14,6 +14,7 @@ exports.isNumber = isNumber;
 exports.isObject = isObject;
 exports.localStorageAvailable = localStorageAvailable;
 exports.range = range;
+exports.runIf = void 0;
 function isNumber(value) {
   return typeof value === 'number' && !Number.isNaN(value);
 }
@@ -213,4 +214,10 @@ function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-function eslintUseValue(_) {}
+function eslintUseValue(_) {}
+const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};
+exports.runIf = runIf;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.0.0-alpha.4",
+  "version": "8.0.0-alpha.6",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -42,7 +42,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-internals": "8.0.0-alpha.2"
+    "@mui/x-internals": "8.0.0-alpha.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/utils.d.ts

@@ -54,3 +54,4 @@ export declare function deepClone(obj: Record<string, any>): any;
  * that hint disables checks on all values instead of just one.
  */
 export declare function eslintUseValue(_: any): void;
+export declare const runIf: (condition: boolean, fn: Function) => (params: unknown) => void;

package/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};

package/internals/utils/useProps.d.ts

@@ -1 +0,0 @@
-export declare function useProps<T extends Record<string, any>>(allProps: T): T;

package/internals/utils/useProps.js

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-/** Gathers props for the root element into a single `.forwardedProps` field */
-function groupForwardedProps(props) {
-  const keys = Object.keys(props);
-  if (!keys.some(key => key.startsWith('aria-') || key.startsWith('data-'))) {
-    return props;
-  }
-  const newProps = {};
-  const forwardedProps = props.forwardedProps ?? {};
-  for (let i = 0; i < keys.length; i += 1) {
-    const key = keys[i];
-    if (key.startsWith('aria-') || key.startsWith('data-')) {
-      forwardedProps[key] = props[key];
-    } else {
-      newProps[key] = props[key];
-    }
-  }
-  newProps.forwardedProps = forwardedProps;
-  return newProps;
-}
-export function useProps(allProps) {
-  return React.useMemo(() => groupForwardedProps(allProps), [allProps]);
-}

package/joy/icons.d.ts

@@ -1,32 +0,0 @@
-import { GridIconSlotsComponent } from '../models/gridIconSlotsComponent';
-export declare const GridArrowUpwardIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridArrowDownwardIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridKeyboardArrowLeft: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridKeyboardArrowRight: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridExpandMoreIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridFilterListIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridFilterAltIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridSearchIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridMenuIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridCheckCircleIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridColumnIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridSeparatorIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridViewHeadlineIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridTableRowsIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridViewStreamIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridTripleDotsVerticalIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridCloseIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridAddIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridRemoveIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridLoadIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridDragIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridSaveAltIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridCheckIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridMoreVertIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridVisibilityOffIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridViewColumnIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridClearIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridDeleteIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-export declare const GridDeleteForeverIcon: import("@mui/types").OverridableComponent<import("@mui/joy/SvgIcon").SvgIconTypeMap<{}, "svg">>;
-declare const joyIconSlots: GridIconSlotsComponent;
-export default joyIconSlots;