@redsift/table 10.2.0-muiv5 → 10.3.0-alpha.1

package/index.js

@@ -1,8 +1,9 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } 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, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } 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, useState, useCallback, createElement, useMemo } from 'react';
-import { Icon, baseContainer, Theme, 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 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 { 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';
@@ -17639,7 +17640,7 @@ const isBetweenOperator = {
   label: 'is between',
   value: 'isBetween',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
@@ -17652,7 +17653,7 @@ const isBetweenOperator = {
       return null;
     }
     return params => {
-      return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -17665,7 +17666,7 @@ const containsAnyOfOperator = {
   label: 'contains any of',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17688,7 +17689,7 @@ const containsAnyOfCIOperator = {
   label: 'contains any of (case insensitive)',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17715,7 +17716,7 @@ const endsWithAnyOfOperator = {
   label: 'ends with any of',
   value: 'endsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17742,7 +17743,7 @@ const isAnyOfOperator = {
   label: 'is any of',
   value: 'isAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17766,7 +17767,7 @@ const isNotAnyOfOperator = {
   label: 'is not any of',
   value: 'isNotAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17790,7 +17791,7 @@ const startsWithAnyOfOperator = {
   label: 'starts with any of',
   value: 'startsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17819,7 +17820,7 @@ const getGridStringOperators = () => [...getGridStringOperators$1(), ...getGridS
 
 const API_URL = 'https://api.openai.com/v1/chat/completions';
 async function getCompletion(text, role, openai_api_key) {
-  let model = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'gpt-3.5-turbo-0613';
+  let model = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'gpt-3.5-turbo-1106';
   try {
     const messages = [{
       role: 'system',
@@ -17870,76 +17871,6 @@ 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.
  */
@@ -21684,6 +21615,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     style,
     theme: propsTheme
   } = props;
+  const appContainerState = useContext(AppContainerContext);
   const {
     getFloatingProps,
     isOpen,
@@ -21711,7 +21643,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     left: 'right'
   }[placement.split('-')[0]];
   return /*#__PURE__*/React__default.createElement(FloatingPortal, {
-    id: "redsift-app-container"
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
   }, isOpen && /*#__PURE__*/React__default.createElement(StyledTooltipContent, _extends$2({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
@@ -21754,7 +21686,8 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     getReferenceProps,
     refs,
-    tooltipId
+    tooltipId,
+    triggerClassName
   } = useTooltipContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
@@ -21765,7 +21698,8 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     }, props), {}, {
       'aria-describedby': tooltipId
     }, children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
+      className: classNames(children.props.className, triggerClassName)
     }))));
   }
   return /*#__PURE__*/React__default.createElement("span", _extends$2({
@@ -21783,7 +21717,8 @@ function useTooltip(_ref) {
     placement,
     isOpen: propsIsOpen,
     onOpen,
-    tooltipId: propsTooltipId
+    tooltipId: propsTooltipId,
+    triggerClassName
   } = _ref;
   const arrowRef = useRef(null);
   const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
@@ -21833,8 +21768,9 @@ function useTooltip(_ref) {
     handleOpen
   }, interactions), data), {}, {
     arrowRef,
-    tooltipId
-  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId]);
+    tooltipId,
+    triggerClassName
+  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
 const ThemeContext = /*#__PURE__*/React__default.createContext(null);
@@ -21859,7 +21795,8 @@ const BaseTooltip = props => {
     onOpen,
     placement,
     tooltipId,
-    theme: propsTheme
+    theme: propsTheme,
+    triggerClassName
   } = props;
   const theme = useTheme$4 ? useTheme$4(propsTheme) : undefined;
   const tooltip = useTooltip({
@@ -21869,7 +21806,8 @@ const BaseTooltip = props => {
     isOpen,
     onOpen,
     tooltipId,
-    theme
+    theme,
+    triggerClassName
   });
   const [[trigger], [content]] = partitionComponents(React__default.Children.toArray(children), [isComponent('TooltipTrigger'), isComponent('TooltipContent')]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -21917,10 +21855,10 @@ 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-0613',
+  defaultModel: 'gpt-4-1106-preview',
   defaultFilter: {
     items: [],
-    linkOperator: 'and'
+    logicOperator: 'and'
   },
   disablePower: false,
   localeText: {
@@ -21961,16 +21899,16 @@ const getRole = (config, dateFormat) => {
   }).join('\n');
   return `The AI assistant parses user input to generate a JSON object that will be used as a row filter for a data table MUI Data Grid.
 The filter supports mulitple conditions using only two logical operator "and", "or". It only allows "and" between all conditions or "or" between all conditions. It can't mix the two types.
-The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "linkOperator" and "items":
-- "linkOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
-- "items": a list of conditions, each is an object with exactly the three keys "columnField", "operatorValue" and "value":
-  - "columnField": the column name, must be one of ${columns}
+The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "logicOperator" and "items":
+- "logicOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
+- "items": a list of conditions, each is an object with exactly the three keys "field", "operator" and "value":
+  - "field": the column name, must be one of ${columns}
   - "value":
-    - this can be skipped if the "operatorValue" is either "isEmpty" or "isNotEmpty"
-    - a list of multiple values if the "operatorValue" ends with "AnyOf"
+    - this can be skipped if the "operator" is either "isEmpty" or "isNotEmpty"
+    - a list of multiple values if the "operator" ends with "AnyOf"
     - otherwise, it's a single value represented as a string: "true" instead of true, "false" instead of false, "0.6" instead of 0.6.
     For "date" data type, use ${dateFormat}. If relative date is input, convert to the actual date given today is ${today}.
-  - "operatorValue": the comparison operator, accepted values depend on the data type of the column
+  - "operator": the comparison operator, accepted values depend on the data type of the column
 ${operators}
 
 Below is the datatype in square bracket, constraints on the data range if any, followed by the description of each column used in the data table:
@@ -22077,7 +22015,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     value: prompt
   }), /*#__PURE__*/React__default.createElement(Button, {
     variant: "primary",
-    "aira-label": buttonAriaLabel,
+    "aria-label": buttonAriaLabel,
     type: "submit",
     isLoading: isLoading
   }, buttonText)), !disablePower && /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
@@ -22139,7 +22077,7 @@ const Toolbar$3 = props => {
         let {
           apiRef
         } = _ref;
-        return gridVisibleSortedRowIdsSelector(apiRef);
+        return gridExpandedSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -22153,33 +22091,7 @@ const Toolbar$3 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-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 _excluded$d = ["children", "color", "onClick", "startIcon"];
 const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$className;
   const {
@@ -22188,7 +22100,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       startIcon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   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, {
@@ -22214,7 +22126,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 
-const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
+const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
 const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       checked,
@@ -22222,7 +22134,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     isSelected: checked && !indeterminate,
     isDisabled: disabled,
@@ -22232,6 +22144,32 @@ 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',
@@ -22433,6 +22371,86 @@ 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,
@@ -24591,14 +24609,151 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "ControlledPagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "components", "componentsProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "paginationMode", "rowCount"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
-const DEFAULT_PROPS = {
-  license: process.env.MUI_LICENSE_KEY,
-  paginationPlacement: 'both'
+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 getSelectableRowsInTable = (apiRef, isRowSelectable) => {
   return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
     let {
@@ -24614,21 +24769,20 @@ const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
     return id;
   }) : gridFilteredSortedRowIdsSelector(apiRef);
 };
-const ControlledPagination = _ref3 => {
+
+const ControlledPagination = _ref => {
   let {
     displaySelection = false,
     displayRowsPerPage = false,
     displayPagination = false,
     selectionStatus,
     apiRef,
-    page,
-    onPageChange,
-    pageSize,
-    onPageSizeChange,
-    rowsPerPageOptions,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
     isRowSelectable,
     paginationProps
-  } = _ref3;
+  } = _ref;
   const filteredRowsInTable = getSelectableRowsInTable(apiRef);
   const selectableRowsInTable = getSelectableRowsInTable(apiRef, isRowSelectable);
   const numberOfFilteredRowsInTable = filteredRowsInTable.length;
@@ -24655,88 +24809,63 @@ const ControlledPagination = _ref3 => {
   }, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
     component: "div",
     count: numberOfFilteredRowsInTable,
-    page: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => {
-      onPageSizeChange(parseInt(event.target.value, 10));
-    },
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
+    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 ServerSideControlledPagination = _ref4 => {
-  let {
-    selectionStatus,
-    displaySelection,
-    displayPagination,
-    page,
-    onPageChange,
-    pageSize,
-    onPageSizeChange,
-    displayRowsPerPage,
-    rowsPerPageOptions,
-    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: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => {
-      onPageSizeChange(parseInt(event.target.value, 10));
-    },
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
-  }, 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 Toolbar = _ref5 => {
+const Toolbar = _ref => {
   let {
       hideToolbar,
       RenderedToolbar,
       filterModel,
       onFilterModelChange,
       pagination,
-      ControlledPagination,
       paginationPlacement,
       selectionStatus,
+      selectionStatusType,
+      setSelectionStatusType,
       apiRef,
       isRowSelectable,
-      page,
-      onPageChange,
-      pageSize,
-      onPageSizeChange,
-      rowsPerPageOptions,
+      paginationModel,
+      onPaginationModelChange,
+      pageSizeOptions,
       paginationProps,
       paginationMode = 'client',
       rowCount
-    } = _ref5,
-    forwardedProps = _objectWithoutProperties(_ref5, _excluded$1);
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _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(ServerSideControlledPagination, {
+  })) : null, pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, {
+    apiRef: apiRef,
     displaySelection: true,
     displayRowsPerPage: false,
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus.current,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
+    setSelectionStatusType: setSelectionStatusType,
+    selectionStatusType: selectionStatusType,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
     paginationProps: paginationProps,
     rowCount: rowCount
   }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
@@ -24746,78 +24875,21 @@ const Toolbar = _ref5 => {
     selectionStatus: selectionStatus.current,
     apiRef: apiRef,
     isRowSelectable: isRowSelectable,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
     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 _initialState$paginat, _initialState$paginat2;
+  var _ref2, _ref3, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref4, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      components,
-      componentsProps,
+      slots,
+      slotProps,
       filterModel: propsFilterModel,
       height: propsHeight,
       hideToolbar,
@@ -24825,27 +24897,26 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       isRowSelectable,
       license,
       onFilterModelChange: propsOnFilterModelChange,
-      onPageChange: propsOnPageChange,
-      onPageSizeChange: propsOnPageSizeChange,
-      selectionModel: propsSelectionModel,
-      onSelectionModelChange,
-      page: propsPage,
-      pageSize: propsPageSize,
+      paginationModel: propsPaginationModel,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      pageSizeOptions,
+      rowSelectionModel: propsRowSelectionModel,
+      onRowSelectionModelChange,
       pagination,
       paginationPlacement,
       paginationProps,
       rows,
-      rowsPerPageOptions,
       sx,
       theme: propsTheme,
       paginationMode = 'client',
-      rowCount
+      rowCount,
+      onSelectionStatusChange: propsOnSelectionStatusChange
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
   const theme = useTheme$4(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$3;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$3;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const [filterModel, setFilterModel] = useState(propsFilterModel);
@@ -24859,55 +24930,63 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
-  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   useEffect(() => {
-    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
-  }, [propsSelectionModel]);
-  const [page, setPage] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
-  const [pageSize, setPageSize] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 100);
-  const selectionStatus = useRef({
-    type: 'none',
-    numberOfSelectedRows: 0,
-    numberOfSelectedRowsInPage: 0,
-    page,
-    pageSize
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  }, [propsRowSelectionModel]);
+  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
   });
-  const onPageChange = page => {
-    if (propsOnPageChange) {
-      propsOnPageChange(page, undefined);
+  const onPaginationModelChange = model => {
+    if (propsOnPaginationModelChange) {
+      propsOnPaginationModelChange(model, undefined);
     } else {
-      setPage(page);
+      setPaginationModel(model);
     }
   };
   useEffect(() => {
-    if (propsPage || propsPage === 0) {
-      setPage(propsPage);
-    }
-  }, [propsPage]);
-  const onPageSizeChange = pageSize => {
-    onPageChange(0);
-    if (propsOnPageSizeChange) {
-      propsOnPageSizeChange(pageSize, undefined);
-    } else {
-      setPageSize(pageSize);
+    if (propsPaginationModel) {
+      setPaginationModel(propsPaginationModel);
+    }
+  }, [propsPaginationModel]);
+  const [selectionStatusType, setSelectionStatusType] = useState('none');
+  const selectionStatus = useRef({
+    type: selectionStatusType,
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page: paginationModel.page,
+    pageSize: paginationModel.pageSize
+  });
+  const onSelectionStatusChange = selectionStatusType => {
+    if (propsOnSelectionStatusChange) {
+      propsOnSelectionStatusChange(selectionStatusType);
     }
   };
   useEffect(() => {
-    if (propsPageSize) {
-      setPageSize(propsPageSize);
-    }
-  }, [propsPageSize]);
+    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(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+    if (paginationMode === 'server') {
+      onServerSideSelectionStatusChange({
+        newSelectionModel: Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel],
+        apiRef,
+        selectionStatus,
+        selectionStatusType,
+        setSelectionStatusType,
+        isRowSelectable,
+        page: paginationModel.page,
+        pageSize: paginationModel.pageSize
+      });
     }
-  }, [selectionModel, page, 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,
@@ -24934,56 +25013,54 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     apiRef: apiRef,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
-    components: _objectSpread2(_objectSpread2({
-      BaseButton,
-      BaseCheckbox,
-      // BaseTextField,
-      BasePopper,
-      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ExportIcon"
       })),
-      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
         displayName: "OpenFilterButtonIcon"
       }, props))
-    }, components), {}, {
-      Toolbar: Toolbar,
-      Pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
+    }, slots), {}, {
+      toolbar: Toolbar,
+      pagination: props => pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
         selectionStatus: selectionStatus.current,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
+        paginationModel: paginationModel,
+        onPaginationModelChange: onPaginationModelChange,
+        pageSizeOptions: pageSizeOptions,
         paginationProps: paginationProps,
         paginationMode: paginationMode,
         rowCount: rowCount
@@ -24994,79 +25071,74 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         selectionStatus: selectionStatus.current,
         apiRef: apiRef,
         isRowSelectable: isRowSelectable,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
+        paginationModel: paginationModel,
+        onPaginationModelChange: onPaginationModelChange,
+        pageSizeOptions: pageSizeOptions,
         paginationProps: paginationProps,
         paginationMode: paginationMode,
         rowCount: rowCount
       })) : null
     }),
-    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
       toolbar: _objectSpread2({
         hideToolbar,
         RenderedToolbar,
         filterModel,
         onFilterModelChange,
         pagination,
-        ControlledPagination: paginationMode == 'server' ? ServerSideControlledPagination : ControlledPagination,
         paginationPlacement,
         selectionStatus,
+        selectionStatusType,
+        setSelectionStatusType,
         apiRef,
         isRowSelectable,
-        page,
-        onPageChange,
-        pageSize,
-        onPageSizeChange,
-        rowsPerPageOptions,
+        paginationModel,
+        onPaginationModelChange,
+        pageSizeOptions,
         paginationProps,
         paginationMode,
         rowCount
-      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
     }),
     filterModel: filterModel,
     initialState: initialState,
-    isRowSelectable: isRowSelectable,
+    isRowSelectable: !isServerTableSelection ? isRowSelectable : () => false,
     onFilterModelChange: onFilterModelChange,
     pagination: pagination,
     paginationMode: paginationMode,
-    keepNonExistentRowsSelected: paginationMode == 'server',
+    keepNonExistentRowsSelected: paginationMode === 'server',
     rows: rows,
-    rowsPerPageOptions: rowsPerPageOptions,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    selectionModel: selectionModel,
-    onSelectionModelChange: (newSelectionModel, details) => {
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    rowSelectionModel: isServerTableSelection ? getSelectableRowsInTable(apiRef, isRowSelectable) : rowSelectionModel,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref8 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
           let {
             model
-          } = _ref8;
+          } = _ref5;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref9 => {
+        }).map(_ref6 => {
           let {
             id
-          } = _ref9;
+          } = _ref6;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref10 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
           let {
             model
-          } = _ref10;
+          } = _ref7;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref11 => {
+        }).map(_ref8 => {
           let {
             id
-          } = _ref11;
+          } = _ref8;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -25077,38 +25149,34 @@ 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
           };
         }
       }
-      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
-    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
-      '.MuiDataGrid-columnHeaders': {
-        flexDirection: 'column',
-        alignItems: 'normal'
-      },
-      '.MuiDataGrid-selectedRowCount': {
-        margin: 'none'
-      }
-    })
+    sx: _objectSpread2(_objectSpread2({}, sx), defaultSxStyle)
   })))));
 });
 DataGrid.className = CLASSNAME$1;