@redsift/table 11.2.2 → 11.3.0

package/index.d.ts

@@ -115,7 +115,7 @@ declare const buildStorageKey: ({ id, version, category }: {
     version: number;
     category: Category;
 }) => `${string}:${number}:paginationModel` | `${string}:${number}:filterModel` | `${string}:${number}:sortModel` | `${string}:${number}:visibilityModel` | `${string}:${number}:pinnedColumns` | `${string}:${number}:dimension` | `${string}:${number}:searchModel`;
-declare const clearPreviousVersionStorage: (id: string, currentVersion: number) => void;
+declare const clearPreviousVersionStorage: (id: string, previousLocalStorageVersions: number[]) => void;
 
 interface DataGridProps extends Partial<Pick<DataGridProProps, 'rows'>>, Omit<DataGridProProps, 'rows'> {
     /** License key for MUI Datagrid Pro. */
@@ -157,6 +157,8 @@ interface StatefulDataGridProps extends DataGridProps {
     };
     /** 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[];
 }
 
 declare const StatefulDataGrid: Comp<StatefulDataGridProps, HTMLDivElement>;
@@ -189,6 +191,7 @@ declare const getPinnedColumnsFromString: (notParsed: string, tableColumns: Data
 declare const getSearchParamsFromPinnedColumns: (pinnedColumns: GridPinnedColumns) => URLSearchParams;
 declare const getSearchParamsFromTab: (search: string) => URLSearchParams;
 type FinalSearchInput = {
+    localStorageVersion: number;
     filterModel: GridFilterModel;
     sortModel: GridSortModel;
     paginationModel: ExtendedGridPaginationModel;
@@ -197,7 +200,7 @@ type FinalSearchInput = {
     search: string;
     columns: DataGridProps['columns'];
 };
-declare const getFinalSearch: ({ search, filterModel, sortModel, paginationModel, columnsVisibilityModel, pinnedColumnsModel, columns, }: FinalSearchInput) => URLSearchParams;
+declare const getFinalSearch: ({ search, localStorageVersion, filterModel, sortModel, paginationModel, columnsVisibilityModel, pinnedColumnsModel, columns, }: FinalSearchInput) => URLSearchParams;
 type PinnedColumns = {
     left: string[];
     right: string[];
@@ -222,7 +225,7 @@ type ModelsTable = {
     pinnedColumnsModel: PinnedColumns;
 };
 /** Return the state of the table given the URL and the local storage state */
-declare const getModelsParsedOrUpdateLocalStorage: (search: string, columns: DataGridProps['columns'], historyReplace: (newSearch: string) => void, initialState: GridInitialStatePro | undefined, localStorage: ModelsLocalStorage) => ModelsTable;
+declare const getModelsParsedOrUpdateLocalStorage: (search: string, localStorageVersion: number, columns: DataGridProps['columns'], historyReplace: (newSearch: string) => void, initialState: GridInitialStatePro | undefined, localStorage: ModelsLocalStorage) => ModelsTable;
 type DataGridModel = {
     filterModel: GridFilterModel;
     sortModel: GridSortModel;
@@ -230,7 +233,7 @@ type DataGridModel = {
     columnsModel: GridColumnVisibilityModel;
     pinnedColumnsModel: GridPinnedColumns;
 };
-declare const updateUrl: ({ filterModel, sortModel, paginationModel, columnsModel: columnsVisibilityModel, pinnedColumnsModel }: DataGridModel, search: string, historyReplace: (newSearch: string) => void, columns: DataGridProps['columns']) => void;
+declare const updateUrl: ({ filterModel, sortModel, paginationModel, columnsModel: columnsVisibilityModel, pinnedColumnsModel }: DataGridModel, search: string, localStorageVersion: number, historyReplace: (newSearch: string) => void, columns: DataGridProps['columns']) => void;
 declare const areFilterModelsEquivalent: (filterModel: GridFilterModel, filterModelToMatch: GridFilterModel) => boolean;
 
 declare const BaseButton: React.JSXElementConstructor<any>;

package/index.js

@@ -17939,45 +17939,43 @@ const buildStorageKey = _ref => {
   } = _ref;
   return `${id}:${version}:${category}`;
 };
-const clearPreviousVersionStorage = (id, currentVersion) => {
-  const previousVersion = currentVersion - 1;
-  if (previousVersion < 1) {
-    return;
-  }
-  const keysToDelete = [buildStorageKey({
-    id,
-    version: previousVersion,
-    category: PAGINATION_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: SORT_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: FILTER_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: VISIBILITY_MODEL_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: PINNED_COLUMNS
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: FILTER_SEARCH_KEY
-  }), buildStorageKey({
-    id,
-    version: previousVersion,
-    category: DIMENSION_MODEL_KEY
-  })];
-  for (const keyToDelete of keysToDelete) {
-    try {
-      window.localStorage.removeItem(keyToDelete);
-    } catch (e) {
-      // Ignore
+const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
+  for (const version of previousLocalStorageVersions) {
+    const keysToDelete = [buildStorageKey({
+      id,
+      version,
+      category: PAGINATION_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: SORT_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: VISIBILITY_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: PINNED_COLUMNS
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_SEARCH_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: DIMENSION_MODEL_KEY
+    })];
+    for (const keyToDelete of keysToDelete) {
+      try {
+        window.localStorage.removeItem(keyToDelete);
+      } catch (e) {
+        // Ignore
+      }
     }
   }
 };
@@ -18223,7 +18221,14 @@ const getSearchParamsFromFilterModel = filterModel => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty FilterModel
-const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState) => {
+const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion) => {
+  const defaultValue = initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
+    items: [],
+    logicOperator: GridLogicOperator.And
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const filterModelFromSearch = getFilterModelFromString(search, columns);
   if (filterModelFromSearch !== 'invalid') {
     const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
@@ -18237,10 +18242,7 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
   if (filterModelFromLocalStorage !== 'invalid') {
     return filterModelFromLocalStorage;
   }
-  return initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
-    items: [],
-    logicOperator: GridLogicOperator.And
-  };
+  return defaultValue;
 };
 
 /** SORT */
@@ -18274,8 +18276,12 @@ const getSearchParamsFromSorting = sorting => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty SortModel
-const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState) => {
+const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion) => {
   var _initialState$sorting;
+  const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const sorting = getSortingFromString(search, columns);
   if (sorting !== 'invalid') {
     const searchFromSortModel = getSearchParamsFromSorting(sorting);
@@ -18289,7 +18295,7 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
   if (sortModelFromLocalStorage !== 'invalid') {
     return sortModelFromLocalStorage;
   }
-  return initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+  return defaultValue;
 };
 
 /** PAGINATION */
@@ -18326,8 +18332,19 @@ const getSearchParamsFromPagination = pagination => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty PaginationModel
-const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState) => {
-  var _initialState$paginat;
+const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pagination ? _objectSpread2({
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  }, initialState.pagination) : {
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const pagination = getPaginationFromString(search);
   if (pagination !== 'invalid') {
     const searchFromPaginationModel = getSearchParamsFromPagination(pagination);
@@ -18341,15 +18358,7 @@ const getPaginationModel = (search, localStoragePagination, setLocalStoragePagin
   if (paginationModelFromLocalStorage !== 'invalid') {
     return paginationModelFromLocalStorage;
   }
-  return initialState !== null && initialState !== void 0 && (_initialState$paginat = initialState.pagination) !== null && _initialState$paginat !== void 0 && _initialState$paginat.paginationModel ? _objectSpread2({
-    page: 0,
-    pageSize: 25,
-    direction: 'next'
-  }, initialState.pagination.paginationModel) : {
-    page: 0,
-    pageSize: 25,
-    direction: 'next'
-  };
+  return defaultValue;
 };
 
 /** COLUMN VISIBILITY */
@@ -18407,8 +18416,17 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
 // - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
 // NOTE: the `defaultHidden` is a custom field and not standard DataGrid
 // The reason is the following bug: https://github.com/mui/mui-x/issues/8407
-const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState) => {
+const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion) => {
   var _initialState$columns;
+  const defaultValue = {};
+  for (const column of columns) {
+    const field = column.field;
+    defaultValue[field] = column.defaultHidden !== true; // undefined will be true
+  }
+
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const columnVisibility = getColumnVisibilityFromString(search, columns);
   if (columnVisibility !== 'invalid') {
     const searchColumnVisibility = getSearchParamsFromColumnVisibility(columnVisibility, columns);
@@ -18424,15 +18442,7 @@ const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, se
   if (initialState !== null && initialState !== void 0 && (_initialState$columns = initialState.columns) !== null && _initialState$columns !== void 0 && _initialState$columns.columnVisibilityModel) {
     return initialState.columns.columnVisibilityModel;
   }
-
-  // No columns in URL or localStorage, just show them all expect the hidden ones
-  const res = {};
-  for (const column of columns) {
-    const field = column.field;
-    res[field] = column.defaultHidden !== true; // undefined will be true
-  }
-
-  return res;
+  return defaultValue;
 };
 const getPinnedColumnsFromString = (notParsed, tableColumns) => {
   if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
@@ -18482,7 +18492,17 @@ const getSearchParamsFromPinnedColumns = pinnedColumns => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
-const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState) => {
+const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pinnedColumns ? {
+    left: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['left']) || [],
+    right: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['right']) || []
+  } : {
+    left: [],
+    right: []
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
   const pinnedColumns = getPinnedColumnsFromString(search, columns);
   if (pinnedColumns !== 'invalid') {
     const searchPinnedColumns = getSearchParamsFromPinnedColumns(pinnedColumns);
@@ -18495,19 +18515,7 @@ const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalSt
   if (pinnedColumnsFromLocalStorage !== 'invalid') {
     return pinnedColumnsFromLocalStorage;
   }
-  if (initialState !== null && initialState !== void 0 && initialState.pinnedColumns) {
-    return {
-      left: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['left']) || [],
-      right: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['right']) || []
-    };
-  }
-
-  // No pinnedColumn in URL or localStorage, TODO: decide what is the default state
-  const res = {
-    left: [],
-    right: []
-  };
-  return res;
+  return defaultValue;
 };
 const getSearchParamsFromTab = search => {
   const searchParams = new URLSearchParams();
@@ -18520,6 +18528,7 @@ const getSearchParamsFromTab = search => {
 const getFinalSearch = _ref => {
   let {
     search,
+    localStorageVersion,
     filterModel,
     sortModel,
     paginationModel,
@@ -18539,10 +18548,13 @@ const getFinalSearch = _ref => {
       searchParams.set(key, value);
     }
   }
+  searchParams.set('v', `${localStorageVersion}`);
   return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
-const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, initialState, localStorage) => {
+const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, historyReplace, initialState, localStorage) => {
+  const currentVersion = new URLSearchParams(search).get('v');
+  const isNewVersion = !currentVersion || Number(currentVersion) !== localStorageVersion;
   const {
     localStorageFilters,
     setLocalStorageFilters,
@@ -18555,12 +18567,13 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, in
     localStoragePinnedColumns,
     setLocalStoragePinnedColumns
   } = localStorage;
-  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState);
-  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState);
-  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState);
-  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState);
-  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState);
+  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
+  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
+  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
+  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
   const finalSearch = getFinalSearch({
+    localStorageVersion,
     search,
     filterModel,
     sortModel,
@@ -18581,7 +18594,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, in
     pinnedColumnsModel
   };
 };
-const updateUrl = (_ref2, search, historyReplace, columns) => {
+const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
   let {
     filterModel,
     sortModel,
@@ -18591,6 +18604,7 @@ const updateUrl = (_ref2, search, historyReplace, columns) => {
   } = _ref2;
   const newSearch = getFinalSearch({
     search,
+    localStorageVersion,
     filterModel,
     sortModel,
     paginationModel,
@@ -27512,7 +27526,8 @@ const useStatefulTable = props => {
     onPinnedColumnsChange: propsOnPinnedColumnsChange,
     onSortModelChange: propsOnSortModelChange,
     useRouter,
-    localStorageVersion = 2
+    localStorageVersion = 1,
+    previousLocalStorageVersions = []
   } = props;
   const {
     search,
@@ -27538,7 +27553,7 @@ const useStatefulTable = props => {
   } = useTableStates(id, localStorageVersion);
 
   // clearing up old version keys, triggering only on first render
-  useEffect(() => clearPreviousVersionStorage(id, localStorageVersion), [id, localStorageVersion]);
+  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
   const onColumnDimensionChange = useCallback(_ref => {
     let {
       newWidth,
@@ -27554,7 +27569,7 @@ const useStatefulTable = props => {
     paginationModel: paginationModelParsed,
     columnVisibilityModel: visibilityModel,
     pinnedColumnsModel
-  } = getModelsParsedOrUpdateLocalStorage(search || '', propsColumns, historyReplace, initialState, {
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
     localStorageFilters,
     setLocalStorageFilters,
     localStorageSorting: sortModel,
@@ -27592,7 +27607,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     filterModel: filterParsed,
     onSortModelChange: (model, details) => {
@@ -27603,7 +27618,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
@@ -27614,7 +27629,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumns
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     pinnedColumns: pinnedColumnsModel,
     paginationModel: paginationModelParsed,
@@ -27629,7 +27644,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModel,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
@@ -27640,7 +27655,7 @@ const useStatefulTable = props => {
         paginationModel: paginationModelParsed,
         columnsModel: columnsVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
+      }, search, localStorageVersion, historyReplace, columns);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -27652,7 +27667,7 @@ const useStatefulTable = props => {
   };
 };
 
-const _excluded$1 = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const _excluded$1 = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
@@ -27675,6 +27690,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       isRowSelectable,
       license = process.env.MUI_LICENSE_KEY,
       localStorageVersion,
+      previousLocalStorageVersions,
       onFilterModelChange: propsOnFilterModelChange,
       rowSelectionModel: propsRowSelectionModel,
       onColumnWidthChange: propsOnColumnWidthChange,
@@ -27744,7 +27760,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange,
     useRouter: useRouter,
-    localStorageVersion
+    localStorageVersion,
+    previousLocalStorageVersions
   });
   const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   useEffect(() => {