@redsift/table 9.2.2 → 9.2.3-muiv5

package/index.d.ts

@@ -1,7 +1,6 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
 import { GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputMultipleValue, DataGridProProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridFilterModel, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
-export * from '@mui/x-data-grid-pro';
-export { GridAlignment, GridColDef, GridFilterItem, GridFilterModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
+export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import { Comp, IconProps, NotificationsColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
 import React, { ReactNode, RefObject, ComponentProps } from 'react';
 import { TablePaginationProps } from '@mui/material';
@@ -11,7 +10,7 @@ declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any,
 declare const IS_BETWEEN: {
     label: string;
     value: string;
-    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams<any, any>) => boolean) | null;
+    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
     InputComponent: (props: any) => JSX.Element;
 };
 

package/index.js

@@ -1,5 +1,4 @@
-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';
+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';
 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 } from 'react';
@@ -17467,7 +17466,7 @@ const isBetweenOperator = {
   label: 'is between',
   value: 'isBetween',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
@@ -17480,7 +17479,7 @@ const isBetweenOperator = {
       return null;
     }
     return params => {
-      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+      return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -17493,7 +17492,7 @@ const containsAnyOfOperator = {
   label: 'contains any of',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17518,7 +17517,7 @@ const endsWithAnyOfOperator = {
   label: 'ends with any of',
   value: 'endsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17545,7 +17544,7 @@ const isAnyOfOperator = {
   label: 'is any of',
   value: 'isAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17569,7 +17568,7 @@ const isNotAnyOfOperator = {
   label: 'is not any of',
   value: 'isNotAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17593,7 +17592,7 @@ const startsWithAnyOfOperator = {
   label: 'starts with any of',
   value: 'startsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -20976,6 +20975,182 @@ const useRole = function (_ref, _temp) {
   }, [enabled, role, open, rootId, referenceId]);
 };
 
+function isPointInPolygon(point, polygon) {
+  const [x, y] = point;
+  let isInside = false;
+  const length = polygon.length;
+  for (let i = 0, j = length - 1; i < length; j = i++) {
+    const [xi, yi] = polygon[i] || [0, 0];
+    const [xj, yj] = polygon[j] || [0, 0];
+    const intersect = yi >= y !== yj >= y && x <= (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) {
+      isInside = !isInside;
+    }
+  }
+  return isInside;
+}
+function isInside(point, rect) {
+  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
+}
+function safePolygon(_temp) {
+  let {
+    restMs = 0,
+    buffer = 0.5,
+    blockPointerEvents = false
+  } = _temp === void 0 ? {} : _temp;
+  let timeoutId;
+  let isInsideRect = false;
+  let hasLanded = false;
+  const fn = _ref => {
+    let {
+      x,
+      y,
+      placement,
+      elements,
+      onClose,
+      nodeId,
+      tree
+    } = _ref;
+    return function onMouseMove(event) {
+      function close() {
+        clearTimeout(timeoutId);
+        onClose();
+      }
+      clearTimeout(timeoutId);
+      if (!elements.domReference || !elements.floating || placement == null || x == null || y == null) {
+        return;
+      }
+      const {
+        clientX,
+        clientY
+      } = event;
+      const clientPoint = [clientX, clientY];
+      const target = getTarget(event);
+      const isLeave = event.type === 'mouseleave';
+      const isOverFloatingEl = contains(elements.floating, target);
+      const isOverReferenceEl = contains(elements.domReference, target);
+      const refRect = elements.domReference.getBoundingClientRect();
+      const rect = elements.floating.getBoundingClientRect();
+      const side = placement.split('-')[0];
+      const cursorLeaveFromRight = x > rect.right - rect.width / 2;
+      const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
+      const isOverReferenceRect = isInside(clientPoint, refRect);
+      if (isOverFloatingEl) {
+        hasLanded = true;
+        if (!isLeave) {
+          return;
+        }
+      }
+      if (isOverReferenceEl) {
+        hasLanded = false;
+      }
+      if (isOverReferenceEl && !isLeave) {
+        hasLanded = true;
+        return;
+      }
+
+      // Prevent overlapping floating element from being stuck in an open-close
+      // loop: https://github.com/floating-ui/floating-ui/issues/1910
+      if (isLeave && isElement(event.relatedTarget) && contains(elements.floating, event.relatedTarget)) {
+        return;
+      }
+
+      // If any nested child is open, abort.
+      if (tree && getChildren(tree.nodesRef.current, nodeId).some(_ref2 => {
+        let {
+          context
+        } = _ref2;
+        return context == null ? void 0 : context.open;
+      })) {
+        return;
+      }
+
+      // If the pointer is leaving from the opposite side, the "buffer" logic
+      // creates a point where the floating element remains open, but should be
+      // ignored.
+      // A constant of 1 handles floating point rounding errors.
+      if (side === 'top' && y >= refRect.bottom - 1 || side === 'bottom' && y <= refRect.top + 1 || side === 'left' && x >= refRect.right - 1 || side === 'right' && x <= refRect.left + 1) {
+        return close();
+      }
+
+      // Ignore when the cursor is within the rectangular trough between the
+      // two elements. Since the triangle is created from the cursor point,
+      // which can start beyond the ref element's edge, traversing back and
+      // forth from the ref to the floating element can cause it to close. This
+      // ensures it always remains open in that case.
+      let rectPoly = [];
+      switch (side) {
+        case 'top':
+          rectPoly = [[rect.left, refRect.top + 1], [rect.left, rect.bottom - 1], [rect.right, rect.bottom - 1], [rect.right, refRect.top + 1]];
+          isInsideRect = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= refRect.top + 1;
+          break;
+        case 'bottom':
+          rectPoly = [[rect.left, rect.top + 1], [rect.left, refRect.bottom - 1], [rect.right, refRect.bottom - 1], [rect.right, rect.top + 1]];
+          isInsideRect = clientX >= rect.left && clientX <= rect.right && clientY >= refRect.bottom - 1 && clientY <= rect.bottom;
+          break;
+        case 'left':
+          rectPoly = [[rect.right - 1, rect.bottom], [rect.right - 1, rect.top], [refRect.left + 1, rect.top], [refRect.left + 1, rect.bottom]];
+          isInsideRect = clientX >= rect.left && clientX <= refRect.left + 1 && clientY >= rect.top && clientY <= rect.bottom;
+          break;
+        case 'right':
+          rectPoly = [[refRect.right - 1, rect.bottom], [refRect.right - 1, rect.top], [rect.left + 1, rect.top], [rect.left + 1, rect.bottom]];
+          isInsideRect = clientX >= refRect.right - 1 && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+          break;
+      }
+      function getPolygon(_ref3) {
+        let [x, y] = _ref3;
+        const isFloatingWider = rect.width > refRect.width;
+        const isFloatingTaller = rect.height > refRect.height;
+        switch (side) {
+          case 'top':
+            {
+              const cursorPointOne = [isFloatingWider ? x + buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y + buffer + 1];
+              const cursorPointTwo = [isFloatingWider ? x - buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y + buffer + 1];
+              const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.bottom - buffer : isFloatingWider ? rect.bottom - buffer : rect.top], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.bottom - buffer : rect.top : rect.bottom - buffer]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
+          case 'bottom':
+            {
+              const cursorPointOne = [isFloatingWider ? x + buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y - buffer];
+              const cursorPointTwo = [isFloatingWider ? x - buffer / 2 : cursorLeaveFromRight ? x + buffer * 4 : x - buffer * 4, y - buffer];
+              const commonPoints = [[rect.left, cursorLeaveFromRight ? rect.top + buffer : isFloatingWider ? rect.top + buffer : rect.bottom], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.top + buffer : rect.bottom : rect.top + buffer]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
+          case 'left':
+            {
+              const cursorPointOne = [x + buffer + 1, isFloatingTaller ? y + buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];
+              const cursorPointTwo = [x + buffer + 1, isFloatingTaller ? y - buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];
+              const commonPoints = [[cursorLeaveFromBottom ? rect.right - buffer : isFloatingTaller ? rect.right - buffer : rect.left, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.right - buffer : rect.left : rect.right - buffer, rect.bottom]];
+              return [...commonPoints, cursorPointOne, cursorPointTwo];
+            }
+          case 'right':
+            {
+              const cursorPointOne = [x - buffer, isFloatingTaller ? y + buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];
+              const cursorPointTwo = [x - buffer, isFloatingTaller ? y - buffer / 2 : cursorLeaveFromBottom ? y + buffer * 4 : y - buffer * 4];
+              const commonPoints = [[cursorLeaveFromBottom ? rect.left + buffer : isFloatingTaller ? rect.left + buffer : rect.right, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.left + buffer : rect.right : rect.left + buffer, rect.bottom]];
+              return [cursorPointOne, cursorPointTwo, ...commonPoints];
+            }
+        }
+      }
+      const poly = isInsideRect ? rectPoly : getPolygon([x, y]);
+      if (isInsideRect) {
+        return;
+      } else if (hasLanded && !isOverReferenceRect) {
+        return close();
+      }
+      if (!isPointInPolygon([clientX, clientY], poly)) {
+        close();
+      } else if (restMs && !hasLanded) {
+        timeoutId = setTimeout(close, restMs);
+      }
+    };
+  };
+  fn.__options = {
+    blockPointerEvents
+  };
+  return fn;
+}
+
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/react
@@ -21374,7 +21549,8 @@ function useTooltip(_ref) {
     delay: {
       open: delay,
       close: 0
-    }
+    },
+    handleClose: safePolygon()
   });
   const focus = useFocus(context);
   const dismiss = useDismiss(context);
@@ -21710,7 +21886,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridExpandedSortedRowIdsSelector(apiRef);
+        return gridVisibleSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -24165,7 +24341,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const _excluded$1 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx"];
+const _excluded$1 = ["apiRef", "autoHeight", "className", "components", "componentsProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const DEFAULT_PROPS = {
@@ -24194,9 +24370,11 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
+    rowsPerPageOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -24226,28 +24404,24 @@ 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: 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 : []
+    page: page,
+    onPageChange: (event, newPage) => onPageChange(newPage),
+    rowsPerPage: pageSize,
+    onRowsPerPageChange: event => {
+      onPageSizeChange(parseInt(event.target.value, 10));
+    },
+    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
   }, paginationProps)) : null);
 };
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ref4, _ref5, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref6, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
+  var _initialState$paginat, _initialState$paginat2;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      slots,
-      slotProps,
+      components,
+      componentsProps,
       filterModel: propsFilterModel,
       height: propsHeight,
       hideToolbar,
@@ -24255,20 +24429,22 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       isRowSelectable,
       license,
       onFilterModelChange: propsOnFilterModelChange,
-      paginationModel: propsPaginationModel,
-      onPaginationModelChange: propsOnPaginationModelChange,
-      onRowSelectionModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
+      onSelectionModelChange,
+      page: propsPage,
+      pageSize: propsPageSize,
       pagination,
       paginationPlacement,
       paginationProps,
       rows,
-      pageSizeOptions,
+      rowsPerPageOptions,
       sx
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$2;
+  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$2;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const selectionStatus = useRef({
@@ -24286,22 +24462,33 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
-  const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref4 = (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : 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 && _ref4 !== void 0 ? _ref4 : 100,
-    page: (_ref6 = (_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 && _ref6 !== void 0 ? _ref6 : 0
-  });
-  const onPaginationModelChange = model => {
-    if (propsOnPaginationModelChange) {
-      propsOnPaginationModelChange(model, undefined);
+  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 onPageChange = page => {
+    if (propsOnPageChange) {
+      propsOnPageChange(page, undefined);
+    } else {
+      setPage(page);
+    }
+  };
+  useEffect(() => {
+    if (propsPage || propsPage === 0) {
+      setPage(propsPage);
+    }
+  }, [propsPage]);
+  const onPageSizeChange = pageSize => {
+    onPageChange(0);
+    if (propsOnPageSizeChange) {
+      propsOnPageSizeChange(pageSize, undefined);
     } else {
-      setPaginationModel(model);
+      setPageSize(pageSize);
     }
   };
   useEffect(() => {
-    if (propsPaginationModel) {
-      setPaginationModel(propsPaginationModel);
+    if (propsPageSize) {
+      setPageSize(propsPageSize);
     }
-  }, [propsPaginationModel]);
+  }, [propsPageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -24313,46 +24500,46 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     apiRef: apiRef,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
-    slots: _objectSpread2(_objectSpread2({
-      baseButton: BaseButton,
-      baseCheckbox: BaseCheckbox,
-      // baseTextField,
-      basePopper: BasePopper,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      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))
-    }, slots), {}, {
-      toolbar: props => {
+    }, components), {}, {
+      Toolbar: props => {
         return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, props, {
           filterModel: filterModel,
           onFilterModelChange: onFilterModelChange
@@ -24363,27 +24550,31 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           selectionStatus: selectionStatus.current,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
-          paginationModel: paginationModel,
-          onPaginationModelChange: onPaginationModelChange,
-          pageSizeOptions: pageSizeOptions,
+          page: page,
+          onPageChange: onPageChange,
+          pageSize: pageSize,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
           paginationProps: paginationProps
         }) : null);
       },
-      pagination: props => pagination ? /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
+      Pagination: props => pagination ? /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
         selectionStatus: selectionStatus.current,
         apiRef: apiRef,
         isRowSelectable: isRowSelectable,
-        paginationModel: paginationModel,
-        onPaginationModelChange: onPaginationModelChange,
-        pageSizeOptions: pageSizeOptions,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
         paginationProps: paginationProps
       })) : null
     }),
-    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
-      toolbar: _objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+      toolbar: _objectSpread2({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
     }),
     filterModel: filterModel,
     initialState: initialState,
@@ -24391,38 +24582,40 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onFilterModelChange: onFilterModelChange,
     pagination: pagination,
     rows: rows,
-    pageSizeOptions: pageSizeOptions,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    onRowSelectionModelChange: (newSelectionModel, details) => {
+    rowsPerPageOptions: rowsPerPageOptions,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    onSelectionModelChange: (newSelectionModel, details) => {
       if (pagination) {
-        const selectableRowsInPage = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref7 => {
+        const selectableRowsInPage = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref4 => {
           var _props$isRowSelectabl;
           let {
             model
-          } = _ref7;
+          } = _ref4;
           return (_props$isRowSelectabl = props.isRowSelectable) === null || _props$isRowSelectabl === void 0 ? void 0 : _props$isRowSelectabl.call(props, {
             row: model
           });
-        }).map(_ref8 => {
+        }).map(_ref5 => {
           let {
             id
-          } = _ref8;
+          } = _ref5;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref9 => {
+        const selectableRowsInTable = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref6 => {
           var _props$isRowSelectabl2;
           let {
             model
-          } = _ref9;
+          } = _ref6;
           return (_props$isRowSelectabl2 = props.isRowSelectable) === null || _props$isRowSelectabl2 === void 0 ? void 0 : _props$isRowSelectabl2.call(props, {
             row: model
           });
-        }).map(_ref10 => {
+        }).map(_ref7 => {
           let {
             id
-          } = _ref10;
+          } = _ref7;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -24454,7 +24647,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           };
         }
       }
-      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
+      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
     },
     sx: _objectSpread2(_objectSpread2({}, sx), {}, {
       '.MuiDataGrid-columnHeaders': {