@mui/x-data-grid 5.4.0 → 5.6.0

package/legacy/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { getDataGridUtilityClass } from '../../../constants';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  return React.useMemo(function () {
+    var slots = {
+      cellCheckbox: ['cellCheckbox'],
+      columnHeaderCheckbox: ['columnHeaderCheckbox']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export var useGridSelectionPreProcessors = function useGridSelectionPreProcessors(apiRef, props) {
+  var ownerState = {
+    classes: props.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var updateSelectionColumn = React.useCallback(function (columnsState) {
+    var selectionColumn = _extends({}, GRID_CHECKBOX_SELECTION_COL_DEF, {
+      cellClassName: classes.cellCheckbox,
+      headerClassName: classes.columnHeaderCheckbox,
+      headerName: apiRef.current.getLocaleText('checkboxSelectionHeaderName')
+    });
+
+    var shouldHaveSelectionColumn = props.checkboxSelection;
+    var haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+
+    if (shouldHaveSelectionColumn && !haveSelectionColumn) {
+      columnsState.lookup[selectionColumn.field] = selectionColumn;
+      columnsState.all = [selectionColumn.field].concat(_toConsumableArray(columnsState.all));
+    } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
+      delete columnsState.lookup[selectionColumn.field];
+      columnsState.all = columnsState.all.filter(function (field) {
+        return field !== selectionColumn.field;
+      });
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.checkboxSelection]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+};

package/legacy/hooks/features/sorting/gridSortingSelector.js

@@ -0,0 +1,54 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+
+export var gridSortingStateSelector = function gridSortingStateSelector(state) {
+  return state.sorting;
+};
+/**
+ * Get the id of the rows after the sorting process.
+ * @category Sorting
+ */
+
+export var gridSortedRowIdsSelector = createSelector(gridSortingStateSelector, function (sortingState) {
+  return sortingState.sortedRows;
+});
+/**
+ * Get the id and the model of the rows after the sorting process.
+ * @category Sorting
+ */
+
+export var gridSortedRowEntriesSelector = createSelector(gridSortedRowIdsSelector, gridRowsLookupSelector, function (sortedIds, idRowsLookup) {
+  return sortedIds.map(function (id) {
+    return {
+      id: id,
+      model: idRowsLookup[id]
+    };
+  });
+});
+/**
+ * Get the current sorting model.
+ * @category Sorting
+ */
+
+export var gridSortModelSelector = createSelector(gridSortingStateSelector, function (sorting) {
+  return sorting.sortModel;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export var gridSortColumnLookupSelector = createSelector(gridSortModelSelector, function (sortModel) {
+  var result = sortModel.reduce(function (res, sortItem, index) {
+    res[sortItem.field] = {
+      sortDirection: sortItem.sort,
+      sortIndex: sortModel.length > 1 ? index + 1 : undefined
+    };
+    return res;
+  }, {});
+  return result;
+});

package/legacy/hooks/features/sorting/gridSortingState.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/sorting/gridSortingUtils.js

@@ -0,0 +1,181 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { buildWarning } from '../../../utils/warning';
+var sortModelDisableMultiColumnsSortingWarning = buildWarning(['MUI: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+export var sanitizeSortModel = function sanitizeSortModel(model, disableMultipleColumnsSorting) {
+  if (disableMultipleColumnsSorting && model.length > 1) {
+    sortModelDisableMultiColumnsSortingWarning();
+    return [model[0]];
+  }
+
+  return model;
+};
+export var mergeStateWithSortModel = function mergeStateWithSortModel(sortModel, disableMultipleColumnsSorting) {
+  return function (state) {
+    return _extends({}, state, {
+      sorting: _extends({}, state.sorting, {
+        sortModel: sanitizeSortModel(sortModel, disableMultipleColumnsSorting)
+      })
+    });
+  };
+};
+
+var isDesc = function isDesc(direction) {
+  return direction === 'desc';
+};
+/**
+ * Transform an item of the sorting model into a method comparing two rows.
+ * @param {GridSortItem} sortItem The sort item we want to apply.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
+ */
+
+
+var parseSortItem = function parseSortItem(sortItem, apiRef) {
+  var column = apiRef.current.getColumn(sortItem.field);
+
+  if (!column) {
+    return null;
+  }
+
+  var comparator = isDesc(sortItem.sort) ? function () {
+    return -1 * column.sortComparator.apply(column, arguments);
+  } : column.sortComparator;
+
+  var getSortCellParams = function getSortCellParams(id) {
+    return {
+      id: id,
+      field: column.field,
+      rowNode: apiRef.current.getRowNode(id),
+      value: apiRef.current.getCellValue(id, column.field),
+      api: apiRef.current
+    };
+  };
+
+  return {
+    getSortCellParams: getSortCellParams,
+    comparator: comparator
+  };
+};
+/**
+ * Compare two rows according to a list of valid sort items.
+ * The `row1Params` and `row2Params` must have the same length as `parsedSortItems`,
+ * and each of their index must contain the `GridSortCellParams` of the sort item with the same index.
+ * @param {GridParsedSortItem[]} parsedSortItems All the sort items with which we want to compare the rows.
+ * @param {GridSortCellParams} row1Params The params of the 1st row for each sort item.
+ * @param {GridSortCellParams} row2Params The params of the 2nd row for each sort item.
+ */
+
+
+var compareRows = function compareRows(parsedSortItems, row1Params, row2Params) {
+  return parsedSortItems.reduce(function (res, item, index) {
+    if (res !== 0) {
+      // return the results of the first comparator which distinguish the two rows
+      return res;
+    }
+
+    var sortCellParams1 = row1Params[index];
+    var sortCellParams2 = row2Params[index];
+    res = item.comparator(sortCellParams1.value, sortCellParams2.value, sortCellParams1, sortCellParams2);
+    return res;
+  }, 0);
+};
+/**
+ * Generates a method to easily sort a list of rows according to the current sort model.
+ * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
+ */
+
+
+export var buildAggregatedSortingApplier = function buildAggregatedSortingApplier(sortModel, apiRef) {
+  var comparatorList = sortModel.map(function (item) {
+    return parseSortItem(item, apiRef);
+  }).filter(function (comparator) {
+    return !!comparator;
+  });
+
+  if (comparatorList.length === 0) {
+    return null;
+  }
+
+  return function (rowList) {
+    return rowList.map(function (value) {
+      return {
+        value: value,
+        params: comparatorList.map(function (el) {
+          return el.getSortCellParams(value.id);
+        })
+      };
+    }).sort(function (a, b) {
+      return compareRows(comparatorList, a.params, b.params);
+    }).map(function (row) {
+      return row.value.id;
+    });
+  };
+};
+export var getNextGridSortDirection = function getNextGridSortDirection(sortingOrder, current) {
+  var currentIdx = sortingOrder.indexOf(current);
+
+  if (!current || currentIdx === -1 || currentIdx + 1 === sortingOrder.length) {
+    return sortingOrder[0];
+  }
+
+  return sortingOrder[currentIdx + 1];
+};
+
+var gridNillComparator = function gridNillComparator(v1, v2) {
+  if (v1 == null && v2 != null) {
+    return -1;
+  }
+
+  if (v2 == null && v1 != null) {
+    return 1;
+  }
+
+  if (v1 == null && v2 == null) {
+    return 0;
+  }
+
+  return null;
+};
+
+var collator = new Intl.Collator();
+export var gridStringOrNumberComparator = function gridStringOrNumberComparator(value1, value2) {
+  var nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  if (typeof value1 === 'string') {
+    return collator.compare(value1.toString(), value2.toString());
+  }
+
+  return value1 - value2;
+};
+export var gridNumberComparator = function gridNumberComparator(value1, value2) {
+  var nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  return Number(value1) - Number(value2);
+};
+export var gridDateComparator = function gridDateComparator(value1, value2) {
+  var nillResult = gridNillComparator(value1, value2);
+
+  if (nillResult !== null) {
+    return nillResult;
+  }
+
+  if (value1 > value2) {
+    return 1;
+  }
+
+  if (value1 < value2) {
+    return -1;
+  }
+
+  return 0;
+};

package/legacy/hooks/features/sorting/index.js

@@ -0,0 +1,2 @@
+export * from './gridSortingSelector';
+export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from './gridSortingUtils';

package/legacy/hooks/features/sorting/useGridRegisterSortingMethod.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+export var useGridRegisterSortingMethod = function useGridRegisterSortingMethod(apiRef, groupingName, filteringMethod) {
+  var updateRegistration = React.useCallback(function (sortingMethodCollection) {
+    sortingMethodCollection[groupingName] = filteringMethod;
+    return sortingMethodCollection;
+  }, [groupingName, filteringMethod]);
+  useGridRegisterPreProcessor(apiRef, 'sortingMethod', updateRegistration);
+};

package/legacy/hooks/features/sorting/useGridSorting.js

@@ -0,0 +1,289 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
+import { isEnterKey } from '../../../utils/keyboardUtils';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
+import { gridRowIdsSelector, gridRowGroupingNameSelector, gridRowTreeSelector } from '../rows';
+import { useFirstRender } from '../../utils/useFirstRender';
+import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterSortingMethod } from './useGridRegisterSortingMethod';
+export var sortingStateInitializer = function sortingStateInitializer(state, props) {
+  var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
+
+  var sortModel = (_ref = (_props$sortModel = props.sortModel) != null ? _props$sortModel : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$s = _props$initialState.sorting) == null ? void 0 : _props$initialState$s.sortModel) != null ? _ref : [];
+  return _extends({}, state, {
+    sorting: {
+      sortModel: sanitizeSortModel(sortModel, props.disableMultipleColumnsSorting),
+      sortedRows: []
+    }
+  });
+};
+/**
+ * @requires useGridRows (event)
+ * @requires useGridColumns (event)
+ */
+
+export var useGridSorting = function useGridSorting(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridSorting');
+  var sortingMethodCollectionRef = React.useRef({});
+  var lastSortingMethodApplied = React.useRef(null);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'sortModel',
+    propModel: props.sortModel,
+    propOnChange: props.onSortModelChange,
+    stateSelector: gridSortModelSelector,
+    changeEvent: GridEvents.sortModelChange
+  });
+  var upsertSortModel = React.useCallback(function (field, sortItem) {
+    var sortModel = gridSortModelSelector(apiRef);
+    var existingIdx = sortModel.findIndex(function (c) {
+      return c.field === field;
+    });
+
+    var newSortModel = _toConsumableArray(sortModel);
+
+    if (existingIdx > -1) {
+      if (!sortItem) {
+        newSortModel.splice(existingIdx, 1);
+      } else {
+        newSortModel.splice(existingIdx, 1, sortItem);
+      }
+    } else {
+      newSortModel = [].concat(_toConsumableArray(sortModel), [sortItem]);
+    }
+
+    return newSortModel;
+  }, [apiRef]);
+  var createSortItem = React.useCallback(function (col, directionOverride) {
+    var _col$sortingOrder2;
+
+    var sortModel = gridSortModelSelector(apiRef);
+    var existing = sortModel.find(function (c) {
+      return c.field === col.field;
+    });
+
+    if (existing) {
+      var _col$sortingOrder;
+
+      var nextSort = directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder = col.sortingOrder) != null ? _col$sortingOrder : props.sortingOrder, existing.sort) : directionOverride;
+      return nextSort == null ? undefined : _extends({}, existing, {
+        sort: nextSort
+      });
+    }
+
+    return {
+      field: col.field,
+      sort: directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder2 = col.sortingOrder) != null ? _col$sortingOrder2 : props.sortingOrder) : directionOverride
+    };
+  }, [apiRef, props.sortingOrder]);
+  /**
+   * API METHODS
+   */
+
+  var applySorting = React.useCallback(function () {
+    if (props.sortingMode === GridFeatureModeConstant.server) {
+      logger.debug('Skipping sorting rows as sortingMode = server');
+      apiRef.current.setState(function (state) {
+        return _extends({}, state, {
+          sorting: _extends({}, state.sorting, {
+            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+          })
+        });
+      });
+      return;
+    }
+
+    apiRef.current.setState(function (state) {
+      var rowGroupingName = gridRowGroupingNameSelector(state, apiRef.current.instanceId);
+      var sortingMethod = sortingMethodCollectionRef.current[rowGroupingName];
+
+      if (!sortingMethod) {
+        throw new Error('MUI: Invalid sorting method.');
+      }
+
+      var sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
+      var sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
+      var sortedRows = sortingMethod({
+        sortRowList: sortRowList
+      });
+      return _extends({}, state, {
+        sorting: _extends({}, state.sorting, {
+          sortedRows: sortedRows
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger, props.sortingMode]);
+  var setSortModel = React.useCallback(function (model) {
+    var currentModel = gridSortModelSelector(apiRef);
+
+    if (currentModel !== model) {
+      logger.debug("Setting sort model");
+      apiRef.current.setState(mergeStateWithSortModel(model, props.disableMultipleColumnsSorting));
+      apiRef.current.forceUpdate();
+      apiRef.current.applySorting();
+    }
+  }, [apiRef, logger, props.disableMultipleColumnsSorting]);
+  var sortColumn = React.useCallback(function (column, direction, allowMultipleSorting) {
+    if (!column.sortable) {
+      return;
+    }
+
+    var sortItem = createSortItem(column, direction);
+    var sortModel;
+
+    if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
+      sortModel = !sortItem ? [] : [sortItem];
+    } else {
+      sortModel = upsertSortModel(column.field, sortItem);
+    }
+
+    apiRef.current.setSortModel(sortModel);
+  }, [apiRef, upsertSortModel, createSortItem, props.disableMultipleColumnsSorting]);
+  var getSortModel = React.useCallback(function () {
+    return gridSortModelSelector(apiRef);
+  }, [apiRef]);
+  var getSortedRows = React.useCallback(function () {
+    var sortedRows = gridSortedRowEntriesSelector(apiRef);
+    return sortedRows.map(function (row) {
+      return row.model;
+    });
+  }, [apiRef]);
+  var getSortedRowIds = React.useCallback(function () {
+    return gridSortedRowIdsSelector(apiRef);
+  }, [apiRef]);
+  var getRowIndex = React.useCallback(function (id) {
+    return apiRef.current.getSortedRowIds().indexOf(id);
+  }, [apiRef]);
+  var getRowIdFromRowIndex = React.useCallback(function (index) {
+    return apiRef.current.getSortedRowIds()[index];
+  }, [apiRef]);
+  var sortApi = {
+    getSortModel: getSortModel,
+    getSortedRows: getSortedRows,
+    getSortedRowIds: getSortedRowIds,
+    getRowIndex: getRowIndex,
+    getRowIdFromRowIndex: getRowIdFromRowIndex,
+    setSortModel: setSortModel,
+    sortColumn: sortColumn,
+    applySorting: applySorting
+  };
+  useGridApiMethod(apiRef, sortApi, 'GridSortApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var sortModelToExport = gridSortModelSelector(apiRef);
+
+    if (sortModelToExport.length === 0) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      sorting: {
+        sortModel: sortModelToExport
+      }
+    });
+  }, [apiRef]);
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var _context$stateToResto;
+
+    var sortModel = (_context$stateToResto = context.stateToRestore.sorting) == null ? void 0 : _context$stateToResto.sortModel;
+
+    if (sortModel == null) {
+      return params;
+    }
+
+    apiRef.current.setState(mergeStateWithSortModel(sortModel, props.disableMultipleColumnsSorting));
+    return _extends({}, params, {
+      callbacks: [].concat(_toConsumableArray(params.callbacks), [apiRef.current.applySorting])
+    });
+  }, [apiRef, props.disableMultipleColumnsSorting]);
+  var flatSortingMethod = React.useCallback(function (params) {
+    if (!params.sortRowList) {
+      return gridRowIdsSelector(apiRef);
+    }
+
+    var rowTree = gridRowTreeSelector(apiRef);
+    return params.sortRowList(Object.values(rowTree));
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterSortingMethod(apiRef, 'none', flatSortingMethod);
+  /**
+   * EVENTS
+   */
+
+  var handleColumnHeaderClick = React.useCallback(function (_ref2, event) {
+    var colDef = _ref2.colDef;
+    var allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
+    sortColumn(colDef, undefined, allowMultipleSorting);
+  }, [sortColumn]);
+  var handleColumnHeaderKeyDown = React.useCallback(function (_ref3, event) {
+    var colDef = _ref3.colDef;
+
+    // CTRL + Enter opens the column menu
+    if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
+      sortColumn(colDef, undefined, event.shiftKey);
+    }
+  }, [sortColumn]);
+  var handleColumnsChange = React.useCallback(function () {
+    // When the columns change we check that the sorted columns are still part of the dataset
+    var sortModel = gridSortModelSelector(apiRef);
+    var latestColumns = gridColumnLookupSelector(apiRef);
+
+    if (sortModel.length > 0) {
+      var newModel = sortModel.filter(function (sortItem) {
+        return latestColumns[sortItem.field];
+      });
+
+      if (newModel.length < sortModel.length) {
+        apiRef.current.setSortModel(newModel);
+      }
+    }
+  }, [apiRef]);
+  var handlePreProcessorRegister = React.useCallback(function (name) {
+    if (name !== 'sortingMethod') {
+      return;
+    }
+
+    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
+    var rowGroupingName = gridRowGroupingNameSelector(apiRef);
+
+    if (lastSortingMethodApplied.current !== sortingMethodCollectionRef.current[rowGroupingName]) {
+      apiRef.current.applySorting();
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderClick, handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
+  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  /**
+   * 1ST RENDER
+   */
+
+  useFirstRender(function () {
+    // This line of pre-processor initialization should always come after the registration of `flatSortingMethod`
+    // Otherwise on the 1st render there would be no sorting method registered
+    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
+    apiRef.current.applySorting();
+  });
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    if (props.sortModel !== undefined) {
+      apiRef.current.setSortModel(props.sortModel);
+    }
+  }, [apiRef, props.sortModel]);
+};

package/legacy/hooks/features/statePersistence/gridStatePersistenceInterface.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/statePersistence/index.js

@@ -0,0 +1 @@
+export {};

package/legacy/hooks/features/statePersistence/useGridStatePersistence.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils';
+export var useGridStatePersistence = function useGridStatePersistence(apiRef) {
+  var exportState = React.useCallback(function () {
+    var stateToExport = apiRef.current.unstable_applyPreProcessors('exportState', {});
+    return stateToExport;
+  }, [apiRef]);
+  var restoreState = React.useCallback(function (stateToRestore) {
+    var response = apiRef.current.unstable_applyPreProcessors('restoreState', {
+      callbacks: []
+    }, {
+      stateToRestore: stateToRestore
+    });
+    response.callbacks.forEach(function (callback) {
+      callback();
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var statePersistenceApi = {
+    exportState: exportState,
+    restoreState: restoreState
+  };
+  useGridApiMethod(apiRef, statePersistenceApi, 'GridStatePersistenceApi');
+};