@redsift/table 11.0.0-alpha.0 → 11.0.0-muiv5-alpha.0

package/index.js

@@ -1,5 +1,4 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, GridLogicOperator, GRID_CHECKBOX_SELECTION_COL_DEF, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
-export * from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, GridLinkOperator, GRID_CHECKBOX_SELECTION_COL_DEF, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
@@ -17640,7 +17639,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) {
@@ -17653,7 +17652,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
@@ -17666,7 +17665,7 @@ const doesNotEqual = {
   label: 'does not equal',
   value: 'doesNotEqual',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.value) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17687,7 +17686,7 @@ const doesNotContain = {
   label: 'does not contain',
   value: 'doesNotContain',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
       return null;
     }
     return params => {
@@ -17708,7 +17707,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 => {
@@ -17731,7 +17730,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 => {
@@ -17758,7 +17757,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 => {
@@ -17785,7 +17784,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 => {
@@ -17809,7 +17808,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 => {
@@ -17833,7 +17832,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 => {
@@ -17878,7 +17877,7 @@ const operatorList = {
 
 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-1106';
+  let model = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'gpt-3.5-turbo-0613';
   try {
     const messages = [{
       role: 'system',
@@ -22010,16 +22009,16 @@ const getRole = (config, dateFormat) => {
   }).join('\n');
   return `The AI assistant parses user input to generate a JSON object that will be used as a row filter for a data table MUI Data Grid.
 The filter supports mulitple conditions using only two logical operator "and", "or". It only allows "and" between all conditions or "or" between all conditions. It can't mix the two types.
-The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "logicOperator" and "items":
-- "logicOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
-- "items": a list of conditions, each is an object with exactly the three keys "field", "operator" and "value":
-  - "field": the column name, must be one of ${columns}
+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":
-    - this can be skipped if the "operator" is either "isEmpty" or "isNotEmpty"
-    - a list of multiple values if the "operator" ends with "AnyOf"
+    - 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 ${dateFormat}. If relative date is input, convert to the actual date given today is ${today}.
-  - "operator": the comparison operator, accepted values depend on the data type of the column
+  - "operatorValue": the comparison operator, accepted values depend on the data type of the column
 ${operators}
 
 Below is the datatype in square bracket, constraints on the data range if any, followed by the description of each column used in the data table:
@@ -22056,10 +22055,10 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       nlpFilterConfig,
       onFilterModelChange,
       dateFormat = 'yyyy-mm-dd',
-      defaultModel = 'gpt-4-1106-preview',
+      defaultModel = 'gpt-4-0613',
       defaultFilter = {
         items: [],
-        logicOperator: 'and'
+        linkOperator: 'and'
       },
       disablePower = false,
       localeText
@@ -22137,7 +22136,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     value: prompt
   }), /*#__PURE__*/React__default.createElement(Button, {
     variant: "primary",
-    "aria-label": buttonAriaLabel,
+    "aira-label": buttonAriaLabel,
     type: "submit",
     isLoading: isLoading
   }, buttonText)), !disablePower && /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
@@ -22198,7 +22197,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridExpandedSortedRowIdsSelector(apiRef);
+        return gridVisibleSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -22492,6 +22491,23 @@ const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
+const getRsStringColumnType = () => {
+  return {
+    extendType: 'string',
+    filterOperators: operatorList.rsString
+  };
+};
+const getRsNumberColumnType = () => {
+  return {
+    extendType: 'number',
+    filterOperators: operatorList.rsNumber
+  };
+};
+const customColumnTypes = {
+  rsString: getRsStringColumnType(),
+  rsNumber: getRsNumberColumnType()
+};
+
 function Ripple(props) {
   const {
     className,
@@ -24655,10 +24671,12 @@ const ServerSideControlledPagination = _ref => {
     selectionStatus,
     displaySelection,
     displayPagination,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
     displayRowsPerPage,
+    rowsPerPageOptions,
     paginationProps,
     rowCount
   } = _ref;
@@ -24677,17 +24695,13 @@ const ServerSideControlledPagination = _ref => {
   }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
     component: "div",
     count: totalNumberOfRowsInTable,
-    page: paginationModel.page,
-    onPageChange: (event, page) => onPaginationModelChange({
-      page,
-      pageSize: paginationModel.pageSize
-    }),
-    rowsPerPage: paginationModel.pageSize,
-    onRowsPerPageChange: event => onPaginationModelChange({
-      page: paginationModel.page,
-      pageSize: parseInt(event.target.value, 10)
-    }),
-    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+    page: page,
+    onPageChange: (event, newPage) => onPageChange(newPage),
+    rowsPerPage: pageSize,
+    onRowsPerPageChange: event => {
+      onPageSizeChange(parseInt(event.target.value, 10));
+    },
+    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
   }, paginationProps)) : null);
 };
 
@@ -24713,9 +24727,11 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
+    rowsPerPageOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -24745,21 +24761,17 @@ 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 _excluded$2 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"];
+const _excluded$2 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"];
 const ToolbarWrapper = _ref => {
   let {
       hideToolbar,
@@ -24771,9 +24783,11 @@ const ToolbarWrapper = _ref => {
       selectionStatus,
       apiRef,
       isRowSelectable,
-      paginationModel,
-      onPaginationModelChange,
-      pageSizeOptions,
+      page,
+      onPageChange,
+      pageSize,
+      onPageSizeChange,
+      rowsPerPageOptions,
       paginationProps,
       paginationMode = 'client',
       rowCount
@@ -24787,9 +24801,11 @@ const ToolbarWrapper = _ref => {
     displayRowsPerPage: false,
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus.current,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    rowsPerPageOptions: rowsPerPageOptions,
     paginationProps: paginationProps,
     rowCount: rowCount
   }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
@@ -24799,9 +24815,11 @@ const ToolbarWrapper = _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);
 };
@@ -25030,8 +25048,8 @@ const encodeValue = value => {
   const castedValue = String(value);
   return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
 };
-const isOperatorValueValid = (field, operator, columns) => {
-  const column = columns.find(column => column.field === field);
+const isOperatorValueValid = (columnField, operatorValue, columns) => {
+  const column = columns.find(column => column.field === columnField);
   if (!column) {
     return false;
   }
@@ -25041,13 +25059,13 @@ const isOperatorValueValid = (field, operator, columns) => {
     return false;
   }
   if ('filterOperators' in operators) {
-    return !!operators.filterOperators.find(op => op['value'] === operator);
+    return !!operators.filterOperators.find(op => op['value'] === operatorValue);
   }
-  return !!operators.find(op => op['value'] === operator);
+  return !!operators.find(op => op['value'] === operatorValue);
 };
 
 // Check if the value doesn't break
-const isValueValid = (value, field, columns, operator) => {
+const isValueValid = (value, columnField, columns, operatorValue) => {
   var _column$type;
   // every field accepts undefined as value for default
   if (value === undefined) {
@@ -25056,15 +25074,15 @@ const isValueValid = (value, field, columns, operator) => {
 
   // isAnyOf accepts as value only lists, and we are declearing them in the
   // URL as `list=[...]`
-  if (operator === 'isAnyOf') {
+  if (operatorValue === 'isAnyOf') {
     return Array.isArray(value);
   }
 
   // We are accepting arrays only if they are of the 'isAnyOf' type
-  if (Array.isArray(value) && operator !== 'isAnyOf') {
+  if (Array.isArray(value) && operatorValue !== 'isAnyOf') {
     return false;
   }
-  const column = columns.find(column => column.field === field);
+  const column = columns.find(column => column.field === columnField);
   if (!column) {
     return false;
   }
@@ -25100,17 +25118,17 @@ const getFilterModelFromString = (searchString, columns) => {
   if (!searchString) {
     return {
       items: [],
-      logicOperator: GridLogicOperator.And
+      linkOperator: GridLinkOperator.And
     };
   }
-  let logicOperator = GridLogicOperator.And;
+  let linkOperator = GridLinkOperator.And;
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(searchString)) {
     if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility'].includes(key)) {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
-      logicOperator = value;
+      linkOperator = value;
     }
   }
   let id = 5000;
@@ -25143,8 +25161,8 @@ const getFilterModelFromString = (searchString, columns) => {
       return;
     }
     items.push({
-      field,
-      operator,
+      columnField: field,
+      operatorValue: operator,
       id,
       value: decodedValue
     });
@@ -25156,24 +25174,24 @@ const getFilterModelFromString = (searchString, columns) => {
   if (isInvalid) {
     return {
       items: [],
-      logicOperator: GridLogicOperator.And
+      linkOperator: GridLinkOperator.And
     };
   }
   return {
     items,
-    logicOperator
+    linkOperator
   };
 };
 const getSearchParamsFromFilterModel = filterModel => {
   const searchParams = new URLSearchParams();
-  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
+  searchParams.set('_logicOperator', filterModel['linkOperator'] || '');
   filterModel['items'].forEach(item => {
     const {
-      field,
-      operator,
+      columnField,
+      operatorValue,
       value
     } = item;
-    searchParams.set(`_${field}[${encodeValue(operator)}]`, encodeValue(value));
+    searchParams.set(`_${columnField}[${encodeValue(operatorValue)}]`, encodeValue(value));
   });
   return searchParams;
 };
@@ -25197,7 +25215,7 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
   }
   return {
     items: [],
-    logicOperator: GridLogicOperator.And
+    linkOperator: GridLinkOperator.And
   };
 };
 const getSortingFromString = (notParsed, columns) => {
@@ -25220,9 +25238,9 @@ const getSortingFromString = (notParsed, columns) => {
     if (value === '') {
       return [];
     }
-    const fields = columns.map(column => column.field);
+    const columnFields = columns.map(column => column.field);
     const [column, order] = value.split(',');
-    if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+    if (columnFields.includes(column) && (order === 'asc' || order === 'desc')) {
       return [{
         field: column,
         sort: order
@@ -25261,11 +25279,11 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
 };
 const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
   const searchParams = new URLSearchParams();
-  const fields = columns.map(column => column.field);
+  const columnFields = columns.map(column => column.field);
 
   // if column visibility model is empty, show all columns
   if (Object.keys(columnVisibility).length == 0) {
-    searchParams.set('_columnVisibility', `[${fields.join(',')}]`);
+    searchParams.set('_columnVisibility', `[${columnFields.join(',')}]`);
     return searchParams;
   }
   const finalColumnVisibility = columns.filter(c => {
@@ -25315,12 +25333,12 @@ const getColumnVisibilityFromString = (notParsed, tableColumns) => {
       continue;
     }
     exist = true;
-    const fields = tableColumns.map(column => column.field);
+    const columnFields = tableColumns.map(column => column.field);
     // TODO: Add validation that , is present
     const columns = encodedValues.split(',').map(value => decodeValue(value));
 
     // for each column, check if it's visible and add it to visibility model
-    for (const column of fields) {
+    for (const column of columnFields) {
       const isColumnVisible = columns.includes(column);
       visibility[column] = isColumnVisible;
       if (isColumnVisible) {
@@ -25383,8 +25401,8 @@ const getPinnedColumnsFromString = (notParsed, tableColumns) => {
     if (typeof encodedValues !== 'string') {
       continue;
     }
-    const fields = [...tableColumns.map(column => column.field), '__check__'];
-    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
+    const columnFields = [...tableColumns.map(column => column.field), '__check__'];
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && columnFields.includes(val));
     if (fieldURL === '_pinnedColumnsLeft') {
       pinnedColumns['left'] = columns;
     }
@@ -25528,7 +25546,8 @@ const useStatefulTable = props => {
     onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
     onColumnWidthChange: propsOnColumnWidthChange,
     onFilterModelChange: propsOnFilterModelChange,
-    onPaginationModelChange: propsOnPaginationModelChange,
+    onPageChange: propsOnPageChange,
+    onPageSizeChange: propsOnPageSizeChange,
     onPinnedColumnsChange: propsOnPinnedColumnsChange,
     onSortModelChange: propsOnSortModelChange,
     pinnedCustomColumns = {
@@ -25629,10 +25648,21 @@ const useStatefulTable = props => {
       }, search, historyReplace, columns);
     },
     pinnedColumns: pinnedColumnsModel,
-    paginationModel,
-    onPaginationModelChange: (model, details) => {
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(model, details);
-      setPaginationModel(model);
+    page: paginationModel.page,
+    pageSize: paginationModel.pageSize,
+    onPageChange: (page, details) => {
+      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
+      setPaginationModel({
+        page,
+        pageSize: paginationModel.pageSize
+      });
+    },
+    onPageSizeChange: (pageSize, details) => {
+      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
+      setPaginationModel({
+        page: paginationModel.page,
+        pageSize
+      });
     },
     columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
@@ -25654,8 +25684,8 @@ const useStatefulTable = props => {
   };
 };
 
-const _excluded$1 = ["apiRef", "columns", "onColumnVisibilityModelChange", "onColumnWidthChange", "onFilterModelChange", "onPaginationModelChange", "onPinnedColumnsChange", "onSortModelChange", "pinnedCustomColumns", "rows", "useRouter"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "isStateful", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const _excluded$1 = ["apiRef", "columns", "onColumnVisibilityModelChange", "onColumnWidthChange", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onPinnedColumnsChange", "onSortModelChange", "pinnedCustomColumns", "rows", "useRouter"],
+  _excluded2 = ["apiRef", "autoHeight", "className", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "isStateful", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "rowsPerPageOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
@@ -25721,7 +25751,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       onColumnVisibilityModelChange,
       onColumnWidthChange,
       onFilterModelChange,
-      onPaginationModelChange,
+      onPageChange,
+      onPageSizeChange,
       onPinnedColumnsChange,
       onSortModelChange,
       pinnedCustomColumns,
@@ -25735,7 +25766,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onFilterModelChange,
     onPinnedColumnsChange,
     onSortModelChange,
-    onPaginationModelChange,
+    onPageChange,
+    onPageSizeChange,
     onColumnVisibilityModelChange,
     onColumnWidthChange,
     pinnedCustomColumns,
@@ -25747,14 +25779,15 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, statefulTableProps));
 });
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ref3, _ref4, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref5, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
+  var _initialState$paginat, _initialState$paginat2;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      slots,
-      slotProps,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
       filterModel: propsFilterModel,
       columnVisibilityModel: propsColumnVisibilityModel,
       pinnedColumns: propsPinnedColumns,
@@ -25766,19 +25799,21 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       isStateful: propsIsStateful,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
-      rowSelectionModel: propsSelectionModel,
-      paginationModel: propsPaginationModel,
-      onPaginationModelChange: propsOnPaginationModelChange,
-      onRowSelectionModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
+      selectionModel: propsSelectionModel,
+      onSelectionModelChange,
+      page: propsPage,
+      pageSize: propsPageSize,
       pagination,
       paginationPlacement = 'both',
       paginationProps,
       pinnedCustomColumns,
       rows,
-      pageSizeOptions,
+      rowsPerPageOptions,
       sx,
       theme: propsTheme,
       useRouter,
@@ -25789,7 +25824,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme$4(propsTheme);
   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 [filterModel, setFilterModel] = useState(propsFilterModel);
@@ -25836,41 +25871,52 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setSortModel(model);
     }
   };
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   }, [propsSelectionModel]);
-  const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref3 = (_ref4 = (_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 && _ref4 !== void 0 ? _ref4 : 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 && _ref3 !== void 0 ? _ref3 : 100,
-    page: (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : 0
+  const [page, setPage] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
+  const [pageSize, setPageSize] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 100);
+  const selectionStatus = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page,
+    pageSize
   });
-  const onPaginationModelChange = model => {
-    if (propsOnPaginationModelChange) {
-      propsOnPaginationModelChange(model, undefined);
+  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]);
-  const selectionStatus = useRef({
-    type: 'none',
-    numberOfSelectedRows: 0,
-    numberOfSelectedRowsInPage: 0,
-    page: paginationModel.page,
-    pageSize: paginationModel.pageSize
-  });
+  };
+  useEffect(() => {
+    if (propsPageSize) {
+      setPageSize(propsPageSize);
+    }
+  }, [propsPageSize]);
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
     }
-  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
+  }, [selectionModel, page, pageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -25906,54 +25952,57 @@ 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, {
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    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: ToolbarWrapper,
-      pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      Pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
         selectionStatus: selectionStatus.current,
-        paginationModel: paginationModel,
-        onPaginationModelChange: onPaginationModelChange,
-        pageSizeOptions: pageSizeOptions,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
         paginationProps: paginationProps,
         paginationMode: paginationMode,
         rowCount: rowCount
@@ -25964,14 +26013,16 @@ 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,
         paginationMode: paginationMode
       })) : null
     }),
-    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
       toolbar: _objectSpread2({
         hideToolbar,
         RenderedToolbar,
@@ -25982,13 +26033,15 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         selectionStatus,
         apiRef,
         isRowSelectable,
-        paginationModel,
-        onPaginationModelChange,
-        pageSizeOptions,
+        page,
+        onPageChange,
+        pageSize,
+        onPageSizeChange,
+        rowsPerPageOptions,
         paginationProps,
         paginationMode,
         rowCount
-      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
     }),
     filterModel: filterModel,
     columnVisibilityModel: columnVisibilityModel,
@@ -26006,37 +26059,39 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     paginationMode: paginationMode,
     keepNonExistentRowsSelected: paginationMode == 'server',
     rows: rows,
-    pageSizeOptions: pageSizeOptions,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    rowSelectionModel: rowSelectionModel,
-    onRowSelectionModelChange: (newSelectionModel, details) => {
+    rowsPerPageOptions: rowsPerPageOptions,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    selectionModel: selectionModel,
+    onSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref3 => {
           let {
             model
-          } = _ref6;
+          } = _ref3;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref7 => {
+        }).map(_ref4 => {
           let {
             id
-          } = _ref7;
+          } = _ref4;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref8 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref5 => {
           let {
             model
-          } = _ref8;
+          } = _ref5;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref9 => {
+        }).map(_ref6 => {
           let {
             id
-          } = _ref9;
+          } = _ref6;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -26068,7 +26123,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': {