@mui/x-data-grid 7.17.0 → 7.19.0

package/modern/locales/hrHR.js

@@ -7,50 +7,57 @@ const hrHRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Gustoća',
   toolbarDensityLabel: 'Gustoća',
-  toolbarDensityCompact: 'Kompaktan',
-  toolbarDensityStandard: 'Standard',
+  toolbarDensityCompact: 'Kompaktno',
+  toolbarDensityStandard: 'Standardno',
   toolbarDensityComfortable: 'Udobno',
   // Columns selector toolbar button text
   toolbarColumns: 'Stupci',
   toolbarColumnsLabel: 'Odaberite stupce',
   // Filters toolbar button text
   toolbarFilters: 'Filteri',
-  toolbarFiltersLabel: 'Prikaži filtre',
-  toolbarFiltersTooltipHide: 'Sakrij filtre',
-  toolbarFiltersTooltipShow: 'Prikaži filtre',
-  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
+  toolbarFiltersLabel: 'Prikaži filtere',
+  toolbarFiltersTooltipHide: 'Sakrij filtere',
+  toolbarFiltersTooltipShow: 'Prikaži filtere',
+  toolbarFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
   // Quick filter toolbar field
   toolbarQuickFilterPlaceholder: 'Traži…',
   toolbarQuickFilterLabel: 'traži',
-  toolbarQuickFilterDeleteIconLabel: 'Čisto',
+  toolbarQuickFilterDeleteIconLabel: 'Obriši',
   // Export selector toolbar button text
   toolbarExport: 'Izvoz',
   toolbarExportLabel: 'Izvoz',
   toolbarExportCSV: 'Preuzmi kao CSV',
-  toolbarExportPrint: 'Ispis',
-  toolbarExportExcel: 'Preuzmite kao Excel',
+  toolbarExportPrint: 'Štampaj',
+  toolbarExportExcel: 'Preuzmi kao Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Traži',
+  columnsManagementNoColumns: 'Nema stupaca',
+  columnsManagementShowHideAllText: 'Prikaži/Sakrij sve',
+  columnsManagementReset: 'Ponovno namjesti',
   // Filter panel text
-  filterPanelAddFilter: 'Dodajte filter',
-  filterPanelRemoveAll: 'Ukloniti sve',
-  filterPanelDeleteIconLabel: 'Izbrisati',
+  filterPanelAddFilter: 'Dodaj filter',
+  filterPanelRemoveAll: 'Ukloni sve',
+  filterPanelDeleteIconLabel: 'Obriši',
   filterPanelLogicOperator: 'Logički operator',
-  filterPanelOperator: 'Operater',
+  filterPanelOperator: 'Operator',
   filterPanelOperatorAnd: 'I',
   filterPanelOperatorOr: 'Ili',
-  filterPanelColumns: 'Stupci',
+  filterPanelColumns: 'Stupac',
   filterPanelInputLabel: 'Vrijednost',
-  filterPanelInputPlaceholder: 'Vrijednost filtra',
+  filterPanelInputPlaceholder: 'Vrijednost filtera',
   // Filter operators text
   filterOperatorContains: 'sadrži',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'jednaki',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotContain: 'ne sadrži',
+  filterOperatorEquals: 'je jednak',
+  filterOperatorDoesNotEqual: 'nije jednak',
   filterOperatorStartsWith: 'počinje sa',
   filterOperatorEndsWith: 'završava sa',
   filterOperatorIs: 'je',
@@ -59,8 +66,8 @@ const hrHRGrid = {
   filterOperatorOnOrAfter: 'je na ili poslije',
   filterOperatorBefore: 'je prije',
   filterOperatorOnOrBefore: 'je na ili prije',
-  filterOperatorIsEmpty: 'prazno je',
-  filterOperatorIsNotEmpty: 'nije prazna',
+  filterOperatorIsEmpty: 'je prazno',
+  filterOperatorIsNotEmpty: 'nije prazno',
   filterOperatorIsAnyOf: 'je bilo koji od',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
@@ -70,20 +77,20 @@ const hrHRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Sadrži',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Ne sadrži',
   headerFilterOperatorEquals: 'Jednako',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nije jednako',
   headerFilterOperatorStartsWith: 'Počinje sa',
-  headerFilterOperatorEndsWith: 'Završava s',
+  headerFilterOperatorEndsWith: 'Završava sa',
   headerFilterOperatorIs: 'Je',
   headerFilterOperatorNot: 'Nije',
   headerFilterOperatorAfter: 'Je poslije',
   headerFilterOperatorOnOrAfter: 'Je uključeno ili poslije',
-  headerFilterOperatorBefore: 'Je li prije',
-  headerFilterOperatorOnOrBefore: 'Uključeno je ili prije',
-  headerFilterOperatorIsEmpty: 'Prazno je',
-  headerFilterOperatorIsNotEmpty: 'Nije prazna',
-  headerFilterOperatorIsAnyOf: 'Je li bilo koji od',
+  headerFilterOperatorBefore: 'Je prije',
+  headerFilterOperatorOnOrBefore: 'Je uključeno ili prije',
+  headerFilterOperatorIsEmpty: 'Je prazno',
+  headerFilterOperatorIsNotEmpty: 'Nije prazno',
+  headerFilterOperatorIsAnyOf: 'Je bilo koji od',
   'headerFilterOperator=': 'Jednako',
   'headerFilterOperator!=': 'Nije jednako',
   'headerFilterOperator>': 'Veći od',
@@ -92,32 +99,48 @@ const hrHRGrid = {
   'headerFilterOperator<=': 'Manje od ili jednako',
   // Filter values text
   filterValueAny: 'bilo koji',
-  filterValueTrue: 'pravi',
-  filterValueFalse: 'lažno',
+  filterValueTrue: 'tačno',
+  filterValueFalse: 'netačno',
   // Column menu text
-  columnMenuLabel: 'Jelovnik ',
+  columnMenuLabel: 'Izbornik',
   columnMenuShowColumns: 'Prikaži stupce',
   columnMenuManageColumns: 'Upravljanje stupcima',
-  columnMenuFilter: 'filtar',
+  columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Sakrij stupac',
   columnMenuUnsort: 'Poništi sortiranje',
   columnMenuSortAsc: 'Poredaj uzlazno',
-  columnMenuSortDesc: 'Poredaj silaznim redom',
+  columnMenuSortDesc: 'Poredaj silazno',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktivnih filtara` : `${count} aktivni filter`,
-  columnHeaderFiltersLabel: 'Prikaži filtre',
-  columnHeaderSortIconLabel: 'Vrsta',
+  columnHeaderFiltersTooltipActive: count => {
+    if (count === 1) {
+      return `${count} aktivan filter`;
+    }
+    if (count < 5) {
+      return `${count} aktivna filtera`;
+    }
+    return `${count} aktivnih filtera`;
+  },
+  columnHeaderFiltersLabel: 'Prikaži filtere',
+  columnHeaderSortIconLabel: 'Poredaj',
   // Rows selected footer text
-  footerRowSelected: count => count !== 1 ? `Odabrano je ${count.toLocaleString()} redaka` : `${count.toLocaleString()} redak odabran`,
+  footerRowSelected: count => {
+    if (count === 1) {
+      return `Odabran je ${count.toLocaleString()} redak`;
+    }
+    if (count < 5) {
+      return `Odabrana su ${count.toLocaleString()} retka`;
+    }
+    return `Odabrano je ${count.toLocaleString()} redaka`;
+  },
   // Total row amount footer text
   footerTotalRows: 'Ukupno redaka:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} od ${totalCount.toLocaleString()}`,
   // Checkbox selection text
-  checkboxSelectionHeaderName: 'Odabir potvrdnog okvira',
+  checkboxSelectionHeaderName: 'Odabir redaka',
   checkboxSelectionSelectAllRows: 'Odaberite sve retke',
   checkboxSelectionUnselectAllRows: 'Poništi odabir svih redaka',
-  checkboxSelectionSelectRow: 'Odaberite red',
+  checkboxSelectionSelectRow: 'Odaberite redak',
   checkboxSelectionUnselectRow: 'Poništi odabir retka',
   // Boolean cell text
   booleanCellTrueLabel: 'Da',
@@ -129,7 +152,7 @@ const hrHRGrid = {
   pinToRight: 'Prikvači desno',
   unpin: 'Otkvači',
   // Tree Data
-  treeDataGroupingHeaderName: 'Group',
+  treeDataGroupingHeaderName: 'Skupina',
   treeDataExpand: 'vidjeti djecu',
   treeDataCollapse: 'sakriti djecu',
   // Grouping columns
@@ -139,7 +162,7 @@ const hrHRGrid = {
   // Master/detail
   detailPanelToggle: 'Prebacivanje ploče s detaljima',
   expandDetailPanel: 'Proširiti',
-  collapseDetailPanel: 'Kolaps',
+  collapseDetailPanel: 'Skupiti',
   // Row reordering text
   rowReorderingHeaderName: 'Promjena redoslijeda',
   // Aggregation

package/modern/locales/jaJP.js

@@ -33,8 +33,7 @@ const jaJPGrid = {
   columnsManagementSearchTitle: '検索',
   columnsManagementNoColumns: 'カラムなし',
   columnsManagementShowHideAllText: 'すべて表示/非表示',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'リセット',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',

package/modern/locales/ptPT.js

@@ -47,9 +47,9 @@ const ptPTGrid = {
   filterPanelInputPlaceholder: 'Valor do filtro',
   // Filter operators text
   filterOperatorContains: 'contém',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'não contém',
   filterOperatorEquals: 'é igual a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'não é igual a',
   filterOperatorStartsWith: 'começa com',
   filterOperatorEndsWith: 'termina com',
   filterOperatorIs: 'é',
@@ -69,9 +69,9 @@ const ptPTGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contém',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Não contém',
   headerFilterOperatorEquals: 'É igual a',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Não é igual',
   headerFilterOperatorStartsWith: 'Começa com',
   headerFilterOperatorEndsWith: 'Termina com',
   headerFilterOperatorIs: 'É',

package/modern/locales/viVN.js

@@ -46,21 +46,21 @@ const viVNGrid = {
   filterPanelInputLabel: 'Giá trị',
   filterPanelInputPlaceholder: 'Lọc giá trị',
   // Filter operators text
-  filterOperatorContains: 'Chứa',
-  // filterOperatorDoesNotContain: 'does not contain',
-  filterOperatorEquals: 'Bằng',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'Bắt đầu bằng',
-  filterOperatorEndsWith: 'Kết thúc bằng',
-  filterOperatorIs: 'Là',
-  filterOperatorNot: 'Không là',
-  filterOperatorAfter: 'Trước',
+  filterOperatorContains: 'chứa',
+  filterOperatorDoesNotContain: 'không chứa',
+  filterOperatorEquals: 'bằng',
+  filterOperatorDoesNotEqual: 'không bằng',
+  filterOperatorStartsWith: 'bắt đầu với',
+  filterOperatorEndsWith: 'kết thúc với',
+  filterOperatorIs: 'là',
+  filterOperatorNot: 'không phải là',
+  filterOperatorAfter: 'sau',
   filterOperatorOnOrAfter: 'bằng hoặc sau',
-  filterOperatorBefore: 'Sau',
+  filterOperatorBefore: 'trước',
   filterOperatorOnOrBefore: 'bằng hoặc trước',
-  filterOperatorIsEmpty: 'Rỗng',
-  filterOperatorIsNotEmpty: 'Khác rỗng',
-  filterOperatorIsAnyOf: 'Bất kỳ',
+  filterOperatorIsEmpty: 'rỗng',
+  filterOperatorIsNotEmpty: 'khác rỗng',
+  filterOperatorIsAnyOf: 'là một trong',
   'filterOperator=': '=',
   'filterOperator!=': '!=',
   'filterOperator>': '>',
@@ -69,20 +69,20 @@ const viVNGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Chứa',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Không chứa',
   headerFilterOperatorEquals: 'Bằng',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Không bằng',
   headerFilterOperatorStartsWith: 'Bắt đầu với',
   headerFilterOperatorEndsWith: 'Kết thúc với',
-  headerFilterOperatorIs: 'là',
-  headerFilterOperatorNot: 'Không là',
+  headerFilterOperatorIs: 'Là',
+  headerFilterOperatorNot: 'Không phải là',
   headerFilterOperatorAfter: 'Sau',
-  headerFilterOperatorOnOrAfter: 'Đang hoặc sau',
+  headerFilterOperatorOnOrAfter: 'Bằng hoặc sau',
   headerFilterOperatorBefore: 'Trước',
-  headerFilterOperatorOnOrBefore: 'Đang hoặc trước',
+  headerFilterOperatorOnOrBefore: 'Bằng hoặc trước',
   headerFilterOperatorIsEmpty: 'Rỗng',
   headerFilterOperatorIsNotEmpty: 'Khác rỗng',
-  headerFilterOperatorIsAnyOf: 'Bất kỳ',
+  headerFilterOperatorIsAnyOf: 'Là một trong',
   'headerFilterOperator=': 'Bằng',
   'headerFilterOperator!=': 'Khác',
   'headerFilterOperator>': 'Lớn hơn',

package/modern/utils/createSelector.js

@@ -34,6 +34,8 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
     throw new Error('Unsupported number of selectors');
   }
   let selector;
+
+  // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -46,6 +48,7 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
       const ve = e(state, instanceId);
       return f(va, vb, vc, vd, ve);
     };
+    // eslint-disable-next-line id-denylist
   } else if (a && b && c && d && e) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -100,6 +103,8 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
     throw new Error('Unsupported number of selectors');
   }
   let selector;
+
+  // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -112,6 +117,7 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
       const ve = e(state, args, instanceId);
       return f(va, vb, vc, vd, ve, args);
     };
+    // eslint-disable-next-line id-denylist
   } else if (a && b && c && d && e) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);

package/modern/utils/domUtils.js

@@ -120,22 +120,22 @@ const findPinnedCells = ({
   });
   return cells;
 };
-export function findLeftPinnedCellsAfterCol(api, col) {
+export function findLeftPinnedCellsAfterCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedCells({
     api,
     colIndex,
-    position: 'left',
-    filterFn: index => index > colIndex
+    position: isRtl ? 'right' : 'left',
+    filterFn: index => isRtl ? index < colIndex : index > colIndex
   });
 }
-export function findRightPinnedCellsBeforeCol(api, col) {
+export function findRightPinnedCellsBeforeCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedCells({
     api,
     colIndex,
-    position: 'right',
-    filterFn: index => index < colIndex
+    position: isRtl ? 'left' : 'right',
+    filterFn: index => isRtl ? index > colIndex : index < colIndex
   });
 }
 const findPinnedHeaders = ({
@@ -159,22 +159,22 @@ const findPinnedHeaders = ({
   });
   return elements;
 };
-export function findLeftPinnedHeadersAfterCol(api, col) {
+export function findLeftPinnedHeadersAfterCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedHeaders({
     api,
-    position: 'left',
+    position: isRtl ? 'right' : 'left',
     colIndex,
-    filterFn: index => index > colIndex
+    filterFn: index => isRtl ? index < colIndex : index > colIndex
   });
 }
-export function findRightPinnedHeadersBeforeCol(api, col) {
+export function findRightPinnedHeadersBeforeCol(api, col, isRtl) {
   const colIndex = parseCellColIndex(col);
   return findPinnedHeaders({
     api,
-    position: 'right',
+    position: isRtl ? 'left' : 'right',
     colIndex,
-    filterFn: index => index < colIndex
+    filterFn: index => isRtl ? index > colIndex : index < colIndex
   });
 }
 export function findGridHeader(api, field) {

package/node/DataGrid/DataGrid.js

@@ -80,6 +80,11 @@ DataGridRaw.propTypes = {
   /**
    * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
    * @default false
+   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
+   * @example
+   * <div style={{ display: 'flex', flexDirection: 'column' }}>
+   *   <DataGrid />
+   * </div>
    */
   autoHeight: _propTypes.default.bool,
   /**
@@ -125,6 +130,11 @@ DataGridRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: _propTypes.default.number,
+  /**
+   * Sets the height in pixels of the column group headers in the Data Grid.
+   * Inherits the `columnHeaderHeight` value if not set.
+   */
+  columnGroupHeaderHeight: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -750,5 +760,10 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  unstable_rowSpanning: _propTypes.default.bool
 };

package/node/DataGrid/useDataGridComponent.js

@@ -33,6 +33,7 @@ var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpa
 var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridColumnGrouping");
 var _virtualization = require("../hooks/features/virtualization");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
+var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -54,6 +55,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridSorting.sortingStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridRowSpanning.rowSpanningStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
@@ -65,6 +67,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
+  (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
   (0, _useGridParamsApi.useGridParamsApi)(apiRef);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -81,7 +81,8 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   showColumnVerticalBorder: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0
+  throttleRowsMs: 0,
+  unstable_rowSpanning: false
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {

package/node/components/GridRow.js

@@ -346,6 +346,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
       height: _propTypes.default.number.isRequired,
       width: _propTypes.default.number.isRequired
     }).isRequired,
+    groupHeaderHeight: _propTypes.default.number.isRequired,
     hasScrollX: _propTypes.default.bool.isRequired,
     hasScrollY: _propTypes.default.bool.isRequired,
     headerFilterHeight: _propTypes.default.number.isRequired,

package/node/components/cell/GridCell.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
@@ -23,6 +24,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
+var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
@@ -114,6 +116,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const field = column.field;
   const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
@@ -123,17 +126,19 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
-    } catch (e) {
-      if (e instanceof _useGridParamsApi.MissingRowIdError) {
+    } catch (error) {
+      if (error instanceof _useGridParamsApi.MissingRowIdError) {
         return EMPTY_CELL_PARAMS;
       }
-      throw e;
+      throw error;
     }
   }, _useGridSelector.objectShallowCompare);
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
   }));
+  const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
+  const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
   const {
     cellMode,
     hasFocus,
@@ -206,6 +211,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
+  const isCellRowSpanned = hiddenCells[rowId]?.[field] ?? false;
+  const rowSpan = spannedCells[rowId]?.[field] ?? 1;
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -218,14 +225,21 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const cellStyle = (0, _extends2.default)({
       '--width': `${width}px`
     }, styleProp);
-    if (pinnedPosition === PinnedPosition.LEFT) {
-      cellStyle.left = pinnedOffset;
+    const isLeftPinned = pinnedPosition === PinnedPosition.LEFT;
+    const isRightPinned = pinnedPosition === PinnedPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
+      cellStyle[side] = pinnedOffset;
     }
-    if (pinnedPosition === PinnedPosition.RIGHT) {
-      cellStyle.right = pinnedOffset;
+    if (rowSpan > 1) {
+      cellStyle.height = `calc(var(--height) * ${rowSpan})`;
+      cellStyle.zIndex = 5;
     }
     return cellStyle;
-  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -245,6 +259,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
+  if (isCellRowSpanned) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-colindex": colIndex,
+      role: "presentation",
+      style: (0, _extends2.default)({
+        width: 'var(--width)'
+      }, style)
+    });
+  }
   if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
@@ -299,12 +322,13 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     ref: handleRef,
-    className: (0, _clsx.default)(className, classNames, classes.root),
+    className: (0, _clsx.default)(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
+    "aria-rowspan": rowSpan,
     style: style,
     title: title,
     tabIndex: tabIndex,

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -44,7 +44,7 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
     role: "presentation"

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -14,8 +14,10 @@ var _utils = require("@mui/utils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _utils2 = require("../../hooks/features/rowSelection/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
+const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -29,7 +31,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   const {
       field,
       id,
-      value: isChecked,
       rowNode,
       hasFocus,
       tabIndex
@@ -77,21 +78,28 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
       event.stopPropagation();
     }
   }, []);
+  const isSelectable = apiRef.current.isRowSelectable(id);
+  const checkboxPropsSelector = (0, _utils2.getCheckboxPropsSelector)(id, rootProps.rowSelectionPropagation?.parents ?? false);
+  const {
+    isIndeterminate,
+    isChecked
+  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
-  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
     ref: handleRef,
     tabIndex: tabIndex,
-    checked: isChecked,
+    checked: checked,
     onChange: handleChange,
     className: classes.root,
     inputProps: {
       'aria-label': label
     },
     onKeyDown: handleKeyDown,
+    indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
   }, rootProps.slotProps?.baseCheckbox, other));