@redsift/table 10.8.2-muiv5 → 11.0.0-alpha.0

package/index.js

@@ -1,8 +1,9 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, GridLogicOperator, GRID_CHECKBOX_SELECTION_COL_DEF, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+export * from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
-import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, ThemeProvider as ThemeProvider$4, LinkButton, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
+import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, LinkButton, ThemeProvider as ThemeProvider$4, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
 import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext as ThemeContext$3, keyframes } from '@emotion/react';
@@ -3624,7 +3625,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$Q = ["values", "unit", "step"];
+const _excluded$R = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -3659,7 +3660,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$R);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -4688,7 +4689,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$P = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$Q = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -4696,7 +4697,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$P);
+    other = _objectWithoutPropertiesLoose(options, _excluded$Q);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -4764,7 +4765,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$O = ["sx"];
+const _excluded$P = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -4785,7 +4786,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$P);
   const {
     systemProps,
     otherProps
@@ -4811,7 +4812,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$N = ["className", "component"];
+const _excluded$O = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -4829,7 +4830,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$N);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$O);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -4840,7 +4841,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$M = ["variant"];
+const _excluded$N = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -4854,7 +4855,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$M);
+    other = _objectWithoutPropertiesLoose(props, _excluded$N);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -4866,7 +4867,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$L = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -4961,7 +4962,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$L);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$M);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -5638,7 +5639,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$K = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$L = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -5807,7 +5808,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$K);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$L);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -5931,7 +5932,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$J = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$K = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -5962,7 +5963,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$K);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -6029,7 +6030,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$I = ["duration", "easing", "delay"];
+const _excluded$J = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -6080,7 +6081,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$I);
+      other = _objectWithoutPropertiesLoose(options, _excluded$J);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -6127,7 +6128,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$H = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$I = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -6135,7 +6136,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$H);
+    other = _objectWithoutPropertiesLoose(options, _excluded$I);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -6226,12 +6227,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$G = ["theme"];
+const _excluded$H = ["theme"];
 function ThemeProvider$1(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, _extends$1({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -6455,7 +6456,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$F = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$G = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -6471,7 +6472,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$F);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$G);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -8687,7 +8688,7 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopper', ['root']);
 
-const _excluded$E = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded$F = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
@@ -8740,7 +8741,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   const tooltipRef = React.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -9267,7 +9268,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$D = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded$E = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 const useUtilityClasses$o = ownerState => {
   const {
     open,
@@ -9336,7 +9337,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   // TODO: `modal`` must change its type in this file to match the type of methods
   // provided by `ModalManager`
   const manager = managerProp;
@@ -9626,7 +9627,7 @@ process.env.NODE_ENV !== "production" ? Modal$2.propTypes /* remove-proptypes */
 } : void 0;
 var ModalUnstyled = Modal$2;
 
-const _excluded$C = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$D = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -9668,7 +9669,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -9962,7 +9963,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$B = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$C = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -10193,7 +10194,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -10655,7 +10656,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
 var inputClasses$1 = inputClasses;
 
-const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$B = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$m = ownerState => {
   const {
     classes,
@@ -10768,7 +10769,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const classes = useUtilityClasses$m(props);
   const ownerState = {
     disableUnderline
@@ -10991,7 +10992,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
 var filledInputClasses$1 = filledInputClasses;
 
-const _excluded$z = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$l = ownerState => {
   const {
     classes,
@@ -11175,7 +11176,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -11406,7 +11407,7 @@ FilledInput.muiName = 'Input';
 var FilledInput$1 = FilledInput;
 
 var _span$2;
-const _excluded$y = ["children", "classes", "className", "label", "notched"];
+const _excluded$z = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -11479,7 +11480,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -11536,7 +11537,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var outlinedInputClasses$1 = outlinedInputClasses;
 
-const _excluded$x = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$y = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$k = ownerState => {
   const {
     classes
@@ -11655,7 +11656,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const classes = useUtilityClasses$k(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -11876,7 +11877,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$w = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$x = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$j = ownerState => {
   const {
     classes,
@@ -11941,7 +11942,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12032,7 +12033,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$v = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$w = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$i = ownerState => {
   const {
     classes,
@@ -12134,7 +12135,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -12237,7 +12238,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$u = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$v = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$h = ownerState => {
   const {
     classes,
@@ -12323,7 +12324,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -12519,7 +12520,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$1;
-const _excluded$t = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$u = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$g = ownerState => {
   const {
     classes,
@@ -12578,7 +12579,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12684,7 +12685,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$s = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$t = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$f = ownerState => {
   const {
     classes,
@@ -12732,7 +12733,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const context = React.useMemo(() => ({
     dense
   }), [dense]);
@@ -12799,7 +12800,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$r = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$s = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -12881,7 +12882,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -14071,7 +14072,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$r = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -14115,7 +14116,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -14319,7 +14320,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$p = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -14356,7 +14357,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14517,7 +14518,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$o = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$p = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$e = ownerState => {
   const {
     classes,
@@ -14572,7 +14573,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -14693,7 +14694,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
 } : void 0;
 var Backdrop$1 = Backdrop;
 
-const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+const _excluded$o = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 const ModalRoot = styled$1('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -14772,7 +14773,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     container,
@@ -14996,7 +14997,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$m = ["className", "component", "elevation", "square", "variant"];
+const _excluded$n = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$d = ownerState => {
   const {
     square,
@@ -15051,7 +15052,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$m);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -15132,7 +15133,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$l = ["onEntering"],
+const _excluded$m = ["onEntering"],
   _excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
   _excluded3 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
@@ -15229,7 +15230,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$m),
     other = _objectWithoutPropertiesLoose(props, _excluded2$2);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
@@ -15635,7 +15636,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$k = ["onEntering"],
+const _excluded$l = ["onEntering"],
   _excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -15702,7 +15703,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$k),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
     other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
@@ -15892,7 +15893,7 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 var nativeSelectClasses$1 = nativeSelectClasses;
 
-const _excluded$j = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$k = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$a = ownerState => {
   const {
     classes,
@@ -16021,7 +16022,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -16106,7 +16107,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
 var selectClasses$1 = selectClasses;
 
 var _span;
-const _excluded$i = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$j = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -16228,7 +16229,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -16739,7 +16740,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$h = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$i = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$8 = ownerState => {
   const {
     color,
@@ -16805,7 +16806,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -16931,7 +16932,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path"
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$g = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded$h = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 const useUtilityClasses$7 = ownerState => {
   const {
     classes
@@ -16975,7 +16976,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -17198,7 +17199,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTextField', ['root']);
 
-const _excluded$f = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$g = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input$1,
   filled: FilledInput$1,
@@ -17291,7 +17292,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -17639,7 +17640,7 @@ const isBetweenOperator = {
   label: 'is between',
   value: 'isBetween',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
@@ -17652,7 +17653,7 @@ const isBetweenOperator = {
       return null;
     }
     return params => {
-      return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -17661,11 +17662,53 @@ const IS_BETWEEN = isBetweenOperator;
 
 const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
 
+const doesNotEqual = {
+  label: 'does not equal',
+  value: 'doesNotEqual',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.value) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (params.value === filterItem.value) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_EQUAL = doesNotEqual;
+
+const doesNotContain = {
+  label: 'does not contain',
+  value: 'doesNotContain',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (params.value.indexOf(filterItem.value) !== -1) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_CONTAIN = doesNotContain;
+
 const containsAnyOfOperator = {
   label: 'contains any of',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17688,7 +17731,7 @@ const containsAnyOfCIOperator = {
   label: 'contains any of (case insensitive)',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17715,7 +17758,7 @@ const endsWithAnyOfOperator = {
   label: 'ends with any of',
   value: 'endsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17742,7 +17785,7 @@ const isAnyOfOperator = {
   label: 'is any of',
   value: 'isAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17766,7 +17809,7 @@ const isNotAnyOfOperator = {
   label: 'is not any of',
   value: 'isNotAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17790,7 +17833,7 @@ const startsWithAnyOfOperator = {
   label: 'starts with any of',
   value: 'startsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17815,11 +17858,27 @@ const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
 
 const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
 
-const getGridStringOperators = () => [...getGridStringOperators$1(), ...getGridStringArrayOperators()];
+const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
+
+// istanbul ignore file
+const operatorList = {
+  // Default types
+  string: getGridStringOperators$1(),
+  number: getGridNumericOperators$1(),
+  boolean: getGridBooleanOperators(),
+  date: getGridDateOperators(),
+  dateTime: getGridDateOperators(true),
+  singleSelect: getGridSingleSelectOperators(),
+  // Extended types
+  rsString: getGridStringOperators(),
+  rsNumber: getGridNumericOperators(),
+  // Custom types
+  rsStringArray: getGridStringArrayOperators()
+};
 
 const API_URL = 'https://api.openai.com/v1/chat/completions';
 async function getCompletion(text, role, openai_api_key) {
-  let model = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'gpt-3.5-turbo-0613';
+  let model = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'gpt-3.5-turbo-1106';
   try {
     const messages = [{
       role: 'system',
@@ -21920,7 +21979,7 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
   }
 `;
 
-const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
+const _excluded$f = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
 const COMPONENT_NAME$2 = 'GridToolbarFilterSemanticField';
 const CLASSNAME$2 = 'redsift-datagrid-toolbar-nlp-filter-field';
 const DEFAULT_OPERATORS = {
@@ -21951,16 +22010,16 @@ const getRole = (config, dateFormat) => {
   }).join('\n');
   return `The AI assistant parses user input to generate a JSON object that will be used as a row filter for a data table MUI Data Grid.
 The filter supports mulitple conditions using only two logical operator "and", "or". It only allows "and" between all conditions or "or" between all conditions. It can't mix the two types.
-The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "linkOperator" and "items":
-- "linkOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
-- "items": a list of conditions, each is an object with exactly the three keys "columnField", "operatorValue" and "value":
-  - "columnField": the column name, must be one of ${columns}
+The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "logicOperator" and "items":
+- "logicOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
+- "items": a list of conditions, each is an object with exactly the three keys "field", "operator" and "value":
+  - "field": the column name, must be one of ${columns}
   - "value":
-    - this can be skipped if the "operatorValue" is either "isEmpty" or "isNotEmpty"
-    - a list of multiple values if the "operatorValue" ends with "AnyOf"
+    - this can be skipped if the "operator" is either "isEmpty" or "isNotEmpty"
+    - a list of multiple values if the "operator" ends with "AnyOf"
     - otherwise, it's a single value represented as a string: "true" instead of true, "false" instead of false, "0.6" instead of 0.6.
     For "date" data type, use ${dateFormat}. If relative date is input, convert to the actual date given today is ${today}.
-  - "operatorValue": the comparison operator, accepted values depend on the data type of the column
+  - "operator": the comparison operator, accepted values depend on the data type of the column
 ${operators}
 
 Below is the datatype in square bracket, constraints on the data range if any, followed by the description of each column used in the data table:
@@ -21997,15 +22056,15 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       nlpFilterConfig,
       onFilterModelChange,
       dateFormat = 'yyyy-mm-dd',
-      defaultModel = 'gpt-4-0613',
+      defaultModel = 'gpt-4-1106-preview',
       defaultFilter = {
         items: [],
-        linkOperator: 'and'
+        logicOperator: 'and'
       },
       disablePower = false,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const {
     textLabel,
     textPlaceholder,
@@ -22078,7 +22137,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     value: prompt
   }), /*#__PURE__*/React__default.createElement(Button, {
     variant: "primary",
-    "aira-label": buttonAriaLabel,
+    "aria-label": buttonAriaLabel,
     type: "submit",
     isLoading: isLoading
   }, buttonText)), !disablePower && /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
@@ -22100,7 +22159,7 @@ GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
 
 /** ------ */
 
-const Toolbar$3 = props => {
+const Toolbar$2 = props => {
   const {
     hasExportButton = true,
     exportButtonProps,
@@ -22139,7 +22198,7 @@ const Toolbar$3 = props => {
         let {
           apiRef
         } = _ref;
-        return gridVisibleSortedRowIdsSelector(apiRef);
+        return gridExpandedSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -22153,7 +22212,7 @@ const Toolbar$3 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-const _excluded$d = ["displayName"];
+const _excluded$e = ["displayName"];
 const muiIconToDSIcon = {
   ColumnFilteredIcon: mdiFilterVariant,
   ColumnSelectorIcon: mdiViewColumn,
@@ -22171,7 +22230,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       displayName
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     ref: ref,
     size: forwardedProps.fontSize,
@@ -22179,7 +22238,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$c = ["children", "color", "onClick", "startIcon"];
+const _excluded$d = ["children", "color", "onClick", "startIcon"];
 const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$className;
   const {
@@ -22188,7 +22247,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       startIcon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   if ((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('redsift-condensed')) {
     return /*#__PURE__*/React__default.createElement(IconButton$2, _extends$2({}, forwardedProps, {
@@ -22214,7 +22273,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 
-const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
+const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
 const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       checked,
@@ -22222,7 +22281,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     isSelected: checked && !indeterminate,
     isDisabled: disabled,
@@ -22232,7 +22291,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$a = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+const _excluded$b = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled$1(BasePopper$1, {
   name: 'MuiPopper',
   slot: 'Root',
@@ -22275,7 +22334,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
       slots,
       slotProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   const otherProps = _extends$1({
     anchorEl,
@@ -22515,7 +22574,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
 const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$9 = ["center", "classes", "className"];
+const _excluded$a = ["center", "classes", "className"];
 let _ = t => t,
   _t,
   _t2,
@@ -22644,7 +22703,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$a);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -22845,7 +22904,7 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$8 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const _excluded$9 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 const useUtilityClasses$5 = ownerState => {
   const {
     disabled,
@@ -22947,7 +23006,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -23320,7 +23379,7 @@ function getMenuItemUtilityClass(slot) {
 const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 var menuItemClasses$1 = menuItemClasses;
 
-const _excluded$7 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+const _excluded$8 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -23442,7 +23501,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       tabIndex: tabIndexProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   const context = React.useContext(ListContext$1);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -23585,7 +23644,7 @@ function getTableCellUtilityClass(slot) {
 const tableCellClasses = generateUtilityClasses('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
 var tableCellClasses$1 = tableCellClasses;
 
-const _excluded$6 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
+const _excluded$7 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 const useUtilityClasses$3 = ownerState => {
   const {
     classes,
@@ -23682,7 +23741,7 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
       sortDirection,
       variant: variantProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const table = React.useContext(TableContext$1);
   const tablelvl2 = React.useContext(Tablelvl2Context$1);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -23789,7 +23848,7 @@ function getToolbarUtilityClass(slot) {
 }
 generateUtilityClasses('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
 
-const _excluded$5 = ["className", "component", "disableGutters", "variant"];
+const _excluded$6 = ["className", "component", "disableGutters", "variant"];
 const useUtilityClasses$2 = ownerState => {
   const {
     classes,
@@ -23830,7 +23889,7 @@ const ToolbarRoot = styled$1('div', {
   theme,
   ownerState
 }) => ownerState.variant === 'regular' && theme.mixins.toolbar);
-const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
+const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiToolbar'
@@ -23841,7 +23900,7 @@ const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
       disableGutters = false,
       variant = 'regular'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const ownerState = _extends$1({}, props, {
     component,
     disableGutters,
@@ -23855,7 +23914,7 @@ const Toolbar$1 = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
     ownerState: ownerState
   }, other));
 });
-process.env.NODE_ENV !== "production" ? Toolbar$1.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -23893,7 +23952,7 @@ process.env.NODE_ENV !== "production" ? Toolbar$1.propTypes /* remove-proptypes
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['dense', 'regular']), PropTypes.string])
 } : void 0;
-var Toolbar$2 = Toolbar$1;
+var Toolbar$1 = Toolbar;
 
 var KeyboardArrowLeft = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
   d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
@@ -23909,7 +23968,7 @@ function getIconButtonUtilityClass(slot) {
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 var iconButtonClasses$1 = iconButtonClasses;
 
-const _excluded$4 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const _excluded$5 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 const useUtilityClasses$1 = ownerState => {
   const {
     classes,
@@ -24010,7 +24069,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const ownerState = _extends$1({}, props, {
     edge,
     color,
@@ -24108,7 +24167,7 @@ var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
 }), 'FirstPage');
 
 var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded$3 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
+const _excluded$4 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
 const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
   const {
       backIconButtonProps,
@@ -24121,7 +24180,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       showFirstButton,
       showLastButton
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
   const theme = useTheme();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
@@ -24225,7 +24284,7 @@ const tablePaginationClasses = generateUtilityClasses('MuiTablePagination', ['ro
 var tablePaginationClasses$1 = tablePaginationClasses;
 
 var _InputBase;
-const _excluded$2 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+const _excluded$3 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
 const TablePaginationRoot = styled$1(TableCell$1, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -24241,7 +24300,7 @@ const TablePaginationRoot = styled$1(TableCell$1, {
     padding: 0
   }
 }));
-const TablePaginationToolbar = styled$1(Toolbar$2, {
+const TablePaginationToolbar = styled$1(Toolbar$1, {
   name: 'MuiTablePagination',
   slot: 'Toolbar',
   overridesResolver: (props, styles) => _extends$1({
@@ -24372,7 +24431,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       showFirstButton = false,
       showLastButton = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
@@ -24591,10 +24650,47 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "ControlledPagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "components", "componentsProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "paginationMode", "rowCount"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
+const ServerSideControlledPagination = _ref => {
+  let {
+    selectionStatus,
+    displaySelection,
+    displayPagination,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
+    displayRowsPerPage,
+    paginationProps,
+    rowCount
+  } = _ref;
+  const totalNumberOfRowsInTable = rowCount;
+  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
+  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "7px"
+  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
+    component: "div",
+    count: totalNumberOfRowsInTable,
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+  }, paginationProps)) : null);
+};
+
 const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
   return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
     let {
@@ -24617,11 +24713,9 @@ const ControlledPagination = _ref3 => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    page,
-    onPageChange,
-    pageSize,
-    onPageSizeChange,
-    rowsPerPageOptions,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
     isRowSelectable,
     paginationProps
   } = _ref3;
@@ -24651,75 +24745,40 @@ const ControlledPagination = _ref3 => {
   }, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
     component: "div",
     count: numberOfFilteredRowsInTable,
-    page: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => {
-      onPageSizeChange(parseInt(event.target.value, 10));
-    },
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
-  }, paginationProps)) : null);
-};
-const ServerSideControlledPagination = _ref4 => {
-  let {
-    selectionStatus,
-    displaySelection,
-    displayPagination,
-    page,
-    onPageChange,
-    pageSize,
-    onPageSizeChange,
-    displayRowsPerPage,
-    rowsPerPageOptions,
-    paginationProps,
-    rowCount
-  } = _ref4;
-  const totalNumberOfRowsInTable = rowCount;
-  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
-  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
-  return /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "7px"
-  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
-    component: "div",
-    count: totalNumberOfRowsInTable,
-    page: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => {
-      onPageSizeChange(parseInt(event.target.value, 10));
-    },
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
   }, paginationProps)) : null);
 };
-const Toolbar = _ref5 => {
+
+const _excluded$2 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"];
+const ToolbarWrapper = _ref => {
   let {
       hideToolbar,
       RenderedToolbar,
       filterModel,
       onFilterModelChange,
       pagination,
-      ControlledPagination,
       paginationPlacement,
       selectionStatus,
       apiRef,
       isRowSelectable,
-      page,
-      onPageChange,
-      pageSize,
-      onPageSizeChange,
-      rowsPerPageOptions,
+      paginationModel,
+      onPaginationModelChange,
+      pageSizeOptions,
       paginationProps,
       paginationMode = 'client',
       rowCount
-    } = _ref5,
-    forwardedProps = _objectWithoutProperties(_ref5, _excluded$1);
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, forwardedProps, {
     filterModel: filterModel,
     onFilterModelChange: onFilterModelChange
@@ -24728,11 +24787,9 @@ const Toolbar = _ref5 => {
     displayRowsPerPage: false,
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus.current,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
     paginationProps: paginationProps,
     rowCount: rowCount
   }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
@@ -24742,26 +24799,877 @@ const Toolbar = _ref5 => {
     selectionStatus: selectionStatus.current,
     apiRef: apiRef,
     isRowSelectable: isRowSelectable,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
     paginationProps: paginationProps
   }) : null);
 };
+
+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 buildStorageKey = _ref => {
+  let {
+    id,
+    version,
+    category
+  } = _ref;
+  return `${id}:${version}:${category}`;
+};
+const clearPreviousVersionStorage = (id, currentVersion) => {
+  const previousVersion = currentVersion - 1;
+  if (previousVersion < 1) {
+    return;
+  }
+  const keysToDelete = [buildStorageKey({
+    id,
+    version: previousVersion,
+    category: PAGINATION_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: SORT_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: FILTER_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: VISIBILITY_MODEL_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: PINNED_COLUMNS
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: FILTER_SEARCH_KEY
+  }), buildStorageKey({
+    id,
+    version: previousVersion,
+    category: DIMENSION_MODEL_KEY
+  })];
+  for (const keyToDelete of keysToDelete) {
+    try {
+      window.localStorage.removeItem(keyToDelete);
+    } catch (e) {
+      // Ignore
+    }
+  }
+};
+
+// Get and Set data from LocalStorage WITHOUT useState
+
+// triggering a state update and consecutive re-render
+const useFetchState = (defaultValue, key) => {
+  let stickyValue = null;
+  try {
+    stickyValue = window.localStorage.getItem(key);
+  } catch (e) {
+    console.error('StatefulDataGrid: error getting item from local storage: ', e);
+  }
+  let parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+
+  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)
+  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224
+  if (parsedValue instanceof Array) {
+    const fields = (parsedValue || []).map(item => item.field);
+    if (fields.includes('screenshot') || fields.includes('diffs')) {
+      parsedValue = defaultValue;
+    }
+  }
+  const updateValue = useCallback(value => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('StatefulDataGrid: error setting item into local storage: ', e);
+    }
+  }, [key]);
+  return [parsedValue, updateValue];
+};
+
+function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = useState(() => {
+    let currentValue;
+    try {
+      currentValue = JSON.parse(localStorage.getItem(key) || String(defaultValue));
+    } catch (error) {
+      currentValue = defaultValue;
+    }
+    return currentValue;
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('local-storage: error setting item into local storage: ', e);
+    }
+  }, [value, key]);
+  return [value, setValue];
+}
+
+const useTableStates = (id, version, customDefaults) => {
+  const [paginationModel, setPaginationModel] = useLocalStorage(buildStorageKey({
+    id,
+    version,
+    category: PAGINATION_MODEL_KEY
+  }), {
+    page: 0,
+    pageSize: 10
+  });
+  const [sortModel, setSortModel] = useFetchState(customDefaults && customDefaults[SORT_MODEL_KEY] ? customDefaults[SORT_MODEL_KEY] : '', 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(customDefaults ? customDefaults[PINNED_COLUMNS] : '_pinnedColumnsLeft=[]&_pinnedColumnsRight=[]', buildStorageKey({
+    id,
+    version,
+    category: PINNED_COLUMNS
+  }));
+  const [dimensionModel, setDimensionModel] = useFetchState({}, buildStorageKey({
+    id,
+    version,
+    category: DIMENSION_MODEL_KEY
+  }));
+  return {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  };
+};
+
+const urlSearchParamsToString = searchParams => {
+  let searchString = '';
+  for (const [key, value] of searchParams) {
+    searchString = searchString + `${key}=${value}&`;
+  }
+  return searchString.slice(0, searchString.length - 1);
+};
+
+// reference value: https://www.w3schools.com/tags/ref_urlencode.ASP
+const DECODER = {
+  '%20': ' ',
+  '%26': '&',
+  '%3D': '=',
+  '%3F': '?',
+  '%5B': '[',
+  '%5D': ']',
+  '%2C': ',',
+  '%3C': '<',
+  '%3E': '>',
+  '%21': '!',
+  '%22': '"'
+};
+const ENCODER = {
+  ' ': '%20',
+  '&': '%26',
+  '=': '%3D',
+  '?': '%3F',
+  '[': '%5B',
+  ']': '%5D',
+  ',': '%2C',
+  '<': '%3C',
+  '>': '%3E',
+  '!': '%21',
+  '"': '%22'
+};
+const decodeValue = value => {
+  if (value === '') {
+    return '';
+  }
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}|${curr}`), 'g');
+  // decodeValue for lists:
+  if (value.startsWith('list[')) {
+    const arrayValues = value.split('[')[1].split(']')[0];
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
+    return arrayList.length > 0 ? arrayList : [];
+  }
+  return value.replace(re, encoded => DECODER[encoded]);
+};
+const encodeValue = value => {
+  if (!value) {
+    return '';
+  }
+
+  // Array encoding for value:
+  // we are representing it as list[encoded], where encoded is the list comma separated
+  if (Array.isArray(value)) {
+    const encodedArray = value.map(entry => {
+      return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+    }).join(',');
+    return `list[${encodedArray}]`;
+  }
+
+  // we might also pass integers
+  const castedValue = String(value);
+  return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+};
+const 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 = operatorList[columnType];
+  if (!operators) {
+    return false;
+  }
+  if ('filterOperators' in operators) {
+    return !!operators.filterOperators.find(op => op['value'] === operator);
+  }
+  return !!operators.find(op => op['value'] === operator);
+};
+
+// 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) {
+    return true;
+  }
+
+  // isAnyOf accepts as value only lists, and we are declearing them in the
+  // URL as `list=[...]`
+  if (operator === 'isAnyOf') {
+    return Array.isArray(value);
+  }
+
+  // We are accepting arrays only if they are of the 'isAnyOf' type
+  if (Array.isArray(value) && operator !== 'isAnyOf') {
+    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;
+};
+
+// example:
+// unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
+const getFilterModelFromString = (searchString, columns) => {
+  if (!searchString) {
+    return {
+      items: [],
+      logicOperator: GridLogicOperator.And
+    };
+  }
+  let logicOperator = GridLogicOperator.And;
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(searchString)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility'].includes(key)) {
+      searchParams.set(key, value);
+    }
+    if (key === '_logicOperator') {
+      logicOperator = value;
+    }
+  }
+  let id = 5000;
+  const fields = columns.map(column => column.field);
+  let isInvalid = false;
+  const items = [];
+  searchParams.forEach((value, key) => {
+    if (isInvalid) {
+      return;
+    }
+    const field = key.split('[')[0].slice(1); // Slice to remove the _ at the beginning
+    if (!fields.includes(field)) {
+      return;
+    }
+    const left = key.split(']')[0];
+    if (left.split('[').length < 2) {
+      isInvalid = true;
+      return;
+    }
+    const operator = decodeValue(key.split('[')[1].split(']')[0]);
+    // if the operator is not part of the valid operators invalidate the URL
+    if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
+      isInvalid = true;
+      return;
+    }
+    id += 1;
+    const decodedValue = decodeValue(value);
+    if (!isValueValid(decodedValue, field, columns, operator)) {
+      isInvalid = true;
+      return;
+    }
+    items.push({
+      field,
+      operator,
+      id,
+      value: decodedValue
+    });
+  });
+
+  // If we found some condition that results in an invalid URL,
+  // return the empty filterModel (this will trigger the localStorage)
+  // and will pick up the last valid search
+  if (isInvalid) {
+    return {
+      items: [],
+      logicOperator: GridLogicOperator.And
+    };
+  }
+  return {
+    items,
+    logicOperator
+  };
+};
+const getSearchParamsFromFilterModel = filterModel => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
+  filterModel['items'].forEach(item => {
+    const {
+      field,
+      operator,
+      value
+    } = item;
+    searchParams.set(`_${field}[${encodeValue(operator)}]`, encodeValue(value));
+  });
+  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) => {
+  const filterModelFromSearch = getFilterModelFromString(search, columns);
+  if (filterModelFromSearch.items.length > 0) {
+    const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
+    if (urlSearchParamsToString(searchFromFilterModel) !== localStorageFilters) {
+      setLocalStorageFilters(urlSearchParamsToString(searchFromFilterModel));
+    }
+    return filterModelFromSearch;
+  }
+  const filterModelFromLocalStorage = getFilterModelFromString(localStorageFilters, columns);
+  if (filterModelFromLocalStorage) {
+    return filterModelFromLocalStorage;
+  }
+  return {
+    items: [],
+    logicOperator: GridLogicOperator.And
+  };
+};
+const getSortingFromString = (notParsed, columns) => {
+  // If the string is empty return the default model
+  if (!notParsed) {
+    return null;
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  for (const item of parsed.split('&')) {
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_sortColumn') {
+      continue;
+    }
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const value = item.split('[')[1].split(']')[0];
+    if (value === '') {
+      return [];
+    }
+    const fields = columns.map(column => column.field);
+    const [column, order] = value.split(',');
+    if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+      return [{
+        field: column,
+        sort: order
+      }];
+    }
+    continue;
+  }
+
+  // No information was found about the sorting model in the URL
+  return null;
+};
+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) => {
+  const sorting = getSortingFromString(search, columns);
+  if (sorting) {
+    const searchFromSortModel = getSearchParamsFromSorting(sorting);
+    if (searchFromSortModel.toString() !== localStorageSorting) {
+      setLocalStorageSorting(searchFromSortModel.toString());
+    }
+    return sorting;
+  }
+  const sortModelFromLocalStorage = getSortingFromString(localStorageSorting, columns);
+  if (sortModelFromLocalStorage) {
+    return sortModelFromLocalStorage;
+  }
+  return [];
+};
+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 = Object.entries(finalColumnVisibility)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .filter(_ref => {
+    let [_, visible] = _ref;
+    return visible;
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .map(_ref2 => {
+    let [column, _] = _ref2;
+    return encodeValue(column);
+  });
+  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
+  return searchParams;
+};
+const getColumnVisibilityFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return null;
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  const visibility = {};
+  let exist = false;
+  let visibleColumnsCount = 0;
+  for (const item of parsed.split('&')) {
+    // if it's not column visibility field, skip
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_columnVisibility') {
+      continue;
+    }
+    // e.g. item = _columnVisibility[abc,def]
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    exist = true;
+    const fields = tableColumns.map(column => column.field);
+    // TODO: Add validation that , is present
+    const columns = encodedValues.split(',').map(value => decodeValue(value));
+
+    // for each column, check if it's visible and add it to visibility model
+    for (const column of fields) {
+      const isColumnVisible = columns.includes(column);
+      visibility[column] = isColumnVisible;
+      if (isColumnVisible) {
+        visibleColumnsCount += 1;
+      }
+    }
+  }
+  if (visibleColumnsCount === 0 && !exist) {
+    return null;
+  }
+  return visibility;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
+// NOTE: the `defaultHidden` is a custom field and not standard DataGrid
+// The reason is the following bug: https://github.com/mui/mui-x/issues/8407
+const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility) => {
+  const columnVisibility = getColumnVisibilityFromString(search, columns);
+  if (columnVisibility) {
+    const searchColumnVisibility = getSearchParamsFromColumnVisibility(columnVisibility, columns);
+    if (searchColumnVisibility.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchColumnVisibility.toString());
+    }
+    return columnVisibility;
+  }
+  const columnVisibilityFromLocalStorage = getColumnVisibilityFromString(localStorageColumnsVisibility, columns);
+  if (columnVisibilityFromLocalStorage) {
+    return columnVisibilityFromLocalStorage;
+  }
+
+  // No columns in URL or localStorage, just show them all expect the hidden ones
+  const res = {};
+  for (const column of columns) {
+    const field = column.field;
+    res[field] = column.defaultHidden !== true; // undefined will be true
+  }
+
+  return res;
+};
+const getPinnedColumnsFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return null;
+  }
+  // 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;
+    }
+  }
+  if (pinnedColumns.left || pinnedColumns.right) {
+    return {
+      left: pinnedColumns['left'] || [],
+      right: pinnedColumns['right'] || []
+    };
+  }
+  return null;
+};
+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) => {
+  const pinnedColumns = getPinnedColumnsFromString(search, columns);
+  if (pinnedColumns) {
+    const searchPinnedColumns = getSearchParamsFromPinnedColumns(pinnedColumns);
+    if (searchPinnedColumns.toString() !== localStoragePinnedColumns) {
+      setLocalStoragePinnedColumns(searchPinnedColumns.toString());
+    }
+    return pinnedColumns;
+  }
+  const pinnedColumnsFromLocalStorage = getPinnedColumnsFromString(localStoragePinnedColumns, columns);
+  if (pinnedColumnsFromLocalStorage) {
+    return pinnedColumnsFromLocalStorage;
+  }
+
+  // No pinnedColumn in URL or localStorage, TODO: decide what is the default state
+  const res = {
+    left: [],
+    right: []
+  };
+  return res;
+};
+const getSearchParamsFromTab = search => {
+  const searchParams = new URLSearchParams();
+  const openTab = new URLSearchParams(search).get('tab');
+  if (openTab) {
+    searchParams.set('tab', openTab);
+  }
+  return searchParams;
+};
+const getFinalSearch = _ref3 => {
+  let {
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  } = _ref3;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const tabSearch = getSearchParamsFromTab(search);
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(search)) {
+    if (!key.startsWith('_')) {
+      searchParams.set(key, value);
+    }
+  }
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
+};
+/** Return the state of the table given the URL and the local storage state */
+const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, localStorage) => {
+  const {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting,
+    setLocalStorageSorting,
+    localStorageColumnsVisibility,
+    setLocalStorageColumnsVisibility,
+    localStoragePinnedColumns,
+    setLocalStoragePinnedColumns
+  } = localStorage;
+  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters);
+  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting);
+  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility);
+  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns);
+  const finalSearch = getFinalSearch({
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel: columnVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  if (urlSearchParamsToString(finalSearch) !== search) {
+    historyReplace(urlSearchParamsToString(finalSearch));
+  }
+  return {
+    filterModel,
+    sortModel,
+    columnVisibilityModel,
+    pinnedColumnsModel
+  };
+};
+const updateUrl = (_ref4, search, historyReplace, columns) => {
+  let {
+    filterModel,
+    sortModel,
+    columnsModel: columnsVisibilityModel,
+    pinnedColumnsModel
+  } = _ref4;
+  const newSearch = getFinalSearch({
+    search,
+    filterModel,
+    sortModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  if (urlSearchParamsToString(newSearch) !== search) {
+    historyReplace(urlSearchParamsToString(newSearch));
+  }
+};
+
+const DATAGRID_VERSION = 1;
+const useStatefulTable = props => {
+  const {
+    // density = 'standard',
+    apiRef,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPaginationModelChange: propsOnPaginationModelChange,
+    onPinnedColumnsChange: propsOnPinnedColumnsChange,
+    onSortModelChange: propsOnSortModelChange,
+    pinnedCustomColumns = {
+      left: [],
+      right: []
+    },
+    useRouter,
+    version = DATAGRID_VERSION
+  } = props;
+  const {
+    search,
+    pathname,
+    historyReplace
+  } = useRouter();
+  const id = pathname;
+  const customDefaults = useMemo(() => {
+    return {
+      pinnedColumns: `_pinnedColumnsLeft=[${[GRID_CHECKBOX_SELECTION_COL_DEF.field, ...pinnedCustomColumns.left].join(',')}]&_pinnedColumnsRight=[${pinnedCustomColumns.right.join(',')}]`
+    };
+  }, [pinnedCustomColumns]);
+
+  // States and setters persisted in the local storage for this table
+  const {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  } = useTableStates(id, version, customDefaults);
+
+  // clearing up old version keys, triggering only on first render
+  useEffect(() => clearPreviousVersionStorage(id, version), [id, version]);
+  const onColumnDimensionChange = useCallback(_ref => {
+    let {
+      newWidth,
+      field
+    } = _ref;
+    setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
+      [field]: newWidth
+    }));
+  }, [dimensionModel, setDimensionModel]);
+  const {
+    filterModel: filterParsed,
+    sortModel: sortModelParsed,
+    columnVisibilityModel: visibilityModel,
+    pinnedColumnsModel
+  } = getModelsParsedOrUpdateLocalStorage(search || '', propsColumns, historyReplace, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStorageColumnsVisibility: visibilityModelLocalStorage,
+    setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
+    localStoragePinnedColumns: pinnedColumns,
+    setLocalStoragePinnedColumns: setPinnedColumns
+  });
+  const columns = useMemo(() => propsColumns.map(column => {
+    column.width = dimensionModel[column.field] || column.width || 100;
+    return column;
+  }), [propsColumns, dimensionModel]);
+  return {
+    apiRef,
+    columns,
+    onFilterModelChange: (model, details) => {
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(model, details);
+      updateUrl({
+        filterModel: model,
+        sortModel: sortModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    filterModel: filterParsed,
+    onSortModelChange: (model, details) => {
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: model,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    sortModel: sortModelParsed,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    paginationModel,
+    onPaginationModelChange: (model, details) => {
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(model, details);
+      setPaginationModel(model);
+    },
+    columnVisibilityModel: visibilityModel,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    onColumnWidthChange: (params, event, details) => {
+      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
+      onColumnDimensionChange({
+        newWidth: params.width,
+        field: params.colDef.field
+      });
+    }
+  };
+};
+
+const _excluded$1 = ["apiRef", "columns", "onColumnVisibilityModelChange", "onColumnWidthChange", "onFilterModelChange", "onPaginationModelChange", "onPinnedColumnsChange", "onSortModelChange", "pinnedCustomColumns", "rows", "useRouter"],
+  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "isStateful", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const COMPONENT_NAME$1 = 'DataGrid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
-  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
     let {
       model
-    } = _ref6;
+    } = _ref;
     return isRowSelectable({
       row: model
     });
-  }).map(_ref7 => {
+  }).map(_ref2 => {
     let {
       id
-    } = _ref7;
+    } = _ref2;
     return id;
   }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
   const numberOfSelectableRowsInPage = selectableRowsInPage.length;
@@ -24805,35 +25713,75 @@ const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionS
     };
   }
 };
+const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      // density = 'standard',
+      apiRef,
+      columns,
+      onColumnVisibilityModelChange,
+      onColumnWidthChange,
+      onFilterModelChange,
+      onPaginationModelChange,
+      onPinnedColumnsChange,
+      onSortModelChange,
+      pinnedCustomColumns,
+      rows,
+      useRouter
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const statefulTableProps = useStatefulTable({
+    apiRef: apiRef,
+    columns,
+    onFilterModelChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    onPaginationModelChange,
+    onColumnVisibilityModelChange,
+    onColumnWidthChange,
+    pinnedCustomColumns,
+    useRouter: useRouter
+  });
+  return /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({
+    ref: ref,
+    rows: rows
+  }, forwardedProps, statefulTableProps));
+});
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _initialState$paginat, _initialState$paginat2;
+  var _ref3, _ref4, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref5, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      components,
-      componentsProps,
+      slots,
+      slotProps,
       filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
       height: propsHeight,
       hideToolbar,
       initialState,
       isRowSelectable,
+      isStateful: propsIsStateful,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
-      onPageChange: propsOnPageChange,
-      onPageSizeChange: propsOnPageSizeChange,
-      selectionModel: propsSelectionModel,
-      onSelectionModelChange,
-      page: propsPage,
-      pageSize: propsPageSize,
+      rowSelectionModel: propsSelectionModel,
+      paginationModel: propsPaginationModel,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      onRowSelectionModelChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
       pagination,
       paginationPlacement = 'both',
       paginationProps,
+      pinnedCustomColumns,
       rows,
-      rowsPerPageOptions,
+      pageSizeOptions,
       sx,
       theme: propsTheme,
+      useRouter,
       paginationMode = 'client',
       rowCount
     } = props,
@@ -24841,7 +25789,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme$4(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$3;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$2;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const [filterModel, setFilterModel] = useState(propsFilterModel);
@@ -24855,52 +25803,74 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
-  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);
   useEffect(() => {
-    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
-  }, [propsSelectionModel]);
-  const [page, setPage] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
-  const [pageSize, setPageSize] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 100);
-  const selectionStatus = useRef({
-    type: 'none',
-    numberOfSelectedRows: 0,
-    numberOfSelectedRowsInPage: 0,
-    page,
-    pageSize
-  });
-  const onPageChange = page => {
-    if (propsOnPageChange) {
-      propsOnPageChange(page, undefined);
+    setColumnVisibilityModel(propsColumnVisibilityModel);
+  }, [propsColumnVisibilityModel]);
+  const onColumnVisibilityModelChange = (model, details) => {
+    if (propsOnColumnVisibilityModelChange) {
+      propsOnColumnVisibilityModelChange(model, details);
     } else {
-      setPage(page);
+      setColumnVisibilityModel(model);
     }
   };
+  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);
   useEffect(() => {
-    if (propsPage || propsPage === 0) {
-      setPage(propsPage);
-    }
-  }, [propsPage]);
-  const onPageSizeChange = pageSize => {
-    onPageChange(0);
-    if (propsOnPageSizeChange) {
-      propsOnPageSizeChange(pageSize, undefined);
+    setPinnedColumns(propsPinnedColumns);
+  }, [propsPinnedColumns]);
+  const onPinnedColumnsChange = (model, details) => {
+    if (propsOnPinnedColumnsChange) {
+      propsOnPinnedColumnsChange(model, details);
     } else {
-      setPageSize(pageSize);
+      setPinnedColumns(model);
     }
   };
+  const [sortModel, setSortModel] = useState(propsSortModel);
   useEffect(() => {
-    if (propsPageSize) {
-      setPageSize(propsPageSize);
+    setSortModel(propsSortModel);
+  }, [propsSortModel]);
+  const onSortModelChange = (model, details) => {
+    if (propsOnSortModelChange) {
+      propsOnSortModelChange(model, details);
+    } else {
+      setSortModel(model);
     }
-  }, [propsPageSize]);
+  };
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  useEffect(() => {
+    setRowSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const [paginationModel, setPaginationModel] = useState({
+    pageSize: (_ref3 = (_ref4 = (_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 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref4 !== void 0 ? _ref4 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref3 !== void 0 ? _ref3 : 100,
+    page: (_ref5 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref5 !== void 0 ? _ref5 : 0
+  });
+  const onPaginationModelChange = model => {
+    if (propsOnPaginationModelChange) {
+      propsOnPaginationModelChange(model, undefined);
+    } else {
+      setPaginationModel(model);
+    }
+  };
+  useEffect(() => {
+    if (propsPaginationModel) {
+      setPaginationModel(propsPaginationModel);
+    }
+  }, [propsPaginationModel]);
+  const selectionStatus = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page: paginationModel.page,
+    pageSize: paginationModel.pageSize
+  });
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
-  }, [selectionModel, page, pageSize]);
+  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -24916,6 +25886,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }), [theme]);
+  const isStateful = propsIsStateful && useRouter;
+  const RenderedDataGrid = isStateful ? StatefulDataGrid : DataGridPro;
   return /*#__PURE__*/React__default.createElement(ThemeProvider$4, {
     value: {
       theme
@@ -24926,61 +25898,62 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(DataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(RenderedDataGrid, _extends$2({}, isStateful ? {
+    pinnedCustomColumns,
+    useRouter
+  } : {}, forwardedProps, {
     rowCount: rowCount,
     apiRef: apiRef,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
-    components: _objectSpread2(_objectSpread2({
-      BaseButton,
-      BaseCheckbox,
-      // BaseTextField,
-      BasePopper,
-      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ExportIcon"
       })),
-      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
         displayName: "OpenFilterButtonIcon"
       }, props))
-    }, components), {}, {
-      Toolbar: Toolbar,
-      Pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
+    }, slots), {}, {
+      toolbar: ToolbarWrapper,
+      pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
         selectionStatus: selectionStatus.current,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
+        paginationModel: paginationModel,
+        onPaginationModelChange: onPaginationModelChange,
+        pageSizeOptions: pageSizeOptions,
         paginationProps: paginationProps,
         paginationMode: paginationMode,
         rowCount: rowCount
@@ -24991,78 +25964,79 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         selectionStatus: selectionStatus.current,
         apiRef: apiRef,
         isRowSelectable: isRowSelectable,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
+        paginationModel: paginationModel,
+        onPaginationModelChange: onPaginationModelChange,
+        pageSizeOptions: pageSizeOptions,
         paginationProps: paginationProps,
         paginationMode: paginationMode
       })) : null
     }),
-    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
       toolbar: _objectSpread2({
         hideToolbar,
         RenderedToolbar,
         filterModel,
         onFilterModelChange,
         pagination,
-        ControlledPagination: paginationMode == 'server' ? ServerSideControlledPagination : ControlledPagination,
         paginationPlacement,
         selectionStatus,
         apiRef,
         isRowSelectable,
-        page,
-        onPageChange,
-        pageSize,
-        onPageSizeChange,
-        rowsPerPageOptions,
+        paginationModel,
+        onPaginationModelChange,
+        pageSizeOptions,
         paginationProps,
         paginationMode,
         rowCount
-      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
     }),
     filterModel: filterModel,
+    columnVisibilityModel: columnVisibilityModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
     initialState: initialState,
     isRowSelectable: isRowSelectable,
     onFilterModelChange: onFilterModelChange,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange
+    // onColumnWidthChange={onColumnWidthChange}
+    ,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
     pagination: pagination,
     paginationMode: paginationMode,
     keepNonExistentRowsSelected: paginationMode == 'server',
     rows: rows,
-    rowsPerPageOptions: rowsPerPageOptions,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    selectionModel: selectionModel,
-    onSelectionModelChange: (newSelectionModel, details) => {
+    pageSizeOptions: pageSizeOptions,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    rowSelectionModel: rowSelectionModel,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref8 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
           let {
             model
-          } = _ref8;
+          } = _ref6;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref9 => {
+        }).map(_ref7 => {
           let {
             id
-          } = _ref9;
+          } = _ref7;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref10 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref8 => {
           let {
             model
-          } = _ref10;
+          } = _ref8;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref11 => {
+        }).map(_ref9 => {
           let {
             id
-          } = _ref11;
+          } = _ref9;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -25094,7 +26068,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           };
         }
       }
-      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
     sx: _objectSpread2(_objectSpread2({}, sx), {}, {
       '.MuiDataGrid-columnHeaders': {
@@ -25168,5 +26142,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
 TextCell.className = CLASSNAME;
 TextCell.displayName = COMPONENT_NAME;
 
-export { CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar$3 as Toolbar, getCompletion, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
+export { CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar$2 as Toolbar, getCompletion, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, operatorList };
 //# sourceMappingURL=index.js.map