@redsift/table 11.2.2 → 11.3.0-muiv5

package/index.js

@@ -1,4 +1,4 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } 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, GridLinkOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, 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, forwardRef, useLayoutEffect, useEffect, useRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
@@ -17639,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) {
@@ -17652,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
@@ -17665,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 => {
@@ -17686,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 => {
@@ -17707,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 => {
@@ -17730,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 => {
@@ -17757,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 => {
@@ -17784,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 => {
@@ -17808,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 => {
@@ -17832,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 => {
@@ -17877,13 +17877,13 @@ const operatorList = {
 
 const getRsStringColumnType = () => {
   return {
-    type: 'string',
+    extendType: 'string',
     filterOperators: operatorList.rsString
   };
 };
 const getRsNumberColumnType = () => {
   return {
-    type: 'number',
+    extendType: 'number',
     filterOperators: operatorList.rsNumber
   };
 };
@@ -17894,7 +17894,7 @@ const customColumnTypes = {
 
 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',
@@ -17939,45 +17939,43 @@ const buildStorageKey = _ref => {
   } = _ref;
   return `${id}:${version}:${category}`;
 };
-const clearPreviousVersionStorage = (id, currentVersion) => {
-  const previousVersion = currentVersion - 1;
-  if (previousVersion < 1) {
-    return;
-  }
-  const keysToDelete = [buildStorageKey({
-    id,
-    version: previousVersion,
-    category: PAGINATION_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: SORT_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: FILTER_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: VISIBILITY_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: PINNED_COLUMNS
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: FILTER_SEARCH_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: DIMENSION_MODEL_KEY
-  })];
-  for (const keyToDelete of keysToDelete) {
-    try {
-      window.localStorage.removeItem(keyToDelete);
-    } catch (e) {
-      // Ignore
+const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
+  for (const version of previousLocalStorageVersions) {
+    const keysToDelete = [buildStorageKey({
+      id,
+      version,
+      category: PAGINATION_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: SORT_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: VISIBILITY_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: PINNED_COLUMNS
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_SEARCH_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: DIMENSION_MODEL_KEY
+    })];
+    for (const keyToDelete of keysToDelete) {
+      try {
+        window.localStorage.removeItem(keyToDelete);
+      } catch (e) {
+        // Ignore
+      }
     }
   }
 };
@@ -18063,39 +18061,42 @@ const numberOperatorDecoder = {
   lt: '<',
   lte: '<='
 };
-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;
   }
   const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
-  const operators = column.filterOperators || operatorList[columnType];
+  const operators = operatorList[columnType];
   if (!operators) {
     return false;
   }
-  return !!operators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operator : op.value === operator);
+  if ('filterOperators' in operators) {
+    return !!operators.filterOperators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operatorValue : op['value'] === operatorValue);
+  }
+  return !!operators.find(op => ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operatorValue : op['value'] === operatorValue);
 };
 const listOperators = ['containsAnyOf', 'endsWithAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf'];
 
 // 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 || value === '') {
     return true;
   }
 
-  // xxxAnyOf accepts as value only lists, and we are declaring them in the
+  // xxxAnyOf accepts as value only lists, and we are declearing them in the
   // URL as `list=[...]`
-  if (listOperators.includes(operator)) {
+  if (listOperators.includes(operatorValue)) {
     return Array.isArray(value) || value === '';
   }
 
   // We are accepting arrays only if they are of the 'xxxAnyOf' type
-  if (Array.isArray(value) && !listOperators.includes(operator)) {
+  if (Array.isArray(value) && !listOperators.includes(operatorValue)) {
     return false;
   }
-  const column = columns.find(column => column.field === field);
+  const column = columns.find(column => column.field === columnField);
   if (!column) {
     return false;
   }
@@ -18133,14 +18134,14 @@ const getFilterModelFromString = (searchString, columns) => {
   if (!searchString) {
     return 'invalid';
   }
-  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', '_pagination'].includes(key)) {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
-      logicOperator = value === GridLogicOperator.And || value === GridLogicOperator.Or ? value : GridLogicOperator.And;
+      linkOperator = value;
     }
   }
   let id = 5000;
@@ -18181,8 +18182,8 @@ const getFilterModelFromString = (searchString, columns) => {
       return;
     }
     items.push({
-      field,
-      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      columnField: field,
+      operatorValue: ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
       id,
       value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
       type
@@ -18197,23 +18198,23 @@ const getFilterModelFromString = (searchString, columns) => {
   }
   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,
       type
     } = item;
-    if (Object.keys(numberOperatorEncoder).includes(operator)) {
-      searchParams.set(`_${field}[${numberOperatorEncoder[operator]},${encodeValue(type)}]`, encodeValue(value));
+    if (Object.keys(numberOperatorEncoder).includes(operatorValue)) {
+      searchParams.set(`_${columnField}[${numberOperatorEncoder[operatorValue]},${encodeValue(type)}]`, encodeValue(value));
     } else {
-      searchParams.set(`_${field}[${encodeValue(operator)},${encodeValue(type)}]`, encodeValue(value));
+      searchParams.set(`_${columnField}[${encodeValue(operatorValue)},${encodeValue(type)}]`, encodeValue(value));
     }
   });
   return searchParams;
@@ -18223,7 +18224,14 @@ const getSearchParamsFromFilterModel = filterModel => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty FilterModel
-const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState) => {
+const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion) => {
+  const defaultValue = initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
+    items: [],
+    linkOperator: GridLinkOperator.And
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const filterModelFromSearch = getFilterModelFromString(search, columns);
   if (filterModelFromSearch !== 'invalid') {
     const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
@@ -18237,10 +18245,7 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
   if (filterModelFromLocalStorage !== 'invalid') {
     return filterModelFromLocalStorage;
   }
-  return initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
-    items: [],
-    logicOperator: GridLogicOperator.And
-  };
+  return defaultValue;
 };
 
 /** SORT */
@@ -18274,8 +18279,12 @@ const getSearchParamsFromSorting = sorting => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty SortModel
-const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState) => {
+const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion) => {
   var _initialState$sorting;
+  const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const sorting = getSortingFromString(search, columns);
   if (sorting !== 'invalid') {
     const searchFromSortModel = getSearchParamsFromSorting(sorting);
@@ -18289,7 +18298,7 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
   if (sortModelFromLocalStorage !== 'invalid') {
     return sortModelFromLocalStorage;
   }
-  return initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+  return defaultValue;
 };
 
 /** PAGINATION */
@@ -18326,8 +18335,19 @@ const getSearchParamsFromPagination = pagination => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty PaginationModel
-const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState) => {
-  var _initialState$paginat;
+const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pagination ? _objectSpread2({
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  }, initialState.pagination) : {
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const pagination = getPaginationFromString(search);
   if (pagination !== 'invalid') {
     const searchFromPaginationModel = getSearchParamsFromPagination(pagination);
@@ -18341,51 +18361,18 @@ const getPaginationModel = (search, localStoragePagination, setLocalStoragePagin
   if (paginationModelFromLocalStorage !== 'invalid') {
     return paginationModelFromLocalStorage;
   }
-  return initialState !== null && initialState !== void 0 && (_initialState$paginat = initialState.pagination) !== null && _initialState$paginat !== void 0 && _initialState$paginat.paginationModel ? _objectSpread2({
-    page: 0,
-    pageSize: 25,
-    direction: 'next'
-  }, initialState.pagination.paginationModel) : {
-    page: 0,
-    pageSize: 25,
-    direction: 'next'
-  };
+  return defaultValue;
 };
 
 /** COLUMN VISIBILITY */
 
-const getColumnVisibilityFromString = (searchString, columns) => {
-  if (!searchString) {
-    return 'invalid';
-  }
-  const searchParams = new URLSearchParams(searchString);
-  const value = searchParams.get('_columnVisibility');
-  if (value === '' || value === null || value === '[]') {
-    return 'invalid';
-  }
-  const parsedFields = value.slice(1, value.length - 1).split(',');
-  const fields = columns.map(column => column.field);
-  const visibility = {};
-  for (const field of fields) {
-    visibility[field] = false;
-  }
-  for (const parsedField of parsedFields) {
-    if (fields.includes(parsedField)) {
-      visibility[parsedField] = true;
-    }
-  }
-  if (Object.values(visibility).filter(v => v === true).length === 0) {
-    return 'invalid';
-  }
-  return visibility;
-};
 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 => {
@@ -18396,10 +18383,63 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
       [colName]: true
     });
   }, columnVisibility);
-  const visibleColumns = fields.filter(column => finalColumnVisibility[column] !== false);
+  const visibleColumns = Object.entries(finalColumnVisibility)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .filter(_ref => {
+    let [_, visible] = _ref;
+    return visible;
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .map(_ref2 => {
+    let [column, _] = _ref2;
+    return encodeValue(column);
+  });
   searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
   return searchParams;
 };
+const getColumnVisibilityFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return 'invalid';
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  const visibility = {};
+  let exist = false;
+  let visibleColumnsCount = 0;
+  for (const item of parsed.split('&')) {
+    // if it's not column visibility field, skip
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_columnVisibility') {
+      continue;
+    }
+    // e.g. item = _columnVisibility[abc,def]
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    exist = true;
+    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 columnFields) {
+      const isColumnVisible = columns.includes(column);
+      visibility[column] = isColumnVisible;
+      if (isColumnVisible) {
+        visibleColumnsCount += 1;
+      }
+    }
+  }
+  if (visibleColumnsCount === 0 && !exist) {
+    return 'invalid';
+  }
+  return visibility;
+};
 
 // Rules:
 // - if we have something in the URL, use that info
@@ -18407,8 +18447,17 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
 // - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
 // NOTE: the `defaultHidden` is a custom field and not standard DataGrid
 // The reason is the following bug: https://github.com/mui/mui-x/issues/8407
-const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState) => {
+const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion) => {
   var _initialState$columns;
+  const defaultValue = {};
+  for (const column of columns) {
+    const field = column.field;
+    defaultValue[field] = column.defaultHidden !== true; // undefined will be true
+  }
+
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const columnVisibility = getColumnVisibilityFromString(search, columns);
   if (columnVisibility !== 'invalid') {
     const searchColumnVisibility = getSearchParamsFromColumnVisibility(columnVisibility, columns);
@@ -18424,15 +18473,7 @@ const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, se
   if (initialState !== null && initialState !== void 0 && (_initialState$columns = initialState.columns) !== null && _initialState$columns !== void 0 && _initialState$columns.columnVisibilityModel) {
     return initialState.columns.columnVisibilityModel;
   }
-
-  // No columns in URL or localStorage, just show them all expect the hidden ones
-  const res = {};
-  for (const column of columns) {
-    const field = column.field;
-    res[field] = column.defaultHidden !== true; // undefined will be true
-  }
-
-  return res;
+  return defaultValue;
 };
 const getPinnedColumnsFromString = (notParsed, tableColumns) => {
   if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
@@ -18454,8 +18495,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;
     }
@@ -18463,9 +18504,9 @@ const getPinnedColumnsFromString = (notParsed, tableColumns) => {
       pinnedColumns['right'] = columns;
     }
   }
-  return pinnedColumns.left && pinnedColumns.left.length > 0 || pinnedColumns.right && pinnedColumns.right.length > 0 ? {
-    left: pinnedColumns.left || [],
-    right: pinnedColumns.right || []
+  return pinnedColumns['left'] || pinnedColumns['right'] ? {
+    left: pinnedColumns['left'] || [],
+    right: pinnedColumns['right'] || []
   } : 'invalid';
 };
 const getSearchParamsFromPinnedColumns = pinnedColumns => {
@@ -18482,7 +18523,17 @@ const getSearchParamsFromPinnedColumns = pinnedColumns => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
-const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState) => {
+const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pinnedColumns ? {
+    left: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['left']) || [],
+    right: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['right']) || []
+  } : {
+    left: [],
+    right: []
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const pinnedColumns = getPinnedColumnsFromString(search, columns);
   if (pinnedColumns !== 'invalid') {
     const searchPinnedColumns = getSearchParamsFromPinnedColumns(pinnedColumns);
@@ -18495,19 +18546,7 @@ const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalSt
   if (pinnedColumnsFromLocalStorage !== 'invalid') {
     return pinnedColumnsFromLocalStorage;
   }
-  if (initialState !== null && initialState !== void 0 && initialState.pinnedColumns) {
-    return {
-      left: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['left']) || [],
-      right: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['right']) || []
-    };
-  }
-
-  // No pinnedColumn in URL or localStorage, TODO: decide what is the default state
-  const res = {
-    left: [],
-    right: []
-  };
-  return res;
+  return defaultValue;
 };
 const getSearchParamsFromTab = search => {
   const searchParams = new URLSearchParams();
@@ -18517,16 +18556,17 @@ const getSearchParamsFromTab = search => {
   }
   return searchParams;
 };
-const getFinalSearch = _ref => {
+const getFinalSearch = _ref3 => {
   let {
     search,
+    localStorageVersion,
     filterModel,
     sortModel,
     paginationModel,
     columnsVisibilityModel,
     pinnedColumnsModel,
     columns
-  } = _ref;
+  } = _ref3;
   const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
   const sortModelSearch = getSearchParamsFromSorting(sortModel);
   const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
@@ -18539,10 +18579,13 @@ const getFinalSearch = _ref => {
       searchParams.set(key, value);
     }
   }
+  searchParams.set('v', `${localStorageVersion}`);
   return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
-const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, initialState, localStorage) => {
+const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, historyReplace, initialState, localStorage) => {
+  const currentVersion = new URLSearchParams(search).get('v');
+  const isNewVersion = !currentVersion || Number(currentVersion) !== localStorageVersion;
   const {
     localStorageFilters,
     setLocalStorageFilters,
@@ -18555,12 +18598,13 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, in
     localStoragePinnedColumns,
     setLocalStoragePinnedColumns
   } = localStorage;
-  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState);
-  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState);
-  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState);
-  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState);
-  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState);
+  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
+  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
+  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
+  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
   const finalSearch = getFinalSearch({
+    localStorageVersion,
     search,
     filterModel,
     sortModel,
@@ -18581,16 +18625,17 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, in
     pinnedColumnsModel
   };
 };
-const updateUrl = (_ref2, search, historyReplace, columns) => {
+const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns) => {
   let {
     filterModel,
     sortModel,
     paginationModel,
     columnsModel: columnsVisibilityModel,
     pinnedColumnsModel
-  } = _ref2;
+  } = _ref4;
   const newSearch = getFinalSearch({
     search,
+    localStorageVersion,
     filterModel,
     sortModel,
     paginationModel,
@@ -18608,17 +18653,17 @@ const updateUrl = (_ref2, search, historyReplace, columns) => {
 // do not use it for equivalence (e.g. with value `3` and undefined we
 // will get 0).
 const compareFilters = (firstFilter, secondFilter) => {
-  if (firstFilter.field < secondFilter.field) {
+  if (firstFilter.columnField < secondFilter.columnField) {
     return -1;
-  } else if (firstFilter.field > secondFilter.field) {
+  } else if (firstFilter.columnField > secondFilter.columnField) {
     return 1;
   }
-  if (firstFilter.operator === undefined || secondFilter.operator === undefined) {
+  if (firstFilter.operatorValue === undefined || secondFilter.operatorValue === undefined) {
     return 0;
   }
-  if (firstFilter.operator < secondFilter.operator) {
+  if (firstFilter.operatorValue < secondFilter.operatorValue) {
     return -1;
-  } else if (firstFilter.operator > secondFilter.operator) {
+  } else if (firstFilter.operatorValue > secondFilter.operatorValue) {
     return 1;
   }
   if (firstFilter.value < secondFilter.value) {
@@ -18629,18 +18674,18 @@ const compareFilters = (firstFilter, secondFilter) => {
   return 0;
 };
 const areFiltersEquivalent = (firstFilter, secondFilter) => {
-  return firstFilter.field === secondFilter.field && firstFilter.operator === secondFilter.operator && firstFilter.value === secondFilter.value;
+  return firstFilter.columnField === secondFilter.columnField && firstFilter.operatorValue === secondFilter.operatorValue && firstFilter.value === secondFilter.value;
 };
 const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
   const {
     items,
-    logicOperator
+    linkOperator
   } = filterModel;
   const {
     items: itemsToMatch,
-    logicOperator: logicOperatorToMatch
+    linkOperator: linkOperatorToMatch
   } = filterModelToMatch;
-  if (logicOperator !== logicOperatorToMatch) {
+  if (linkOperator !== linkOperatorToMatch) {
     return false;
   }
   if (items.length !== itemsToMatch.length) {
@@ -18653,7 +18698,7 @@ const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
     const filterToCompare = itemsToMatch[i];
 
     // compareFilters return 0 if and only if the filters have the same
-    // field, operator, and value
+    // columnField, operatorValue, and value
     if (!areFiltersEquivalent(filter, filterToCompare)) {
       return false;
     }
@@ -24464,16 +24509,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:
@@ -24510,10 +24555,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
@@ -24591,7 +24636,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, {
@@ -24652,7 +24697,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridExpandedSortedRowIdsSelector(apiRef);
+        return gridVisibleSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -26884,10 +26929,12 @@ const ServerSideControlledPagination = _ref3 => {
     selectionStatus,
     displaySelection,
     displayPagination,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
     displayRowsPerPage,
+    rowsPerPageOptions,
     paginationProps,
     rowCount
   } = _ref3;
@@ -26906,17 +26953,13 @@ const ServerSideControlledPagination = _ref3 => {
   }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$1({
     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);
 };
 
@@ -26942,9 +26985,11 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
+    page,
+    onPageChange,
+    pageSize,
+    onPageSizeChange,
+    rowsPerPageOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -26974,25 +27019,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$1({
     component: "div",
     count: numberOfFilteredRowsInTable,
-    page: paginationModel.page,
-    onPageChange: (event, page) => {
-      onPaginationModelChange({
-        page,
-        pageSize: paginationModel.pageSize
-      });
-    },
-    rowsPerPage: paginationModel.pageSize,
+    page: page,
+    onPageChange: (event, newPage) => onPageChange(newPage),
+    rowsPerPage: pageSize,
     onRowsPerPageChange: event => {
-      onPaginationModelChange({
-        page: paginationModel.page,
-        pageSize: parseInt(event.target.value, 10)
-      });
+      onPageSizeChange(parseInt(event.target.value, 10));
     },
-    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
   }, paginationProps)) : null);
 };
 
-const _excluded$3 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"];
+const _excluded$3 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"];
 const ToolbarWrapper = _ref => {
   let {
       hideToolbar,
@@ -27004,9 +27041,11 @@ const ToolbarWrapper = _ref => {
       selectionStatus,
       apiRef,
       isRowSelectable,
-      paginationModel,
-      onPaginationModelChange,
-      pageSizeOptions,
+      page,
+      onPageChange,
+      pageSize,
+      onPageSizeChange,
+      rowsPerPageOptions,
       paginationProps,
       paginationMode = 'client',
       rowCount
@@ -27020,9 +27059,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, {
@@ -27032,26 +27073,30 @@ 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);
 };
 
 const useControlledDatagridState = _ref => {
-  var _ref2, _ref3, _propsPaginationModel, _initialState$paginat, _initialState$paginat2, _pageSizeOptions$, _ref4, _propsPaginationModel2, _initialState$paginat3, _initialState$paginat4;
+  var _initialState$paginat, _initialState$paginat2;
   let {
     initialState,
-    pageSizeOptions,
+    rowsPerPageOptions,
     propsColumnVisibilityModel,
     propsFilterModel,
     propsOnColumnVisibilityModelChange,
     propsOnFilterModelChange,
-    propsOnPaginationModelChange,
+    propsOnPageChange,
+    propsOnPageSizeChange,
     propsOnPinnedColumnsChange,
     propsOnSortModelChange,
-    propsPaginationModel,
+    propsPage,
+    propsPageSize,
     propsPinnedColumns,
     propsSortModel
   } = _ref;
@@ -27099,22 +27144,33 @@ const useControlledDatagridState = _ref => {
       setSortModel(model);
     }
   };
-  const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref2 = (_ref3 = (_propsPaginationModel = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _propsPaginationModel !== void 0 ? _propsPaginationModel : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : (_initialState$paginat2 = _initialState$paginat.paginationModel) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 25,
-    page: (_ref4 = (_propsPaginationModel2 = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _propsPaginationModel2 !== void 0 ? _propsPaginationModel2 : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat3 = initialState.pagination) === null || _initialState$paginat3 === void 0 ? void 0 : (_initialState$paginat4 = _initialState$paginat3.paginationModel) === null || _initialState$paginat4 === void 0 ? void 0 : _initialState$paginat4.page) !== null && _ref4 !== void 0 ? _ref4 : 0
-  });
-  const onPaginationModelChange = (model, details) => {
-    if (propsOnPaginationModelChange) {
-      propsOnPaginationModelChange(model, details);
+  const [page, setPage] = 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] = 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]) || 25);
+  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]);
   return {
     filterModel,
     onFilterModelChange,
@@ -27124,12 +27180,14 @@ const useControlledDatagridState = _ref => {
     onPinnedColumnsChange,
     sortModel,
     onSortModelChange,
-    paginationModel,
-    onPaginationModelChange
+    page,
+    pageSize,
+    onPageChange,
+    onPageSizeChange
   };
 };
 
-const _excluded$2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount"];
+const _excluded$2 = ["apiRef", "autoHeight", "className", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "paginationMode", "rowCount"];
 const COMPONENT_NAME$2 = 'DataGrid';
 const CLASSNAME$2 = 'redsift-datagrid';
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27138,30 +27196,33 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      slots,
-      slotProps,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
       filterModel: propsFilterModel,
       columnVisibilityModel: propsColumnVisibilityModel,
       pinnedColumns: propsPinnedColumns,
       sortModel: propsSortModel,
-      paginationModel: propsPaginationModel,
       height: propsHeight,
       hideToolbar,
       initialState,
       isRowSelectable,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
-      rowSelectionModel: propsRowSelectionModel,
-      onPaginationModelChange: propsOnPaginationModelChange,
-      onRowSelectionModelChange: propsOnRowSelectionModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
+      selectionModel: propsSelectionModel,
+      onSelectionModelChange: propsOnSelectionModelChange,
+      page: propsPage,
+      pageSize: propsPageSize,
       pagination,
       paginationPlacement = 'both',
       paginationProps,
       rows,
-      pageSizeOptions,
+      rowsPerPageOptions,
       sx,
       theme: propsTheme,
       paginationMode = 'client',
@@ -27171,7 +27232,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 {
@@ -27179,52 +27240,56 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     filterModel,
     onColumnVisibilityModelChange,
     onFilterModelChange,
-    onPaginationModelChange,
+    onPageChange,
+    onPageSizeChange,
     onPinnedColumnsChange,
     onSortModelChange,
-    paginationModel,
+    page,
+    pageSize,
     pinnedColumns,
     sortModel
   } = useControlledDatagridState({
     initialState,
-    pageSizeOptions,
+    rowsPerPageOptions,
     propsColumnVisibilityModel,
     propsFilterModel,
     propsOnColumnVisibilityModelChange,
     propsOnFilterModelChange,
     propsOnPinnedColumnsChange,
     propsOnSortModelChange,
-    propsPaginationModel,
+    propsPage,
+    propsPageSize,
     propsPinnedColumns,
     propsSortModel,
-    propsOnPaginationModelChange
+    propsOnPageChange,
+    propsOnPageSizeChange
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
-  }, [propsRowSelectionModel]);
-  const onRowSelectionModelChange = (selectionModel, details) => {
-    if (propsOnRowSelectionModelChange) {
-      propsOnRowSelectionModelChange(selectionModel, details);
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const onSelectionModelChange = (selectionModel, details) => {
+    if (propsOnSelectionModelChange) {
+      propsOnSelectionModelChange(selectionModel, details);
     } else {
-      setRowSelectionModel(selectionModel);
+      setSelectionModel(selectionModel);
     }
   };
   const selectionStatus = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
-    page: paginationModel.page,
-    pageSize: paginationModel.pageSize
+    page,
+    pageSize
   });
 
   // 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;
   }
@@ -27255,54 +27320,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$1({}, props, {
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      BasePopper,
+      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ExportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
+      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
         displayName: "OpenFilterButtonIcon"
       }, props))
-    }, slots), {}, {
-      toolbar: ToolbarWrapper,
-      pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      Pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, 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
@@ -27313,14 +27381,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,
@@ -27331,13 +27401,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,
@@ -27353,11 +27425,13 @@ 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(_ref => {
           let {
@@ -27415,7 +27489,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': {
@@ -27432,6 +27506,8 @@ DataGrid.className = CLASSNAME$2;
 DataGrid.displayName = COMPONENT_NAME$2;
 
 // Get and Set data from LocalStorage WITHOUT useState
+
+// triggering a state update and consecutive re-render
 const useFetchState = (defaultValue, key) => {
   let stickyValue = null;
   try {
@@ -27439,7 +27515,16 @@ const useFetchState = (defaultValue, key) => {
   } catch (e) {
     console.error('StatefulDataGrid: error getting item from local storage: ', e);
   }
-  const parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+  let parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+
+  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)
+  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224
+  if (parsedValue instanceof Array) {
+    const fields = (parsedValue || []).map(item => item.field);
+    if (fields.includes('screenshot') || fields.includes('diffs')) {
+      parsedValue = defaultValue;
+    }
+  }
   const updateValue = useCallback(value => {
     try {
       window.localStorage.setItem(key, JSON.stringify(value));
@@ -27450,8 +27535,6 @@ const useFetchState = (defaultValue, key) => {
   return [parsedValue, updateValue];
 };
 
-// import useLocalStorage from './useLocalStorage';
-
 const useTableStates = (id, version) => {
   const [paginationModel, setPaginationModel] = useFetchState('', buildStorageKey({
     id,
@@ -27508,11 +27591,13 @@ const useStatefulTable = props => {
     onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
     onColumnWidthChange: propsOnColumnWidthChange,
     onFilterModelChange: propsOnFilterModelChange,
-    onPaginationModelChange: propsOnPaginationModelChange,
+    onPageChange: propsOnPageChange,
+    onPageSizeChange: propsOnPageSizeChange,
     onPinnedColumnsChange: propsOnPinnedColumnsChange,
     onSortModelChange: propsOnSortModelChange,
     useRouter,
-    localStorageVersion = 2
+    localStorageVersion = 1,
+    previousLocalStorageVersions = []
   } = props;
   const {
     search,
@@ -27537,8 +27622,8 @@ const useStatefulTable = props => {
     setDimensionModel
   } = useTableStates(id, localStorageVersion);
 
-  // clearing up old version keys, triggering only on first render
-  useEffect(() => clearPreviousVersionStorage(id, localStorageVersion), [id, localStorageVersion]);
+  // clearing up old version keys
+  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
   const onColumnDimensionChange = useCallback(_ref => {
     let {
       newWidth,
@@ -27554,7 +27639,7 @@ const useStatefulTable = props => {
     paginationModel: paginationModelParsed,
     columnVisibilityModel: visibilityModel,
     pinnedColumnsModel
-  } = getModelsParsedOrUpdateLocalStorage(search || '', propsColumns, historyReplace, initialState, {
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
     localStorageFilters,
     setLocalStorageFilters,
     localStorageSorting: sortModel,
@@ -27570,6 +27655,7 @@ const useStatefulTable = props => {
     column.width = dimensionModel[column.field] || column.width || 100;
     return column;
   }), [propsColumns, dimensionModel]);
+
   /** Add resetPage method to apiRef. */
   apiRef.current.resetPage = () => {
     apiRef.current.setPage(0);
@@ -27580,7 +27666,7 @@ const useStatefulTable = props => {
     onFilterModelChange: (model, details) => {
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          const column = apiRef.current.getColumn(item.field);
+          const column = apiRef.current.getColumn(item.columnField);
           item.type = column.type || 'string';
           return item;
         })
@@ -27592,7 +27678,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     filterModel: filterParsed,
     onSortModelChange: (model, details) => {
@@ -27603,7 +27689,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
@@ -27614,22 +27700,39 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumns
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     pinnedColumns: pinnedColumnsModel,
-    paginationModel: paginationModelParsed,
-    onPaginationModelChange: (model, details) => {
-      const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
-        direction: paginationModelParsed.page < model.page ? 'next' : 'back'
-      });
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
+    page: paginationModelParsed.page,
+    pageSize: paginationModelParsed.pageSize,
+    onPageChange: (page, details) => {
+      const direction = paginationModelParsed.page < page ? 'next' : 'back';
+      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
-        paginationModel: paginationModel,
+        paginationModel: {
+          page,
+          pageSize: paginationModelParsed.pageSize,
+          direction
+        },
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    onPageSizeChange: (pageSize, details) => {
+      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: {
+          page: paginationModelParsed.page,
+          pageSize,
+          direction: paginationModelParsed.direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
     },
     columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
@@ -27640,7 +27743,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: columnsVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -27652,7 +27755,7 @@ const useStatefulTable = props => {
   };
 };
 
-const _excluded$1 = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const _excluded$1 = ["apiRef", "autoHeight", "className", "columns", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "page", "pageSize", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "selectionModel", "onColumnWidthChange", "onPageChange", "onPageSizeChange", "onSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27662,24 +27765,28 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       autoHeight,
       className,
       columns,
-      slots,
-      slotProps,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
       filterModel: propsFilterModel,
       columnVisibilityModel: propsColumnVisibilityModel,
       pinnedColumns: propsPinnedColumns,
       sortModel: propsSortModel,
-      paginationModel: propsPaginationModel,
+      page: propsPage,
+      pageSize: propsPageSize,
       height: propsHeight,
       hideToolbar,
       initialState,
       isRowSelectable,
       license = process.env.MUI_LICENSE_KEY,
       localStorageVersion,
+      previousLocalStorageVersions,
       onFilterModelChange: propsOnFilterModelChange,
-      rowSelectionModel: propsRowSelectionModel,
+      selectionModel: propsSelectionModel,
       onColumnWidthChange: propsOnColumnWidthChange,
-      onPaginationModelChange: propsOnPaginationModelChange,
-      onRowSelectionModelChange: propsOnRowSelectionModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
+      onSelectionModelChange: propsOnSelectionModelChange,
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
@@ -27687,7 +27794,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       paginationPlacement = 'both',
       paginationProps,
       rows,
-      pageSizeOptions,
+      rowsPerPageOptions,
       sx,
       theme: propsTheme,
       useRouter,
@@ -27698,38 +27805,43 @@ const StatefulDataGrid = /*#__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 {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onFilterModelChange: controlledOnFilterModelChange,
-    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange
   } = useControlledDatagridState({
     initialState,
-    pageSizeOptions,
+    rowsPerPageOptions,
     propsColumnVisibilityModel,
     propsFilterModel,
     propsOnColumnVisibilityModelChange,
     propsOnFilterModelChange,
     propsOnPinnedColumnsChange,
     propsOnSortModelChange,
-    propsPaginationModel,
+    propsPage,
+    propsPageSize,
     propsPinnedColumns,
     propsSortModel,
-    propsOnPaginationModelChange
+    propsOnPageChange,
+    propsOnPageSizeChange
   });
   const {
     columnVisibilityModel,
     filterModel,
     onColumnVisibilityModelChange,
     onFilterModelChange,
-    onPaginationModelChange,
+    onPageChange,
+    onPageSizeChange,
     onPinnedColumnsChange,
     onSortModelChange,
-    paginationModel,
+    page,
+    pageSize,
     pinnedColumns,
     sortModel,
     onColumnWidthChange
@@ -27740,38 +27852,40 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onColumnWidthChange: propsOnColumnWidthChange,
     onFilterModelChange: controlledOnFilterModelChange,
-    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange,
     useRouter: useRouter,
-    localStorageVersion
+    localStorageVersion,
+    previousLocalStorageVersions
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
-  }, [propsRowSelectionModel]);
-  const onRowSelectionModelChange = (selectionModel, details) => {
-    if (propsOnRowSelectionModelChange) {
-      propsOnRowSelectionModelChange(selectionModel, details);
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const onSelectionModelChange = (selectionModel, details) => {
+    if (propsOnSelectionModelChange) {
+      propsOnSelectionModelChange(selectionModel, details);
     } else {
-      setRowSelectionModel(selectionModel);
+      setSelectionModel(selectionModel);
     }
   };
   const selectionStatus = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
-    page: paginationModel.page,
-    pageSize: paginationModel.pageSize
+    page,
+    pageSize: pageSize
   });
 
   // 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;
   }
@@ -27804,13 +27918,15 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     filterModel: filterModel,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
     onFilterModelChange: onFilterModelChange,
-    onPaginationModelChange: onPaginationModelChange,
+    onPageChange: onPageChange,
+    onPageSizeChange: onPageSizeChange,
     onPinnedColumnsChange: onPinnedColumnsChange,
     onSortModelChange: onSortModelChange,
-    paginationModel: paginationModel,
+    page: page,
+    pageSize: pageSize,
     pinnedColumns: pinnedColumns,
     sortModel: sortModel,
-    pageSizeOptions: pageSizeOptions,
+    rowsPerPageOptions: rowsPerPageOptions,
     onColumnWidthChange: onColumnWidthChange,
     initialState: initialState,
     isRowSelectable: isRowSelectable,
@@ -27821,55 +27937,58 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
-    slots: _objectSpread2(_objectSpread2({
-      baseButton: BaseButton,
-      baseCheckbox: BaseCheckbox,
-      // baseTextField,
-      basePopper: BasePopper,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      BasePopper,
+      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ExportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
+      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
         displayName: "OpenFilterButtonIcon"
       }, props))
-    }, slots), {}, {
-      toolbar: ToolbarWrapper,
-      pagination: props => {
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      Pagination: props => {
         return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus.current,
-          paginationModel: paginationModel,
-          onPaginationModelChange: onPaginationModelChange,
-          pageSizeOptions: pageSizeOptions,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
           paginationProps: paginationProps,
           paginationMode: paginationMode,
           rowCount: rowCount
@@ -27880,15 +27999,17 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           selectionStatus: selectionStatus.current,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
-          paginationModel: paginationModel,
-          onPaginationModelChange: onPaginationModelChange,
-          pageSizeOptions: pageSizeOptions,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
           paginationProps: paginationProps,
           paginationMode: paginationMode
         })) : null;
       }
     }),
-    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
       toolbar: _objectSpread2({
         hideToolbar,
         RenderedToolbar,
@@ -27899,16 +28020,18 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         selectionStatus,
         apiRef,
         isRowSelectable,
-        paginationModel,
-        onPaginationModelChange,
-        pageSizeOptions,
+        page,
+        pageSize,
+        onPageChange,
+        onPageSizeChange,
+        rowsPerPageOptions,
         paginationProps,
         paginationMode,
         rowCount
-      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
     }),
-    rowSelectionModel: rowSelectionModel,
-    onRowSelectionModelChange: (newSelectionModel, details) => {
+    selectionModel: selectionModel,
+    onSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
         const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
           let {
@@ -27966,7 +28089,7 @@ const StatefulDataGrid = /*#__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': {
@@ -28040,5 +28163,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
 TextCell.className = CLASSNAME;
 TextCell.displayName = COMPONENT_NAME;
 
-export { BaseButton, BaseCheckbox, BaseIcon, BasePopper, BaseTextField, CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, ControlledPagination, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, ServerSideControlledPagination, StatefulDataGrid, TextCell, Toolbar$2 as Toolbar, ToolbarWrapper, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, isOperatorValueValid, isValueValid, muiIconToDSIcon, numberOperatorDecoder, numberOperatorEncoder, onServerSideSelectionStatusChange, operatorList, updateUrl, urlSearchParamsToString };
+export { BaseButton, BaseCheckbox, BaseIcon, BasePopper, BaseTextField, CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, ControlledPagination, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, ServerSideControlledPagination, StatefulDataGrid, TextCell, Toolbar$2 as Toolbar, ToolbarWrapper, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, muiIconToDSIcon, numberOperatorDecoder, numberOperatorEncoder, onServerSideSelectionStatusChange, operatorList, updateUrl, urlSearchParamsToString };
 //# sourceMappingURL=index.js.map