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

package/components/GridRow.js

@@ -1,33 +1,51 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { fastMemo } from '@mui/x-internals/fastMemo';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
-import { gridClasses } from "../constants/gridClasses.js";
-import { composeGridClasses } from "../utils/composeGridClasses.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
-import { gridColumnPositionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
-import { useGridSelector, objectShallowCompare } from "../hooks/utils/useGridSelector.js";
-import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
-import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
-import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
-import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
-import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
-import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
-import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
-import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
-import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
-import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridRow = forwardRef(function GridRow(props, refProp) {
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridRow = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _fastMemo = require("@mui/x-internals/fastMemo");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
+var _gridEditRowModel = require("../models/gridEditRowModel");
+var _gridClasses = require("../constants/gridClasses");
+var _composeGridClasses = require("../utils/composeGridClasses");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _cellBorderUtils = require("../utils/cellBorderUtils");
+var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
+var _domUtils = require("../utils/domUtils");
+var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
+var _gridActionsColDef = require("../colDef/gridActionsColDef");
+var _constants = require("../internals/constants");
+var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
+var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
+var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
+var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
+var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
+var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _createSelector = require("../utils/createSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const isRowReorderingEnabledSelector = (0, _createSelector.createSelector)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, rowReordering) => {
+  if (!rowReordering) {
+    return false;
+  }
+  const isEditingRows = !(0, _isObjectEmpty.isObjectEmpty)(editRows);
+  return !isEditingRows;
+});
+const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
       rowId,
@@ -56,24 +74,28 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       onMouseOut,
       onMouseOver
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridPrivateApiContext();
-  const configuration = useGridConfiguration();
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ref = React.useRef(null);
-  const rootProps = useGridRootProps();
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
-  const handleRef = useForkRef(ref, refProp);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
+  const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
+  const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
+  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
+  const rowReordering = rootProps.rowReordering;
+  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
-  const editable = rootProps.editMode === GridEditModes.Row;
+  const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
+    rowId,
+    editMode: rootProps.editMode
+  });
+  const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= lastColumnIndex;
-  const classes = composeGridClasses(rootProps.classes, {
+  const classes = (0, _composeGridClasses.composeGridClasses)(rootProps.classes, {
     root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
   });
   const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
@@ -92,7 +114,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   }, [apiRef, currentPage.range, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
-    if (isEventTargetInPortal(event)) {
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
 
@@ -106,19 +128,19 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }
   }, [apiRef, rowId]);
   const publishClick = React.useCallback(event => {
-    const cell = findParentElementFromClassName(event.target, gridClasses.cell);
+    const cell = (0, _domUtils.findParentElementFromClassName)(event.target, _gridClasses.gridClasses.cell);
     const field = cell?.getAttribute('data-field');
 
     // Check if the field is available because the cell that fills the empty
     // space of the row has no field.
     if (field) {
       // User clicked in the checkbox added by checkboxSelection
-      if (field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+      if (field === _gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_COL_DEF.field) {
         return;
       }
 
       // User opened a detail panel
-      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+      if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       }
 
@@ -128,13 +150,13 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       }
 
       // User is editing a cell
-      if (apiRef.current.getCellMode(rowId, field) === GridCellModes.Edit) {
+      if (apiRef.current.getCellMode(rowId, field) === _gridEditRowModel.GridCellModes.Edit) {
         return;
       }
 
       // User clicked a button from the "actions" column type
       const column = apiRef.current.getColumn(field);
-      if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
+      if (column?.type === _gridActionsColDef.GRID_ACTIONS_COLUMN_TYPE) {
         return;
       }
     }
@@ -145,8 +167,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const rowReordering = rootProps.rowReordering;
-  const heightEntry = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), undefined, objectShallowCompare);
+  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), undefined, _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -155,7 +176,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
         height: 0
       };
     }
-    const rowStyle = _extends({}, styleProp, {
+    const rowStyle = (0, _extends2.default)({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
       minHeight: rowHeight,
@@ -181,23 +202,28 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
-    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+    const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
       isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
       indexRelativeToCurrentPage
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
+
+  /* Start of rendering */
+  if (!rowNode) {
+    return null;
+  }
+  const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
       return null;
     }
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
-    const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
+    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
     if (rowNode?.type === 'skeletonRow') {
-      return /*#__PURE__*/_jsx(slots.skeletonCell, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
         width: width,
         height: rowHeight,
@@ -205,19 +231,17 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
         align: column.align
       }, column.field);
     }
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
-    const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
-    const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-    const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-    return /*#__PURE__*/_jsx(slots.cell, _extends({
+    const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
+    const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+    const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
       column: column,
       width: width,
       rowId: rowId,
@@ -225,32 +249,27 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       showLeftBorder: showLeftBorder,
-      showRightBorder: showRightBorder
+      showRightBorder: showRightBorder,
+      row: row,
+      rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
-
-  /* Start of rendering */
-
-  if (!rowNode) {
-    return null;
-  }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
-    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedColumnPosition.LEFT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _constants.PinnedColumnPosition.LEFT);
   });
   const rightCells = pinnedColumns.right.map((column, i) => {
     const indexRelativeToAllColumns = visibleColumns.length - pinnedColumns.right.length + i;
-    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, PinnedColumnPosition.RIGHT);
+    return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, _constants.PinnedColumnPosition.RIGHT);
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
   const cells = [];
   if (hasVirtualFocusCellLeft) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
@@ -261,7 +280,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
   if (hasVirtualFocusCellRight) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
+    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -271,25 +290,26 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     onMouseOut: publish('rowMouseOut', onMouseOut),
     onMouseOver: publish('rowMouseOver', onMouseOver)
   } : null;
-  return /*#__PURE__*/_jsxs("div", _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(...rowClassNames, classes.root, className),
+    className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     style: style
   }, ariaAttributes, eventHandlers, other, {
     ref: handleRef,
-    children: [leftCells, /*#__PURE__*/_jsx("div", {
+    children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
-      className: gridClasses.cellOffsetLeft,
+      className: _gridClasses.gridClasses.cellOffsetLeft,
       style: {
         width: offsetLeft
       }
-    }), cells, /*#__PURE__*/_jsx("div", {
+    }), cells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
-      className: clsx(gridClasses.cell, gridClasses.cellEmpty)
-    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/_jsx(ScrollbarFiller, {
-      pinnedRight: pinnedColumns.right.length > 0
+      className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
+    }), rightCells, scrollbarWidth !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
+      pinnedRight: pinnedColumns.right.length > 0,
+      borderTop: !isFirstVisible
     })]
   }));
 });
@@ -298,37 +318,35 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  columnsTotalWidth: PropTypes.number.isRequired,
-  firstColumnIndex: PropTypes.number.isRequired,
+  columnsTotalWidth: _propTypes.default.number.isRequired,
+  firstColumnIndex: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
    */
-  focusedColumnIndex: PropTypes.number,
-  gridHasFiller: PropTypes.bool.isRequired,
+  focusedColumnIndex: _propTypes.default.number,
+  gridHasFiller: _propTypes.default.bool.isRequired,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
-  index: PropTypes.number.isRequired,
-  isFirstVisible: PropTypes.bool.isRequired,
-  isLastVisible: PropTypes.bool.isRequired,
-  isNotVisible: PropTypes.bool.isRequired,
-  lastColumnIndex: PropTypes.number.isRequired,
-  offsetLeft: PropTypes.number.isRequired,
-  offsetTop: PropTypes.number,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  pinnedColumns: PropTypes.object.isRequired,
-  row: PropTypes.object.isRequired,
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  scrollbarWidth: PropTypes.number.isRequired,
-  selected: PropTypes.bool.isRequired,
-  showBottomBorder: PropTypes.bool.isRequired,
-  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+  index: _propTypes.default.number.isRequired,
+  isFirstVisible: _propTypes.default.bool.isRequired,
+  isLastVisible: _propTypes.default.bool.isRequired,
+  isNotVisible: _propTypes.default.bool.isRequired,
+  lastColumnIndex: _propTypes.default.number.isRequired,
+  offsetLeft: _propTypes.default.number.isRequired,
+  onClick: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  pinnedColumns: _propTypes.default.object.isRequired,
+  row: _propTypes.default.object.isRequired,
+  rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
+  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  scrollbarWidth: _propTypes.default.number.isRequired,
+  selected: _propTypes.default.bool.isRequired,
+  showBottomBorder: _propTypes.default.bool.isRequired,
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;
-const MemoizedGridRow = fastMemo(GridRow);
-export { MemoizedGridRow as GridRow };
+const MemoizedGridRow = exports.GridRow = (0, _fastMemo.fastMemo)(GridRow);

package/components/GridRowCount.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 interface RowCountProps {
-    rowCount: number;
-    visibleRowCount: number;
+  rowCount: number;
+  visibleRowCount: number;
 }
 export type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
-    sx?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
 };
 declare const GridRowCount: React.ForwardRefExoticComponent<GridRowCountProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
-    sx?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
-export { GridRowCount };
+export { GridRowCount };

package/components/GridRowCount.js

@@ -1,16 +1,25 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"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.GridRowCount = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../constants/cssVariables");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _gridClasses = require("../constants/gridClasses");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "rowCount", "visibleRowCount"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../constants/gridClasses.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -18,35 +27,33 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['rowCount']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridRowCountRoot = styled('div', {
+const GridRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'RowCount',
   overridesResolver: (props, styles) => styles.rowCount
-})(({
-  theme
-}) => ({
+})({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2)
-}));
-const GridRowCount = forwardRef(function GridRowCount(props, ref) {
+  margin: _cssVariables.vars.spacing(0, 2)
+});
+const GridRowCount = exports.GridRowCount = (0, _forwardRef.forwardRef)(function GridRowCount(props, ref) {
   const {
       className,
       rowCount,
       visibleRowCount
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const ownerState = useGridRootProps();
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const ownerState = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(ownerState);
   if (rowCount === 0) {
     return null;
   }
   const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
-  return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
-    className: clsx(classes.root, className),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridRowCountRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other, {
     ref: ref,
@@ -58,8 +65,7 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  rowCount: PropTypes.number.isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  visibleRowCount: PropTypes.number.isRequired
-} : void 0;
-export { GridRowCount };
+  rowCount: _propTypes.default.number.isRequired,
+  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]),
+  visibleRowCount: _propTypes.default.number.isRequired
+} : void 0;

package/components/GridScrollArea.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
+import { GridScrollParams } from "../models/params/gridScrollParams.js";
 interface ScrollAreaProps {
-    scrollDirection: 'left' | 'right';
+  scrollDirection: 'left' | 'right';
+  scrollPosition: RefObject<GridScrollParams>;
 }
-declare function GridScrollAreaRaw(props: ScrollAreaProps): React.JSX.Element | null;
-export declare const GridScrollArea: typeof GridScrollAreaRaw;
-export {};
+declare function GridScrollAreaWrapper(props: ScrollAreaProps): React.JSX.Element | null;
+export declare const GridScrollArea: typeof GridScrollAreaWrapper;
+export {};