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

package/_internal/StatefulDataGrid2.js

@@ -0,0 +1,3088 @@
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$1 } from './_rollupPluginBabelHelpers.js';
+import * as React from 'react';
+import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Icon, useTheme as useTheme$1, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
+import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
+import { mdiSync } from '@redsift/icons';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, d as defaultSxConfig, i as isPlainObject, s as styled, b as styleFunctionSx, u as useTheme, c as clsx, e as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, g as generateUtilityClasses, f as generateUtilityClass, h as styled$1, j as useThemeProps, k as capitalize, l as composeClasses, r as rootShouldForwardProp, m as refType } from './Portal.js';
+import { j as jsxRuntimeExports } from './jsx-runtime.js';
+import { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { T as Toolbar } from './Toolbar2.js';
+import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
+import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
+
+function isMuiElement(element, muiNames) {
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
+const _excluded$7 = ["sx"];
+const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
+  const result = {
+    systemProps: {},
+    otherProps: {}
+  };
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
+  Object.keys(props).forEach(prop => {
+    if (config[prop]) {
+      result.systemProps[prop] = props[prop];
+    } else {
+      result.otherProps[prop] = props[prop];
+    }
+  });
+  return result;
+};
+function extendSxProp(props) {
+  const {
+      sx: inSx
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  const {
+    systemProps,
+    otherProps
+  } = splitProps(other);
+  let finalSx;
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps, ...inSx];
+  } else if (typeof inSx === 'function') {
+    finalSx = (...args) => {
+      const result = inSx(...args);
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+      return _extends({}, systemProps, result);
+    };
+  } else {
+    finalSx = _extends({}, systemProps, inSx);
+  }
+  return _extends({}, otherProps, {
+    sx: finalSx
+  });
+}
+
+const _excluded$6 = ["className", "component"];
+function createBox(options = {}) {
+  const {
+    themeId,
+    defaultTheme,
+    defaultClassName = 'MuiBox-root',
+    generateClassName
+  } = options;
+  const BoxRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx);
+  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
+    const theme = useTheme(defaultTheme);
+    const _extendSxProp = extendSxProp(inProps),
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
+      as: component,
+      ref: ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
+  });
+  return Box;
+}
+
+const defaultTheme = createTheme();
+const Box = createBox({
+  themeId: THEME_ID,
+  defaultTheme,
+  defaultClassName: 'MuiBox-root',
+  generateClassName: ClassNameGenerator.generate
+});
+process.env.NODE_ENV !== "production" ? Box.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+var Box$1 = Box;
+
+function getFormLabelUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormLabel', slot);
+}
+const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
+var formLabelClasses$1 = formLabelClasses;
+
+const _excluded$5 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$4 = ownerState => {
+  const {
+    classes,
+    color,
+    focused,
+    disabled,
+    error,
+    filled,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
+    asterisk: ['asterisk', error && 'error']
+  };
+  return composeClasses(slots, getFormLabelUtilityClasses, classes);
+};
+const FormLabelRoot = styled$1('label', {
+  name: 'MuiFormLabel',
+  slot: 'Root',
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.body1, {
+  lineHeight: '1.4375em',
+  padding: 0,
+  position: 'relative',
+  [`&.${formLabelClasses$1.focused}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  },
+  [`&.${formLabelClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${formLabelClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
+const AsteriskComponent = styled$1('span', {
+  name: 'MuiFormLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${formLabelClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
+const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormLabel'
+  });
+  const {
+      children,
+      className,
+      component = 'label'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
+  });
+  const ownerState = _extends({}, props, {
+    color: fcs.color || 'primary',
+    component,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required
+  });
+  const classes = useUtilityClasses$4(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
+    as: component,
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    ref: ref
+  }, other, {
+    children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? FormLabel.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+var FormLabel$1 = FormLabel;
+
+function getInputLabelUtilityClasses(slot) {
+  return generateUtilityClass('MuiInputLabel', slot);
+}
+generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
+
+const _excluded$4 = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    classes,
+    formControl,
+    size,
+    shrink,
+    disableAnimation,
+    variant,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
+    asterisk: [required && 'asterisk']
+  };
+  const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
+  return _extends({}, classes, composedClasses);
+};
+const InputLabelRoot = styled$1(FormLabel$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiInputLabel',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
+    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  display: 'block',
+  transformOrigin: 'top left',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '100%'
+}, ownerState.formControl && {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: 'translate(0, 20px) scale(1)'
+}, ownerState.size === 'small' && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: 'translate(0, 17px) scale(1)'
+}, ownerState.shrink && {
+  transform: 'translate(0, -1.5px) scale(0.75)',
+  transformOrigin: 'top left',
+  maxWidth: '133%'
+}, !ownerState.disableAnimation && {
+  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.variant === 'filled' && _extends({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(12px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 13px) scale(1)'
+}, ownerState.shrink && _extends({
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  transform: 'translate(12px, 7px) scale(0.75)',
+  maxWidth: 'calc(133% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 4px) scale(0.75)'
+})), ownerState.variant === 'outlined' && _extends({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(14px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(14px, 9px) scale(1)'
+}, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
+  transform: 'translate(14px, -9px) scale(0.75)'
+})));
+const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
+  const props = useThemeProps({
+    name: 'MuiInputLabel',
+    props: inProps
+  });
+  const {
+      disableAnimation = false,
+      shrink: shrinkProp,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const muiFormControl = useFormControl();
+  let shrink = shrinkProp;
+  if (typeof shrink === 'undefined' && muiFormControl) {
+    shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
+  }
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['size', 'variant', 'required']
+  });
+  const ownerState = _extends({}, props, {
+    disableAnimation,
+    formControl: muiFormControl,
+    shrink,
+    size: fcs.size,
+    variant: fcs.variant,
+    required: fcs.required
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
+    "data-shrink": shrink,
+    ownerState: ownerState,
+    ref: ref,
+    className: clsx(classes.root, className)
+  }, other, {
+    classes: classes
+  }));
+});
+process.env.NODE_ENV !== "production" ? InputLabel.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var InputLabel$1 = InputLabel;
+
+function getFormControlUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormControl', slot);
+}
+generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
+
+const _excluded$3 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$2 = ownerState => {
+  const {
+    classes,
+    margin,
+    fullWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
+  };
+  return composeClasses(slots, getFormControlUtilityClasses, classes);
+};
+const FormControlRoot = styled$1('div', {
+  name: 'MuiFormControl',
+  slot: 'Root',
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+  }
+})(({
+  ownerState
+}) => _extends({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: 'top'
+}, ownerState.margin === 'normal' && {
+  marginTop: 16,
+  marginBottom: 8
+}, ownerState.margin === 'dense' && {
+  marginTop: 8,
+  marginBottom: 4
+}, ownerState.fullWidth && {
+  width: '100%'
+}));
+
+/**
+ * Provides context such as filled/focused/error/required for form inputs.
+ * Relying on the context provides high flexibility and ensures that the state always stays
+ * consistent across the children of the `FormControl`.
+ * This context is used by the following components:
+ *
+ *  - FormLabel
+ *  - FormHelperText
+ *  - Input
+ *  - InputLabel
+ *
+ * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
+ *
+ * ```jsx
+ * <FormControl>
+ *   <InputLabel htmlFor="my-input">Email address</InputLabel>
+ *   <Input id="my-input" aria-describedby="my-helper-text" />
+ *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
+ * </FormControl>
+ * ```
+ *
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
+ * For instance, only one input can be focused at the same time, the state shouldn't be shared.
+ */
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormControl'
+  });
+  const {
+      children,
+      className,
+      color = 'primary',
+      component = 'div',
+      disabled = false,
+      error = false,
+      focused: visuallyFocused,
+      fullWidth = false,
+      hiddenLabel = false,
+      margin = 'none',
+      required = false,
+      size = 'medium',
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const ownerState = _extends({}, props, {
+    color,
+    component,
+    disabled,
+    error,
+    fullWidth,
+    hiddenLabel,
+    margin,
+    required,
+    size,
+    variant
+  });
+  const classes = useUtilityClasses$2(ownerState);
+  const [adornedStart, setAdornedStart] = React.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialAdornedStart = false;
+    if (children) {
+      React.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        const input = isMuiElement(child, ['Select']) ? child.props.input : child;
+        if (input && isAdornedStart(input.props)) {
+          initialAdornedStart = true;
+        }
+      });
+    }
+    return initialAdornedStart;
+  });
+  const [filled, setFilled] = React.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialFilled = false;
+    if (children) {
+      React.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
+          initialFilled = true;
+        }
+      });
+    }
+    return initialFilled;
+  });
+  const [focusedState, setFocused] = React.useState(false);
+  if (disabled && focusedState) {
+    setFocused(false);
+  }
+  const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+  let registerEffect;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const registeredInput = React.useRef(false);
+    registerEffect = () => {
+      if (registeredInput.current) {
+        console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
+      }
+      registeredInput.current = true;
+      return () => {
+        registeredInput.current = false;
+      };
+    };
+  }
+  const childContext = React.useMemo(() => {
+    return {
+      adornedStart,
+      setAdornedStart,
+      color,
+      disabled,
+      error,
+      filled,
+      focused,
+      fullWidth,
+      hiddenLabel,
+      size,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      registerEffect,
+      required,
+      variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
+    value: childContext,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      ref: ref
+    }, other, {
+      children: children
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? FormControl.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var FormControl$1 = FormControl;
+
+function getFormHelperTextUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormHelperText', slot);
+}
+const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
+var formHelperTextClasses$1 = formHelperTextClasses;
+
+var _span;
+const _excluded$2 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    contained,
+    size,
+    disabled,
+    error,
+    filled,
+    focused,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
+  };
+  return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
+};
+const FormHelperTextRoot = styled$1('p', {
+  name: 'MuiFormHelperText',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
+  textAlign: 'left',
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${formHelperTextClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${formHelperTextClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}, ownerState.size === 'small' && {
+  marginTop: 4
+}, ownerState.contained && {
+  marginLeft: 14,
+  marginRight: 14
+}));
+const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiFormHelperText'
+  });
+  const {
+      children,
+      className,
+      component = 'p'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
+  });
+  const ownerState = _extends({}, props, {
+    component,
+    contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
+    variant: fcs.variant,
+    size: fcs.size,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
+    as: component,
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    ref: ref
+  }, other, {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: "notranslate",
+      children: "\u200B"
+    })) : children
+  }));
+});
+process.env.NODE_ENV !== "production" ? FormHelperText.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
+} : void 0;
+var FormHelperText$1 = FormHelperText;
+
+function getTextFieldUtilityClass(slot) {
+  return generateUtilityClass('MuiTextField', slot);
+}
+generateUtilityClasses('MuiTextField', ['root']);
+
+const _excluded$1 = ["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,
+  filled: FilledInput,
+  outlined: OutlinedInput
+};
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getTextFieldUtilityClass, classes);
+};
+const TextFieldRoot = styled$1(FormControl$1, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+
+/**
+ * The `TextField` is a convenience wrapper for the most common cases (80%).
+ * It cannot be all things to all people, otherwise the API would grow out of control.
+ *
+ * ## Advanced Configuration
+ *
+ * It's important to understand that the text field is a simple abstraction
+ * on top of the following components:
+ *
+ * - [FormControl](/material-ui/api/form-control/)
+ * - [InputLabel](/material-ui/api/input-label/)
+ * - [FilledInput](/material-ui/api/filled-input/)
+ * - [OutlinedInput](/material-ui/api/outlined-input/)
+ * - [Input](/material-ui/api/input/)
+ * - [FormHelperText](/material-ui/api/form-helper-text/)
+ *
+ * If you wish to alter the props applied to the `input` element, you can do so as follows:
+ *
+ * ```jsx
+ * const inputProps = {
+ *   step: 300,
+ * };
+ *
+ * return <TextField id="time" type="time" inputProps={inputProps} />;
+ * ```
+ *
+ * For advanced cases, please look at the source of TextField by clicking on the
+ * "Edit this page" button above. Consider either:
+ *
+ * - using the upper case props for passing values directly to the components
+ * - using the underlying components directly as shown in the demos
+ */
+const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTextField'
+  });
+  const {
+      autoComplete,
+      autoFocus = false,
+      children,
+      className,
+      color = 'primary',
+      defaultValue,
+      disabled = false,
+      error = false,
+      FormHelperTextProps,
+      fullWidth = false,
+      helperText,
+      id: idOverride,
+      InputLabelProps,
+      inputProps,
+      InputProps,
+      inputRef,
+      label,
+      maxRows,
+      minRows,
+      multiline = false,
+      name,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      placeholder,
+      required = false,
+      rows,
+      select = false,
+      SelectProps,
+      type,
+      value,
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
+    autoFocus,
+    color,
+    disabled,
+    error,
+    fullWidth,
+    multiline,
+    required,
+    select,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  if (process.env.NODE_ENV !== 'production') {
+    if (select && !children) {
+      console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
+    }
+  }
+  const InputMore = {};
+  if (variant === 'outlined') {
+    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
+      InputMore.notched = InputLabelProps.shrink;
+    }
+    InputMore.label = label;
+  }
+  if (select) {
+    // unset defaults from textbox inputs
+    if (!SelectProps || !SelectProps.native) {
+      InputMore.id = undefined;
+    }
+    InputMore['aria-describedby'] = undefined;
+  }
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends({
+    "aria-describedby": helperTextId,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    defaultValue: defaultValue,
+    fullWidth: fullWidth,
+    multiline: multiline,
+    name: name,
+    rows: rows,
+    maxRows: maxRows,
+    minRows: minRows,
+    type: type,
+    value: value,
+    id: id,
+    inputRef: inputRef,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onClick: onClick,
+    placeholder: placeholder,
+    inputProps: inputProps
+  }, InputMore, InputProps));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    disabled: disabled,
+    error: error,
+    fullWidth: fullWidth,
+    ref: ref,
+    required: required,
+    color: color,
+    variant: variant,
+    ownerState: ownerState
+  }, other, {
+    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
+      "aria-describedby": helperTextId,
+      id: id,
+      labelId: inputLabelId,
+      value: value,
+      input: InputElement
+    }, SelectProps, {
+      children: children
+    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? TextField.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.any,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: PropTypes.bool,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: PropTypes.string,
+  /**
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   */
+  InputLabelProps: PropTypes.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * If `true`, a `textarea` element is rendered instead of an input.
+   * @default false
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * If this option is set you must pass the options of the select as children.
+   * @default false
+   */
+  select: PropTypes.bool,
+  /**
+   * Props applied to the [`Select`](/material-ui/api/select/) element.
+   */
+  SelectProps: PropTypes.object,
+  /**
+   * The size of the component.
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   */
+  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var TextField$1 = TextField;
+
+const SUBMIT_FILTER_STROKE_TIME = 500;
+const InputNumberInterval = props => {
+  var _item$value;
+  const {
+    item,
+    applyValue,
+    focusElementRef = null
+  } = props;
+  const filterTimeout = React.useRef();
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
+  const [applying, setIsApplying] = React.useState(false);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(filterTimeout.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    var _item$value2;
+    const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
+    setFilterValueState(itemValue);
+  }, [item.value]);
+  const updateFilterValue = (lowerBound, upperBound) => {
+    clearTimeout(filterTimeout.current);
+    setFilterValueState([lowerBound, upperBound]);
+    setIsApplying(true);
+    filterTimeout.current = setTimeout(() => {
+      setIsApplying(false);
+      applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
+        value: [lowerBound, upperBound]
+      }));
+    }, SUBMIT_FILTER_STROKE_TIME);
+  };
+  const handleUpperFilterChange = event => {
+    const newUpperBound = event.target.value;
+    updateFilterValue(filterValueState[0], newUpperBound);
+  };
+  const handleLowerFilterChange = event => {
+    const newLowerBound = event.target.value;
+    updateFilterValue(newLowerBound, filterValueState[1]);
+  };
+  return /*#__PURE__*/React.createElement(Box$1, {
+    sx: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'end',
+      height: 48,
+      pl: '20px'
+    }
+  }, /*#__PURE__*/React.createElement(TextField$1, {
+    name: "lower-bound-input",
+    placeholder: "From",
+    label: "From",
+    variant: "standard",
+    value: Number(filterValueState[0]),
+    onChange: handleLowerFilterChange,
+    type: "number",
+    inputRef: focusElementRef,
+    sx: {
+      mr: 2
+    }
+  }), /*#__PURE__*/React.createElement(TextField$1, {
+    name: "upper-bound-input",
+    placeholder: "To",
+    label: "To",
+    variant: "standard",
+    value: Number(filterValueState[1]),
+    onChange: handleUpperFilterChange,
+    type: "number",
+    InputProps: applying ? {
+      endAdornment: /*#__PURE__*/React.createElement(Icon, {
+        icon: mdiSync
+      })
+    } : {}
+  }));
+};
+
+const isBetweenOperator = {
+  label: 'is between',
+  value: 'isBetween',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
+      return null;
+    }
+    if (filterItem.value[0] == null || filterItem.value[1] == null) {
+      return null;
+    }
+    if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
+      return null;
+    }
+    return params => {
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+    };
+  },
+  InputComponent: InputNumberInterval
+};
+const IS_BETWEEN = isBetweenOperator;
+
+const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
+
+const doesNotContain = {
+  label: 'does not contain',
+  value: 'doesNotContain',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (String(params.value).indexOf(filterItem.value) !== -1) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_CONTAIN = doesNotContain;
+
+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 (String(params.value) === filterItem.value) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_EQUAL = doesNotEqual;
+
+const doesNotHaveOperator = {
+  label: "doesn't have",
+  value: 'doesNotHave',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return !cellValues.map(value => String(value)).includes(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_HAVE = doesNotHaveOperator;
+const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const hasOperator = {
+  label: 'has',
+  value: 'has',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return cellValues.map(value => String(value)).includes(filterItem.value);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS = hasOperator;
+const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const hasOnlyOperator = {
+  label: 'has only',
+  value: 'hasOnly',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS_ONLY = hasOnlyOperator;
+const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isOperator = {
+  label: 'is',
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (Array.isArray(params.value)) {
+        return false;
+      }
+      return String(params.value) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS = isOperator;
+const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isNotOperator = {
+  label: 'is not',
+  value: 'isNot',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (Array.isArray(params.value)) {
+        return true;
+      }
+      return String(params.value) !== filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS_NOT = isNotOperator;
+const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const containsAnyOfOperator = {
+  label: 'contains any of',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).indexOf(filteredValue) !== -1) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const containsAnyOfCIOperator = {
+  label: 'contains any of (case insensitive)',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        if (paramValuesLower.indexOf(filteredValue.toLowerCase()) !== -1) {
+          match = true;
+        }
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const CONTAINS_ANY_OF = containsAnyOfOperator;
+const CONTAINS_ANY_OF_I = containsAnyOfCIOperator;
+
+const endsWithAnyOfOperator = {
+  label: 'ends with any of',
+  value: 'endsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).endsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
+
+const isAnyOfOperator = {
+  label: 'is any of',
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return true;
+        }
+      }
+      return false;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_ANY_OF = isAnyOfOperator;
+const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const hasAnyOfOperator = {
+  label: 'has any of',
+  value: 'hasAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const HAS_ANY_OF = hasAnyOfOperator;
+const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const isNotAnyOfOperator = {
+  label: 'is not any of',
+  value: 'isNotAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return false;
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_NOT_ANY_OF = isNotAnyOfOperator;
+const IS_NOT_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const startsWithAnyOfOperator = {
+  label: 'starts with any of',
+  value: 'startsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return params => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).startsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
+
+const doesNotHaveAnyOf = {
+  label: "doesn't have any of",
+  value: 'doesNotHaveAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
+      return null;
+    }
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+
+      // Return true only if none of the filter values are in the cell values
+      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
+const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
+const getGridStringArrayOperatorsWithSelect = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF];
+const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
+
+const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...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(),
+  rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
+  rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
+  rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT],
+  rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
+  // Custom types
+  rsStringArray: getGridStringArrayOperators()
+};
+
+const PAGINATION_MODEL_KEY = 'paginationModel';
+const FILTER_MODEL_KEY = 'filterModel';
+const SORT_MODEL_KEY = 'sortModel';
+const VISIBILITY_MODEL_KEY = 'visibilityModel';
+const PINNED_COLUMNS = 'pinnedColumns';
+const DIMENSION_MODEL_KEY = 'dimension';
+const FILTER_SEARCH_KEY = 'searchModel';
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS];
+const buildStorageKey = _ref => {
+  let {
+    id,
+    version,
+    category
+  } = _ref;
+  return `${id}:${version}:${category}`;
+};
+const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
+  for (const version of previousLocalStorageVersions) {
+    const keysToDelete = [buildStorageKey({
+      id,
+      version,
+      category: PAGINATION_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: SORT_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: VISIBILITY_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: PINNED_COLUMNS
+    }), buildStorageKey({
+      id,
+      version,
+      category: FILTER_SEARCH_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: DIMENSION_MODEL_KEY
+    })];
+    for (const keyToDelete of keysToDelete) {
+      try {
+        window.localStorage.removeItem(keyToDelete);
+      } catch (e) {
+        // Ignore
+      }
+    }
+  }
+};
+
+// reference value: https://www.w3schools.com/tags/ref_urlencode.ASP
+const DECODER = {
+  '%20': ' ',
+  '%26': '&',
+  '%3D': '=',
+  '%3F': '?',
+  '%5B': '[',
+  '%5D': ']',
+  '%2C': ',',
+  '%3C': '<',
+  '%3E': '>',
+  '%21': '!',
+  '%22': '"'
+};
+const ENCODER = {
+  ' ': '%20',
+  '&': '%26',
+  '=': '%3D',
+  '?': '%3F',
+  '[': '%5B',
+  ']': '%5D',
+  ',': '%2C',
+  '<': '%3C',
+  '>': '%3E',
+  '!': '%21',
+  '"': '%22'
+};
+const decodeValue = value => {
+  if (value === '') {
+    return '';
+  }
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}|${curr}`), 'g');
+  // decodeValue for lists:
+  if (value.startsWith('list[')) {
+    const arrayValues = value.split('[')[1].split(']')[0];
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
+    return arrayList.length > 0 ? arrayList : [];
+  }
+  return value.replace(re, encoded => DECODER[encoded]);
+};
+const encodeValue = value => {
+  if (!value) {
+    return '';
+  }
+
+  // Array encoding for value:
+  // we are representing it as list[encoded], where encoded is the list comma separated
+  if (Array.isArray(value)) {
+    const encodedArray = value.map(entry => {
+      return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+    }).join(',');
+    return `list[${encodedArray}]`;
+  }
+
+  // we might also pass integers
+  const castedValue = String(value);
+  return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+};
+const urlSearchParamsToString = searchParams => {
+  let searchString = '';
+  for (const [key, value] of searchParams) {
+    searchString = searchString + `${key}=${value}&`;
+  }
+  return searchString.slice(0, searchString.length - 1);
+};
+const numberOperatorEncoder = {
+  '=': 'eq',
+  '!=': 'ne',
+  '>': 'gt',
+  '>=': 'gte',
+  '<': 'lt',
+  '<=': 'lte'
+};
+const numberOperatorDecoder = {
+  eq: '=',
+  ne: '!=',
+  gt: '>',
+  gte: '>=',
+  lt: '<',
+  lte: '<='
+};
+const isOperatorValueValid = (field, operator, columns) => {
+  const column = columns.find(column => column.field === field);
+  if (!column) {
+    return false;
+  }
+  const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+  const operators = column.filterOperators || operatorList[columnType];
+  if (!operators) {
+    return false;
+  }
+  return !!operators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operator : op.value === operator);
+};
+const listOperators = ['containsAnyOf', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf'];
+
+// Check if the value doesn't break
+const isValueValid = (value, field, columns, operator) => {
+  var _column$type;
+  // every field accepts undefined as value for default
+  if (value === undefined || value === '') {
+    return true;
+  }
+
+  // xxxAnyOf accepts as value only lists, and we are declaring them in the
+  // URL as `list=[...]`
+  if (listOperators.includes(operator)) {
+    return Array.isArray(value) || value === '';
+  }
+
+  // We are accepting arrays only if they are of the 'xxxAnyOf' type
+  if (Array.isArray(value) && !listOperators.includes(operator)) {
+    return false;
+  }
+  const column = columns.find(column => column.field === field);
+  if (!column) {
+    return false;
+  }
+  const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
+
+  // Only date and rating fail with 500s, other set themselves as undefined
+  if (type !== 'date' && type !== 'rating') {
+    return true;
+  }
+
+  // just checking that rating is a number.
+  if (type === 'rating') {
+    return !isNaN(Number(value));
+  }
+
+  // format: YYYY-MM-DD
+  // just verifying that the 3 values are numbers to avoid 500s,
+  // If the value is invalid the form will appear as undefined
+  if (type === 'date') {
+    const dateSplitted = value.split('-');
+    if (dateSplitted.length !== 3) {
+      return false;
+    }
+    const [YYYY, MM, DD] = dateSplitted;
+    return !isNaN(parseInt(YYYY)) && !isNaN(parseInt(MM)) && !isNaN(parseInt(DD));
+  }
+  return false;
+};
+
+/** FILTERS */
+
+// example:
+// unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
+const getFilterModelFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  let logicOperator = GridLogicOperator.And;
+  let quickFilterValues = [];
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(searchString)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues'].includes(key)) {
+      searchParams.set(key, value);
+    }
+    if (key === '_logicOperator') {
+      logicOperator = value === GridLogicOperator.And || value === GridLogicOperator.Or ? value : GridLogicOperator.And;
+    }
+    if (key === '_quickFilterValues') {
+      try {
+        quickFilterValues = JSON.parse(decodeURIComponent(value));
+      } catch {
+        quickFilterValues = [];
+      }
+    }
+  }
+  let id = 5000;
+  const fields = columns.map(column => column.field);
+  let isInvalid = false;
+  const items = [];
+  searchParams.forEach((value, key) => {
+    var _columns$find;
+    if (isInvalid) {
+      return;
+    }
+    const field = key.split('[')[0].slice(1);
+    if (!fields.includes(field)) {
+      return;
+    }
+    const columnType = (_columns$find = columns.find(column => column.field === field)) === null || _columns$find === void 0 ? void 0 : _columns$find.type;
+    const left = key.split(']')[0];
+    if (left.split('[').length < 2) {
+      isInvalid = true;
+      return;
+    }
+    const splitRight = key.split('[')[1].split(']')[0].split(',');
+    const type = splitRight[1];
+    if (type !== columnType) {
+      isInvalid = true;
+      return;
+    }
+    const operator = splitRight[0];
+    if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
+      isInvalid = true;
+      return;
+    }
+    id += 1;
+    const decodedValue = decodeValue(value);
+    if (!isValueValid(decodedValue, field, columns, operator)) {
+      isInvalid = true;
+      return;
+    }
+    items.push({
+      field,
+      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      id,
+      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
+      type
+    });
+  });
+  if (isInvalid) {
+    return 'invalid';
+  }
+  return {
+    items,
+    logicOperator,
+    quickFilterValues
+  };
+};
+const getSearchParamsFromFilterModel = filterModel => {
+  var _filterModel$quickFil;
+  const searchParams = new URLSearchParams();
+  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
+  filterModel['items'].forEach(item => {
+    const {
+      field,
+      operator,
+      value,
+      type
+    } = item;
+    if (Object.keys(numberOperatorEncoder).includes(operator)) {
+      searchParams.set(`_${field}[${numberOperatorEncoder[operator]},${encodeValue(type)}]`, encodeValue(value));
+    } else {
+      searchParams.set(`_${field}[${encodeValue(operator)},${encodeValue(type)}]`, encodeValue(value));
+    }
+  });
+  if ((_filterModel$quickFil = filterModel.quickFilterValues) !== null && _filterModel$quickFil !== void 0 && _filterModel$quickFil.length) {
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty FilterModel
+const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion) => {
+  const defaultValue = initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
+    items: [],
+    logicOperator: GridLogicOperator.And
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
+  const filterModelFromSearch = getFilterModelFromString(search, columns);
+  if (filterModelFromSearch !== 'invalid') {
+    const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
+    const searchString = urlSearchParamsToString(searchFromFilterModel);
+    if (searchString !== localStorageFilters) {
+      setLocalStorageFilters(searchString);
+    }
+    return filterModelFromSearch;
+  }
+  const filterModelFromLocalStorage = getFilterModelFromString(localStorageFilters, columns);
+  if (filterModelFromLocalStorage !== 'invalid') {
+    return filterModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** SORT */
+
+const getSortingFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_sortColumn');
+  if (value === '' || value === null || value === '[]') {
+    return [];
+  }
+  const fields = columns.map(column => column.field);
+  const [column, order] = value.slice(1, value.length - 1).split(',');
+  if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+    return [{
+      field: column,
+      sort: order
+    }];
+  }
+  return 'invalid';
+};
+const getSearchParamsFromSorting = sorting => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)},${encodeValue(sorting[0].sort)}]` : '[]');
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty SortModel
+const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion) => {
+  var _initialState$sorting;
+  const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+  if (isNewVersion) {
+    return defaultValue;
+  }
+  const sorting = getSortingFromString(search, columns);
+  if (sorting !== 'invalid') {
+    const searchFromSortModel = getSearchParamsFromSorting(sorting);
+    const searchString = urlSearchParamsToString(searchFromSortModel);
+    if (searchString !== localStorageSorting) {
+      setLocalStorageSorting(searchString);
+    }
+    return sorting;
+  }
+  const sortModelFromLocalStorage = getSortingFromString(localStorageSorting, columns);
+  if (sortModelFromLocalStorage !== 'invalid') {
+    return sortModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** PAGINATION */
+
+const getPaginationFromString = searchString => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_pagination');
+  if (value === '' || value === null || value === '[]') {
+    return 'invalid';
+  }
+  const pagination = value.slice(1, value.length - 1).split(',');
+  const page = parseFloat(pagination[0]);
+  const pageSize = parseFloat(pagination[1]);
+  const direction = pagination[2];
+  if (!Number.isNaN(page) && !Number.isNaN(pageSize) && direction && ['next', 'back'].includes(direction)) {
+    return {
+      page,
+      pageSize,
+      direction: direction
+    };
+  }
+  return 'invalid';
+};
+const getSearchParamsFromPagination = pagination => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_pagination', `[${pagination.page},${pagination.pageSize},${pagination.direction}]`);
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty PaginationModel
+const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pagination ? _objectSpread2({
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  }, initialState.pagination) : {
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
+  const pagination = getPaginationFromString(search);
+  if (pagination !== 'invalid') {
+    const searchFromPaginationModel = getSearchParamsFromPagination(pagination);
+    const searchString = urlSearchParamsToString(searchFromPaginationModel);
+    if (searchString !== localStoragePagination) {
+      setLocalStoragePagination(searchString);
+    }
+    return pagination;
+  }
+  const paginationModelFromLocalStorage = getPaginationFromString(localStoragePagination);
+  if (paginationModelFromLocalStorage !== 'invalid') {
+    return paginationModelFromLocalStorage;
+  }
+  return defaultValue;
+};
+
+/** COLUMN VISIBILITY */
+
+const getColumnVisibilityFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_columnVisibility');
+  if (value === '' || value === null || value === '[]') {
+    return 'invalid';
+  }
+  const parsedFields = value.slice(1, value.length - 1).split(',');
+  const fields = columns.map(column => column.field);
+  const visibility = {};
+  for (const field of fields) {
+    visibility[field] = false;
+  }
+  for (const parsedField of parsedFields) {
+    if (fields.includes(parsedField)) {
+      visibility[parsedField] = true;
+    }
+  }
+  if (Object.values(visibility).filter(v => v === true).length === 0) {
+    return 'invalid';
+  }
+  return visibility;
+};
+const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
+  const searchParams = new URLSearchParams();
+  const fields = columns.map(column => column.field);
+
+  // if column visibility model is empty, show all columns
+  if (Object.keys(columnVisibility).length == 0) {
+    searchParams.set('_columnVisibility', `[${fields.join(',')}]`);
+    return searchParams;
+  }
+  const finalColumnVisibility = columns.filter(c => {
+    var _c$hideable;
+    return !((_c$hideable = c === null || c === void 0 ? void 0 : c.hideable) !== null && _c$hideable !== void 0 ? _c$hideable : true);
+  }).map(c => c.field).reduce((acc, colName) => {
+    return _objectSpread2(_objectSpread2({}, acc), {}, {
+      [colName]: true
+    });
+  }, columnVisibility);
+  const visibleColumns = fields.filter(column => finalColumnVisibility[column] !== false);
+  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
+// NOTE: the `defaultHidden` is a custom field and not standard DataGrid
+// The reason is the following bug: https://github.com/mui/mui-x/issues/8407
+const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion) => {
+  var _initialState$columns3;
+  const defaultValue = {};
+  for (const column of columns) {
+    var _initialState$columns, _initialState$columns2;
+    const field = column.field;
+    if ((initialState === null || initialState === void 0 ? void 0 : (_initialState$columns = initialState.columns) === null || _initialState$columns === void 0 ? void 0 : (_initialState$columns2 = _initialState$columns.columnVisibilityModel) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2[field]) !== undefined) {
+      defaultValue[field] = initialState.columns.columnVisibilityModel[field];
+    } else {
+      defaultValue[field] = column.defaultHidden !== true; // undefined will be true
+    }
+  }
+
+  if (isNewVersion) {
+    return defaultValue;
+  }
+  const columnVisibility = getColumnVisibilityFromString(search, columns);
+  if (columnVisibility !== 'invalid') {
+    const searchColumnVisibility = getSearchParamsFromColumnVisibility(columnVisibility, columns);
+    if (searchColumnVisibility.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchColumnVisibility.toString());
+    }
+    return columnVisibility;
+  }
+  const columnVisibilityFromLocalStorage = getColumnVisibilityFromString(localStorageColumnsVisibility, columns);
+  if (columnVisibilityFromLocalStorage !== 'invalid') {
+    return columnVisibilityFromLocalStorage;
+  }
+  if (initialState !== null && initialState !== void 0 && (_initialState$columns3 = initialState.columns) !== null && _initialState$columns3 !== void 0 && _initialState$columns3.columnVisibilityModel) {
+    return initialState.columns.columnVisibilityModel;
+  }
+  return defaultValue;
+};
+const getPinnedColumnsFromString = (notParsed, tableColumns) => {
+  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
+    return 'invalid';
+  }
+  // remove the initial ? if present
+  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
+  const pinnedColumns = {};
+  for (const item of parsed.split('&')) {
+    const fieldURL = item.split('=')[0];
+    if (fieldURL !== '_pinnedColumnsLeft' && fieldURL !== '_pinnedColumnsRight') {
+      continue;
+    }
+    const left = item.split(']')[0];
+    if (left.split('[').length < 2) {
+      continue;
+    }
+    const encodedValues = item.split('[')[1].split(']')[0];
+    if (typeof encodedValues !== 'string') {
+      continue;
+    }
+    const fields = [...tableColumns.map(column => column.field), '__check__'];
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
+    if (fieldURL === '_pinnedColumnsLeft') {
+      pinnedColumns['left'] = columns;
+    }
+    if (fieldURL === '_pinnedColumnsRight') {
+      pinnedColumns['right'] = columns;
+    }
+  }
+  return pinnedColumns.left && pinnedColumns.left.length > 0 || pinnedColumns.right && pinnedColumns.right.length > 0 ? {
+    left: pinnedColumns.left || [],
+    right: pinnedColumns.right || []
+  } : 'invalid';
+};
+const getSearchParamsFromPinnedColumns = pinnedColumns => {
+  var _pinnedColumns$left, _pinnedColumns$right;
+  const searchParams = new URLSearchParams();
+  const pinnedColumnLeft = ((_pinnedColumns$left = pinnedColumns.left) === null || _pinnedColumns$left === void 0 ? void 0 : _pinnedColumns$left.map(val => encodeValue(val))) || [];
+  const pinnedColumnRight = ((_pinnedColumns$right = pinnedColumns.right) === null || _pinnedColumns$right === void 0 ? void 0 : _pinnedColumns$right.map(val => encodeValue(val))) || [];
+  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join(',')}]`);
+  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join(',')}]`);
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty ColumnVisibilityModel (which is all columns)
+const getPinnedColumns = (search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion) => {
+  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pinnedColumns ? {
+    left: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['left']) || [],
+    right: (initialState === null || initialState === void 0 ? void 0 : initialState.pinnedColumns['right']) || []
+  } : {
+    left: [],
+    right: []
+  };
+  if (isNewVersion) {
+    return defaultValue;
+  }
+  const pinnedColumns = getPinnedColumnsFromString(search, columns);
+  if (pinnedColumns !== 'invalid') {
+    const searchPinnedColumns = getSearchParamsFromPinnedColumns(pinnedColumns);
+    if (searchPinnedColumns.toString() !== localStoragePinnedColumns) {
+      setLocalStoragePinnedColumns(searchPinnedColumns.toString());
+    }
+    return pinnedColumns;
+  }
+  const pinnedColumnsFromLocalStorage = getPinnedColumnsFromString(localStoragePinnedColumns, columns);
+  if (pinnedColumnsFromLocalStorage !== 'invalid') {
+    return pinnedColumnsFromLocalStorage;
+  }
+  return defaultValue;
+};
+const getSearchParamsFromTab = search => {
+  const searchParams = new URLSearchParams();
+  const openTab = new URLSearchParams(search).get('tab');
+  if (openTab) {
+    searchParams.set('tab', openTab);
+  }
+  return searchParams;
+};
+const getFinalSearch = _ref => {
+  let {
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  } = _ref;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const tabSearch = getSearchParamsFromTab(search);
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of new URLSearchParams(search)) {
+    if (!key.startsWith('_')) {
+      searchParams.set(key, value);
+    }
+  }
+  searchParams.set('v', `${localStorageVersion}`);
+
+  // Add quickFilterValues explicitly if present in filterModel
+  if (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0) {
+    // Encode array as JSON string to preserve all values in one param
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
+};
+/** Return the state of the table given the URL and the local storage state */
+const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, historyReplace, initialState, localStorage) => {
+  const currentVersion = new URLSearchParams(search).get('v');
+  const isNewVersion = !currentVersion || Number(currentVersion) !== localStorageVersion;
+  const {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting,
+    setLocalStorageSorting,
+    localStoragePagination,
+    setLocalStoragePagination,
+    localStorageColumnsVisibility,
+    setLocalStorageColumnsVisibility,
+    localStoragePinnedColumns,
+    setLocalStoragePinnedColumns
+  } = localStorage;
+  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
+  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
+  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
+  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
+  const finalSearch = getFinalSearch({
+    localStorageVersion,
+    search,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel: columnVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(finalSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+  return {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnVisibilityModel,
+    pinnedColumnsModel
+  };
+};
+const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
+  let {
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsModel: columnsVisibilityModel,
+    pinnedColumnsModel
+  } = _ref2;
+  const newSearch = getFinalSearch({
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    columns
+  });
+  const searchString = urlSearchParamsToString(newSearch);
+  if (searchString !== search) {
+    historyReplace(searchString);
+  }
+};
+
+// Note: this is a comparator to sort the filters, not pure comparison
+// do not use it for equivalence (e.g. with value `3` and undefined we
+// will get 0).
+const compareFilters = (firstFilter, secondFilter) => {
+  if (firstFilter.field < secondFilter.field) {
+    return -1;
+  } else if (firstFilter.field > secondFilter.field) {
+    return 1;
+  }
+  if (firstFilter.operator === undefined || secondFilter.operator === undefined) {
+    return 0;
+  }
+  if (firstFilter.operator < secondFilter.operator) {
+    return -1;
+  } else if (firstFilter.operator > secondFilter.operator) {
+    return 1;
+  }
+  if (firstFilter.value < secondFilter.value) {
+    return -1;
+  } else if (firstFilter.value > secondFilter.value) {
+    return 1;
+  }
+  return 0;
+};
+const areFiltersEquivalent = (firstFilter, secondFilter) => {
+  return firstFilter.field === secondFilter.field && firstFilter.operator === secondFilter.operator && firstFilter.value === secondFilter.value;
+};
+const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
+  const {
+    items,
+    logicOperator
+  } = filterModel;
+  const {
+    items: itemsToMatch,
+    logicOperator: logicOperatorToMatch
+  } = filterModelToMatch;
+  if (logicOperator !== logicOperatorToMatch) {
+    return false;
+  }
+  if (items.length !== itemsToMatch.length) {
+    return false;
+  }
+  items.sort(compareFilters);
+  itemsToMatch.sort(compareFilters);
+  for (let i = 0; i < items.length; i++) {
+    const filter = items[i];
+    const filterToCompare = itemsToMatch[i];
+
+    // compareFilters return 0 if and only if the filters have the same
+    // field, operator, and value
+    if (!areFiltersEquivalent(filter, filterToCompare)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+// Get and Set data from LocalStorage WITHOUT useState
+const useFetchState = (defaultValue, key) => {
+  let stickyValue = null;
+  try {
+    stickyValue = window.localStorage.getItem(key);
+  } catch (e) {
+    console.error('StatefulDataGrid: error getting item from local storage: ', e);
+  }
+  const parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
+  const updateValue = useCallback(value => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('StatefulDataGrid: error setting item into local storage: ', e);
+    }
+  }, [key]);
+  return [parsedValue, updateValue];
+};
+
+// import useLocalStorage from './useLocalStorage';
+
+const useTableStates = (id, version) => {
+  const [paginationModel, setPaginationModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: PAGINATION_MODEL_KEY
+  }));
+  const [sortModel, setSortModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: SORT_MODEL_KEY
+  }));
+  const [localStorageFilters, setLocalStorageFilters] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: FILTER_SEARCH_KEY
+  }));
+  const [visibilityModelLocalStorage, setVisibilityModelLocalStorage] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: VISIBILITY_MODEL_KEY
+  }));
+  const [pinnedColumns, setPinnedColumns] = useFetchState('_pinnedColumnsLeft=[]&_pinnedColumnsRight=[]', buildStorageKey({
+    id,
+    version,
+    category: PINNED_COLUMNS
+  }));
+  const [dimensionModel, setDimensionModel] = useFetchState({}, buildStorageKey({
+    id,
+    version,
+    category: DIMENSION_MODEL_KEY
+  }));
+  return {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  };
+};
+
+const useStatefulTable = props => {
+  const {
+    // density = 'standard',
+    apiRef,
+    initialState,
+    columns: propsColumns,
+    onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: propsOnFilterModelChange,
+    onPaginationModelChange: propsOnPaginationModelChange,
+    onPinnedColumnsChange: propsOnPinnedColumnsChange,
+    onSortModelChange: propsOnSortModelChange,
+    useRouter,
+    localStorageVersion = 1,
+    previousLocalStorageVersions = []
+  } = props;
+  const {
+    search,
+    pathname,
+    historyReplace
+  } = useRouter();
+  const id = pathname;
+
+  // States and setters persisted in the local storage for this table
+  const {
+    paginationModel,
+    setPaginationModel,
+    sortModel,
+    setSortModel,
+    localStorageFilters,
+    setLocalStorageFilters,
+    visibilityModelLocalStorage,
+    setVisibilityModelLocalStorage,
+    pinnedColumns,
+    setPinnedColumns,
+    dimensionModel,
+    setDimensionModel
+  } = useTableStates(id, localStorageVersion);
+
+  // clearing up old version keys, triggering only on first render
+  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
+  const onColumnDimensionChange = useCallback(_ref => {
+    let {
+      newWidth,
+      field
+    } = _ref;
+    setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
+      [field]: newWidth
+    }));
+  }, [dimensionModel, setDimensionModel]);
+  const {
+    filterModel: filterParsed,
+    sortModel: sortModelParsed,
+    paginationModel: paginationModelParsed,
+    columnVisibilityModel: visibilityModel,
+    pinnedColumnsModel
+  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
+    localStorageFilters,
+    setLocalStorageFilters,
+    localStorageSorting: sortModel,
+    setLocalStorageSorting: setSortModel,
+    localStoragePagination: paginationModel,
+    setLocalStoragePagination: setPaginationModel,
+    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]);
+  /** Add resetPage method to apiRef. */
+  apiRef.current.resetPage = () => {
+    apiRef.current.setPage(0);
+  };
+  return {
+    apiRef,
+    columns,
+    onFilterModelChange: (model, details) => {
+      const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        items: model.items.map(item => {
+          const column = apiRef.current.getColumn(item.field);
+          item.type = column.type || 'string';
+          return item;
+        }),
+        quickFilterValues: model.quickFilterValues || []
+      });
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
+      updateUrl({
+        filterModel: filterModel,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    filterModel: filterParsed,
+    onSortModelChange: (model, details) => {
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: model,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    sortModel: sortModelParsed,
+    onPinnedColumnsChange: (pinnedColumns, details) => {
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    paginationModel: paginationModelParsed,
+    onPaginationModelChange: (model, details) => {
+      const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        direction: paginationModelParsed.page < model.page ? 'next' : 'back'
+      });
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModel,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, historyReplace, columns);
+    },
+    columnVisibilityModel: visibilityModel,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, localStorageVersion, 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 = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const COMPONENT_NAME = 'DataGrid';
+const CLASSNAME = 'redsift-datagrid';
+const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const datagridRef = ref || useRef();
+  const {
+      apiRef: propsApiRef,
+      autoHeight,
+      className,
+      columns,
+      slots,
+      slotProps,
+      filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
+      paginationModel: propsPaginationModel,
+      height: propsHeight,
+      hideToolbar,
+      initialState,
+      isRowSelectable,
+      license = process.env.MUI_LICENSE_KEY,
+      localStorageVersion,
+      previousLocalStorageVersions,
+      onFilterModelChange: propsOnFilterModelChange,
+      rowSelectionModel: propsRowSelectionModel,
+      onColumnWidthChange: propsOnColumnWidthChange,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      onRowSelectionModelChange: propsOnRowSelectionModelChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
+      pagination,
+      paginationPlacement = 'both',
+      paginationProps,
+      rows,
+      pageSizeOptions,
+      sx,
+      theme: propsTheme,
+      useRouter,
+      paginationMode = 'client',
+      rowCount
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme$1(propsTheme);
+  const _apiRef = useGridApiRef();
+  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar;
+  LicenseInfo.setLicenseKey(license);
+  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+  const {
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange
+  } = useControlledDatagridState({
+    initialState,
+    pageSizeOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPaginationModel,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPaginationModelChange
+  });
+  const {
+    columnVisibilityModel,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPaginationModelChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    paginationModel,
+    pinnedColumns,
+    sortModel,
+    onColumnWidthChange
+  } = useStatefulTable({
+    apiRef: apiRef,
+    initialState,
+    columns,
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange,
+    useRouter: useRouter,
+    localStorageVersion,
+    previousLocalStorageVersions
+  });
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  useEffect(() => {
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  }, [propsRowSelectionModel]);
+  const onRowSelectionModelChange = (selectionModel, details) => {
+    if (propsOnRowSelectionModelChange) {
+      propsOnRowSelectionModelChange(selectionModel, details);
+    } else {
+      setRowSelectionModel(selectionModel);
+    }
+  };
+  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(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+    }
+  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
+  if (!Array.isArray(rows)) {
+    return null;
+  }
+  const muiTheme = useMemo(() => createTheme({
+    palette: {
+      mode: theme,
+      primary: {
+        main: RedsiftColorBlueN
+      },
+      background: {
+        default: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite,
+        paper: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite
+      }
+    }
+  }), [theme]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider$1, {
+    theme: muiTheme
+  }, /*#__PURE__*/React__default.createElement(StyledDataGrid, {
+    ref: datagridRef,
+    className: classNames(StatefulDataGrid.className, className),
+    $height: height
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$1({}, forwardedProps, {
+    apiRef: apiRef,
+    columns: columns,
+    columnVisibilityModel: columnVisibilityModel,
+    filterModel: filterModel,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onFilterModelChange: onFilterModelChange,
+    onPaginationModelChange: onPaginationModelChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    paginationModel: paginationModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
+    pageSizeOptions: pageSizeOptions,
+    onColumnWidthChange: onColumnWidthChange,
+    initialState: initialState,
+    isRowSelectable: isRowSelectable,
+    pagination: pagination,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
+    rowCount: rowCount,
+    autoHeight: autoHeight,
+    checkboxSelectionVisibleOnly: Boolean(pagination),
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "ColumnFilteredIcon"
+      })),
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "ColumnSelectorIcon"
+      })),
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "ColumnSortedAscendingIcon"
+      })),
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "ColumnSortedDescendingIcon"
+      })),
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "DensityCompactIcon"
+      })),
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "DensityStandardIcon"
+      })),
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "DensityComfortableIcon"
+      })),
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "DetailPanelCollapseIcon"
+      })),
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "DetailPanelExpandIcon"
+      })),
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
+        displayName: "ExportIcon"
+      })),
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
+        displayName: "OpenFilterButtonIcon"
+      }, props))
+    }, slots), {}, {
+      toolbar: ToolbarWrapper,
+      pagination: props => {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode,
+          rowCount: rowCount
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$1({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          apiRef: apiRef,
+          isRowSelectable: isRowSelectable,
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode
+        })) : null;
+      }
+    }),
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        paginationPlacement,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        paginationModel,
+        onPaginationModelChange,
+        pageSizeOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+    }),
+    rowSelectionModel: rowSelectionModel,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
+      if (pagination && paginationMode != 'server') {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+          let {
+            model
+          } = _ref;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref2 => {
+          let {
+            id
+          } = _ref2;
+          return id;
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
+          let {
+            model
+          } = _ref3;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref4 => {
+          let {
+            id
+          } = _ref4;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+        const numberOfSelectedRows = newSelectionModel.length;
+        if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+          setTimeout(() => {
+            apiRef.current.selectRows([], true, true);
+          }, 0);
+        }
+        if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'page',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'table',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows > 0) {
+          selectionStatus.current = {
+            type: 'other',
+            numberOfSelectedRows
+          };
+        } else {
+          selectionStatus.current = {
+            type: 'none',
+            numberOfSelectedRows
+          };
+        }
+      }
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
+    },
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
+  })))));
+});
+StatefulDataGrid.className = CLASSNAME;
+StatefulDataGrid.displayName = COMPONENT_NAME;
+
+export { getSearchParamsFromColumnVisibility as $, FILTER_SEARCH_KEY as A, CATEGORIES as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, FILTER_MODEL_KEY as F, buildStorageKey as G, HAS as H, IS_BETWEEN as I, clearPreviousVersionStorage as J, decodeValue as K, encodeValue as L, urlSearchParamsToString as M, numberOperatorEncoder as N, numberOperatorDecoder as O, PAGINATION_MODEL_KEY as P, isOperatorValueValid as Q, isValueValid as R, STARTS_WITH_ANY_OF as S, getFilterModelFromString as T, getSearchParamsFromFilterModel as U, VISIBILITY_MODEL_KEY as V, getSortingFromString as W, getSearchParamsFromSorting as X, getPaginationFromString as Y, getSearchParamsFromPagination as Z, getColumnVisibilityFromString as _, DOES_NOT_EQUAL as a, getPinnedColumnsFromString as a0, getSearchParamsFromPinnedColumns as a1, getSearchParamsFromTab as a2, getFinalSearch as a3, getModelsParsedOrUpdateLocalStorage as a4, updateUrl as a5, areFilterModelsEquivalent as a6, StatefulDataGrid as a7, DOES_NOT_HAVE as b, DOES_NOT_HAVE_WITH_SELECT as c, HAS_WITH_SELECT as d, HAS_ONLY as e, HAS_ONLY_WITH_SELECT as f, getGridNumericOperators as g, IS as h, IS_WITH_SELECT as i, IS_NOT as j, IS_NOT_WITH_SELECT as k, getGridStringOperators as l, CONTAINS_ANY_OF_I as m, IS_ANY_OF as n, operatorList as o, IS_ANY_OF_WITH_SELECT as p, HAS_ANY_OF as q, HAS_ANY_OF_WITH_SELECT as r, IS_NOT_ANY_OF as s, IS_NOT_ANY_OF_WITH_SELECT as t, getGridStringArrayOperators as u, getGridStringArrayOperatorsWithSelect as v, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as w, SORT_MODEL_KEY as x, PINNED_COLUMNS as y, DIMENSION_MODEL_KEY as z };
+//# sourceMappingURL=StatefulDataGrid2.js.map