@redsift/table 9.3.2 → 9.3.3-muiv5

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 => {
@@ -17516,7 +17515,7 @@ const containsAnyOfCIOperator = {
   label: 'contains any of (case insensitive)',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17543,7 +17542,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 => {
@@ -17570,7 +17569,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 => {
@@ -17594,7 +17593,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 => {
@@ -17618,7 +17617,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 => {
@@ -21462,7 +21461,7 @@ const StyledTooltipContent = styled$3.div`
 
 const COMPONENT_NAME$5 = 'TooltipContent';
 const CLASSNAME$5 = 'redsift-tooltip-content';
-const DEFAULT_PROPS$3 = {};
+const DEFAULT_PROPS$4 = {};
 
 /**
  * The TooltipContent component.
@@ -21524,12 +21523,12 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, children)));
 });
 TooltipContent.className = CLASSNAME$5;
-TooltipContent.defaultProps = DEFAULT_PROPS$3;
+TooltipContent.defaultProps = DEFAULT_PROPS$4;
 TooltipContent.displayName = COMPONENT_NAME$5;
 
 const COMPONENT_NAME$4 = 'TooltipTrigger';
 const CLASSNAME$4 = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$2 = {};
+const DEFAULT_PROPS$3 = {};
 
 /**
  * The TooltipTrigger component.
@@ -21560,7 +21559,7 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
   }, getReferenceProps(props)), children);
 });
 TooltipTrigger.className = CLASSNAME$4;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$2;
+TooltipTrigger.defaultProps = DEFAULT_PROPS$3;
 TooltipTrigger.displayName = COMPONENT_NAME$4;
 
 function useTooltip(_ref) {
@@ -21626,7 +21625,7 @@ function useTooltip(_ref) {
 
 const COMPONENT_NAME$3 = 'Tooltip';
 const CLASSNAME$3 = 'redsift-tooltip';
-const DEFAULT_PROPS$1 = {
+const DEFAULT_PROPS$2 = {
   delay: 500,
   placement: TooltipPlacement.top
 };
@@ -21658,7 +21657,7 @@ const BaseTooltip = props => {
   }, trigger, content);
 };
 BaseTooltip.className = CLASSNAME$3;
-BaseTooltip.defaultProps = DEFAULT_PROPS$1;
+BaseTooltip.defaultProps = DEFAULT_PROPS$2;
 BaseTooltip.displayName = COMPONENT_NAME$3;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
@@ -21689,13 +21688,26 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
   }
 `;
 
-const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange"];
+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 DATE_FORMAT = 'yyyy-mm-dd';
-const DEFAULT_GPT_MODEL = 'gpt-4-0613';
-const DEFAULT_FILTER = {
-  items: []
+const DEFAULT_PROPS$1 = {
+  dateFormat: 'yyyy-mm-dd',
+  defaultModel: 'gpt-4-0613',
+  defaultFilter: {
+    items: [],
+    linkOperator: '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'],
@@ -21703,7 +21715,7 @@ const DEFAULT_OPERATORS = {
   boolean: ['is'],
   date: ['is', 'not', 'after', 'onOrAfter', 'before', 'onOrBefore', 'isEmpty', 'isNotEmpty']
 };
-const getRole = config => {
+const getRole = (config, dateFormat) => {
   const today = new Date().toDateString();
   const columns = `[${config.columns.map(_ref => {
     let {
@@ -21733,7 +21745,7 @@ The AI assistant extracts information from the user input and generates a JSON o
     - this can be skipped if the "operatorValue" is either "isEmpty" or "isNotEmpty"
     - a list of multiple values if the "operatorValue" 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 ${DATE_FORMAT}. If relative date is input, convert to the actual date given today is ${today}.
+    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
 ${operators}
 
@@ -21750,9 +21762,9 @@ Return just the JSON object without any extra text, explanation or note.
 If the user input can't be parsed, return a JSON object to indicate the error and the reason {"code":"error", "reason":"explain why it was failed to parse"}.
 `;
 };
-async function getOpenAICompletion(config, prompt, model) {
+async function getOpenAICompletion(config, prompt, model, dateFormat) {
   const text = 'Parse the text delimited by triple backticks: ```' + prompt.trim() + '``` and make sure the output is a valid JSON object';
-  const role = getRole(config);
+  const role = getRole(config, dateFormat);
   const completion = await getCompletion(text, role, config.openaiApiKey, model);
   const response = JSON.parse(completion);
   if ('code' in response) {
@@ -21769,11 +21781,25 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       nlpFilterConfig,
-      onFilterModelChange
+      onFilterModelChange,
+      dateFormat = DEFAULT_PROPS$1.dateFormat,
+      defaultModel = DEFAULT_PROPS$1.defaultModel,
+      defaultFilter = DEFAULT_PROPS$1.defaultFilter,
+      disablePower = DEFAULT_PROPS$1.disablePower,
+      localeText
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
+  const {
+    textLabel,
+    textPlaceholder,
+    buttonAriaLabel,
+    buttonText,
+    powerText,
+    powerTooltipContent,
+    errorText
+  } = _objectSpread2(_objectSpread2({}, DEFAULT_PROPS$1.localeText), localeText);
   const [prompt, setPrompt] = useState('');
-  const modelRef = useRef(DEFAULT_GPT_MODEL);
+  const modelRef = useRef(defaultModel);
   const showErrorRef = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
   const handlePromptSubmit = async event => {
@@ -21784,7 +21810,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       // Use the cache if it's available and it's not the default filter.
       // We still want to rerun default filter because it might be due to request fail.
       const response = sessionStorage.getItem(prompt);
-      if (response && response !== JSON.stringify(DEFAULT_FILTER)) {
+      if (response && response !== JSON.stringify(defaultFilter)) {
         filter = JSON.parse(response);
       } else {
         setIsLoading(true);
@@ -21793,12 +21819,12 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
           if (nlpFilterConfig.completionFunc !== undefined) {
             filter = await nlpFilterConfig.completionFunc(nlpFilterConfig, prompt, modelRef.current);
           } else {
-            filter = await getOpenAICompletion(nlpFilterConfig, prompt, modelRef.current);
+            filter = await getOpenAICompletion(nlpFilterConfig, prompt, modelRef.current, dateFormat);
           }
           sessionStorage.setItem(prompt, JSON.stringify(filter));
         } catch (error) {
           showErrorRef.current = true;
-          filter = DEFAULT_FILTER;
+          filter = defaultFilter;
         }
 
         // MUI requires different id
@@ -21821,25 +21847,26 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(TextField$2, {
     width: "100%",
-    label: "Semantic filtering",
-    placeholder: "Describe here how you would like to filter this datagrid.",
+    label: textLabel,
+    placeholder: textPlaceholder,
     onChange: value => setPrompt(value),
     value: prompt
   }), /*#__PURE__*/React__default.createElement(Button, {
     variant: "primary",
-    "aria-label": "Submit",
+    "aira-label": buttonAriaLabel,
     type: "submit",
     isLoading: isLoading
-  }, "Run")), /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
+  }, buttonText)), !disablePower && /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
     width: "175px",
     isSelected: modelRef.current === 'gpt-4-0613',
     onChange: value => modelRef.current = value ? 'gpt-4-0613' : 'gpt-3.5-turbo-0613'
-  }, "Power mode")), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, "The Power mode can get better results but is slower."))), showErrorRef.current && /*#__PURE__*/React__default.createElement(Text, {
+  }, powerText)), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, powerTooltipContent))), showErrorRef.current && /*#__PURE__*/React__default.createElement(Text, {
     color: "error",
     marginLeft: "8px"
-  }, "Unable to find a valid filter, please try again with a more specific prompt."));
+  }, errorText));
 });
 GridToolbarFilterSemanticField.className = CLASSNAME$2;
+GridToolbarFilterSemanticField.defaultProps = DEFAULT_PROPS$1;
 GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
 
 /**
@@ -21863,9 +21890,12 @@ const Toolbar$2 = props => {
     hasDensityButton = true,
     densityButtonProps,
     densityButtonRef,
-    nlpFilterConfig = undefined,
-    onFilterModelChange
+    onFilterModelChange,
+    semanticFilterProps = undefined
   } = props;
+  if (semanticFilterProps && onFilterModelChange) {
+    semanticFilterProps.onFilterModelChange = onFilterModelChange;
+  }
   return /*#__PURE__*/React__default.createElement(GridToolbarWrapper, null, /*#__PURE__*/React__default.createElement(GridToolbarContainer, null, /*#__PURE__*/React__default.createElement(Flexbox, {
     gap: "0"
   }, hasFilterButton ? /*#__PURE__*/React__default.createElement(GridToolbarFilterButton, _extends$2({}, filterButtonProps, {
@@ -21885,7 +21915,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridExpandedSortedRowIdsSelector(apiRef);
+        return gridVisibleSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -21896,10 +21926,7 @@ const Toolbar$2 = props => {
     className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
   })) : null), /*#__PURE__*/React__default.createElement(Flexbox, {
     flexGrow: 3
-  }, nlpFilterConfig && onFilterModelChange ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, {
-    nlpFilterConfig: nlpFilterConfig,
-    onFilterModelChange: onFilterModelChange
-  }) : null)));
+  }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
 const _excluded$d = ["displayName"];
@@ -24340,7 +24367,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 = {
@@ -24369,9 +24396,11 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
+    rowsPerPageOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -24401,28 +24430,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,
@@ -24430,20 +24455,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({
@@ -24461,22 +24488,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;
   }
@@ -24488,46 +24526,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
@@ -24538,27 +24576,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,
@@ -24566,38 +24608,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;
@@ -24629,7 +24673,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': {