@redsift/table 10.3.0-alpha.1 → 10.3.0-alpha.10

package/index.js

@@ -1,9 +1,9 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
 export * from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
-import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, LinkButton, ThemeProvider as ThemeProvider$4, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
+import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, ThemeProvider as ThemeProvider$4, LinkButton, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
 import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext as ThemeContext$3, keyframes } from '@emotion/react';
@@ -17871,6 +17871,76 @@ class LicenseInfo {
   }
 }
 
+/**
+ * Component style.
+ */
+const StyledDataGrid = styled$3.div`
+  ${_ref => {
+  let {
+    $height
+  } = _ref;
+  return $height ? css`
+          height: ${$height};
+        ` : '';
+}}
+
+  width: 100%;
+
+  .MuiDataGrid-root {
+    font-family: var(--redsift-typography-datagrid-header-font-family);
+    border: none;
+  }
+
+  .MuiDataGrid-row {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+    font-size: var(--redsift-typography-datagrid-cell-font-size);
+    font-weight: var(--redsift-typography-datagrid-cell-font-weight);
+  }
+
+  .MuiDataGrid-columnHeaderTitle {
+    font-family: var(--redsift-typography-datagrid-header-font-family);
+    font-size: var(--redsift-typography-datagrid-header-font-size);
+    font-weight: var(--redsift-typography-datagrid-header-font-weight);
+  }
+
+  .MuiDataGrid-columnHeaders {
+    border-bottom-color: var(--redsift-color-primary-n);
+  }
+
+  .MuiDataGrid-columnSeparator {
+    display: none;
+  }
+
+  .MuiTablePagination-root {
+    .MuiTablePagination-selectLabel {
+      font-family: var(--redsift-typography-datagrid-header-font-family);
+    }
+    .MuiTablePagination-displayedRows {
+      font-family: var(--redsift-typography-datagrid-cell-font-family);
+    }
+
+    .MuiInputBase-root {
+      font-family: var(--redsift-typography-datagrid-cell-font-family);
+    }
+  }
+
+  .Mui-checked {
+    color: var(--redsift-color-primary-n);
+  }
+
+  .MuiDataGrid-rowCount {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+
+  .MuiTablePagination-displayedRows {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+
+  .MuiBadge-standard {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+`;
+
 /**
  * Component style.
  */
@@ -21452,34 +21522,6 @@ const useInteractions = function (propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 };
 
-const TooltipContext = /*#__PURE__*/React__default.createContext(null);
-
-/**
- * Context props.
- */
-
-/**
- * Component variant.
- */
-const TooltipPlacement = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  'left-start': 'left-start',
-  'left-end': 'left-end'
-};
-
-/**
- * Component props.
- */
-
 /**
  * Component style.
  */
@@ -21603,7 +21645,6 @@ const StyledTooltipContent = styled$3.div`
 
 const COMPONENT_NAME$5 = 'TooltipContent';
 const CLASSNAME$5 = 'redsift-tooltip-content';
-const DEFAULT_PROPS$4 = {};
 
 /**
  * The TooltipContent component.
@@ -21647,14 +21688,14 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, isOpen && /*#__PURE__*/React__default.createElement(StyledTooltipContent, _extends$2({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
-    $theme: theme,
+    $theme: theme
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0,
       visibility: x == null ? 'hidden' : 'visible'
-    }, style)
-  }, getFloatingProps(props), {
+    }, style),
     $placement: placement
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: arrowRef,
@@ -21669,12 +21710,10 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, children)));
 });
 TooltipContent.className = CLASSNAME$5;
-TooltipContent.defaultProps = DEFAULT_PROPS$4;
 TooltipContent.displayName = COMPONENT_NAME$5;
 
 const COMPONENT_NAME$4 = 'TooltipTrigger';
 const CLASSNAME$4 = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$3 = {};
 
 /**
  * The TooltipTrigger component.
@@ -21687,31 +21726,62 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     getReferenceProps,
     refs,
     tooltipId,
-    triggerClassName
+    triggerClassName,
+    color
   } = useTooltipContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
   if ( /*#__PURE__*/React__default.isValidElement(children)) {
     var _children$props$child;
-    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), {}, {
       'aria-describedby': tooltipId
     }, children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
-      className: classNames(children.props.className, triggerClassName)
-    }))));
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
   }
   return /*#__PURE__*/React__default.createElement("span", _extends$2({
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
 TooltipTrigger.className = CLASSNAME$4;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$3;
 TooltipTrigger.displayName = COMPONENT_NAME$4;
 
+const TooltipContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const TooltipPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end'
+};
+
+/**
+ * Component props.
+ */
+
 function useTooltip(_ref) {
   let {
+    color,
     defaultOpen,
     delay,
     placement,
@@ -21764,13 +21834,14 @@ function useTooltip(_ref) {
   });
   const interactions = useInteractions([hover, focus, dismiss, role]);
   return React__default.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
     arrowRef,
     tooltipId,
     triggerClassName
-  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
 const ThemeContext = /*#__PURE__*/React__default.createContext(null);
@@ -21778,10 +21849,6 @@ const ThemeProvider = ThemeContext.Provider;
 
 const COMPONENT_NAME$3 = 'Tooltip';
 const CLASSNAME$3 = 'redsift-tooltip';
-const DEFAULT_PROPS$2 = {
-  delay: 500,
-  placement: TooltipPlacement.top
-};
 
 /**
  * The Tooltip component.
@@ -21789,17 +21856,19 @@ const DEFAULT_PROPS$2 = {
 const BaseTooltip = props => {
   const {
     children,
+    color,
     defaultOpen,
-    delay,
+    delay = 500,
     isOpen,
     onOpen,
-    placement,
-    tooltipId,
+    placement = TooltipPlacement.top,
     theme: propsTheme,
+    tooltipId,
     triggerClassName
   } = props;
   const theme = useTheme$4 ? useTheme$4(propsTheme) : undefined;
   const tooltip = useTooltip({
+    color,
     defaultOpen,
     delay,
     placement,
@@ -21819,7 +21888,6 @@ const BaseTooltip = props => {
   }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
 };
 BaseTooltip.className = CLASSNAME$3;
-BaseTooltip.defaultProps = DEFAULT_PROPS$2;
 BaseTooltip.displayName = COMPONENT_NAME$3;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
@@ -21853,24 +21921,6 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
 const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
 const COMPONENT_NAME$2 = 'GridToolbarFilterSemanticField';
 const CLASSNAME$2 = 'redsift-datagrid-toolbar-nlp-filter-field';
-const DEFAULT_PROPS$1 = {
-  dateFormat: 'yyyy-mm-dd',
-  defaultModel: 'gpt-4-1106-preview',
-  defaultFilter: {
-    items: [],
-    logicOperator: 'and'
-  },
-  disablePower: false,
-  localeText: {
-    textLabel: 'Semantic filtering',
-    textPlaceholder: 'Describe here how you would like to filter this datagrid.',
-    buttonAriaLabel: 'Submit',
-    buttonText: 'Run',
-    powerText: 'Power mode',
-    powerTooltipContent: 'The Power mode can get better results but is slower.',
-    errorText: 'Unable to find a valid filter, please try again with a more specific prompt.'
-  }
-};
 const DEFAULT_OPERATORS = {
   string: ['contains', 'equals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
   number: ['=', '!=', '>', '>=', '<', '<=', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
@@ -21944,10 +21994,13 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       nlpFilterConfig,
       onFilterModelChange,
-      dateFormat = DEFAULT_PROPS$1.dateFormat,
-      defaultModel = DEFAULT_PROPS$1.defaultModel,
-      defaultFilter = DEFAULT_PROPS$1.defaultFilter,
-      disablePower = DEFAULT_PROPS$1.disablePower,
+      dateFormat = 'yyyy-mm-dd',
+      defaultModel = 'gpt-4-1106-preview',
+      defaultFilter = {
+        items: [],
+        logicOperator: 'and'
+      },
+      disablePower = false,
       localeText
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
@@ -21959,7 +22012,15 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     powerText,
     powerTooltipContent,
     errorText
-  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$1.localeText), localeText);
+  } = _objectSpread2({
+    textLabel: 'Semantic filtering',
+    textPlaceholder: 'Describe here how you would like to filter this datagrid.',
+    buttonAriaLabel: 'Submit',
+    buttonText: 'Run',
+    powerText: 'Power mode',
+    powerTooltipContent: 'The Power mode can get better results but is slower.',
+    errorText: 'Unable to find a valid filter, please try again with a more specific prompt.'
+  }, localeText);
   const [prompt, setPrompt] = useState('');
   const modelRef = useRef(defaultModel);
   const showErrorRef = useRef(false);
@@ -22028,7 +22089,6 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
   }, errorText));
 });
 GridToolbarFilterSemanticField.className = CLASSNAME$2;
-GridToolbarFilterSemanticField.defaultProps = DEFAULT_PROPS$1;
 GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
 
 /**
@@ -22091,7 +22151,33 @@ const Toolbar$3 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-const _excluded$d = ["children", "color", "onClick", "startIcon"];
+const _excluded$d = ["displayName"];
+const muiIconToDSIcon = {
+  ColumnFilteredIcon: mdiFilterVariant,
+  ColumnSelectorIcon: mdiViewColumn,
+  ColumnSortedAscendingIcon: mdiChevronUp,
+  ColumnSortedDescendingIcon: mdiChevronDown,
+  DensityCompactIcon: mdiViewHeadline,
+  DensityStandardIcon: mdiViewSequential,
+  DensityComfortableIcon: mdiViewStream,
+  DetailPanelCollapseIcon: mdiChevronDown,
+  DetailPanelExpandIcon: mdiChevronRight,
+  ExportIcon: mdiTrayArrowDown,
+  OpenFilterButtonIcon: mdiFilterVariant
+};
+const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      displayName
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
+    ref: ref,
+    size: forwardedProps.fontSize,
+    icon: muiIconToDSIcon[displayName]
+  }));
+});
+
+const _excluded$c = ["children", "color", "onClick", "startIcon"];
 const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$className;
   const {
@@ -22100,7 +22186,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       startIcon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   if ((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('redsift-condensed')) {
     return /*#__PURE__*/React__default.createElement(IconButton$2, _extends$2({}, forwardedProps, {
@@ -22126,7 +22212,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 
-const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
+const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
 const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       checked,
@@ -22134,7 +22220,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     isSelected: checked && !indeterminate,
     isDisabled: disabled,
@@ -22144,32 +22230,6 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$b = ["displayName"];
-const muiIconToDSIcon = {
-  ColumnFilteredIcon: mdiFilterVariant,
-  ColumnSelectorIcon: mdiViewColumn,
-  ColumnSortedAscendingIcon: mdiChevronUp,
-  ColumnSortedDescendingIcon: mdiChevronDown,
-  DensityCompactIcon: mdiViewHeadline,
-  DensityStandardIcon: mdiViewSequential,
-  DensityComfortableIcon: mdiViewStream,
-  DetailPanelCollapseIcon: mdiChevronDown,
-  DetailPanelExpandIcon: mdiChevronRight,
-  ExportIcon: mdiTrayArrowDown,
-  OpenFilterButtonIcon: mdiFilterVariant
-};
-const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      displayName
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
-  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
-    ref: ref,
-    size: forwardedProps.fontSize,
-    icon: muiIconToDSIcon[displayName]
-  }));
-});
-
 const _excluded$a = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled$1(BasePopper$1, {
   name: 'MuiPopper',
@@ -22371,86 +22431,6 @@ const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const defaultSxStyle = {
-  '.MuiDataGrid-columnHeaders': {
-    flexDirection: 'column',
-    alignItems: 'normal'
-  },
-  '.MuiDataGrid-selectedRowCount': {
-    margin: 'none'
-  }
-};
-
-/**
- * Component style.
- */
-const StyledDataGrid = styled$3.div`
-  ${_ref => {
-  let {
-    $height
-  } = _ref;
-  return $height ? css`
-          height: ${$height};
-        ` : '';
-}}
-
-  width: 100%;
-
-  .MuiDataGrid-root {
-    font-family: var(--redsift-typography-datagrid-header-font-family);
-    border: none;
-  }
-
-  .MuiDataGrid-row {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-    font-size: var(--redsift-typography-datagrid-cell-font-size);
-    font-weight: var(--redsift-typography-datagrid-cell-font-weight);
-  }
-
-  .MuiDataGrid-columnHeaderTitle {
-    font-family: var(--redsift-typography-datagrid-header-font-family);
-    font-size: var(--redsift-typography-datagrid-header-font-size);
-    font-weight: var(--redsift-typography-datagrid-header-font-weight);
-  }
-
-  .MuiDataGrid-columnHeaders {
-    border-bottom-color: var(--redsift-color-primary-n);
-  }
-
-  .MuiDataGrid-columnSeparator {
-    display: none;
-  }
-
-  .MuiTablePagination-root {
-    .MuiTablePagination-selectLabel {
-      font-family: var(--redsift-typography-datagrid-header-font-family);
-    }
-    .MuiTablePagination-displayedRows {
-      font-family: var(--redsift-typography-datagrid-cell-font-family);
-    }
-
-    .MuiInputBase-root {
-      font-family: var(--redsift-typography-datagrid-cell-font-family);
-    }
-  }
-
-  .Mui-checked {
-    color: var(--redsift-color-primary-n);
-  }
-
-  .MuiDataGrid-rowCount {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-
-  .MuiTablePagination-displayedRows {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-
-  .MuiBadge-standard {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-`;
-
 function Ripple(props) {
   const {
     className,
@@ -24609,151 +24589,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const ControlledPagination$1 = _ref => {
-  let {
-    apiRef,
-    selectionStatus,
-    setSelectionStatusType,
-    selectionStatusType,
-    displaySelection,
-    displayPagination,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
-    displayRowsPerPage,
-    paginationProps,
-    rowCount
-  } = _ref;
-  const totalNumberOfRowsInTable = rowCount;
-  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
-  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
-  return /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "7px"
-  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatusType === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, "All selectable rows in the table are selected.", ' ', /*#__PURE__*/React__default.createElement(LinkButton, {
-    onClick: () => {
-      setSelectionStatusType('none');
-      apiRef.current.selectRows([], false, true);
-    }
-  }, "Clear selection.")) : selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, pageRowsLabel, ' ', /*#__PURE__*/React__default.createElement(LinkButton, {
-    onClick: () => {
-      setSelectionStatusType('table');
-    }
-  }, "Select all selectable rows in the table.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
-    component: "div",
-    count: totalNumberOfRowsInTable,
-    page: paginationModel.page,
-    onPageChange: (event, page) => onPaginationModelChange({
-      page,
-      pageSize: paginationModel.pageSize
-    }),
-    rowsPerPage: paginationModel.pageSize,
-    onRowsPerPageChange: event => onPaginationModelChange({
-      page: paginationModel.page,
-      pageSize: parseInt(event.target.value, 10)
-    }),
-    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
-  }, paginationProps)) : null);
-};
-
-const onServerSideSelectionStatusChange = _ref => {
-  let {
-    newSelectionModel,
-    apiRef,
-    selectionStatus,
-    selectionStatusType,
-    setSelectionStatusType,
-    isRowSelectable,
-    page,
-    pageSize
-  } = _ref;
-  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref2 => {
-    let {
-      model
-    } = _ref2;
-    return isRowSelectable({
-      row: model
-    });
-  }).map(_ref3 => {
-    let {
-      id
-    } = _ref3;
-    return id;
-  }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
-  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-  const numberOfSelectedRows = newSelectionModel.length;
-  const selectedRowsInPage = selectableRowsInPage.filter(rowId => newSelectionModel.includes(rowId));
-  const numberOfSelectedRowsInPage = selectedRowsInPage.length;
-  const isSamePage = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.page) == page;
-  const isSamePageSize = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.pageSize) == pageSize;
-  if (selectionStatusType === 'table') {
-    // if we just move across page or pageSize
-    if (!isSamePage || !isSamePageSize) {
-      selectionStatus.current = {
-        type: 'table',
-        numberOfSelectedRows,
-        numberOfSelectedRowsInPage,
-        page,
-        pageSize
-      };
-    }
-    // if we selected all selectable rows (as effect of the previous if condition)
-    else if (numberOfSelectedRows > 0) {
-      setSelectionStatusType('none');
-      selectionStatus.current = {
-        type: 'none',
-        numberOfSelectedRows,
-        numberOfSelectedRowsInPage,
-        page,
-        pageSize
-      };
-      apiRef.current.selectRows([], false, true);
-    }
-    return;
-  }
-  if (selectionStatusType === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
-    setTimeout(() => {
-      apiRef.current.selectRows(selectedRowsInPage, false, false);
-    }, 0);
-  }
-  if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
-    setSelectionStatusType('page');
-    selectionStatus.current = {
-      type: 'page',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-  } else if (numberOfSelectedRows > 0) {
-    setSelectionStatusType('other');
-    selectionStatus.current = {
-      type: 'other',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-  } else {
-    setSelectionStatusType('none');
-    selectionStatus.current = {
-      type: 'none',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-  }
-};
-
+const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "ControlledPagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
+  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount"];
+const COMPONENT_NAME$1 = 'DataGrid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
   return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
     let {
@@ -24769,8 +24608,7 @@ const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
     return id;
   }) : gridFilteredSortedRowIdsSelector(apiRef);
 };
-
-const ControlledPagination = _ref => {
+const ControlledPagination = _ref3 => {
   let {
     displaySelection = false,
     displayRowsPerPage = false,
@@ -24782,7 +24620,7 @@ const ControlledPagination = _ref => {
     pageSizeOptions,
     isRowSelectable,
     paginationProps
-  } = _ref;
+  } = _ref3;
   const filteredRowsInTable = getSelectableRowsInTable(apiRef);
   const selectableRowsInTable = getSelectableRowsInTable(apiRef, isRowSelectable);
   const numberOfFilteredRowsInTable = filteredRowsInTable.length;
@@ -24822,26 +24660,56 @@ const ControlledPagination = _ref => {
     rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
   }, paginationProps)) : null);
 };
-
-const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "selectionStatusType", "setSelectionStatusType", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "rowSelectionModel", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "sx", "theme", "paginationMode", "rowCount", "onSelectionStatusChange"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
-const DEFAULT_PROPS = {
-  license: process.env.MUI_LICENSE_KEY,
-  paginationPlacement: 'both'
+const ServerSideControlledPagination = _ref4 => {
+  let {
+    selectionStatus,
+    displaySelection,
+    displayPagination,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
+    displayRowsPerPage,
+    paginationProps,
+    rowCount
+  } = _ref4;
+  const totalNumberOfRowsInTable = rowCount;
+  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
+  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "7px"
+  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
+    component: "div",
+    count: totalNumberOfRowsInTable,
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+  }, paginationProps)) : null);
 };
-const Toolbar = _ref => {
+const Toolbar = _ref5 => {
   let {
       hideToolbar,
       RenderedToolbar,
       filterModel,
       onFilterModelChange,
       pagination,
+      ControlledPagination,
       paginationPlacement,
       selectionStatus,
-      selectionStatusType,
-      setSelectionStatusType,
       apiRef,
       isRowSelectable,
       paginationModel,
@@ -24850,19 +24718,16 @@ const Toolbar = _ref => {
       paginationProps,
       paginationMode = 'client',
       rowCount
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$1);
+    } = _ref5,
+    forwardedProps = _objectWithoutProperties(_ref5, _excluded$1);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, forwardedProps, {
     filterModel: filterModel,
     onFilterModelChange: onFilterModelChange
-  })) : null, pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, {
-    apiRef: apiRef,
+  })) : null, pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
     displaySelection: true,
     displayRowsPerPage: false,
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus.current,
-    setSelectionStatusType: setSelectionStatusType,
-    selectionStatusType: selectionStatusType,
     paginationModel: paginationModel,
     onPaginationModelChange: onPaginationModelChange,
     pageSizeOptions: pageSizeOptions,
@@ -24881,8 +24746,63 @@ const Toolbar = _ref => {
     paginationProps: paginationProps
   }) : null);
 };
+const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
+  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+    let {
+      model
+    } = _ref6;
+    return isRowSelectable({
+      row: model
+    });
+  }).map(_ref7 => {
+    let {
+      id
+    } = _ref7;
+    return id;
+  }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+  const numberOfSelectedRows = newSelectionModel.length;
+  const selectedRowsInPage = selectableRowsInPage.filter(rowId => newSelectionModel.includes(rowId));
+  const numberOfSelectedRowsInPage = selectedRowsInPage.length;
+  const isSamePage = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.page) == page;
+  const isSamePageSize = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.pageSize) == pageSize;
+
+  // if previous status is `page`,
+  // if page and pageSize didn't change
+  // and all the rows are selected, deselect all row
+  if (selectionStatus.current.type === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
+    setTimeout(() => {
+      apiRef.current.selectRows(selectedRowsInPage, false, false);
+    }, 0);
+  }
+  if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
+    selectionStatus.current = {
+      type: 'page',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  } else if (numberOfSelectedRows > 0) {
+    selectionStatus.current = {
+      type: 'other',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  } else {
+    selectionStatus.current = {
+      type: 'none',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  }
+};
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ref2, _ref3, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref4, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
+  var _ref8, _ref9, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref10, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -24895,22 +24815,21 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       hideToolbar,
       initialState,
       isRowSelectable,
-      license,
+      license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
+      rowSelectionModel: propsSelectionModel,
       paginationModel: propsPaginationModel,
       onPaginationModelChange: propsOnPaginationModelChange,
-      pageSizeOptions,
-      rowSelectionModel: propsRowSelectionModel,
       onRowSelectionModelChange,
       pagination,
-      paginationPlacement,
+      paginationPlacement = 'both',
       paginationProps,
       rows,
+      pageSizeOptions,
       sx,
       theme: propsTheme,
       paginationMode = 'client',
-      rowCount,
-      onSelectionStatusChange: propsOnSelectionStatusChange
+      rowCount
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
   const theme = useTheme$4(propsTheme);
@@ -24930,13 +24849,13 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
-  }, [propsRowSelectionModel]);
+    setRowSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
   const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref2 = (_ref3 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 100,
-    page: (_ref4 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref4 !== void 0 ? _ref4 : 0
+    pageSize: (_ref8 = (_ref9 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref9 !== void 0 ? _ref9 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref8 !== void 0 ? _ref8 : 100,
+    page: (_ref10 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref10 !== void 0 ? _ref10 : 0
   });
   const onPaginationModelChange = model => {
     if (propsOnPaginationModelChange) {
@@ -24950,43 +24869,24 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setPaginationModel(propsPaginationModel);
     }
   }, [propsPaginationModel]);
-  const [selectionStatusType, setSelectionStatusType] = useState('none');
   const selectionStatus = useRef({
-    type: selectionStatusType,
+    type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
     page: paginationModel.page,
     pageSize: paginationModel.pageSize
   });
-  const onSelectionStatusChange = selectionStatusType => {
-    if (propsOnSelectionStatusChange) {
-      propsOnSelectionStatusChange(selectionStatusType);
-    }
-  };
-  useEffect(() => {
-    onSelectionStatusChange(selectionStatusType);
-  }, [selectionStatusType]);
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
-    if (paginationMode === 'server') {
-      onServerSideSelectionStatusChange({
-        newSelectionModel: Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel],
-        apiRef,
-        selectionStatus,
-        selectionStatusType,
-        setSelectionStatusType,
-        isRowSelectable,
-        page: paginationModel.page,
-        pageSize: paginationModel.pageSize
-      });
+    if (paginationMode == 'server') {
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
-  const isServerTableSelection = paginationMode === 'server' && selectionStatusType === 'table';
   const muiTheme = useMemo(() => createTheme({
     palette: {
       mode: theme,
@@ -25053,7 +24953,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }, props))
     }, slots), {}, {
       toolbar: Toolbar,
-      pagination: props => pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, _extends$2({}, props, {
+      pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -25086,10 +24986,9 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         filterModel,
         onFilterModelChange,
         pagination,
+        ControlledPagination: paginationMode == 'server' ? ServerSideControlledPagination : ControlledPagination,
         paginationPlacement,
         selectionStatus,
-        selectionStatusType,
-        setSelectionStatusType,
         apiRef,
         isRowSelectable,
         paginationModel,
@@ -25102,43 +25001,43 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     }),
     filterModel: filterModel,
     initialState: initialState,
-    isRowSelectable: !isServerTableSelection ? isRowSelectable : () => false,
+    isRowSelectable: isRowSelectable,
     onFilterModelChange: onFilterModelChange,
     pagination: pagination,
     paginationMode: paginationMode,
-    keepNonExistentRowsSelected: paginationMode === 'server',
+    keepNonExistentRowsSelected: paginationMode == 'server',
     rows: rows,
+    pageSizeOptions: pageSizeOptions,
     paginationModel: paginationModel,
     onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    rowSelectionModel: isServerTableSelection ? getSelectableRowsInTable(apiRef, isRowSelectable) : rowSelectionModel,
+    rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref11 => {
           let {
             model
-          } = _ref5;
+          } = _ref11;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref6 => {
+        }).map(_ref12 => {
           let {
             id
-          } = _ref6;
+          } = _ref12;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref13 => {
           let {
             model
-          } = _ref7;
+          } = _ref13;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref8 => {
+        }).map(_ref14 => {
           let {
             id
-          } = _ref8;
+          } = _ref14;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -25149,25 +25048,21 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          setSelectionStatusType('page');
           selectionStatus.current = {
             type: 'page',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          setSelectionStatusType('table');
           selectionStatus.current = {
             type: 'table',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows > 0) {
-          setSelectionStatusType('other');
           selectionStatus.current = {
             type: 'other',
             numberOfSelectedRows
           };
         } else {
-          setSelectionStatusType('none');
           selectionStatus.current = {
             type: 'none',
             numberOfSelectedRows
@@ -25176,11 +25071,18 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
-    sx: _objectSpread2(_objectSpread2({}, sx), defaultSxStyle)
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
   })))));
 });
 DataGrid.className = CLASSNAME$1;
-DataGrid.defaultProps = DEFAULT_PROPS;
 DataGrid.displayName = COMPONENT_NAME$1;
 
 const StyledTextCell = styled$3.div`