@redsift/table-pro 12.5.4

package/_internal/StatefulDataGrid2.js

@@ -0,0 +1,3237 @@
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
+import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
+import classNames from 'classnames';
+import { LicenseInfo } from '@mui/x-license';
+import { Icon, useTheme, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
+import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+import { u as useControlledDatagridState, S as StyledDataGrid } from './useControlledDatagridState.js';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { mdiSync } from '@redsift/icons';
+import { decompressFromEncodedURIComponent, compressToEncodedURIComponent } from 'lz-string';
+import { n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, g as getSelectionCount, i as isRowSelected, S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
+import { B as BaseButton, a as BaseCheckbox, c as BaseIconButton, b as BaseIcon } from './BaseIconButton.js';
+
+const SUBMIT_FILTER_STROKE_TIME = 500;
+const InputNumberInterval = props => {
+  var _item$value;
+  const {
+    item,
+    applyValue,
+    focusElementRef = null
+  } = props;
+  const filterTimeout = React.useRef();
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
+  const [applying, setIsApplying] = React.useState(false);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(filterTimeout.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    var _item$value2;
+    const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
+    setFilterValueState(itemValue);
+  }, [item.value]);
+  const updateFilterValue = (lowerBound, upperBound) => {
+    clearTimeout(filterTimeout.current);
+    setFilterValueState([lowerBound, upperBound]);
+    setIsApplying(true);
+    filterTimeout.current = setTimeout(() => {
+      setIsApplying(false);
+      applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
+        value: [lowerBound, upperBound]
+      }));
+    }, SUBMIT_FILTER_STROKE_TIME);
+  };
+  const handleUpperFilterChange = event => {
+    const newUpperBound = event.target.value;
+    updateFilterValue(filterValueState[0], newUpperBound);
+  };
+  const handleLowerFilterChange = event => {
+    const newLowerBound = event.target.value;
+    updateFilterValue(newLowerBound, filterValueState[1]);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'end',
+      height: 48,
+      pl: '20px'
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    name: "lower-bound-input",
+    placeholder: "From",
+    label: "From",
+    variant: "standard",
+    value: Number(filterValueState[0]),
+    onChange: handleLowerFilterChange,
+    type: "number",
+    inputRef: focusElementRef,
+    sx: {
+      mr: 2
+    }
+  }), /*#__PURE__*/React.createElement(TextField, {
+    name: "upper-bound-input",
+    placeholder: "To",
+    label: "To",
+    variant: "standard",
+    value: Number(filterValueState[1]),
+    onChange: handleUpperFilterChange,
+    type: "number",
+    InputProps: applying ? {
+      endAdornment: /*#__PURE__*/React.createElement(Icon, {
+        icon: mdiSync
+      })
+    } : {}
+  }));
+};
+
+const isBetweenOperator = {
+  label: 'is between',
+  value: 'isBetween',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
+      return null;
+    }
+    if (filterItem.value[0] == null || filterItem.value[1] == null) {
+      return null;
+    }
+    if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
+      return null;
+    }
+    return value => {
+      return value !== null && value !== undefined && filterItem.value[0] <= value && value <= filterItem.value[1];
+    };
+  },
+  InputComponent: InputNumberInterval
+};
+const IS_BETWEEN = isBetweenOperator;
+
+const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
+
+const doesNotContain = {
+  label: 'does not contain',
+  value: 'doesNotContain',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return true;
+      }
+      if (String(value).indexOf(filterItem.value) !== -1) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_CONTAIN = doesNotContain;
+
+const doesNotEndWithOperator = {
+  label: 'does not end with',
+  value: 'doesNotEndWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      return !String(value).endsWith(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_END_WITH = doesNotEndWithOperator;
+
+const doesNotEqual = {
+  label: 'does not equal',
+  value: 'doesNotEqual',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      if (String(value) === filterItem.value) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_EQUAL = doesNotEqual;
+
+const doesNotHaveOperator = {
+  label: "doesn't have",
+  value: 'doesNotHave',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      return !cellValues.map(value => String(value)).includes(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_HAVE = doesNotHaveOperator;
+const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const doesNotStartWithOperator = {
+  label: 'does not start with',
+  value: 'doesNotStartWith',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      return !String(value).startsWith(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_START_WITH = doesNotStartWithOperator;
+
+const hasOperator = {
+  label: 'has',
+  value: 'has',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      return cellValues.map(value => String(value)).includes(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS = hasOperator;
+const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const hasOnlyOperator = {
+  label: 'has only',
+  value: 'hasOnly',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS_ONLY = hasOnlyOperator;
+const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isOperator = {
+  label: 'is',
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      if (Array.isArray(value)) {
+        return false;
+      }
+      return String(value) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS = isOperator;
+const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isNotOperator = {
+  label: 'is not',
+  value: 'isNot',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      if (Array.isArray(value)) {
+        return true;
+      }
+      return String(value) !== filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS_NOT = isNotOperator;
+const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const containsAnyOfOperator = {
+  label: 'contains any of',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).indexOf(filteredValue) !== -1) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const CONTAINS_ANY_OF = containsAnyOfOperator;
+
+const doesNotContainAnyOfOperator = {
+  label: 'does not contain any of',
+  value: 'doesNotContainAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const filteredValue of filterItem.value) {
+        for (const paramValue of paramValues) {
+          if (String(paramValue).indexOf(filteredValue) !== -1) {
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_CONTAIN_ANY_OF = doesNotContainAnyOfOperator;
+
+const doesNotEndWithAnyOfOperator = {
+  label: 'does not end with any of',
+  value: 'doesNotEndWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const filteredValue of filterItem.value) {
+        for (const paramValue of paramValues) {
+          if (String(paramValue).endsWith(filteredValue)) {
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_END_WITH_ANY_OF = doesNotEndWithAnyOfOperator;
+
+const doesNotHaveAnyOf = {
+  label: "doesn't have any of",
+  value: 'doesNotHaveAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+
+      // Return true only if none of the filter values are in the cell values
+      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
+const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const doesNotStartWithAnyOfOperator = {
+  label: 'does not start with any of',
+  value: 'doesNotStartWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const filteredValue of filterItem.value) {
+        for (const paramValue of paramValues) {
+          if (String(paramValue).startsWith(filteredValue)) {
+            return false;
+          }
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_START_WITH_ANY_OF = doesNotStartWithAnyOfOperator;
+
+const endsWithAnyOfOperator = {
+  label: 'ends with any of',
+  value: 'endsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).endsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
+
+const hasAllOfOperator = {
+  label: 'has all of',
+  value: 'hasAllOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      const cellStrings = cellValues.map(value => String(value));
+      const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+      return filterItemValues.every(v => cellStrings.includes(v));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const HAS_ALL_OF = hasAllOfOperator;
+const HAS_ALL_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ALL_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const hasAnyOfOperator = {
+  label: 'has any of',
+  value: 'hasAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const HAS_ANY_OF = hasAnyOfOperator;
+const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const isAnyOfOperator = {
+  label: 'is any of',
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return true;
+        }
+      }
+      return false;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_ANY_OF = isAnyOfOperator;
+const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const isNotAnyOfOperator = {
+  label: 'is not any of',
+  value: 'isNotAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return false;
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_NOT_ANY_OF = isNotAnyOfOperator;
+const IS_NOT_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const startsWithAnyOfOperator = {
+  label: 'starts with any of',
+  value: 'startsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (value == null) {
+        return false;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).startsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
+
+const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, DOES_NOT_CONTAIN_ANY_OF, ENDS_WITH_ANY_OF, DOES_NOT_END_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, DOES_NOT_START_WITH_ANY_OF];
+const getGridStringArrayOperatorsWithSelect = () => [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT, IS_NOT_ANY_OF_WITH_SELECT, STARTS_WITH_ANY_OF, DOES_NOT_START_WITH_ANY_OF, ENDS_WITH_ANY_OF, DOES_NOT_END_WITH_ANY_OF, CONTAINS_ANY_OF, DOES_NOT_CONTAIN_ANY_OF];
+const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ALL_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
+
+const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DOES_NOT_START_WITH, DOES_NOT_END_WITH, ...getGridStringArrayOperators()];
+
+const isEmptyOperator = {
+  label: 'is empty',
+  value: 'isEmpty',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getApplyFilterFn: _filterItem => {
+    return value => {
+      if (value == null) {
+        return true;
+      }
+      if (Array.isArray(value)) {
+        return value.length === 0;
+      }
+      if (typeof value === 'string') {
+        return value.trim() === '';
+      }
+      return false;
+    };
+  },
+  requiresFilterValue: false
+};
+const isNotEmptyOperator = {
+  label: 'is not empty',
+  value: 'isNotEmpty',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getApplyFilterFn: _filterItem => {
+    return value => {
+      if (value == null) {
+        return false;
+      }
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+      if (typeof value === 'string') {
+        return value.trim() !== '';
+      }
+      return true;
+    };
+  },
+  requiresFilterValue: false
+};
+const ARRAY_IS_EMPTY = isEmptyOperator;
+const ARRAY_IS_NOT_EMPTY = isNotEmptyOperator;
+
+// istanbul ignore file
+const operatorList = {
+  // Default types
+  string: getGridStringOperators$1(),
+  number: getGridNumericOperators$1(),
+  boolean: getGridBooleanOperators(),
+  date: getGridDateOperators(),
+  dateTime: getGridDateOperators(true),
+  singleSelect: getGridSingleSelectOperators(),
+  // Extended types (used by createColumn)
+  rsString: getGridStringOperators(),
+  rsNumber: getGridNumericOperators(),
+  rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
+  rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
+  rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ALL_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT, ARRAY_IS_EMPTY, ARRAY_IS_NOT_EMPTY],
+  rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
+  // Custom types
+  rsStringArray: getGridStringArrayOperators()
+};
+
+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 DENSITY_MODEL_KEY = 'densityModel';
+const COLUMN_ORDER_MODEL_KEY = 'columnOrderModel';
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY, COLUMN_ORDER_MODEL_KEY];
+/**
+ * Build the localStorage key for a specific grid state category.
+ * Consumers can use this to read or clear individual state entries directly.
+ *
+ * @example
+ * ```ts
+ * const key = buildStorageKey({ id: pathname, version: 2, category: DENSITY_MODEL_KEY });
+ * localStorage.removeItem(key);
+ * ```
+ */
+const buildStorageKey = _ref => {
+  let {
+    id,
+    version,
+    category
+  } = _ref;
+  return `${id}:${version}:${category}`;
+};
+const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
+  for (const version of previousLocalStorageVersions) {
+    const keysToDelete = CATEGORIES.map(category => buildStorageKey({
+      id,
+      version,
+      category
+    }));
+    for (const keyToDelete of keysToDelete) {
+      try {
+        window.localStorage.removeItem(keyToDelete);
+      } catch (e) {
+        // Ignore
+      }
+    }
+  }
+};
+
+/**
+ * Clear localStorage keys for all versions from 0 to `maxVersion` (inclusive).
+ * Useful when the consumer wants to wipe all persisted grid state regardless of which version is active.
+ */
+const clearAllVersionStorage = (id, maxVersion) => {
+  const versions = Array.from({
+    length: maxVersion + 1
+  }, (_, i) => i);
+  clearPreviousVersionStorage(id, versions);
+};
+
+/**
+ * Fully reset a `StatefulDataGrid` — clear localStorage for the given versions
+ * and strip all grid-owned URL params (`_*` and `v=`), preserving any non-grid params.
+ *
+ * Call from within a component where the router values are available:
+ * ```ts
+ * const { search, historyReplace } = useMyRouter();
+ * resetStatefulDataGridState({ id: 'myGrid', versions: [0, 1, 2], search, historyReplace });
+ * ```
+ */
+const resetStatefulDataGridState = _ref2 => {
+  let {
+    id,
+    versions,
+    search,
+    historyReplace
+  } = _ref2;
+  clearPreviousVersionStorage(id, versions);
+  const params = new URLSearchParams(search);
+  const keysToDelete = [];
+  params.forEach((_value, key) => {
+    if (key.startsWith('_') || key === 'v') {
+      keysToDelete.push(key);
+    }
+  });
+  for (const key of keysToDelete) {
+    params.delete(key);
+  }
+  historyReplace(params.toString());
+};
+
+/** Maximum query string length (chars) before compression kicks in. */
+const URL_BUDGET = 2000;
+
+/** Prefix added to compressed values so the deserialiser can detect them. */
+const COMPRESSED_PREFIX = '~';
+
+/**
+ * Priority order for compressing URL params when the total query string exceeds the budget.
+ * Params listed first are compressed first (least valuable to read in the URL).
+ * The filter aggregate step uses the special key `_filters_aggregate`.
+ */
+const COMPRESSION_PRIORITY = ['_columnOrder', '_columnVisibility', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_filters_aggregate', '_aggregation', '_rowGrouping', '_quickFilterValues', '_pivot'];
+
+/** Params that are always short and should never be compressed. */
+const NEVER_COMPRESS = new Set(['_sortColumn', '_pagination', '_density', '_logicOperator', 'v', 'tab']);
+
+/** Compress a string value and add the `~` prefix. */
+const compressValue = value => {
+  return COMPRESSED_PREFIX + compressToEncodedURIComponent(value);
+};
+
+/** If the value starts with `~`, decompress it; otherwise return as-is. */
+const decompressValue = value => {
+  if (!value.startsWith(COMPRESSED_PREFIX)) {
+    return value;
+  }
+  const decompressed = decompressFromEncodedURIComponent(value.slice(COMPRESSED_PREFIX.length));
+  return decompressed !== null && decompressed !== void 0 ? decompressed : value;
+};
+
+/** Check whether a value is compressed (starts with `~`). */
+const isCompressed = value => {
+  return value.startsWith(COMPRESSED_PREFIX);
+};
+
+/**
+ * Calculate the total length of a query string built from a params map.
+ * Each entry contributes `key=value&` (the trailing `&` is omitted for the last entry
+ * but we include it for simplicity — the +1 per entry is close enough).
+ */
+const calculateQueryStringLength = params => {
+  let total = 0;
+  for (const [key, value] of params) {
+    // key=value& — the last & is off by one but this is a budget heuristic
+    total += key.length + 1 + value.length + 1;
+  }
+  // Subtract the trailing & that doesn't actually exist
+  return Math.max(0, total - 1);
+};
+
+/**
+ * Given a set of filter param keys, aggregate them into a single `_filters` param
+ * by JSON-serialising the key-value entries and compressing the result.
+ *
+ * Returns null if aggregation doesn't save space.
+ */
+const tryAggregateFilters = (params, filterKeys) => {
+  if (filterKeys.length === 0) return null;
+
+  // Build a record of key→value for all filter params
+  const filterRecord = {};
+  let originalLength = 0;
+  for (const key of filterKeys) {
+    const value = params.get(key);
+    if (value !== undefined) {
+      filterRecord[key] = value;
+      originalLength += key.length + 1 + value.length + 1; // key=value&
+    }
+  }
+
+  const json = JSON.stringify(filterRecord);
+  const compressed = compressValue(json);
+  const aggregatedLength = '_filters'.length + 1 + compressed.length; // _filters=~...
+
+  if (aggregatedLength < originalLength) {
+    return {
+      keysToRemove: filterKeys,
+      newKey: '_filters',
+      newValue: compressed
+    };
+  }
+  return null;
+};
+
+/**
+ * Identify which param keys are individual filter params (not system params).
+ * Filter params are those that start with `_` but are not well-known system params.
+ */
+const getFilterParamKeys = params => {
+  const systemPrefixes = ['_sortColumn', '_pagination', '_density', '_logicOperator', '_quickFilterValues', '_columnVisibility', '_columnOrder', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_rowGrouping', '_aggregation', '_pivot', '_filters'];
+  const filterKeys = [];
+  for (const key of params.keys()) {
+    if (!key.startsWith('_')) continue;
+    if (systemPrefixes.some(prefix => key === prefix || key.startsWith(prefix + '['))) {
+      // This includes _field[operator,type] style filter keys
+      if (key.includes('[')) {
+        filterKeys.push(key);
+      }
+      continue;
+    }
+    // Any other _prefixed key is a filter
+    filterKeys.push(key);
+  }
+
+  // Also include bracket-notation filter keys like _domain[contains,string]
+  for (const key of params.keys()) {
+    if (key.includes('[') && key.startsWith('_') && !filterKeys.includes(key)) {
+      filterKeys.push(key);
+    }
+  }
+  return filterKeys;
+};
+
+/**
+ * Apply budget-based compression to a set of URL params.
+ *
+ * Algorithm:
+ * 1. If total query string length ≤ budget → return as-is
+ * 2. Iterate params in COMPRESSION_PRIORITY order
+ * 3. For each param, try compressing — only apply if it saves space
+ * 4. For the `_filters_aggregate` step, try collapsing all individual filter
+ *    params into a single `_filters=~blob`
+ * 5. Stop as soon as total ≤ budget
+ */
+const applyBudgetCompression = function (params) {
+  let budget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : URL_BUDGET;
+  const result = new Map(params);
+  let total = calculateQueryStringLength(result);
+  if (total <= budget) {
+    return result;
+  }
+  for (const priorityKey of COMPRESSION_PRIORITY) {
+    if (total <= budget) break;
+
+    // Special handling for filter aggregation
+    if (priorityKey === '_filters_aggregate') {
+      const filterKeys = getFilterParamKeys(result);
+      const aggregation = tryAggregateFilters(result, filterKeys);
+      if (aggregation) {
+        for (const key of aggregation.keysToRemove) {
+          result.delete(key);
+        }
+        result.set(aggregation.newKey, aggregation.newValue);
+        total = calculateQueryStringLength(result);
+      }
+      continue;
+    }
+
+    // Standard single-param compression
+    if (NEVER_COMPRESS.has(priorityKey)) continue;
+    const value = result.get(priorityKey);
+    if (value === undefined || isCompressed(value)) continue;
+    const compressed = compressValue(value);
+    if (compressed.length < value.length) {
+      result.set(priorityKey, compressed);
+      total = calculateQueryStringLength(result);
+    }
+  }
+  return result;
+};
+
+// Characters that need URL encoding in display format values
+// These characters could cause CloudFront issues or parsing ambiguity
+const CHARS_TO_ENCODE_IN_VALUES = {
+  ':': '%3A',
+  // Colon - reserved
+  ',': '%2C',
+  // Comma - used as list separator (only in list values)
+  '~': '%7E',
+  // Tilde - reserved
+  ';': '%3B',
+  // Semicolon - reserved
+  '[': '%5B',
+  // Square bracket - used in internal format
+  ']': '%5D',
+  // Square bracket - used in internal format
+  '(': '%28',
+  // Parenthesis - reserved
+  ')': '%29' // Parenthesis - reserved
+};
+
+/**
+ * Encodes special characters in a value for display format URLs.
+ * This ensures values containing colons, commas, etc. don't break parsing.
+ */
+const encodeDisplayValue = value => {
+  let encoded = value;
+  for (const [char, replacement] of Object.entries(CHARS_TO_ENCODE_IN_VALUES)) {
+    encoded = encoded.split(char).join(replacement);
+  }
+  return encoded;
+};
+
+/**
+ * Decodes display format values back to their original form.
+ * Only reverses the specific encodings from encodeDisplayValue to ensure symmetry.
+ * Does NOT use decodeURIComponent, which would also decode literal percent-encoded
+ * sequences in the original data (e.g., a value containing literal "%3A" would be
+ * incorrectly decoded to ":").
+ */
+const decodeDisplayValue = value => {
+  let decoded = value;
+  for (const [char, encoded] of Object.entries(CHARS_TO_ENCODE_IN_VALUES)) {
+    decoded = decoded.split(encoded).join(char);
+  }
+  return decoded;
+};
+
+/**
+ * Encodes array values for display format URLs.
+ * Each value is URL-encoded and joined with commas.
+ */
+const encodeDisplayArrayValue = values => {
+  return values.map(v => encodeDisplayValue(v)).join(',');
+};
+
+/**
+ * Decodes comma-separated display format array values.
+ * Handles URL-encoded commas within individual values.
+ */
+const decodeDisplayArrayValue = value => {
+  if (value === '') {
+    return [];
+  }
+
+  // Split by unencoded commas only (not %2C)
+  // First, temporarily replace encoded commas, then split, then restore
+  const TEMP_COMMA_PLACEHOLDER = '\x00COMMA\x00';
+  const withPlaceholder = value.split('%2C').join(TEMP_COMMA_PLACEHOLDER);
+  const parts = withPlaceholder.split(',');
+  return parts.map(part => {
+    const withCommasRestored = part.split(TEMP_COMMA_PLACEHOLDER).join('%2C');
+    return decodeDisplayValue(withCommasRestored);
+  });
+};
+
+/**
+ * Converts internal bracket notation to display-friendly dot notation.
+ *
+ * Display format (CloudFront-safe, no brackets):
+ * - `field[operator]=value` → `field.operator=value` (value URL-encoded if needed)
+ * - `field[isAnyOf]=list[a,b,c]` → `field.isAnyOf=a,b,c` (comma-separated, values URL-encoded)
+ * - `_sortColumn=[field,desc]` → `_sortColumn=field.desc`
+ * - `_pagination=[0,25,next]` → `_pagination=0.25.next`
+ * - `_pinnedColumnsLeft=[a,b,c]` → `_pinnedColumnsLeft=a,b,c` (comma-separated)
+ * - `_columnVisibility=[a,b,c]` → `_columnVisibility=a,b,c` (comma-separated)
+ */
+const convertToDisplayFormat = search => {
+  if (!search) return search;
+  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
+  const params = cleanSearch.split('&');
+  const converted = params.map(param => {
+    const eqIndex = param.indexOf('=');
+    if (eqIndex !== -1) {
+      const value = param.slice(eqIndex + 1);
+      // Skip conversion for compressed values — already URL-safe
+      if (isCompressed(value)) return param;
+    }
+
+    // Handle _sortColumn=[field,direction]
+    if (param.startsWith('_sortColumn=')) {
+      const value = param.slice('_sortColumn='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        if (inner === '') {
+          return '_sortColumn=';
+        }
+        const [field, direction] = inner.split(',');
+        return `_sortColumn=${field}.${direction}`;
+      }
+      return param;
+    }
+
+    // Handle _pagination=[page,pageSize,direction]
+    if (param.startsWith('_pagination=')) {
+      const value = param.slice('_pagination='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        if (inner === '') {
+          return '_pagination=';
+        }
+        const [page, pageSize, direction] = inner.split(',');
+        return `_pagination=${page}.${pageSize}.${direction}`;
+      }
+      return param;
+    }
+
+    // Handle _pinnedColumnsLeft=[a,b,c] and _pinnedColumnsRight=[a,b,c]
+    if (param.startsWith('_pinnedColumnsLeft=') || param.startsWith('_pinnedColumnsRight=')) {
+      const eqIndex = param.indexOf('=');
+      const key = param.slice(0, eqIndex);
+      const value = param.slice(eqIndex + 1);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `${key}=${inner}`;
+      }
+      return param;
+    }
+
+    // Handle _columnVisibility=[a,b,c]
+    if (param.startsWith('_columnVisibility=')) {
+      const value = param.slice('_columnVisibility='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `_columnVisibility=${inner}`;
+      }
+      return param;
+    }
+
+    // Handle _columnOrder=[a,b,c]
+    if (param.startsWith('_columnOrder=')) {
+      const value = param.slice('_columnOrder='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `_columnOrder=${inner}`;
+      }
+      return param;
+    }
+
+    // Handle _rowGrouping=[a,b,c]
+    if (param.startsWith('_rowGrouping=')) {
+      const value = param.slice('_rowGrouping='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `_rowGrouping=${inner}`;
+      }
+      return param;
+    }
+
+    // _aggregation and _pivot do not use bracket notation — pass through
+    if (param.startsWith('_aggregation=') || param.startsWith('_pivot=')) {
+      return param;
+    }
+
+    // Handle _field[operator,type]=value or _field[operator,type]=list[a,b,c]
+    const bracketMatch = param.match(/^_([^[]+)\[([^\]]+)\]=(.*)$/);
+    if (bracketMatch) {
+      const [, field, operatorAndType, value] = bracketMatch;
+      const [operator] = operatorAndType.split(',');
+
+      // Convert list[a,b,c] to comma-separated with URL-encoded values
+      if (value.startsWith('list[') && value.endsWith(']')) {
+        const listContent = value.slice(5, -1);
+        if (listContent === '') {
+          return `${field}.${operator}=`;
+        }
+        const items = listContent.split(',');
+        return `${field}.${operator}=${encodeDisplayArrayValue(items)}`;
+      }
+      // URL-encode special characters in the value
+      return `${field}.${operator}=${encodeDisplayValue(value)}`;
+    }
+    return param;
+  });
+  return converted.join('&');
+};
+
+/**
+ * Converts display-friendly dot notation back to internal bracket notation.
+ *
+ * Internal format (server-side compatible):
+ * - `field.operator=value` → `_field[operator,type]=value`
+ * - `field.isAnyOf=a,b,c` → `_field[isAnyOf,type]=list[a,b,c]`
+ * - `_sortColumn=field.desc` → `_sortColumn=[field,desc]`
+ * - `_pagination=0.25.next` → `_pagination=[0,25,next]`
+ * - `_pinnedColumnsLeft=a,b,c` → `_pinnedColumnsLeft=[a,b,c]`
+ * - `_columnVisibility=a,b,c` → `_columnVisibility=[a,b,c]`
+ */
+const convertFromDisplayFormat = (search, columns) => {
+  if (!search) return search;
+  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
+  const params = cleanSearch.split('&');
+  const converted = params.map(param => {
+    const eqIndex = param.indexOf('=');
+    if (eqIndex !== -1) {
+      const value = param.slice(eqIndex + 1);
+      // Skip conversion for compressed values — already URL-safe
+      if (isCompressed(value)) return param;
+    }
+
+    // Handle _sortColumn=field.direction or _sortColumn=
+    if (param.startsWith('_sortColumn=')) {
+      const value = param.slice('_sortColumn='.length);
+      if (value === '') {
+        return '_sortColumn=[]';
+      }
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      const dotIndex = value.indexOf('.');
+      if (dotIndex !== -1) {
+        const field = value.slice(0, dotIndex);
+        const direction = value.slice(dotIndex + 1);
+        return `_sortColumn=[${field},${direction}]`;
+      }
+      return param;
+    }
+
+    // Handle _pagination=page.pageSize.direction or _pagination=
+    if (param.startsWith('_pagination=')) {
+      const value = param.slice('_pagination='.length);
+      if (value === '') {
+        return '_pagination=[]';
+      }
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      const parts = value.split('.');
+      if (parts.length === 3) {
+        return `_pagination=[${parts.join(',')}]`;
+      }
+      return param;
+    }
+
+    // Handle _pinnedColumnsLeft=a,b,c and _pinnedColumnsRight=a,b,c
+    if (param.startsWith('_pinnedColumnsLeft=') || param.startsWith('_pinnedColumnsRight=')) {
+      const eqIndex = param.indexOf('=');
+      const key = param.slice(0, eqIndex);
+      const value = param.slice(eqIndex + 1);
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `${key}=[${value}]`;
+    }
+
+    // Handle _columnVisibility=a,b,c
+    if (param.startsWith('_columnVisibility=')) {
+      const value = param.slice('_columnVisibility='.length);
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `_columnVisibility=[${value}]`;
+    }
+
+    // Handle _columnOrder=a,b,c
+    if (param.startsWith('_columnOrder=')) {
+      const value = param.slice('_columnOrder='.length);
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `_columnOrder=[${value}]`;
+    }
+
+    // Handle _rowGrouping=a,b,c
+    if (param.startsWith('_rowGrouping=')) {
+      const value = param.slice('_rowGrouping='.length);
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `_rowGrouping=[${value}]`;
+    }
+
+    // _aggregation, _pivot, _filters — pass through (no bracket conversion needed)
+    if (param.startsWith('_aggregation=') || param.startsWith('_pivot=') || param.startsWith('_filters=')) {
+      return param;
+    }
+
+    // Handle field.operator=value (dot notation for filters)
+    const dotMatch = param.match(/^([^.]+)\.([a-zA-Z_]+)=(.*)$/);
+    if (dotMatch) {
+      const [, field, operator, rawValue] = dotMatch;
+
+      // Get column type for this field
+      const column = columns.find(c => c.field === field);
+      const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+
+      // Check if this is a list operator
+      const listOps = ['containsAnyOf', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAllOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf', 'isBetween'];
+      if (listOps.includes(operator)) {
+        const items = decodeDisplayArrayValue(rawValue);
+        return `_${field}[${operator},${columnType}]=list[${items.join(',')}]`;
+      }
+      // Decode URL-encoded special characters in the value
+      const decodedValue = decodeDisplayValue(rawValue);
+      return `_${field}[${operator},${columnType}]=${decodedValue}`;
+    }
+    return param;
+  });
+  return converted.join('&');
+};
+
+/**
+ * Detects if search string is in display format and converts it to internal format.
+ */
+const getDecodedSearchFromUrl = (search, columns) => {
+  const searchWithoutLeadingQuestion = search.startsWith('?') ? search.slice(1) : search;
+
+  // Check if it's using display format:
+  // 1. Contains dot notation for filters like 'field.operator='
+  // 2. Has empty _sortColumn= (display format) instead of _sortColumn=[] (internal format)
+  // 3. Has _pinnedColumnsLeft=a,b without brackets
+  // 4. Has _sortColumn=field.desc format
+  // 5. Has _pagination=0.25.next format
+  const hasDotNotationFilter = /[a-zA-Z_]+\.[a-zA-Z_]+=/.test(searchWithoutLeadingQuestion);
+  const hasEmptySortColumn = /(_sortColumn)=(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasSortDotNotation = /_sortColumn=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
+  const hasPaginationDotNotation = /_pagination=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
+  const hasPinnedWithoutBrackets = /(_pinnedColumnsLeft|_pinnedColumnsRight)=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasVisibilityWithoutBrackets = /_columnVisibility=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasColumnOrderWithoutBrackets = /_columnOrder=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasRowGroupingWithoutBrackets = /_rowGrouping=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasBracketNotation = /\[.*\]=/.test(searchWithoutLeadingQuestion);
+  const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets || hasColumnOrderWithoutBrackets || hasRowGroupingWithoutBrackets) && !hasBracketNotation;
+  if (isDisplayFormat) {
+    return '?' + convertFromDisplayFormat(searchWithoutLeadingQuestion, columns);
+  }
+
+  // Already in internal bracket format or empty
+  return search;
+};
+
+/**
+ * Builds a display-format query string from internal format.
+ */
+const buildQueryParamsString = search => {
+  const displaySearch = convertToDisplayFormat(search);
+  return displaySearch.startsWith('?') ? displaySearch : `?${displaySearch}`;
+};
+
+/**
+ * Compares two search strings for equality, ignoring parameter order.
+ * This prevents infinite update loops when the same parameters appear in different order.
+ */
+const areSearchStringsEqual = (search1, search2) => {
+  const strippedSearch1 = search1.startsWith('?') ? search1.slice(1) : search1;
+  const strippedSearch2 = search2.startsWith('?') ? search2.slice(1) : search2;
+
+  // Quick check: if strings are identical, no need to parse
+  if (strippedSearch1 === strippedSearch2) {
+    return true;
+  }
+
+  // Parse and sort parameters for order-independent comparison
+  const params1 = strippedSearch1.split('&').filter(Boolean).sort();
+  const params2 = strippedSearch2.split('&').filter(Boolean).sort();
+  if (params1.length !== params2.length) {
+    return false;
+  }
+  return params1.every((param, index) => param === params2[index]);
+};
+const decodeValue = value => {
+  if (value === '') {
+    return undefined;
+  }
+
+  // Handle array values encoded as list[item1,item2,...]
+  if (value.startsWith('list[')) {
+    const arrayContent = value.slice(5, -1); // Remove 'list[' and ']'
+    if (arrayContent === '') {
+      return [];
+    }
+    return arrayContent.split(',').filter(item => item);
+  }
+  return value;
+};
+const encodeValue = value => {
+  if (value === undefined || value === null) {
+    return '';
+  }
+
+  // Handle array values - encode as list[item1,item2,...]
+  if (Array.isArray(value)) {
+    return `list[${value.map(String).join(',')}]`;
+  }
+  return String(value);
+};
+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 = (field, operator, columns) => {
+  const column = columns.find(column => column.field === field);
+  if (!column) {
+    return false;
+  }
+  const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+  const operators = column.filterOperators || operatorList[columnType];
+  if (!operators) {
+    return false;
+  }
+  return !!operators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operator : op.value === operator);
+};
+const listOperators = ['containsAnyOf', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAllOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf', 'isBetween'];
+
+// Check if the value doesn't break
+const isValueValid = (value, field, columns, operator) => {
+  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 declaring them in the
+  // URL as `list=[...]`
+  if (listOperators.includes(operator)) {
+    return Array.isArray(value) || value === '';
+  }
+
+  // We are accepting arrays only if they are of the 'xxxAnyOf' type
+  if (Array.isArray(value) && !listOperators.includes(operator)) {
+    return false;
+  }
+  const column = columns.find(column => column.field === field);
+  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 logicOperator = GridLogicOperator.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', '_columnOrder', '_rowGrouping', '_aggregation', '_pivot', '_density', '_filters'].includes(key)) {
+      searchParams.set(key, value);
+    }
+    if (key === '_logicOperator') {
+      logicOperator = value === GridLogicOperator.And || value === GridLogicOperator.Or ? value : GridLogicOperator.And;
+    }
+    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);
+    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 (!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({
+      field,
+      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      id,
+      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
+      type
+    });
+  });
+  if (isInvalid) {
+    return 'invalid';
+  }
+  return {
+    items,
+    logicOperator,
+    quickFilterValues
+  };
+};
+const getSearchParamsFromFilterModel = filterModel => {
+  var _filterModel$quickFil;
+  const searchParams = new URLSearchParams();
+  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
+  filterModel['items'].forEach(item => {
+    const {
+      field,
+      operator,
+      value,
+      type
+    } = item;
+    if (Object.keys(numberOperatorEncoder).includes(operator)) {
+      searchParams.set(`_${field}[${numberOperatorEncoder[operator]},${encodeValue(type)}]`, encodeValue(value));
+    } else {
+      searchParams.set(`_${field}[${encodeValue(operator)},${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: [],
+    logicOperator: GridLogicOperator.And
+  };
+
+  // Persist initialState-derived filters to localStorage so all three sources stay in sync
+  const persistDefaultFilters = () => {
+    const searchFromDefault = getSearchParamsFromFilterModel(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageFilters) {
+      setLocalStorageFilters(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultFilters();
+    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;
+  }
+  persistDefaultFilters();
+  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 : [];
+
+  // Persist initialState-derived sorting to localStorage so all three sources stay in sync
+  const persistDefaultSort = () => {
+    const searchFromDefault = getSearchParamsFromSorting(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageSorting) {
+      setLocalStorageSorting(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultSort();
+    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;
+  }
+  persistDefaultSort();
+  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) => {
+  var _initialState$paginat, _initialState$paginat2, _initialState$paginat3;
+  // Extract pageSize from MUI's nested format: initialState.pagination.paginationModel.pageSize
+  const initialPageSize = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : 25;
+  const defaultValue = {
+    page: 0,
+    pageSize: initialPageSize,
+    direction: 'next'
+  };
+
+  // Persist initialState-derived pagination to localStorage so all three sources stay in sync
+  const persistDefaultPagination = () => {
+    const searchFromDefault = getSearchParamsFromPagination(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStoragePagination) {
+      setLocalStoragePagination(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultPagination();
+    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;
+  }
+  persistDefaultPagination();
+  return defaultValue;
+};
+
+/** COLUMN VISIBILITY */
+
+const getColumnVisibilityFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_columnVisibility');
+  if (value === '' || value === null || value === '[]') {
+    return 'invalid';
+  }
+  const parsedFields = value.slice(1, value.length - 1).split(',');
+  const fields = columns.map(column => column.field);
+  const visibility = {};
+  for (const field of fields) {
+    visibility[field] = false;
+  }
+  for (const parsedField of parsedFields) {
+    if (fields.includes(parsedField)) {
+      visibility[parsedField] = true;
+    }
+  }
+  if (Object.values(visibility).filter(v => v === true).length === 0) {
+    return 'invalid';
+  }
+  return visibility;
+};
+const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
+  const searchParams = new URLSearchParams();
+  const fields = columns.map(column => column.field);
+
+  // if column visibility model is empty, show all columns
+  if (Object.keys(columnVisibility).length == 0) {
+    searchParams.set('_columnVisibility', `[${fields.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 = fields.filter(column => finalColumnVisibility[column] !== false);
+  searchParams.set('_columnVisibility', `[${visibleColumns.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)
+// 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
+    }
+  }
+
+  // Persist initialState-derived column visibility to localStorage so all three sources stay in sync
+  const persistDefaultVisibility = value => {
+    const searchFromDefault = getSearchParamsFromColumnVisibility(value, columns);
+    if (searchFromDefault.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchFromDefault.toString());
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultVisibility(defaultValue);
+    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) {
+    persistDefaultVisibility(initialState.columns.columnVisibilityModel);
+    return initialState.columns.columnVisibilityModel;
+  }
+  persistDefaultVisibility(defaultValue);
+  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 fields = [...tableColumns.map(column => column.field), '__check__'];
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
+    if (fieldURL === '_pinnedColumnsLeft') {
+      pinnedColumns['left'] = columns;
+    }
+    if (fieldURL === '_pinnedColumnsRight') {
+      pinnedColumns['right'] = columns;
+    }
+  }
+  return pinnedColumns.left && pinnedColumns.left.length > 0 || pinnedColumns.right && pinnedColumns.right.length > 0 ? {
+    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;
+};
+
+/** DENSITY */
+
+const VALID_DENSITIES = ['compact', 'standard', 'comfortable'];
+const getDensityFromString = searchString => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_density');
+  if (value && VALID_DENSITIES.includes(value)) {
+    return value;
+  }
+  return 'invalid';
+};
+const getSearchParamsFromDensity = density => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_density', density);
+  return searchParams;
+};
+const getDensityModel = (search, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion) => {
+  // Default density: honour initialState.density if valid, otherwise fall back to 'compact'
+  const initialDensity = initialState === null || initialState === void 0 ? void 0 : initialState.density;
+  const defaultValue = initialDensity && VALID_DENSITIES.includes(initialDensity) ? initialDensity : 'compact';
+
+  // Persist initialState-derived density to localStorage so all three sources stay in sync
+  const persistDefaultDensity = () => {
+    const searchFromDefault = getSearchParamsFromDensity(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageDensity) {
+      setLocalStorageDensity(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultDensity();
+    return defaultValue;
+  }
+  const density = getDensityFromString(search);
+  if (density !== 'invalid') {
+    const searchFromDensity = getSearchParamsFromDensity(density);
+    const searchString = urlSearchParamsToString(searchFromDensity);
+    if (searchString !== localStorageDensity) {
+      setLocalStorageDensity(searchString);
+    }
+    return density;
+  }
+  const densityFromLocalStorage = getDensityFromString(localStorageDensity);
+  if (densityFromLocalStorage !== 'invalid') {
+    return densityFromLocalStorage;
+  }
+  persistDefaultDensity();
+  return defaultValue;
+};
+
+/** COLUMN ORDER */
+
+const getColumnOrderFromString = searchString => {
+  if (!searchString) return 'invalid';
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_columnOrder');
+  if (value === '' || value === null || value === '[]') return 'invalid';
+
+  // Handle bracket notation [a,b,c]
+  const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
+  if (!inner) return 'invalid';
+  return inner.split(',').filter(Boolean);
+};
+const getSearchParamsFromColumnOrder = columnOrder => {
+  const searchParams = new URLSearchParams();
+  if (columnOrder.length > 0) {
+    searchParams.set('_columnOrder', `[${columnOrder.join(',')}]`);
+  }
+  return searchParams;
+};
+const getColumnOrder = (search, columns, localStorageColumnOrder, setLocalStorageColumnOrder, initialState, isNewVersion) => {
+  var _initialState$columns4, _initialState$columns5;
+  const defaultValue = (_initialState$columns4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns5 = initialState.columns) === null || _initialState$columns5 === void 0 ? void 0 : _initialState$columns5.orderedFields) !== null && _initialState$columns4 !== void 0 ? _initialState$columns4 : columns.map(c => c.field);
+  const persistDefault = () => {
+    const searchFromDefault = getSearchParamsFromColumnOrder(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageColumnOrder) {
+      setLocalStorageColumnOrder(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefault();
+    return defaultValue;
+  }
+  const fromUrl = getColumnOrderFromString(search);
+  if (fromUrl !== 'invalid') {
+    const searchFromModel = getSearchParamsFromColumnOrder(fromUrl);
+    const searchString = urlSearchParamsToString(searchFromModel);
+    if (searchString !== localStorageColumnOrder) {
+      setLocalStorageColumnOrder(searchString);
+    }
+    return fromUrl;
+  }
+  const fromLocalStorage = getColumnOrderFromString(localStorageColumnOrder);
+  if (fromLocalStorage !== 'invalid') {
+    return fromLocalStorage;
+  }
+  persistDefault();
+  return defaultValue;
+};
+const getFinalSearch = _ref => {
+  let {
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    defaultColumnOrder,
+    columns
+  } = _ref;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const densitySearch = getSearchParamsFromDensity(density);
+  // Only include _columnOrder in URL when it differs from the default
+  const columnOrderSearch = columnOrderModel.length !== defaultColumnOrder.length || columnOrderModel.some((field, i) => field !== defaultColumnOrder[i]) ? getSearchParamsFromColumnOrder(columnOrderModel) : new URLSearchParams();
+  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, ...densitySearch, ...columnOrderSearch]);
+};
+/** Return the state of the table given the URL and the local storage state */
+const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage) => {
+  var _initialState$columns6, _initialState$columns7;
+  // Decompress any compressed params in the search string before processing
+  const decompressedSearch = decompressSearchParams(search);
+  // Convert from display format (dot notation) to internal format (bracket notation) if needed
+  const decodedSearch = getDecodedSearchFromUrl(decompressedSearch, columns);
+  const decodedParams = new URLSearchParams(decodedSearch);
+  const currentVersion = decodedParams.get('v');
+  // Only treat as "new version reset" when the URL has params with a stale/missing version.
+  // An empty URL should fall through to the localStorage branch of each getter so persisted
+  // state is restored instead of being clobbered by defaults.
+  const hasUrlState = Array.from(decodedParams.keys()).length > 0;
+  const isNewVersion = hasUrlState && (!currentVersion || Number(currentVersion) !== localStorageVersion);
+  const {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting,
+    setLocalStorageSorting,
+    localStoragePagination,
+    setLocalStoragePagination,
+    localStorageColumnsVisibility,
+    setLocalStorageColumnsVisibility,
+    localStoragePinnedColumns,
+    setLocalStoragePinnedColumns,
+    localStorageDensity,
+    setLocalStorageDensity,
+    localStorageColumnOrder,
+    setLocalStorageColumnOrder
+  } = localStorage;
+  const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
+  const paginationModel = getPaginationModel(decodedSearch, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
+  const columnVisibilityModel = getColumnsVisibility(decodedSearch, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
+  const pinnedColumnsModel = getPinnedColumns(decodedSearch, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
+  const density = getDensityModel(decodedSearch, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion);
+  const columnOrderModel = getColumnOrder(decodedSearch, columns, localStorageColumnOrder, setLocalStorageColumnOrder, initialState, isNewVersion);
+  const defaultColumnOrder = (_initialState$columns6 = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns7 = initialState.columns) === null || _initialState$columns7 === void 0 ? void 0 : _initialState$columns7.orderedFields) !== null && _initialState$columns6 !== void 0 ? _initialState$columns6 : columns.map(c => c.field);
+  const finalSearch = getFinalSearch({
+    localStorageVersion,
+    search: decodedSearch,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel: columnVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    defaultColumnOrder,
+    columns
+  });
+  const internalSearchString = urlSearchParamsToString(finalSearch);
+  // Convert to display format for the URL
+  const displaySearchString = buildQueryParamsString(internalSearchString);
+  // Apply budget compression to the display format string
+  const compressedSearchString = applyCompressionToDisplaySearch(displaySearchString);
+  const compressedWithoutQuestion = compressedSearchString.startsWith('?') ? compressedSearchString.slice(1) : compressedSearchString;
+
+  // Compare with original search (without leading ?)
+  const originalSearchWithoutQuestion = search.startsWith('?') ? search.slice(1) : search;
+  const pendingSearch = !areSearchStringsEqual(compressedWithoutQuestion, originalSearchWithoutQuestion) ? compressedWithoutQuestion : null;
+  return {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    pendingSearch
+  };
+};
+const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
+  let {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsModel: columnsVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    defaultColumnOrder
+  } = _ref2;
+  // Convert from display format to internal format if needed
+  const decodedSearch = getDecodedSearchFromUrl(search, columns);
+  const newSearch = getFinalSearch({
+    search: decodedSearch,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    defaultColumnOrder,
+    columns
+  });
+  const internalSearchString = urlSearchParamsToString(newSearch);
+  // Convert to display format for the URL
+  const displaySearchString = buildQueryParamsString(internalSearchString);
+  // Apply budget compression to the display format string
+  const compressedSearchString = applyCompressionToDisplaySearch(displaySearchString);
+  const compressedWithoutQuestion = compressedSearchString.startsWith('?') ? compressedSearchString.slice(1) : compressedSearchString;
+
+  // Compare with original search (without leading ?)
+  const originalSearchWithoutQuestion = search.startsWith('?') ? search.slice(1) : search;
+  if (!areSearchStringsEqual(compressedWithoutQuestion, originalSearchWithoutQuestion)) {
+    historyReplace(compressedWithoutQuestion);
+  }
+};
+
+// 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.field < secondFilter.field) {
+    return -1;
+  } else if (firstFilter.field > secondFilter.field) {
+    return 1;
+  }
+  if (firstFilter.operator === undefined || secondFilter.operator === undefined) {
+    return 0;
+  }
+  if (firstFilter.operator < secondFilter.operator) {
+    return -1;
+  } else if (firstFilter.operator > secondFilter.operator) {
+    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.field === secondFilter.field && firstFilter.operator === secondFilter.operator && firstFilter.value === secondFilter.value;
+};
+const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
+  const {
+    items,
+    logicOperator
+  } = filterModel;
+  const {
+    items: itemsToMatch,
+    logicOperator: logicOperatorToMatch
+  } = filterModelToMatch;
+  if (logicOperator !== logicOperatorToMatch) {
+    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
+    // field, operator, and value
+    if (!areFiltersEquivalent(filter, filterToCompare)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Decompress any `~`-prefixed param values in a search string.
+ * Also handles the `_filters` aggregate param: expands it back into individual filter params.
+ */
+const decompressSearchParams = search => {
+  if (!search || !search.includes('~')) return search;
+  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
+  const params = new URLSearchParams(cleanSearch);
+  const result = new URLSearchParams();
+  for (const [key, value] of params) {
+    if (key === '_filters' && isCompressed(value)) {
+      // Aggregate filter: decompress JSON back into individual filter params
+      try {
+        const json = decompressValue(value);
+        const filterRecord = JSON.parse(json);
+        for (const [filterKey, filterValue] of Object.entries(filterRecord)) {
+          result.set(filterKey, filterValue);
+        }
+      } catch {
+        // If decompression fails, keep the original
+        result.set(key, value);
+      }
+    } else {
+      result.set(key, decompressValue(value));
+    }
+  }
+  return '?' + result.toString();
+};
+
+/**
+ * Apply budget compression to a display-format search string.
+ * Parses the string into a Map, runs applyBudgetCompression, and reassembles.
+ */
+const applyCompressionToDisplaySearch = displaySearch => {
+  const cleanSearch = displaySearch.startsWith('?') ? displaySearch.slice(1) : displaySearch;
+  if (!cleanSearch) return displaySearch;
+  const params = new Map();
+  for (const part of cleanSearch.split('&')) {
+    const eqIndex = part.indexOf('=');
+    if (eqIndex === -1) continue;
+    const key = part.slice(0, eqIndex);
+    const value = part.slice(eqIndex + 1);
+    params.set(key, value);
+  }
+  const compressed = applyBudgetCompression(params);
+  const parts = [];
+  for (const [key, value] of compressed) {
+    parts.push(`${key}=${value}`);
+  }
+  return '?' + parts.join('&');
+};
+
+// Get and Set data from LocalStorage WITHOUT useState
+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);
+  }
+  const parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : 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
+  }));
+  const [densityModel, setDensityModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: DENSITY_MODEL_KEY
+  }));
+  const [columnOrderModel, setColumnOrderModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: COLUMN_ORDER_MODEL_KEY
+  }));
+  return {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel,
+    densityModel,
+    setDensityModel,
+    columnOrderModel,
+    setColumnOrderModel
+  };
+};
+
+/**
+ * Deep-equal comparison for plain objects / arrays.
+ * Used to stabilise parsed model references so that MUI v8 does not
+ * reset pagination on every render.
+ */
+function isDeepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== 'object') return false;
+  const aObj = a;
+  const bObj = b;
+  const aKeys = Object.keys(aObj);
+  const bKeys = Object.keys(bObj);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
+}
+const useStatefulTable = props => {
+  var _initialState$columns, _initialState$columns2;
+  const {
+    apiRef,
+    initialState,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPaginationModelChange: propsOnPaginationModelChange,
+    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,
+    densityModel,
+    setDensityModel,
+    columnOrderModel: localStorageColumnOrder,
+    setColumnOrderModel: setLocalStorageColumnOrder
+  } = useTableStates(id, localStorageVersion);
+
+  // clearing up old version keys, triggering only on first render
+  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,
+    density: densityParsed,
+    columnOrderModel: columnOrderParsed,
+    pendingSearch
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, initialState, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStoragePagination: paginationModel,
+    setLocalStoragePagination: setPaginationModel,
+    localStorageColumnsVisibility: visibilityModelLocalStorage,
+    setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
+    localStoragePinnedColumns: pinnedColumns,
+    setLocalStoragePinnedColumns: setPinnedColumns,
+    localStorageDensity: densityModel,
+    setLocalStorageDensity: setDensityModel,
+    localStorageColumnOrder,
+    setLocalStorageColumnOrder
+  });
+
+  // Sync URL in an effect rather than during render to comply with React rules
+  useEffect(() => {
+    if (pendingSearch !== null) {
+      historyReplace(pendingSearch);
+    }
+  }, [pendingSearch, historyReplace]);
+
+  // Stabilise parsed model references to prevent MUI v8 from resetting
+  // pagination on every render due to new object identity.
+  const filterParsedRef = useRef(filterParsed);
+  if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
+    filterParsedRef.current = filterParsed;
+  }
+  const sortModelParsedRef = useRef(sortModelParsed);
+  if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
+    sortModelParsedRef.current = sortModelParsed;
+  }
+  const paginationModelParsedRef = useRef(paginationModelParsed);
+  if (!isDeepEqual(paginationModelParsedRef.current, paginationModelParsed)) {
+    paginationModelParsedRef.current = paginationModelParsed;
+  }
+  const visibilityModelRef = useRef(visibilityModel);
+  if (!isDeepEqual(visibilityModelRef.current, visibilityModel)) {
+    visibilityModelRef.current = visibilityModel;
+  }
+  const pinnedColumnsModelRef = useRef(pinnedColumnsModel);
+  if (!isDeepEqual(pinnedColumnsModelRef.current, pinnedColumnsModel)) {
+    pinnedColumnsModelRef.current = pinnedColumnsModel;
+  }
+  const columnOrderParsedRef = useRef(columnOrderParsed);
+  if (!isDeepEqual(columnOrderParsedRef.current, columnOrderParsed)) {
+    columnOrderParsedRef.current = columnOrderParsed;
+  }
+  const columns = useMemo(() => propsColumns.map(column => {
+    return _objectSpread2(_objectSpread2({}, column), {}, {
+      width: dimensionModel[column.field] || column.width || 100
+    });
+  }), [propsColumns, dimensionModel]);
+  if (apiRef.current) {
+    /** Add resetPage method to apiRef. */
+    apiRef.current.resetPage = () => {
+      var _apiRef$current;
+      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
+    };
+  }
+  const defaultColumnOrder = (_initialState$columns = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns2 = initialState.columns) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2.orderedFields) !== null && _initialState$columns !== void 0 ? _initialState$columns : propsColumns.map(c => c.field);
+
+  // Subscribe to density changes via stateChange event (MUI v6 has no densityChange event)
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
+    let prevDensity = densityParsed;
+    const unsub = api.subscribeEvent('stateChange', () => {
+      const currentDensity = api.state.density;
+      if (currentDensity !== prevDensity) {
+        prevDensity = currentDensity;
+        updateUrl({
+          filterModel: filterParsed,
+          sortModel: sortModelParsed,
+          paginationModel: paginationModelParsed,
+          columnsModel: api.state.columns.columnVisibilityModel,
+          pinnedColumnsModel: pinnedColumnsModel,
+          density: currentDensity,
+          columnOrderModel: columnOrderParsed,
+          defaultColumnOrder
+        }, search, localStorageVersion, historyReplace, columns);
+      }
+    });
+    return unsub;
+  }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, columnOrderParsed, defaultColumnOrder, search, localStorageVersion, historyReplace, columns]);
+
+  // Subscribe to column order changes via columnOrderChange (drag-drop) and columnIndexChange (programmatic setColumnIndex)
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
+    const handleColumnOrderChange = () => {
+      const orderedFields = api.state.columns.orderedFields;
+      if (orderedFields && !isDeepEqual(orderedFields, columnOrderParsed)) {
+        updateUrl({
+          filterModel: filterParsed,
+          sortModel: sortModelParsed,
+          paginationModel: paginationModelParsed,
+          columnsModel: api.state.columns.columnVisibilityModel,
+          pinnedColumnsModel,
+          density: densityParsed,
+          columnOrderModel: orderedFields,
+          defaultColumnOrder
+        }, search, localStorageVersion, historyReplace, columns);
+      }
+    };
+    const unsub1 = api.subscribeEvent('columnOrderChange', handleColumnOrderChange);
+    const unsub2 = api.subscribeEvent('columnIndexChange', handleColumnOrderChange);
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, search, localStorageVersion, historyReplace, columns]);
+
+  // Helper to build the current DataGridModel for updateUrl calls
+  const buildModel = function () {
+    var _apiRef$current$state, _apiRef$current2;
+    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _objectSpread2({
+      filterModel: filterParsed,
+      sortModel: sortModelParsed,
+      paginationModel: paginationModelParsed,
+      columnsModel: (_apiRef$current$state = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
+      pinnedColumnsModel: pinnedColumnsModel,
+      density: densityParsed,
+      columnOrderModel: columnOrderParsed,
+      defaultColumnOrder
+    }, overrides);
+  };
+
+  // Track last emitted values for deep-equal guards to avoid feedback loops.
+  // Initialised from the current parsed values; updated only when we actually fire.
+  const lastEmittedFilterRef = useRef(filterParsed);
+  const lastEmittedSortRef = useRef(sortModelParsed);
+  const lastEmittedPaginationRef = useRef(paginationModelParsed);
+  return {
+    apiRef,
+    columns,
+    density: densityParsed,
+    columnOrderModel: columnOrderParsedRef.current,
+    onFilterModelChange: (model, details) => {
+      const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        items: model.items.map(item => {
+          var _apiRef$current3;
+          const column = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.getColumn(item.field);
+          item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+          return item;
+        }),
+        quickFilterValues: model.quickFilterValues || []
+      });
+      if (isDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
+      lastEmittedFilterRef.current = filterModel;
+      updateUrl(buildModel({
+        filterModel
+      }), search, localStorageVersion, historyReplace, columns);
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
+    },
+    filterModel: filterParsedRef.current,
+    onSortModelChange: (model, details) => {
+      if (isDeepEqual(model, lastEmittedSortRef.current)) return;
+      lastEmittedSortRef.current = model;
+      updateUrl(buildModel({
+        sortModel: model
+      }), search, localStorageVersion, historyReplace, columns);
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+    },
+    sortModel: sortModelParsedRef.current,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      updateUrl(buildModel({
+        pinnedColumnsModel: pinnedColumns
+      }), search, localStorageVersion, historyReplace, columns);
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+    },
+    pinnedColumns: pinnedColumnsModelRef.current,
+    paginationModel: paginationModelParsedRef.current,
+    onPaginationModelChange: (model, details) => {
+      const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        direction: paginationModelParsed.page < model.page ? 'next' : 'back'
+      });
+      if (isDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
+      lastEmittedPaginationRef.current = paginationModel;
+      updateUrl(buildModel({
+        paginationModel
+      }), search, localStorageVersion, historyReplace, columns);
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
+    },
+    columnVisibilityModel: visibilityModelRef.current,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      updateUrl(buildModel({
+        columnsModel: columnsVisibilityModel
+      }), search, localStorageVersion, historyReplace, columns);
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+    },
+    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", "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", "density", "dataSource", "filterMode", "sortingMode"];
+const COMPONENT_NAME = 'DataGrid';
+const CLASSNAME = 'redsift-datagrid';
+
+/**
+ * StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
+ * Preserves filters, sorting, pagination, column visibility, and column widths
+ * across page refreshes.
+ *
+ * Use when users need persistent table preferences. Requires unique `localStorageKey`.
+ *
+ * @example
+ * // Basic stateful grid (persists to localStorage)
+ * <StatefulDataGrid
+ *   localStorageKey="users-table"
+ *   columns={columns}
+ *   rows={users}
+ *   pagination
+ * />
+ *
+ * @example
+ * // With version migration (clears old preferences)
+ * <StatefulDataGrid
+ *   localStorageKey="reports-table"
+ *   localStorageVersion="v2"
+ *   previousLocalStorageVersions={['v1']}
+ *   columns={columns}
+ *   rows={reports}
+ * />
+ *
+ * @example
+ * // With URL state sync (shareable filtered views)
+ * <StatefulDataGrid
+ *   localStorageKey="domains-table"
+ *   useRouter={true}
+ *   columns={columns}
+ *   rows={domains}
+ *   pagination
+ * />
+ *
+ * @example
+ * // All features combined
+ * <StatefulDataGrid
+ *   localStorageKey="audit-log"
+ *   localStorageVersion="v3"
+ *   previousLocalStorageVersions={['v1', 'v2']}
+ *   useRouter={true}
+ *   columns={columns}
+ *   rows={logs}
+ *   pagination
+ *   pageSize={50}
+ *   checkboxSelection
+ * />
+ */
+
+const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const datagridRef = ref || useRef();
+  const {
+      apiRef: propsApiRef,
+      autoHeight,
+      className,
+      columns,
+      slots,
+      slotProps,
+      filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
+      paginationModel: propsPaginationModel,
+      height: propsHeight,
+      hideToolbar,
+      initialState,
+      isRowSelectable,
+      license = process.env.MUI_LICENSE_KEY,
+      localStorageVersion,
+      previousLocalStorageVersions,
+      onFilterModelChange: propsOnFilterModelChange,
+      rowSelectionModel: propsRowSelectionModel,
+      onColumnWidthChange: propsOnColumnWidthChange,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      onRowSelectionModelChange: propsOnRowSelectionModelChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
+      pagination,
+      paginationPlacement = 'both',
+      paginationProps,
+      rows,
+      pageSizeOptions,
+      sx,
+      theme: propsTheme,
+      useRouter,
+      paginationMode = 'client',
+      rowCount,
+      density: _density,
+      dataSource,
+      filterMode: propsFilterMode,
+      sortingMode: propsSortingMode
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const _apiRef = useGridApiRef();
+  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  LicenseInfo.setLicenseKey(license);
+  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+
+  // When dataSource is present, MUI manages filter/sort/pagination internally.
+  // We must not pass controlled models — only initialState (one-time) and
+  // write-only onChange handlers for URL/localStorage persistence.
+  const isDataSourceMode = Boolean(dataSource);
+  const effectivePaginationMode = isDataSourceMode ? 'server' : paginationMode;
+  const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode;
+  const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode;
+  const {
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange
+  } = useControlledDatagridState({
+    initialState,
+    pageSizeOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPaginationModel,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPaginationModelChange
+  });
+  const {
+    columnVisibilityModel,
+    density: controlledDensity,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPaginationModelChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    paginationModel,
+    pinnedColumns,
+    sortModel,
+    onColumnWidthChange,
+    columnOrderModel
+  } = useStatefulTable({
+    apiRef: apiRef,
+    initialState,
+    columns,
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange,
+    useRouter: useRouter,
+    localStorageVersion,
+    previousLocalStorageVersions
+  });
+
+  // In dataSource mode, track pagination locally for the custom pagination slots
+  // (rendered outside DataGridPro). MUI owns the actual pagination state internally.
+  const [dataSourcePaginationModel, setDataSourcePaginationModel] = useState(paginationModel);
+
+  // The pagination model to use for display in pagination slots
+  const activePaginationModel = isDataSourceMode ? dataSourcePaginationModel : paginationModel;
+
+  // Wrap onPaginationModelChange to also track state locally in dataSource mode
+  const wrappedOnPaginationModelChange = useCallback((model, details) => {
+    if (isDataSourceMode) {
+      setDataSourcePaginationModel(model);
+    }
+    onPaginationModelChange(model, details);
+  }, [isDataSourceMode, onPaginationModelChange]);
+
+  // In dataSource mode, pagination changes from our custom pagination slots
+  // (rendered outside MUI's pagination state) route through apiRef so MUI's
+  // internal page state updates and dataSource.getRows() refetches with the
+  // new params. The `paginationModelChange` subscription below picks up the
+  // resulting state change and propagates it to URL/localStorage and local
+  // React state via wrappedOnPaginationModelChange.
+  const dataSourcePaginationChange = useCallback(model => {
+    var _apiRef$current;
+    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPaginationModel(model);
+  }, [apiRef]);
+
+  // In dataSource mode, subscribe to MUI's `paginationModelChange` event so
+  // URL state stays in sync with MUI's internal pagination regardless of how
+  // it changed (slot click, apiRef.setPaginationModel from consumer code,
+  // MUI internal updates, etc.). Relying on MUI's `onPaginationModelChange`
+  // prop callback alone is not sufficient: in pivot/GroupedData strategy mode
+  // and with `paginationModel` seeded via `initialState` (rather than as a
+  // controlled prop), the prop callback can be missed under certain
+  // re-render orderings. The event fires reliably whenever the internal
+  // state changes via `setState('setPaginationModel')`, see
+  // `useGridStateInitialization.setState` → `publishEvent(changeEvent, …)`.
+  // The deep-equal guard inside `useStatefulTable.onPaginationModelChange`
+  // dedupes any duplicate emits, so overlap with the prop callback is safe.
+  useEffect(() => {
+    if (!isDataSourceMode) return;
+    const api = apiRef.current;
+    if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
+    return api.subscribeEvent('paginationModelChange', model => {
+      wrappedOnPaginationModelChange({
+        page: model.page,
+        pageSize: model.pageSize
+      }, {
+        reason: 'paginationModelChange'
+      });
+    });
+  }, [isDataSourceMode, apiRef, wrappedOnPaginationModelChange]);
+  const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
+  useEffect(() => {
+    setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
+  }, [propsRowSelectionModel]);
+  const onRowSelectionModelChange = (selectionModel, details) => {
+    setRowSelectionModel(selectionModel);
+    propsOnRowSelectionModelChange === null || propsOnRowSelectionModelChange === void 0 ? void 0 : propsOnRowSelectionModelChange(selectionModel, details);
+  };
+  const selectionStatusRef = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page: paginationModel.page,
+    pageSize: paginationModel.pageSize
+  });
+
+  // Version counter to force re-renders when selectionStatus ref changes
+  const [, forceSelectionUpdate] = useState(0);
+
+  // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
+  // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
+  const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(effectivePaginationMode != 'server');
+
+  // Track when the grid API is ready to ensure top pagination renders correctly
+  const [gridReady, setGridReady] = useState(false);
+
+  // Force re-render when the grid API becomes ready (for top pagination)
+  useEffect(() => {
+    if (apiRef.current && !gridReady) {
+      setGridReady(true);
+    }
+  });
+
+  // Sync persisted density via apiRef — initialState only applies on mount,
+  // so this handles SPA back/forward navigation where controlledDensity changes after mount
+  useEffect(() => {
+    if (apiRef.current) {
+      apiRef.current.setDensity(controlledDensity);
+    }
+  }, [controlledDensity, apiRef]);
+
+  // 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 (effectivePaginationMode == 'server') {
+      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, activePaginationModel.page, activePaginationModel.pageSize);
+    }
+  }, [rowSelectionModel, activePaginationModel.page, activePaginationModel.pageSize, rows]);
+
+  // In dataSource mode MUI provides rows internally; skip the guard.
+  if (!isDataSourceMode && !Array.isArray(rows)) {
+    return null;
+  }
+
+  // Compute selection status synchronously during render for client-side pagination.
+  // This value is passed directly to ToolbarWrapper and ControlledPagination, so slots
+  // receive the fresh value in the same render cycle — no extra re-render needed.
+  // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
+  let selectionStatus = selectionStatusRef.current;
+  if (pagination && effectivePaginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
+    try {
+      // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors.
+      // MUI's paginated selectors use apiRef internal state which may be stale when
+      // paginationModel prop changes — our React state is always up to date.
+      const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
+      const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
+      const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
+      const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref => {
+        let {
+          model
+        } = _ref;
+        return isRowSelectable({
+          row: model
+        });
+      }).map(_ref2 => {
+        let {
+          id
+        } = _ref2;
+        return id;
+      }) : pageEntries.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      });
+      const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+      const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref4 => {
+        let {
+          model
+        } = _ref4;
+        return isRowSelectable({
+          row: model
+        });
+      }).map(_ref5 => {
+        let {
+          id
+        } = _ref5;
+        return id;
+      }) : gridFilteredSortedRowIdsSelector(apiRef);
+      const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+      const numberOfSelectedRows = getSelectionCount(rowSelectionModel);
+      const selectedOnCurrentPage = selectableRowsInPage.filter(id => isRowSelected(rowSelectionModel, id));
+      if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+        selectionStatus = {
+          type: 'table',
+          numberOfSelectedRows
+        };
+      } else if (selectedOnCurrentPage.length === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage > 0 && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+        selectionStatus = {
+          type: 'page',
+          numberOfSelectedRows: selectedOnCurrentPage.length
+        };
+      } else if (numberOfSelectedRows > 0) {
+        selectionStatus = {
+          type: 'other',
+          numberOfSelectedRows
+        };
+      } else {
+        selectionStatus = {
+          type: 'none',
+          numberOfSelectedRows: 0
+        };
+      }
+    } catch {
+      // apiRef may not be initialized on first render
+    }
+  } else if (pagination && effectivePaginationMode !== 'server') {
+    selectionStatus = {
+      type: 'none',
+      numberOfSelectedRows: 0
+    };
+  }
+  selectionStatusRef.current = selectionStatus;
+  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
+  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus,
+    paginationModel: activePaginationModel,
+    onPaginationModelChange: isDataSourceMode ? dataSourcePaginationChange : onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps,
+    rowCount: rowCount
+  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus,
+    apiRef: apiRef,
+    isRowSelectable: isRowSelectable,
+    paginationModel: activePaginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps
+  }) : null, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+    apiRef: apiRef,
+    dataSource: dataSource,
+    columns: columns,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    pageSizeOptions: pageSizeOptions,
+    onColumnWidthChange: onColumnWidthChange
+    // In dataSource mode: models are uncontrolled (MUI owns them),
+    // onChange handlers are write-only for URL/localStorage persistence,
+    // and initialState seeds MUI on mount from the persisted URL state.
+    // columnVisibilityModel / pinnedColumns are also uncontrolled here
+    // to avoid a controlled re-render race with consumer-side
+    // microtask-deferred history updates (otherwise user toggles flip
+    // back when MUI re-emits with the stale controlled value).
+    // Consumers needing programmatic changes should use the apiRef
+    // imperative API.
+  }, isDataSourceMode ? {
+    onFilterModelChange: onFilterModelChange,
+    onSortModelChange: onSortModelChange,
+    onPaginationModelChange: wrappedOnPaginationModelChange,
+    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
+      density: controlledDensity,
+      columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
+        orderedFields: columnOrderModel,
+        columnVisibilityModel
+      }),
+      pinnedColumns,
+      filter: {
+        filterModel
+      },
+      sorting: {
+        sortModel
+      },
+      pagination: {
+        paginationModel
+      }
+    })
+  } : {
+    columnVisibilityModel,
+    pinnedColumns,
+    filterModel,
+    sortModel,
+    paginationModel,
+    onFilterModelChange: onFilterModelChange,
+    onSortModelChange: onSortModelChange,
+    onPaginationModelChange: wrappedOnPaginationModelChange,
+    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
+      density: controlledDensity,
+      columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
+        orderedFields: columnOrderModel
+      })
+    })
+  }, {
+    isRowSelectable: isRowSelectable,
+    pagination: pagination,
+    paginationMode: effectivePaginationMode,
+    filterMode: effectiveFilterMode,
+    sortingMode: effectiveSortingMode,
+    keepNonExistentRowsSelected: effectivePaginationMode == 'server',
+    rows: isDataSourceMode ? [] : rows,
+    rowCount: rowCount,
+    autoHeight: autoHeight,
+    checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
+    disableRowSelectionExcludeModel: true,
+    showToolbar: !hideToolbar,
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      baseIconButton: BaseIconButton,
+      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({}, props, {
+        displayName: "openFilterButtonIcon"
+      }))
+    }, slots), {}, {
+      pagination: props => {
+        return pagination ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus,
+          paginationModel: activePaginationModel
+          // In dataSource mode route through apiRef so MUI's internal pagination
+          // state stays in sync with the displayed model and dataSource.getRows()
+          // re-fetches with the new params. MUI then fires onPaginationModelChange
+          // via the prop, which updates URL/localStorage via useStatefulTable.
+          // Without this the bottom slot only updated local React state + URL,
+          // leaving MUI on its previous internal page (no refetch, stale display).
+          ,
+          onPaginationModelChange: isDataSourceMode ? dataSourcePaginationChange : wrappedOnPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
+          paginationProps: paginationProps,
+          rowCount: rowCount
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus,
+          apiRef: apiRef,
+          isRowSelectable: isRowSelectable,
+          paginationModel: activePaginationModel,
+          onPaginationModelChange: wrappedOnPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
+          paginationProps: paginationProps
+        })) : null;
+      }
+    }),
+    slotProps: _objectSpread2({}, slotProps),
+    rowSelectionModel: rowSelectionModel,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
+      if (pagination && effectivePaginationMode != 'server') {
+        // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors
+        // to avoid stale apiRef pagination state.
+        const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
+        const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
+        const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
+        const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref6 => {
+          let {
+            model
+          } = _ref6;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref7 => {
+          let {
+            id
+          } = _ref7;
+          return id;
+        }) : pageEntries.map(_ref8 => {
+          let {
+            id
+          } = _ref8;
+          return id;
+        });
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref9 => {
+          let {
+            model
+          } = _ref9;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref10 => {
+          let {
+            id
+          } = _ref10;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
+        if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+          setTimeout(() => {
+            var _apiRef$current2;
+            (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.selectRows([], true, true);
+          }, 0);
+        }
+        if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatusRef.current = {
+            type: 'page',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatusRef.current = {
+            type: 'table',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows > 0) {
+          selectionStatusRef.current = {
+            type: 'other',
+            numberOfSelectedRows
+          };
+        } else {
+          selectionStatusRef.current = {
+            type: 'none',
+            numberOfSelectedRows
+          };
+        }
+        forceSelectionUpdate(v => v + 1);
+      }
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
+    },
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
+  })))));
+});
+StatefulDataGrid.className = CLASSNAME;
+StatefulDataGrid.displayName = COMPONENT_NAME;
+
+export { convertToDisplayFormat as $, ARRAY_IS_EMPTY as A, IS as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS_NOT as F, getGridStringOperators as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, FILTER_MODEL_KEY as M, SORT_MODEL_KEY as N, PINNED_COLUMNS as O, PAGINATION_MODEL_KEY as P, DIMENSION_MODEL_KEY as Q, FILTER_SEARCH_KEY as R, STARTS_WITH_ANY_OF as S, DENSITY_MODEL_KEY as T, COLUMN_ORDER_MODEL_KEY as U, VISIBILITY_MODEL_KEY as V, CATEGORIES as W, buildStorageKey as X, clearPreviousVersionStorage as Y, clearAllVersionStorage as Z, resetStatefulDataGridState as _, DOES_NOT_EQUAL as a, convertFromDisplayFormat as a0, getDecodedSearchFromUrl as a1, buildQueryParamsString as a2, areSearchStringsEqual as a3, decodeValue as a4, encodeValue as a5, urlSearchParamsToString as a6, numberOperatorEncoder as a7, numberOperatorDecoder as a8, isOperatorValueValid as a9, isValueValid as aa, getFilterModelFromString as ab, getSearchParamsFromFilterModel as ac, getSortingFromString as ad, getSearchParamsFromSorting as ae, getPaginationFromString as af, getSearchParamsFromPagination as ag, getColumnVisibilityFromString as ah, getSearchParamsFromColumnVisibility as ai, getPinnedColumnsFromString as aj, getSearchParamsFromPinnedColumns as ak, getSearchParamsFromTab as al, getDensityFromString as am, getSearchParamsFromDensity as an, getDensityModel as ao, getColumnOrderFromString as ap, getSearchParamsFromColumnOrder as aq, getFinalSearch as ar, getModelsParsedOrUpdateLocalStorage as as, updateUrl as at, areFilterModelsEquivalent as au, StatefulDataGrid as av, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
+//# sourceMappingURL=StatefulDataGrid2.js.map