@redsift/table 11.5.0-muiv5 → 11.6.0-muiv5-alpha.0

package/utils/urlLocalStorageSync.js

@@ -0,0 +1,756 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { GridLinkOperator } from '@mui/x-data-grid-pro';
+import { operatorList } from './operators/index.js';
+
+// 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
+    };
+  }
+  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;
+};
+
+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