@redsift/table 9.2.4 → 9.3.0-muiv5

package/index.js

@@ -1,9 +1,8 @@
-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';
-import { Icon, baseContainer, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, CtasColorPalette, NotificationsColorPalette, IconButton as IconButton$2, Checkbox, Text, LinkButton, Shield } from '@redsift/design-system';
+import { Icon, baseContainer, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, CtasColorPalette, NotificationsColorPalette, IconButton as IconButton$2, Checkbox, LinkButton, 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, keyframes } from '@emotion/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 => {
@@ -21661,12 +21660,7 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
 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 verbose = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  /**
-   * Returns the text responded by GPT.
-   */
   try {
-    const t0 = new Date();
     const messages = [{
       role: 'system',
       content: role
@@ -21674,15 +21668,8 @@ async function getCompletion(text, role, openai_api_key) {
       role: 'user',
       content: text
     }];
-    if (verbose) {
-      console.log('******************************');
-      console.log('prompt:', text);
-      console.log('model:', model);
-      console.log('characters count (4 chars ~ 1 token)');
-      console.log(`-   system=${role.length}`);
-      console.log(`-     user=${text.length}`);
-    }
-    const response = await fetch(API_URL, {
+    const url = API_URL;
+    const response = await fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -21695,15 +21682,6 @@ async function getCompletion(text, role, openai_api_key) {
       })
     });
     const data = await response.json();
-    if (verbose) {
-      const t1 = new Date();
-      const t = (role.length + text.length + data.choices[0].message.content.length) / 4;
-      console.log(`- response=${data.choices[0].message.content.length}`);
-      console.log(`total is about ${t.toFixed(0)} tokens and took ${// @ts-ignore
-      ((t1 - t0) / 1000).toFixed(0)} seconds to complete`);
-      console.log('response:');
-      console.log(data.choices[0].message.content);
-    }
     return data.choices[0].message.content;
   } catch (error) {
     return '';
@@ -21714,77 +21692,66 @@ const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange"];
 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 ROLE = `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.
+const getRole = config => {
+  const today = new Date().toDateString();
+  const columns = `[${config.columns.map(_ref => {
+    let {
+      field
+    } = _ref;
+    return `"${field}"`;
+  }).join(', ')}]`;
+  const operators = Object.entries(config.typeOperators).map(_ref2 => {
+    let [k, values] = _ref2;
+    return values.length === 1 ? `    - For "${k}" data type, operator must only be "${values[0]}"` : `    - For "${k}" data type, operator must be one of [${values.map(v => `"${v}"`).join(', ')}]`;
+  }).join('\n');
+  const column_description = config.columns.map(_ref3 => {
+    let {
+      field,
+      type,
+      description
+    } = _ref3;
+    return `- "${field}": "${type}" data type; ${description ? description.trim() : ''}`;
+  }).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}}
-  - "value": 
+  - "columnField": 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"
-    - 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}}.
+    - 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}.
   - "operatorValue": the comparison operator, accepted values depend on the data type of the column
-{{type operators}}
+${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:
-{{column description}}
+${column_description}
 
 Notes:
 - For "boolean" data type, use "is" operator with value "false" instead of "isEmpty".
-{{notes}}
+${config.notes.trim()}
 
 Pay close attention to the the data type, description and supported operators above to make a valid selection of fields.
 Think step by step and check carefully if the chosen operator is supported by the chosen data type.
 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"}.`;
-function fillSlots(role, config) {
-  // Today
-  const todayText = new Date().toDateString();
-  role = role.replace('{{today}}', todayText);
-
-  // Column names
-  const columnText = '[' + config.columns.map(_ref => {
-    let {
-      field
-    } = _ref;
-    return `"${field}"`;
-  }).join(', ') + ']';
-  role = role.replace('{{columns}}', columnText);
-
-  // Type operators
-  const opreatorText = Object.entries(config.typeOperators).map(_ref2 => {
-    let [k, values] = _ref2;
-    if (values.length == 1) {
-      return `    - For "${k}" data type, operator must only be "${values[0]}"`;
-    } else {
-      const types = '[' + values.map(v => `"${v}"`).join(', ') + ']';
-      return `    - For "${k}" data type, operator must be one of ${types}`;
-    }
-  }).join('\n');
-  role = role.replace('{{type operators}}', opreatorText);
-
-  // Column description
-  // const descriptionText = config.columns.map(({field, type, description}) => `- "${field}": "${type}" data type; operators must be one of [${config.typeOperators[type].map(v => '"' + v + '"').join(', ')}]; ${description.trim()}`).join('\n');
-  const descriptionText = config.columns.map(_ref3 => {
-    let {
-      field,
-      type,
-      description
-    } = _ref3;
-    return `- "${field}": "${type}" data type; ${description ? description.trim() : ''}`;
-  }).join('\n');
-  role = role.replace('{{column description}}', descriptionText);
-
-  // Notes
-  role = role.replace('{{notes}}', config.notes.trim());
-
-  // console.log(role);
-  return role;
+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) {
+  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 completion = await getCompletion(text, role, config.openaiApiKey, model);
+  const response = JSON.parse(completion);
+  if ('code' in response) {
+    throw new Error(response.reason);
+  }
+  return response;
 }
 
 /**
@@ -21799,7 +21766,8 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [prompt, setPrompt] = useState('');
-  const [model, setModel] = useState('gpt-4-0613');
+  const modelRef = useRef(DEFAULT_GPT_MODEL);
+  const showErrorRef = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
   const handlePromptSubmit = async event => {
     event.preventDefault();
@@ -21811,36 +21779,33 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       const response = sessionStorage.getItem(prompt);
       if (response && response !== JSON.stringify(DEFAULT_FILTER)) {
         filter = JSON.parse(response);
-        console.log('filter from cache:', filter);
       } else {
         setIsLoading(true);
-        const role = fillSlots(ROLE, nlpFilterConfig);
-        const text = 'Parse the text delimited by triple backticks: ```' + prompt.trim() + '``` and make sure the output is a valid JSON object';
-        const output_str = await getCompletion(text, role, nlpFilterConfig.openaiApiKey, model);
+        showErrorRef.current = false;
         try {
-          filter = JSON.parse(output_str);
-          if (filter.code === 'error') {
-            console.log('GPT does not understand input', filter.reason);
-            filter = DEFAULT_FILTER;
+          if (nlpFilterConfig.completionFunc !== undefined) {
+            filter = await nlpFilterConfig.completionFunc(nlpFilterConfig, prompt, modelRef.current);
           } else {
-            sessionStorage.setItem(prompt, output_str);
+            filter = await getOpenAICompletion(nlpFilterConfig, prompt, modelRef.current);
           }
+          sessionStorage.setItem(prompt, JSON.stringify(filter));
         } catch (error) {
-          console.log(error);
+          showErrorRef.current = true;
           filter = DEFAULT_FILTER;
         }
 
         // MUI requires different id
-        filter.items.forEach((d, i) => {
-          d.id = i;
-        });
-        console.log('filter:', filter);
+        filter.items.forEach((d, i) => d.id = i);
       }
       onFilterModelChange(filter);
       setIsLoading(false);
     }
   };
-  return /*#__PURE__*/React__default.createElement(StyledGridToolbarFilterSemanticField, _extends$2({}, forwardedProps, {
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(StyledGridToolbarFilterSemanticField, _extends$2({}, forwardedProps, {
     className: classNames(GridToolbarFilterSemanticField.className, className),
     ref: fieldRef,
     onSubmit: handlePromptSubmit
@@ -21858,13 +21823,14 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-label": "Submit",
     type: "submit",
     isLoading: isLoading
-  }, "Run")), /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch
-  // style={{"display":"none"}} // Hide it for the demo
-  , {
+  }, "Run")), /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
     width: "175px",
-    isSelected: model === 'gpt-4-0613',
-    onChange: value => setModel(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.")));
+    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, {
+    color: "error",
+    marginLeft: "8px"
+  }, "Unable to find a valid filter, please try again with a more specific prompt."));
 });
 GridToolbarFilterSemanticField.className = CLASSNAME$2;
 GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
@@ -21912,7 +21878,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridExpandedSortedRowIdsSelector(apiRef);
+        return gridVisibleSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -24367,7 +24333,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 = {
@@ -24396,9 +24362,11 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
+    rowsPerPageOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -24428,28 +24396,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,
@@ -24457,20 +24421,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({
@@ -24488,22 +24454,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 {
-      setPaginationModel(model);
+      setPage(page);
     }
   };
   useEffect(() => {
-    if (propsPaginationModel) {
-      setPaginationModel(propsPaginationModel);
+    if (propsPage || propsPage === 0) {
+      setPage(propsPage);
+    }
+  }, [propsPage]);
+  const onPageSizeChange = pageSize => {
+    onPageChange(0);
+    if (propsOnPageSizeChange) {
+      propsOnPageSizeChange(pageSize, undefined);
+    } else {
+      setPageSize(pageSize);
     }
-  }, [propsPaginationModel]);
+  };
+  useEffect(() => {
+    if (propsPageSize) {
+      setPageSize(propsPageSize);
+    }
+  }, [propsPageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -24515,46 +24492,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
@@ -24565,27 +24542,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,
@@ -24593,38 +24574,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;
@@ -24656,7 +24639,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': {