@redsift/table 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/StatefulDataGrid2.js

@@ -1,19 +1,1422 @@
-import { Comp } from '@redsift/design-system';
-import { D as DataGridProps } from './types.js';
-
-interface StatefulDataGridProps extends DataGridProps {
-    /** Hook returning pathname, search params and a method to update query params. */
-    useRouter: () => {
-        pathname: string;
-        search: string;
-        historyReplace: (newSearch: string) => void;
+import { _ as _objectSpread2, b as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useTheme, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
+import { GridLinkOperator, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { o as operatorList, L as LicenseInfo, G as useControlledDatagridState, T as ThemeProvider$1, J as StyledDataGrid, f as customColumnTypes } from './useControlledDatagridState.js';
+import { g as createTheme } from './Portal.js';
+import { T as Toolbar } from './Toolbar2.js';
+import { o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
+import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
+
+const PAGINATION_MODEL_KEY = 'paginationModel';
+const FILTER_MODEL_KEY = 'filterModel';
+const SORT_MODEL_KEY = 'sortModel';
+const VISIBILITY_MODEL_KEY = 'visibilityModel';
+const PINNED_COLUMNS = 'pinnedColumns';
+const DIMENSION_MODEL_KEY = 'dimension';
+const FILTER_SEARCH_KEY = 'searchModel';
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS];
+const buildStorageKey = _ref => {
+  let {
+    id,
+    version,
+    category
+  } = _ref;
+  return `${id}:${version}:${category}`;
+};
+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
+      }
+    }
+  }
+};
+
+// reference value: https://www.w3schools.com/tags/ref_urlencode.ASP
+const DECODER = {
+  '%20': ' ',
+  '%26': '&',
+  '%3D': '=',
+  '%3F': '?',
+  '%5B': '[',
+  '%5D': ']',
+  '%2C': ',',
+  '%3C': '<',
+  '%3E': '>',
+  '%21': '!',
+  '%22': '"'
+};
+const ENCODER = {
+  ' ': '%20',
+  '&': '%26',
+  '=': '%3D',
+  '?': '%3F',
+  '[': '%5B',
+  ']': '%5D',
+  ',': '%2C',
+  '<': '%3C',
+  '>': '%3E',
+  '!': '%21',
+  '"': '%22'
+};
+const decodeValue = value => {
+  if (value === '') {
+    return '';
+  }
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}|${curr}`), 'g');
+  // decodeValue for lists:
+  if (value.startsWith('list[')) {
+    const arrayValues = value.split('[')[1].split(']')[0];
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
+    return arrayList.length > 0 ? arrayList : [];
+  }
+  return value.replace(re, encoded => DECODER[encoded]);
+};
+const encodeValue = value => {
+  if (!value) {
+    return '';
+  }
+
+  // Array encoding for value:
+  // we are representing it as list[encoded], where encoded is the list comma separated
+  if (Array.isArray(value)) {
+    const encodedArray = value.map(entry => {
+      return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+    }).join(',');
+    return `list[${encodedArray}]`;
+  }
+
+  // we might also pass integers
+  const castedValue = String(value);
+  return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+};
+const urlSearchParamsToString = searchParams => {
+  let searchString = '';
+  for (const [key, value] of searchParams) {
+    searchString = searchString + `${key}=${value}&`;
+  }
+  return searchString.slice(0, searchString.length - 1);
+};
+const numberOperatorEncoder = {
+  '=': 'eq',
+  '!=': 'ne',
+  '>': 'gt',
+  '>=': 'gte',
+  '<': 'lt',
+  '<=': 'lte'
+};
+const numberOperatorDecoder = {
+  eq: '=',
+  ne: '!=',
+  gt: '>',
+  gte: '>=',
+  lt: '<',
+  lte: '<='
+};
+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 = operatorList[columnType];
+  if (!operators) {
+    return false;
+  }
+  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', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf'];
+
+// Check if the value doesn't break
+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 declearing them in the
+  // URL as `list=[...]`
+  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(operatorValue)) {
+    return false;
+  }
+  const column = columns.find(column => column.field === columnField);
+  if (!column) {
+    return false;
+  }
+  const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
+
+  // Only date and rating fail with 500s, other set themselves as undefined
+  if (type !== 'date' && type !== 'rating') {
+    return true;
+  }
+
+  // just checking that rating is a number.
+  if (type === 'rating') {
+    return !isNaN(Number(value));
+  }
+
+  // format: YYYY-MM-DD
+  // just verifying that the 3 values are numbers to avoid 500s,
+  // If the value is invalid the form will appear as undefined
+  if (type === 'date') {
+    const dateSplitted = value.split('-');
+    if (dateSplitted.length !== 3) {
+      return false;
+    }
+    const [YYYY, MM, DD] = dateSplitted;
+    return !isNaN(parseInt(YYYY)) && !isNaN(parseInt(MM)) && !isNaN(parseInt(DD));
+  }
+  return false;
+};
+
+/** FILTERS */
+
+// example:
+// unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
+const getFilterModelFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  let linkOperator = GridLinkOperator.And;
+  let quickFilterValues = [];
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(searchString)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues'].includes(key)) {
+      searchParams.set(key, value);
+    }
+    if (key === '_logicOperator') {
+      linkOperator = value;
+    }
+    if (key === '_quickFilterValues') {
+      try {
+        quickFilterValues = JSON.parse(decodeURIComponent(value));
+      } catch {
+        quickFilterValues = [];
+      }
+    }
+  }
+  let id = 5000;
+  const fields = columns.map(column => column.field);
+  let isInvalid = false;
+  const items = [];
+  searchParams.forEach((value, key) => {
+    var _columns$find;
+    if (isInvalid) {
+      return;
+    }
+    const field = key.split('[')[0].slice(1); // Slice to remove the _ at the beginning
+    if (!fields.includes(field)) {
+      return;
+    }
+    const columnType = (_columns$find = columns.find(column => column.field === field)) === null || _columns$find === void 0 ? void 0 : _columns$find.type;
+    const left = key.split(']')[0];
+    if (left.split('[').length < 2) {
+      isInvalid = true;
+      return;
+    }
+    const splitRight = key.split('[')[1].split(']')[0].split(',');
+    const type = splitRight[1];
+    if (type !== columnType) {
+      isInvalid = true;
+      return;
+    }
+    const operator = splitRight[0];
+    // if the operator is not part of the valid operators invalidate the URL
+    if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
+      isInvalid = true;
+      return;
+    }
+    id += 1;
+    const decodedValue = decodeValue(value);
+    if (!isValueValid(decodedValue, field, columns, operator)) {
+      isInvalid = true;
+      return;
+    }
+    items.push({
+      columnField: field,
+      operatorValue: ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      id,
+      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
+      type
+    });
+  });
+
+  // If we found some condition that results in an invalid URL,
+  // return the empty filterModel (this will trigger the localStorage)
+  // and will pick up the last valid search
+  if (isInvalid) {
+    return 'invalid';
+  }
+  return {
+    items,
+    linkOperator,
+    quickFilterValues
+  };
+};
+const getSearchParamsFromFilterModel = filterModel => {
+  var _filterModel$quickFil;
+  const searchParams = new URLSearchParams();
+  searchParams.set('_logicOperator', filterModel['linkOperator'] || '');
+  filterModel['items'].forEach(item => {
+    const {
+      columnField,
+      operatorValue,
+      value,
+      type
+    } = item;
+    if (Object.keys(numberOperatorEncoder).includes(operatorValue)) {
+      searchParams.set(`_${columnField}[${numberOperatorEncoder[operatorValue]},${encodeValue(type)}]`, encodeValue(value));
+    } else {
+      searchParams.set(`_${columnField}[${encodeValue(operatorValue)},${encodeValue(type)}]`, encodeValue(value));
+    }
+  });
+  if ((_filterModel$quickFil = filterModel.quickFilterValues) !== null && _filterModel$quickFil !== void 0 && _filterModel$quickFil.length) {
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
+  return searchParams;
+};
+
+// Rules:
+// - 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, 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);
+    const searchString = urlSearchParamsToString(searchFromFilterModel);
+    if (searchString !== localStorageFilters) {
+      setLocalStorageFilters(searchString);
+    }
+    return filterModelFromSearch;
+  }
+  const filterModelFromLocalStorage = getFilterModelFromString(localStorageFilters, columns);
+  if (filterModelFromLocalStorage !== 'invalid') {
+    return filterModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** SORT */
+
+const getSortingFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_sortColumn');
+  if (value === '' || value === null || value === '[]') {
+    return [];
+  }
+  const fields = columns.map(column => column.field);
+  const [column, order] = value.slice(1, value.length - 1).split(',');
+  if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+    return [{
+      field: column,
+      sort: order
+    }];
+  }
+  return 'invalid';
+};
+const getSearchParamsFromSorting = sorting => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)},${encodeValue(sorting[0].sort)}]` : '[]');
+  return searchParams;
+};
+
+// Rules:
+// - 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, 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);
+    const searchString = urlSearchParamsToString(searchFromSortModel);
+    if (searchString !== localStorageSorting) {
+      setLocalStorageSorting(searchString);
+    }
+    return sorting;
+  }
+  const sortModelFromLocalStorage = getSortingFromString(localStorageSorting, columns);
+  if (sortModelFromLocalStorage !== 'invalid') {
+    return sortModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** PAGINATION */
+
+const getPaginationFromString = searchString => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_pagination');
+  if (value === '' || value === null || value === '[]') {
+    return 'invalid';
+  }
+  const pagination = value.slice(1, value.length - 1).split(',');
+  const page = parseFloat(pagination[0]);
+  const pageSize = parseFloat(pagination[1]);
+  const direction = pagination[2];
+  if (!Number.isNaN(page) && !Number.isNaN(pageSize) && direction && ['next', 'back'].includes(direction)) {
+    return {
+      page,
+      pageSize,
+      direction: direction
     };
-    /** Local Storage version, to upgrade when we want to force a clean out. */
-    localStorageVersion?: number;
-    /** Previous Local Storage versions to clean out when a new one is released. */
-    previousLocalStorageVersions?: number[];
-}
+  }
+  return 'invalid';
+};
+const getSearchParamsFromPagination = pagination => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_pagination', `[${pagination.page},${pagination.pageSize},${pagination.direction}]`);
+  return searchParams;
+};
+
+// Rules:
+// - 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, 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);
+    const searchString = urlSearchParamsToString(searchFromPaginationModel);
+    if (searchString !== localStoragePagination) {
+      setLocalStoragePagination(searchString);
+    }
+    return pagination;
+  }
+  const paginationModelFromLocalStorage = getPaginationFromString(localStoragePagination);
+  if (paginationModelFromLocalStorage !== 'invalid') {
+    return paginationModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** COLUMN VISIBILITY */
+
+const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
+  const searchParams = new URLSearchParams();
+  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', `[${columnFields.join(',')}]`);
+    return searchParams;
+  }
+  const finalColumnVisibility = columns.filter(c => {
+    var _c$hideable;
+    return !((_c$hideable = c === null || c === void 0 ? void 0 : c.hideable) !== null && _c$hideable !== void 0 ? _c$hideable : true);
+  }).map(c => c.field).reduce((acc, colName) => {
+    return _objectSpread2(_objectSpread2({}, acc), {}, {
+      [colName]: true
+    });
+  }, columnVisibility);
+  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
+// - 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)
+// 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, isNewVersion) => {
+  var _initialState$columns3;
+  const defaultValue = {};
+  for (const column of columns) {
+    var _initialState$columns, _initialState$columns2;
+    const field = column.field;
+    if ((initialState === null || initialState === void 0 ? void 0 : (_initialState$columns = initialState.columns) === null || _initialState$columns === void 0 ? void 0 : (_initialState$columns2 = _initialState$columns.columnVisibilityModel) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2[field]) !== undefined) {
+      defaultValue[field] = initialState.columns.columnVisibilityModel[field];
+    } else {
+      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);
+    if (searchColumnVisibility.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchColumnVisibility.toString());
+    }
+    return columnVisibility;
+  }
+  const columnVisibilityFromLocalStorage = getColumnVisibilityFromString(localStorageColumnsVisibility, columns);
+  if (columnVisibilityFromLocalStorage !== 'invalid') {
+    return columnVisibilityFromLocalStorage;
+  }
+  if (initialState !== null && initialState !== void 0 && (_initialState$columns3 = initialState.columns) !== null && _initialState$columns3 !== void 0 && _initialState$columns3.columnVisibilityModel) {
+    return initialState.columns.columnVisibilityModel;
+  }
+  return defaultValue;
+};
+const getPinnedColumnsFromString = (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 pinnedColumns = {};
+  for (const item of parsed.split('&')) {
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_pinnedColumnsLeft' && fieldURL !== '_pinnedColumnsRight') {
+      continue;
+    }
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    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;
+    }
+    if (fieldURL === '_pinnedColumnsRight') {
+      pinnedColumns['right'] = columns;
+    }
+  }
+  return pinnedColumns['left'] || pinnedColumns['right'] ? {
+    left: pinnedColumns['left'] || [],
+    right: pinnedColumns['right'] || []
+  } : 'invalid';
+};
+const getSearchParamsFromPinnedColumns = pinnedColumns => {
+  var _pinnedColumns$left, _pinnedColumns$right;
+  const searchParams = new URLSearchParams();
+  const pinnedColumnLeft = ((_pinnedColumns$left = pinnedColumns.left) === null || _pinnedColumns$left === void 0 ? void 0 : _pinnedColumns$left.map(val => encodeValue(val))) || [];
+  const pinnedColumnRight = ((_pinnedColumns$right = pinnedColumns.right) === null || _pinnedColumns$right === void 0 ? void 0 : _pinnedColumns$right.map(val => encodeValue(val))) || [];
+  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join(',')}]`);
+  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join(',')}]`);
+  return searchParams;
+};
+
+// Rules:
+// - 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, 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);
+    if (searchPinnedColumns.toString() !== localStoragePinnedColumns) {
+      setLocalStoragePinnedColumns(searchPinnedColumns.toString());
+    }
+    return pinnedColumns;
+  }
+  const pinnedColumnsFromLocalStorage = getPinnedColumnsFromString(localStoragePinnedColumns, columns);
+  if (pinnedColumnsFromLocalStorage !== 'invalid') {
+    return pinnedColumnsFromLocalStorage;
+  }
+  return defaultValue;
+};
+const getSearchParamsFromTab = search => {
+  const searchParams = new URLSearchParams();
+  const openTab = new URLSearchParams(search).get('tab');
+  if (openTab) {
+    searchParams.set('tab', openTab);
+  }
+  return searchParams;
+};
+const getFinalSearch = _ref3 => {
+  let {
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  } = _ref3;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const tabSearch = getSearchParamsFromTab(search);
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(search)) {
+    if (!key.startsWith('_')) {
+      searchParams.set(key, value);
+    }
+  }
+  searchParams.set('v', `${localStorageVersion}`);
+
+  // Add quickFilterValues explicitly if present in filterModel
+  if (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0) {
+    // Encode array as JSON string to preserve all values in one param
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
+  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, localStorageVersion, columns, historyReplace, initialState, localStorage) => {
+  const currentVersion = new URLSearchParams(search).get('v');
+  const isNewVersion = !currentVersion || Number(currentVersion) !== localStorageVersion;
+  const {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting,
+    setLocalStorageSorting,
+    localStoragePagination,
+    setLocalStoragePagination,
+    localStorageColumnsVisibility,
+    setLocalStorageColumnsVisibility,
+    localStoragePinnedColumns,
+    setLocalStoragePinnedColumns
+  } = localStorage;
+  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,
+    paginationModel,
+    columnsVisibilityModel: columnVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(finalSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+  return {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnVisibilityModel,
+    pinnedColumnsModel
+  };
+};
+const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns) => {
+  let {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsModel: columnsVisibilityModel,
+    pinnedColumnsModel
+  } = _ref4;
+  const newSearch = getFinalSearch({
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(newSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+};
+
+// Note: this is a comparator to sort the filters, not pure comparison
+// do not use it for equivalence (e.g. with value `3` and undefined we
+// will get 0).
+const compareFilters = (firstFilter, secondFilter) => {
+  if (firstFilter.columnField < secondFilter.columnField) {
+    return -1;
+  } else if (firstFilter.columnField > secondFilter.columnField) {
+    return 1;
+  }
+  if (firstFilter.operatorValue === undefined || secondFilter.operatorValue === undefined) {
+    return 0;
+  }
+  if (firstFilter.operatorValue < secondFilter.operatorValue) {
+    return -1;
+  } else if (firstFilter.operatorValue > secondFilter.operatorValue) {
+    return 1;
+  }
+  if (firstFilter.value < secondFilter.value) {
+    return -1;
+  } else if (firstFilter.value > secondFilter.value) {
+    return 1;
+  }
+  return 0;
+};
+const areFiltersEquivalent = (firstFilter, secondFilter) => {
+  return firstFilter.columnField === secondFilter.columnField && firstFilter.operatorValue === secondFilter.operatorValue && firstFilter.value === secondFilter.value;
+};
+const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
+  const {
+    items,
+    linkOperator
+  } = filterModel;
+  const {
+    items: itemsToMatch,
+    linkOperator: linkOperatorToMatch
+  } = filterModelToMatch;
+  if (linkOperator !== linkOperatorToMatch) {
+    return false;
+  }
+  if (items.length !== itemsToMatch.length) {
+    return false;
+  }
+  items.sort(compareFilters);
+  itemsToMatch.sort(compareFilters);
+  for (let i = 0; i < items.length; i++) {
+    const filter = items[i];
+    const filterToCompare = itemsToMatch[i];
+
+    // compareFilters return 0 if and only if the filters have the same
+    // columnField, operatorValue, and value
+    if (!areFiltersEquivalent(filter, filterToCompare)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+// Get and Set data from LocalStorage WITHOUT useState
+
+// triggering a state update and consecutive re-render
+const useFetchState = (defaultValue, key) => {
+  let stickyValue = null;
+  try {
+    stickyValue = window.localStorage.getItem(key);
+  } catch (e) {
+    console.error('StatefulDataGrid: error getting item from local storage: ', e);
+  }
+  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));
+    } catch (e) {
+      console.error('StatefulDataGrid: error setting item into local storage: ', e);
+    }
+  }, [key]);
+  return [parsedValue, updateValue];
+};
+
+const useTableStates = (id, version) => {
+  const [paginationModel, setPaginationModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: PAGINATION_MODEL_KEY
+  }));
+  const [sortModel, setSortModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: SORT_MODEL_KEY
+  }));
+  const [localStorageFilters, setLocalStorageFilters] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: FILTER_SEARCH_KEY
+  }));
+  const [visibilityModelLocalStorage, setVisibilityModelLocalStorage] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: VISIBILITY_MODEL_KEY
+  }));
+  const [pinnedColumns, setPinnedColumns] = useFetchState('_pinnedColumnsLeft=[]&_pinnedColumnsRight=[]', buildStorageKey({
+    id,
+    version,
+    category: PINNED_COLUMNS
+  }));
+  const [dimensionModel, setDimensionModel] = useFetchState({}, buildStorageKey({
+    id,
+    version,
+    category: DIMENSION_MODEL_KEY
+  }));
+  return {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  };
+};
+
+const useStatefulTable = props => {
+  const {
+    // density = 'standard',
+    apiRef,
+    initialState,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPageChange: propsOnPageChange,
+    onPageSizeChange: propsOnPageSizeChange,
+    onPinnedColumnsChange: propsOnPinnedColumnsChange,
+    onSortModelChange: propsOnSortModelChange,
+    useRouter,
+    localStorageVersion = 1,
+    previousLocalStorageVersions = []
+  } = props;
+  const {
+    search,
+    pathname,
+    historyReplace
+  } = useRouter();
+  const id = pathname;
+
+  // States and setters persisted in the local storage for this table
+  const {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  } = useTableStates(id, localStorageVersion);
+
+  // clearing up old version keys
+  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
+  const onColumnDimensionChange = useCallback(_ref => {
+    let {
+      newWidth,
+      field
+    } = _ref;
+    setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
+      [field]: newWidth
+    }));
+  }, [dimensionModel, setDimensionModel]);
+  const {
+    filterModel: filterParsed,
+    sortModel: sortModelParsed,
+    paginationModel: paginationModelParsed,
+    columnVisibilityModel: visibilityModel,
+    pinnedColumnsModel
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStoragePagination: paginationModel,
+    setLocalStoragePagination: setPaginationModel,
+    localStorageColumnsVisibility: visibilityModelLocalStorage,
+    setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
+    localStoragePinnedColumns: pinnedColumns,
+    setLocalStoragePinnedColumns: setPinnedColumns
+  });
+  const columns = useMemo(() => propsColumns.map(column => {
+    column.width = dimensionModel[column.field] || column.width || 100;
+    return column;
+  }), [propsColumns, dimensionModel]);
+
+  /** Add resetPage method to apiRef. */
+  apiRef.current.resetPage = () => {
+    apiRef.current.setPage(0);
+  };
+  return {
+    apiRef,
+    columns,
+    onFilterModelChange: (model, details) => {
+      const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        items: model.items.map(item => {
+          const column = apiRef.current.getColumn(item.columnField);
+          item.type = column.type || 'string';
+          return item;
+        }),
+        quickFilterValues: model.quickFilterValues || []
+      });
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
+      updateUrl({
+        filterModel: filterModel,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    filterModel: filterParsed,
+    onSortModelChange: (model, details) => {
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: model,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    sortModel: sortModelParsed,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    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: {
+          page,
+          pageSize: paginationModelParsed.pageSize,
+          direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, 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) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    onColumnWidthChange: (params, event, details) => {
+      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
+      onColumnDimensionChange({
+        newWidth: params.width,
+        field: params.colDef.field
+      });
+    }
+  };
+};
+
+const _excluded = ["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 = 'DataGrid';
+const CLASSNAME = 'redsift-datagrid';
+const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const datagridRef = ref || useRef();
+  const {
+      apiRef: propsApiRef,
+      autoHeight,
+      className,
+      columns,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
+      filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
+      page: propsPage,
+      pageSize: propsPageSize,
+      height: propsHeight,
+      hideToolbar,
+      initialState,
+      isRowSelectable,
+      license = process.env.MUI_LICENSE_KEY,
+      localStorageVersion,
+      previousLocalStorageVersions,
+      onFilterModelChange: propsOnFilterModelChange,
+      selectionModel: propsSelectionModel,
+      onColumnWidthChange: propsOnColumnWidthChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
+      onSelectionModelChange: propsOnSelectionModelChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
+      pagination,
+      paginationPlacement = 'both',
+      paginationProps,
+      rows,
+      rowsPerPageOptions,
+      sx,
+      theme: propsTheme,
+      useRouter,
+      paginationMode = 'client',
+      rowCount
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const _apiRef = useGridApiRef();
+  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar;
+  LicenseInfo.setLicenseKey(license);
+  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+  const {
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange
+  } = useControlledDatagridState({
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPageChange,
+    propsOnPageSizeChange
+  });
+  const {
+    columnVisibilityModel,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPageChange,
+    onPageSizeChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    page,
+    pageSize,
+    pinnedColumns,
+    sortModel,
+    onColumnWidthChange
+  } = useStatefulTable({
+    apiRef: apiRef,
+    initialState,
+    columns,
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange,
+    useRouter: useRouter,
+    localStorageVersion,
+    previousLocalStorageVersions
+  });
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  useEffect(() => {
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const onSelectionModelChange = (selectionModel, details) => {
+    if (propsOnSelectionModelChange) {
+      propsOnSelectionModelChange(selectionModel, details);
+    } else {
+      setSelectionModel(selectionModel);
+    }
+  };
+  const selectionStatus = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page,
+    pageSize: pageSize
+  });
 
-declare const StatefulDataGrid: Comp<StatefulDataGridProps, HTMLDivElement>;
+  // 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(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+    }
+  }, [selectionModel, page, pageSize]);
+  if (!Array.isArray(rows)) {
+    return null;
+  }
+  const muiTheme = useMemo(() => createTheme({
+    palette: {
+      mode: theme,
+      primary: {
+        main: RedsiftColorBlueN
+      },
+      background: {
+        default: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite,
+        paper: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite
+      }
+    }
+  }), [theme]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider$1, {
+    theme: muiTheme
+  }, /*#__PURE__*/React__default.createElement(StyledDataGrid, {
+    ref: datagridRef,
+    className: classNames(StatefulDataGrid.className, className),
+    $height: height
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+    apiRef: apiRef,
+    columns: columns,
+    columnVisibilityModel: columnVisibilityModel,
+    filterModel: filterModel,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onFilterModelChange: onFilterModelChange,
+    onPageChange: onPageChange,
+    onPageSizeChange: onPageSizeChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    page: page,
+    pageSize: pageSize,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
+    rowsPerPageOptions: rowsPerPageOptions,
+    onColumnWidthChange: onColumnWidthChange,
+    initialState: initialState,
+    isRowSelectable: isRowSelectable,
+    pagination: pagination,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
+    rowCount: rowCount,
+    autoHeight: autoHeight,
+    checkboxSelectionVisibleOnly: Boolean(pagination),
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      BasePopper,
+      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnFilteredIcon"
+      })),
+      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSelectorIcon"
+      })),
+      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSortedAscendingIcon"
+      })),
+      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ColumnSortedDescendingIcon"
+      })),
+      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityCompactIcon"
+      })),
+      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityStandardIcon"
+      })),
+      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DensityComfortableIcon"
+      })),
+      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DetailPanelCollapseIcon"
+      })),
+      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "DetailPanelExpandIcon"
+      })),
+      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+        displayName: "ExportIcon"
+      })),
+      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
+        displayName: "OpenFilterButtonIcon"
+      }, props))
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      Pagination: props => {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode,
+          rowCount: rowCount
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          apiRef: apiRef,
+          isRowSelectable: isRowSelectable,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode
+        })) : null;
+      }
+    }),
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        paginationPlacement,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        page,
+        pageSize,
+        onPageChange,
+        onPageSizeChange,
+        rowsPerPageOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+    }),
+    selectionModel: selectionModel,
+    onSelectionModelChange: (newSelectionModel, details) => {
+      if (pagination && paginationMode != 'server') {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+          let {
+            model
+          } = _ref;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref2 => {
+          let {
+            id
+          } = _ref2;
+          return id;
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
+          let {
+            model
+          } = _ref3;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref4 => {
+          let {
+            id
+          } = _ref4;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+        const numberOfSelectedRows = newSelectionModel.length;
+        if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+          setTimeout(() => {
+            apiRef.current.selectRows([], true, true);
+          }, 0);
+        }
+        if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'page',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'table',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows > 0) {
+          selectionStatus.current = {
+            type: 'other',
+            numberOfSelectedRows
+          };
+        } else {
+          selectionStatus.current = {
+            type: 'none',
+            numberOfSelectedRows
+          };
+        }
+      }
+      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+    },
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
+  })))));
+});
+StatefulDataGrid.className = CLASSNAME;
+StatefulDataGrid.displayName = COMPONENT_NAME;
 
-export { StatefulDataGrid as S, StatefulDataGridProps as a };
+export { CATEGORIES as C, DIMENSION_MODEL_KEY as D, FILTER_MODEL_KEY as F, PAGINATION_MODEL_KEY as P, SORT_MODEL_KEY as S, VISIBILITY_MODEL_KEY as V, PINNED_COLUMNS as a, FILTER_SEARCH_KEY as b, buildStorageKey as c, clearPreviousVersionStorage as d, decodeValue as e, encodeValue as f, numberOperatorDecoder as g, getFilterModelFromString as h, getSearchParamsFromFilterModel as i, getSortingFromString as j, getSearchParamsFromSorting as k, getPaginationFromString as l, getSearchParamsFromPagination as m, numberOperatorEncoder as n, getSearchParamsFromColumnVisibility as o, getColumnVisibilityFromString as p, getPinnedColumnsFromString as q, getSearchParamsFromPinnedColumns as r, getSearchParamsFromTab as s, getFinalSearch as t, urlSearchParamsToString as u, getModelsParsedOrUpdateLocalStorage as v, updateUrl as w, areFilterModelsEquivalent as x, StatefulDataGrid as y };
+//# sourceMappingURL=StatefulDataGrid2.js.map