@mui/x-data-grid 5.4.0 → 5.6.0

package/legacy/colDef/gridStringColDef.js

@@ -0,0 +1,21 @@
+import { renderEditInputCell } from '../components/cell/GridEditInputCell';
+import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
+import { getGridStringOperators } from './gridStringOperators';
+export var GRID_STRING_COL_DEF = {
+  width: 100,
+  minWidth: 50,
+  maxWidth: Infinity,
+  hide: false,
+  hideable: true,
+  sortable: true,
+  resizable: true,
+  filterable: true,
+  groupable: true,
+  pinnable: true,
+  editable: false,
+  sortComparator: gridStringOrNumberComparator,
+  type: 'string',
+  align: 'left',
+  filterOperators: getGridStringOperators(),
+  renderEditCell: renderEditInputCell
+};

package/legacy/colDef/gridStringOperators.js

@@ -0,0 +1,100 @@
+import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
+import { escapeRegExp } from '../utils/utils';
+import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+export var getGridStringOperators = function getGridStringOperators() {
+  return [{
+    value: 'contains',
+    getApplyFilterFn: function getApplyFilterFn(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+
+      var filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
+      return function (_ref) {
+        var value = _ref.value;
+        return value != null ? filterRegex.test(value.toString()) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'equals',
+    getApplyFilterFn: function getApplyFilterFn(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+
+      var collator = new Intl.Collator(undefined, {
+        sensitivity: 'base',
+        usage: 'search'
+      });
+      return function (_ref2) {
+        var value = _ref2.value;
+        return value != null ? collator.compare(filterItem.value, value.toString()) === 0 : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'startsWith',
+    getApplyFilterFn: function getApplyFilterFn(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+
+      var filterRegex = new RegExp("^".concat(escapeRegExp(filterItem.value), ".*$"), 'i');
+      return function (_ref3) {
+        var value = _ref3.value;
+        return value != null ? filterRegex.test(value.toString()) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'endsWith',
+    getApplyFilterFn: function getApplyFilterFn(filterItem) {
+      if (!filterItem.value) {
+        return null;
+      }
+
+      var filterRegex = new RegExp(".*".concat(escapeRegExp(filterItem.value), "$"), 'i');
+      return function (_ref4) {
+        var value = _ref4.value;
+        return value != null ? filterRegex.test(value.toString()) : false;
+      };
+    },
+    InputComponent: GridFilterInputValue
+  }, {
+    value: 'isEmpty',
+    getApplyFilterFn: function getApplyFilterFn() {
+      return function (_ref5) {
+        var value = _ref5.value;
+        return value === '' || value == null;
+      };
+    }
+  }, {
+    value: 'isNotEmpty',
+    getApplyFilterFn: function getApplyFilterFn() {
+      return function (_ref6) {
+        var value = _ref6.value;
+        return value !== '' && value != null;
+      };
+    }
+  }, {
+    value: 'isAnyOf',
+    getApplyFilterFn: function getApplyFilterFn(filterItem) {
+      if (!Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+        return null;
+      }
+
+      var collator = new Intl.Collator(undefined, {
+        sensitivity: 'base',
+        usage: 'search'
+      });
+      return function (_ref7) {
+        var value = _ref7.value;
+        return value != null ? filterItem.value.some(function (filterValue) {
+          return collator.compare(filterValue, value.toString() || '') === 0;
+        }) : false;
+      };
+    },
+    InputComponent: GridFilterInputMultipleValue
+  }];
+};

package/legacy/colDef/index.js

@@ -0,0 +1,12 @@
+export * from './gridActionsColDef';
+export * from './gridBooleanColDef';
+export * from './gridCheckboxSelectionColDef';
+export * from './gridDateColDef';
+export * from './gridNumericColDef';
+export * from './gridSingleSelectColDef';
+export * from './gridStringColDef';
+export * from './gridBooleanOperators';
+export * from './gridDateOperators';
+export * from './gridNumericOperators';
+export * from './gridSingleSelectOperators';
+export * from './gridStringOperators';

package/legacy/components/DataGridColumnHeaders.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["innerRef", "className"];
+import * as React from 'react';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridScrollArea } from './GridScrollArea';
+import { GridColumnHeaders } from './columnHeaders/GridColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeader(props, ref) {
+  var innerRef = props.innerRef,
+      className = props.className,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var _useGridColumnHeaders = useGridColumnHeaders({
+    innerRef: innerRef
+  }),
+      isDragging = _useGridColumnHeaders.isDragging,
+      getRootProps = _useGridColumnHeaders.getRootProps,
+      getInnerProps = _useGridColumnHeaders.getInnerProps,
+      getColumns = _useGridColumnHeaders.getColumns;
+
+  return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns()
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});

package/legacy/components/DataGridVirtualScroller.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "disableVirtualization"];
+import * as React from 'react';
+import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
+import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
+import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
+import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
+  var className = props.className,
+      disableVirtualization = props.disableVirtualization,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var _useGridVirtualScroll = useGridVirtualScroller({
+    ref: ref,
+    disableVirtualization: disableVirtualization
+  }),
+      getRootProps = _useGridVirtualScroll.getRootProps,
+      getContentProps = _useGridVirtualScroll.getContentProps,
+      getRenderZoneProps = _useGridVirtualScroll.getRenderZoneProps,
+      getRows = _useGridVirtualScroll.getRows;
+
+  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({
+    className: className
+  }, getRootProps(other), {
+    children: /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
+      children: /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows()
+      }))
+    }))
+  }));
+});
+export { DataGridVirtualScroller };

package/legacy/components/ErrorBoundary.js

@@ -0,0 +1,64 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import * as React from 'react';
+export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    _classCallCheck(this, ErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.api.current) {
+        this.logError(error); // Allows to trigger the Error event and all listener can run on Error
+
+        this.props.api.current.showError({
+          error: error,
+          errorInfo: errorInfo
+        });
+      }
+    }
+  }, {
+    key: "logError",
+    value: function logError(error, errorInfo) {
+      this.props.logger.error("An unexpected error occurred. Error: ".concat(error && error.message, ". "), error, errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state;
+
+      if (this.props.hasError || (_this$state = this.state) != null && _this$state.hasError) {
+        // You can render any custom fallback UI
+        return this.props.render(this.props.componentProps || this.state);
+      }
+
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true,
+        error: error
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);

package/legacy/components/ErrorOverlay.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["message", "hasError", "errorInfo"];
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+// TODO v6: rename to GridErrorOverlay
+export var ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props, ref) {
+  var message = props.message,
+      hasError = props.hasError,
+      errorInfo = props.errorInfo,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = useGridApiContext();
+  var defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, other, {
+    children: message || defaultLabel
+  }));
+});

package/legacy/components/GridApiContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export var GridApiContext = /*#__PURE__*/React.createContext(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  GridApiContext.displayName = 'GridApiContext';
+}

package/legacy/components/GridAutoSizer.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useForkRef, ownerWindow, useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import createDetectElementResize from '../lib/createDetectElementResize'; // TODO replace with https://caniuse.com/resizeobserver.
+
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
+  var children = props.children,
+      _props$defaultHeight = props.defaultHeight,
+      defaultHeight = _props$defaultHeight === void 0 ? null : _props$defaultHeight,
+      _props$defaultWidth = props.defaultWidth,
+      defaultWidth = _props$defaultWidth === void 0 ? null : _props$defaultWidth,
+      _props$disableHeight = props.disableHeight,
+      disableHeight = _props$disableHeight === void 0 ? false : _props$disableHeight,
+      _props$disableWidth = props.disableWidth,
+      disableWidth = _props$disableWidth === void 0 ? false : _props$disableWidth,
+      nonce = props.nonce,
+      onResize = props.onResize,
+      style = props.style,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState({
+    height: defaultHeight,
+    width: defaultWidth
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  var rootRef = React.useRef(null);
+  var parentElement = React.useRef(null);
+  var handleResize = useEventCallback(function () {
+    // Guard against AutoSizer component being removed from the DOM immediately after being added.
+    // This can result in invalid style values which can result in NaN values if we don't handle them.
+    // See issue #150 for more context.
+    if (parentElement.current) {
+      var height = parentElement.current.offsetHeight || 0;
+      var width = parentElement.current.offsetWidth || 0;
+      var win = ownerWindow(parentElement.current);
+      var computedStyle = win.getComputedStyle(parentElement.current);
+      var paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+      var paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+      var paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+      var paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+      var newHeight = height - paddingTop - paddingBottom;
+      var newWidth = width - paddingLeft - paddingRight;
+
+      if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
+        setState({
+          height: newHeight,
+          width: newWidth
+        });
+
+        if (onResize) {
+          onResize({
+            height: newHeight,
+            width: newWidth
+          });
+        }
+      }
+    }
+  });
+  useEnhancedEffect(function () {
+    var _parentElement$curren;
+
+    parentElement.current = rootRef.current.parentElement;
+
+    if (!parentElement) {
+      return undefined;
+    }
+
+    var win = ownerWindow((_parentElement$curren = parentElement.current) != null ? _parentElement$curren : undefined);
+    var detectElementResize = createDetectElementResize(nonce, win);
+    detectElementResize.addResizeListener(parentElement.current, handleResize);
+    handleResize();
+    return function () {
+      detectElementResize.removeResizeListener(parentElement.current, handleResize);
+    };
+  }, [nonce, handleResize]); // Outer div should not force width/height since that may prevent containers from shrinking.
+  // Inner component should overflow and use calculated width/height.
+  // See issue #68 for more information.
+
+  var outerStyle = {
+    overflow: 'visible'
+  };
+  var childParams = {};
+
+  if (!disableHeight) {
+    outerStyle.height = 0;
+    childParams.height = state.height;
+  }
+
+  if (!disableWidth) {
+    outerStyle.width = 0;
+    childParams.width = state.width;
+  }
+
+  var handleRef = useForkRef(rootRef, ref);
+  return /*#__PURE__*/_jsx("div", _extends({
+    ref: handleRef,
+    style: _extends({}, outerStyle, style)
+  }, other, {
+    children: state.height === null && state.width === null ? null : children(childParams)
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Default height to use for initial render; useful for SSR.
+   * @default null
+   */
+  defaultHeight: PropTypes.number,
+
+  /**
+   * Default width to use for initial render; useful for SSR.
+   * @default null
+   */
+  defaultWidth: PropTypes.number,
+
+  /**
+   * If `true`, disable dynamic :height property.
+   * @default false
+   */
+  disableHeight: PropTypes.bool,
+
+  /**
+   * If `true`, disable dynamic :width property.
+   * @default false
+   */
+  disableWidth: PropTypes.bool,
+
+  /**
+   * Nonce of the inlined stylesheet for Content Security Policy.
+   */
+  nonce: PropTypes.string,
+
+  /**
+   * Callback to be invoked on-resize.
+   * @param {AutoSizerSize} size The grid's size.
+   */
+  onResize: PropTypes.func
+} : void 0;
+export { GridAutoSizer };

package/legacy/components/GridFooter.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
+import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
+import { gridVisibleTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridRowCount } from './GridRowCount';
+import { GridSelectedRowCount } from './GridSelectedRowCount';
+import { GridFooterContainer } from './containers/GridFooterContainer';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+  var _rootProps$components;
+
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
+  var selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  var visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
+  var selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
+    selectedRowCount: selectedRowCount
+  }) : /*#__PURE__*/_jsx("div", {});
+  var rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(GridRowCount, {
+    rowCount: totalTopLevelRowCount,
+    visibleRowCount: visibleTopLevelRowCount
+  }) : null;
+
+  var paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.components.Pagination && /*#__PURE__*/_jsx(rootProps.components.Pagination, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.pagination));
+
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
+    ref: ref
+  }, props, {
+    children: [selectedRowCountElement, rowCountElement, paginationElement]
+  }));
+});

package/legacy/components/GridHeader.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var GridHeader = /*#__PURE__*/React.forwardRef(function GridHeader(props, ref) {
+  var _rootProps$components, _rootProps$components2;
+
+  var rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: ref
+  }, props, {
+    children: [/*#__PURE__*/_jsx(rootProps.components.PreferencesPanel, _extends({}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.preferencesPanel)), rootProps.components.Toolbar && /*#__PURE__*/_jsx(rootProps.components.Toolbar, _extends({}, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.toolbar))]
+  }));
+});

package/legacy/components/GridLoadingOverlay.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: /*#__PURE__*/_jsx(CircularProgress, {})
+  }));
+});

package/legacy/components/GridNoResultsOverlay.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+  var apiRef = useGridApiContext();
+  var noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noResultsOverlayLabel
+  }));
+});

package/legacy/components/GridNoRowsOverlay.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+  var apiRef = useGridApiContext();
+  var noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noRowsLabel
+  }));
+});

package/legacy/components/GridPagination.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
+import { styled } from '@mui/material/styles';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+var GridPaginationRoot = styled(TablePagination)(function (_ref) {
+  var _ref2;
+
+  var theme = _ref.theme;
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(tablePaginationClasses.selectLabel), _defineProperty({
+    display: 'none'
+  }, theme.breakpoints.up('sm'), {
+    display: 'block'
+  })), _defineProperty(_ref2, "& .".concat(tablePaginationClasses.input), _defineProperty({
+    display: 'none'
+  }, theme.breakpoints.up('sm'), {
+    display: 'inline-flex'
+  })), _ref2;
+});
+export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+  var _rootProps$rowsPerPag;
+
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var paginationState = useGridSelector(apiRef, gridPaginationSelector);
+  var lastPage = React.useMemo(function () {
+    return Math.floor(paginationState.rowCount / (paginationState.pageSize || 1));
+  }, [paginationState.rowCount, paginationState.pageSize]);
+  var handlePageSizeChange = React.useCallback(function (event) {
+    var newPageSize = Number(event.target.value);
+    apiRef.current.setPageSize(newPageSize);
+  }, [apiRef]);
+  var handlePageChange = React.useCallback(function (event, page) {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pageSize;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var warnedOnceMissingPageSizeInRowsPerPageOptions = React.useRef(false);
+
+    if (!warnedOnceMissingPageSizeInRowsPerPageOptions.current && !rootProps.autoPageSize && !rootProps.rowsPerPageOptions.includes((_rootProps$pageSize = rootProps.pageSize) != null ? _rootProps$pageSize : paginationState.pageSize)) {
+      var _rootProps$pageSize2;
+
+      console.warn(["MUI: The page size `".concat((_rootProps$pageSize2 = rootProps.pageSize) != null ? _rootProps$pageSize2 : paginationState.pageSize, "` is not preset in the `rowsPerPageOptions`"), "Add it to show the pagination select."].join('\n'));
+      warnedOnceMissingPageSizeInRowsPerPageOptions.current = true;
+    }
+  }
+
+  return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
+    ref: ref // @ts-ignore
+    ,
+    component: "div",
+    count: paginationState.rowCount,
+    page: paginationState.page <= lastPage ? paginationState.page : lastPage,
+    rowsPerPageOptions: (_rootProps$rowsPerPag = rootProps.rowsPerPageOptions) != null && _rootProps$rowsPerPag.includes(paginationState.pageSize) ? rootProps.rowsPerPageOptions : [],
+    rowsPerPage: paginationState.pageSize,
+    onPageChange: handlePageChange,
+    onRowsPerPageChange: handlePageSizeChange
+  }, apiRef.current.getLocaleText('MuiTablePagination'), props));
+});