@redsift/table 11.6.0-muiv5-alpha.11 → 11.6.0-muiv5-alpha.12

package/_internal/StatefulDataGrid.js

@@ -0,0 +1,2 @@
+export { y as StatefulDataGrid } from './StatefulDataGrid2.js';
+//# sourceMappingURL=StatefulDataGrid.js.map

package/{packages/table/src/utils/_internal/urlLocalStorageSync.js → _internal/StatefulDataGrid2.js}

@@ -1,6 +1,71 @@
-import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
-import { GridLinkOperator } from '@mui/x-data-grid-pro';
-import { operatorList } from '../operators/index.js';
+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 = {
@@ -752,5 +817,606 @@ const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
   return true;
 };
 
-export { areFilterModelsEquivalent, decodeValue, encodeValue, getColumnVisibilityFromString, getFilterModelFromString, getFinalSearch, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, numberOperatorDecoder, numberOperatorEncoder, updateUrl, urlSearchParamsToString };
-//# sourceMappingURL=urlLocalStorageSync.js.map
+// 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
+  });
+
+  // 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 { 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