@redsift/table 12.5.3-alpha.7 → 12.5.3-muiv6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,18 +1,1249 @@
1
- import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
1
+ import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$2 } from './_rollupPluginBabelHelpers.js';
2
2
  import * as React from 'react';
3
- import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
4
- import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
3
+ import React__default, { useCallback, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
5
4
  import classNames from 'classnames';
6
- import { LicenseInfo } from '@mui/x-license';
7
- import { Icon, useTheme, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
8
- import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPremium } from '@mui/x-data-grid-premium';
9
- import { u as useControlledDatagridState, S as StyledDataGrid } from './useControlledDatagridState.js';
10
- import Box from '@mui/material/Box';
11
- import TextField from '@mui/material/TextField';
5
+ import { Icon, useTheme as useTheme$1, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
6
+ import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
7
+ import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
12
8
  import { mdiSync } from '@redsift/icons';
9
+ import { s as styled, a as styleFunctionSx, e as extendSxProp, _ as _objectWithoutPropertiesLoose, b as _extends, g as generateUtilityClasses, c as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, d as generateUtilityClass, f as styled$1, h as _extends$1, u as useDefaultProps, i as _objectWithoutPropertiesLoose$1, j as capitalize, k as composeClasses, r as rootShouldForwardProp, l as refType } from './Portal.js';
10
+ import { u as useTheme, a as useFormControl, b as formControlState, c as clsx$1, i as isAdornedStart, d as isFilled, F as FormControlContext, e as useId, h as Select, I as Input, j as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
11
+ import { j as jsxRuntimeExports } from './jsx-runtime.js';
13
12
  import { decompressFromEncodedURIComponent, compressToEncodedURIComponent } from 'lz-string';
14
- import { n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, g as getSelectionCount, i as isRowSelected, S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
15
- import { B as BaseButton, a as BaseCheckbox, c as BaseIconButton, b as BaseIcon } from './BaseIconButton.js';
13
+ import { T as Toolbar } from './Toolbar2.js';
14
+ import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
15
+ import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
16
+
17
+ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
18
+
19
+ const _excluded$6 = ["className", "component"];
20
+ function createBox(options = {}) {
21
+ const {
22
+ themeId,
23
+ defaultTheme,
24
+ defaultClassName = 'MuiBox-root',
25
+ generateClassName
26
+ } = options;
27
+ const BoxRoot = styled('div', {
28
+ shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
29
+ })(styleFunctionSx);
30
+ const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
31
+ const theme = useTheme(defaultTheme);
32
+ const _extendSxProp = extendSxProp(inProps),
33
+ {
34
+ className,
35
+ component = 'div'
36
+ } = _extendSxProp,
37
+ other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
38
+ return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
39
+ as: component,
40
+ ref: ref,
41
+ className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
42
+ theme: themeId ? theme[themeId] || theme : theme
43
+ }, other));
44
+ });
45
+ return Box;
46
+ }
47
+
48
+ function isMuiElement(element, muiNames) {
49
+ var _muiName, _element$type;
50
+ return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
51
+ // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
52
+ // eslint-disable-next-line no-underscore-dangle
53
+ (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
54
+ }
55
+
56
+ const boxClasses = generateUtilityClasses('MuiBox', ['root']);
57
+ var boxClasses$1 = boxClasses;
58
+
59
+ const defaultTheme = createTheme();
60
+ const Box = createBox({
61
+ themeId: THEME_ID,
62
+ defaultTheme,
63
+ defaultClassName: boxClasses$1.root,
64
+ generateClassName: ClassNameGenerator.generate
65
+ });
66
+ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
67
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
68
+ // │ These PropTypes are generated from the TypeScript type definitions. │
69
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
70
+ // └─────────────────────────────────────────────────────────────────────┘
71
+ /**
72
+ * @ignore
73
+ */
74
+ children: PropTypes.node,
75
+ /**
76
+ * The component used for the root node.
77
+ * Either a string to use a HTML element or a component.
78
+ */
79
+ component: PropTypes.elementType,
80
+ /**
81
+ * The system prop that allows defining system overrides as well as additional CSS styles.
82
+ */
83
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
84
+ } : void 0;
85
+ var Box$1 = Box;
86
+
87
+ function getFormLabelUtilityClasses(slot) {
88
+ return generateUtilityClass('MuiFormLabel', slot);
89
+ }
90
+ const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
91
+ var formLabelClasses$1 = formLabelClasses;
92
+
93
+ const _excluded$5 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
94
+ const useUtilityClasses$4 = ownerState => {
95
+ const {
96
+ classes,
97
+ color,
98
+ focused,
99
+ disabled,
100
+ error,
101
+ filled,
102
+ required
103
+ } = ownerState;
104
+ const slots = {
105
+ root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
106
+ asterisk: ['asterisk', error && 'error']
107
+ };
108
+ return composeClasses(slots, getFormLabelUtilityClasses, classes);
109
+ };
110
+ const FormLabelRoot = styled$1('label', {
111
+ name: 'MuiFormLabel',
112
+ slot: 'Root',
113
+ overridesResolver: ({
114
+ ownerState
115
+ }, styles) => {
116
+ return _extends$1({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
117
+ }
118
+ })(({
119
+ theme,
120
+ ownerState
121
+ }) => _extends$1({
122
+ color: (theme.vars || theme).palette.text.secondary
123
+ }, theme.typography.body1, {
124
+ lineHeight: '1.4375em',
125
+ padding: 0,
126
+ position: 'relative',
127
+ [`&.${formLabelClasses$1.focused}`]: {
128
+ color: (theme.vars || theme).palette[ownerState.color].main
129
+ },
130
+ [`&.${formLabelClasses$1.disabled}`]: {
131
+ color: (theme.vars || theme).palette.text.disabled
132
+ },
133
+ [`&.${formLabelClasses$1.error}`]: {
134
+ color: (theme.vars || theme).palette.error.main
135
+ }
136
+ }));
137
+ const AsteriskComponent = styled$1('span', {
138
+ name: 'MuiFormLabel',
139
+ slot: 'Asterisk',
140
+ overridesResolver: (props, styles) => styles.asterisk
141
+ })(({
142
+ theme
143
+ }) => ({
144
+ [`&.${formLabelClasses$1.error}`]: {
145
+ color: (theme.vars || theme).palette.error.main
146
+ }
147
+ }));
148
+ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
149
+ const props = useDefaultProps({
150
+ props: inProps,
151
+ name: 'MuiFormLabel'
152
+ });
153
+ const {
154
+ children,
155
+ className,
156
+ component = 'label'
157
+ } = props,
158
+ other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
159
+ const muiFormControl = useFormControl();
160
+ const fcs = formControlState({
161
+ props,
162
+ muiFormControl,
163
+ states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
164
+ });
165
+ const ownerState = _extends$1({}, props, {
166
+ color: fcs.color || 'primary',
167
+ component,
168
+ disabled: fcs.disabled,
169
+ error: fcs.error,
170
+ filled: fcs.filled,
171
+ focused: fcs.focused,
172
+ required: fcs.required
173
+ });
174
+ const classes = useUtilityClasses$4(ownerState);
175
+ return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
176
+ as: component,
177
+ ownerState: ownerState,
178
+ className: clsx$1(classes.root, className),
179
+ ref: ref
180
+ }, other, {
181
+ children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
182
+ ownerState: ownerState,
183
+ "aria-hidden": true,
184
+ className: classes.asterisk,
185
+ children: ["\u2009", '*']
186
+ })]
187
+ }));
188
+ });
189
+ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
190
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
191
+ // │ These PropTypes are generated from the TypeScript type definitions. │
192
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
193
+ // └─────────────────────────────────────────────────────────────────────┘
194
+ /**
195
+ * The content of the component.
196
+ */
197
+ children: PropTypes.node,
198
+ /**
199
+ * Override or extend the styles applied to the component.
200
+ */
201
+ classes: PropTypes.object,
202
+ /**
203
+ * @ignore
204
+ */
205
+ className: PropTypes.string,
206
+ /**
207
+ * The color of the component.
208
+ * It supports both default and custom theme colors, which can be added as shown in the
209
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
210
+ */
211
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
212
+ /**
213
+ * The component used for the root node.
214
+ * Either a string to use a HTML element or a component.
215
+ */
216
+ component: PropTypes.elementType,
217
+ /**
218
+ * If `true`, the label should be displayed in a disabled state.
219
+ */
220
+ disabled: PropTypes.bool,
221
+ /**
222
+ * If `true`, the label is displayed in an error state.
223
+ */
224
+ error: PropTypes.bool,
225
+ /**
226
+ * If `true`, the label should use filled classes key.
227
+ */
228
+ filled: PropTypes.bool,
229
+ /**
230
+ * If `true`, the input of this label is focused (used by `FormGroup` components).
231
+ */
232
+ focused: PropTypes.bool,
233
+ /**
234
+ * If `true`, the label will indicate that the `input` is required.
235
+ */
236
+ required: PropTypes.bool,
237
+ /**
238
+ * The system prop that allows defining system overrides as well as additional CSS styles.
239
+ */
240
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
241
+ } : void 0;
242
+ var FormLabel$1 = FormLabel;
243
+
244
+ function getInputLabelUtilityClasses(slot) {
245
+ return generateUtilityClass('MuiInputLabel', slot);
246
+ }
247
+ generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
248
+
249
+ const _excluded$4 = ["disableAnimation", "margin", "shrink", "variant", "className"];
250
+ const useUtilityClasses$3 = ownerState => {
251
+ const {
252
+ classes,
253
+ formControl,
254
+ size,
255
+ shrink,
256
+ disableAnimation,
257
+ variant,
258
+ required
259
+ } = ownerState;
260
+ const slots = {
261
+ root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
262
+ asterisk: [required && 'asterisk']
263
+ };
264
+ const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
265
+ return _extends$1({}, classes, composedClasses);
266
+ };
267
+ const InputLabelRoot = styled$1(FormLabel$1, {
268
+ shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
269
+ name: 'MuiInputLabel',
270
+ slot: 'Root',
271
+ overridesResolver: (props, styles) => {
272
+ const {
273
+ ownerState
274
+ } = props;
275
+ return [{
276
+ [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
277
+ }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
278
+ }
279
+ })(({
280
+ theme,
281
+ ownerState
282
+ }) => _extends$1({
283
+ display: 'block',
284
+ transformOrigin: 'top left',
285
+ whiteSpace: 'nowrap',
286
+ overflow: 'hidden',
287
+ textOverflow: 'ellipsis',
288
+ maxWidth: '100%'
289
+ }, ownerState.formControl && {
290
+ position: 'absolute',
291
+ left: 0,
292
+ top: 0,
293
+ // slight alteration to spec spacing to match visual spec result
294
+ transform: 'translate(0, 20px) scale(1)'
295
+ }, ownerState.size === 'small' && {
296
+ // Compensation for the `Input.inputSizeSmall` style.
297
+ transform: 'translate(0, 17px) scale(1)'
298
+ }, ownerState.shrink && {
299
+ transform: 'translate(0, -1.5px) scale(0.75)',
300
+ transformOrigin: 'top left',
301
+ maxWidth: '133%'
302
+ }, !ownerState.disableAnimation && {
303
+ transition: theme.transitions.create(['color', 'transform', 'max-width'], {
304
+ duration: theme.transitions.duration.shorter,
305
+ easing: theme.transitions.easing.easeOut
306
+ })
307
+ }, ownerState.variant === 'filled' && _extends$1({
308
+ // Chrome's autofill feature gives the input field a yellow background.
309
+ // Since the input field is behind the label in the HTML tree,
310
+ // the input field is drawn last and hides the label with an opaque background color.
311
+ // zIndex: 1 will raise the label above opaque background-colors of input.
312
+ zIndex: 1,
313
+ pointerEvents: 'none',
314
+ transform: 'translate(12px, 16px) scale(1)',
315
+ maxWidth: 'calc(100% - 24px)'
316
+ }, ownerState.size === 'small' && {
317
+ transform: 'translate(12px, 13px) scale(1)'
318
+ }, ownerState.shrink && _extends$1({
319
+ userSelect: 'none',
320
+ pointerEvents: 'auto',
321
+ transform: 'translate(12px, 7px) scale(0.75)',
322
+ maxWidth: 'calc(133% - 24px)'
323
+ }, ownerState.size === 'small' && {
324
+ transform: 'translate(12px, 4px) scale(0.75)'
325
+ })), ownerState.variant === 'outlined' && _extends$1({
326
+ // see comment above on filled.zIndex
327
+ zIndex: 1,
328
+ pointerEvents: 'none',
329
+ transform: 'translate(14px, 16px) scale(1)',
330
+ maxWidth: 'calc(100% - 24px)'
331
+ }, ownerState.size === 'small' && {
332
+ transform: 'translate(14px, 9px) scale(1)'
333
+ }, ownerState.shrink && {
334
+ userSelect: 'none',
335
+ pointerEvents: 'auto',
336
+ // Theoretically, we should have (8+5)*2/0.75 = 34px
337
+ // but it feels a better when it bleeds a bit on the left, so 32px.
338
+ maxWidth: 'calc(133% - 32px)',
339
+ transform: 'translate(14px, -9px) scale(0.75)'
340
+ })));
341
+ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
342
+ const props = useDefaultProps({
343
+ name: 'MuiInputLabel',
344
+ props: inProps
345
+ });
346
+ const {
347
+ disableAnimation = false,
348
+ shrink: shrinkProp,
349
+ className
350
+ } = props,
351
+ other = _objectWithoutPropertiesLoose$1(props, _excluded$4);
352
+ const muiFormControl = useFormControl();
353
+ let shrink = shrinkProp;
354
+ if (typeof shrink === 'undefined' && muiFormControl) {
355
+ shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
356
+ }
357
+ const fcs = formControlState({
358
+ props,
359
+ muiFormControl,
360
+ states: ['size', 'variant', 'required', 'focused']
361
+ });
362
+ const ownerState = _extends$1({}, props, {
363
+ disableAnimation,
364
+ formControl: muiFormControl,
365
+ shrink,
366
+ size: fcs.size,
367
+ variant: fcs.variant,
368
+ required: fcs.required,
369
+ focused: fcs.focused
370
+ });
371
+ const classes = useUtilityClasses$3(ownerState);
372
+ return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
373
+ "data-shrink": shrink,
374
+ ownerState: ownerState,
375
+ ref: ref,
376
+ className: clsx$1(classes.root, className)
377
+ }, other, {
378
+ classes: classes
379
+ }));
380
+ });
381
+ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
382
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
383
+ // │ These PropTypes are generated from the TypeScript type definitions. │
384
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
385
+ // └─────────────────────────────────────────────────────────────────────┘
386
+ /**
387
+ * The content of the component.
388
+ */
389
+ children: PropTypes.node,
390
+ /**
391
+ * Override or extend the styles applied to the component.
392
+ */
393
+ classes: PropTypes.object,
394
+ /**
395
+ * @ignore
396
+ */
397
+ className: PropTypes.string,
398
+ /**
399
+ * The color of the component.
400
+ * It supports both default and custom theme colors, which can be added as shown in the
401
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
402
+ */
403
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
404
+ /**
405
+ * If `true`, the transition animation is disabled.
406
+ * @default false
407
+ */
408
+ disableAnimation: PropTypes.bool,
409
+ /**
410
+ * If `true`, the component is disabled.
411
+ */
412
+ disabled: PropTypes.bool,
413
+ /**
414
+ * If `true`, the label is displayed in an error state.
415
+ */
416
+ error: PropTypes.bool,
417
+ /**
418
+ * If `true`, the `input` of this label is focused.
419
+ */
420
+ focused: PropTypes.bool,
421
+ /**
422
+ * If `dense`, will adjust vertical spacing. This is normally obtained via context from
423
+ * FormControl.
424
+ */
425
+ margin: PropTypes.oneOf(['dense']),
426
+ /**
427
+ * if `true`, the label will indicate that the `input` is required.
428
+ */
429
+ required: PropTypes.bool,
430
+ /**
431
+ * If `true`, the label is shrunk.
432
+ */
433
+ shrink: PropTypes.bool,
434
+ /**
435
+ * The size of the component.
436
+ * @default 'normal'
437
+ */
438
+ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
439
+ /**
440
+ * The system prop that allows defining system overrides as well as additional CSS styles.
441
+ */
442
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
443
+ /**
444
+ * The variant to use.
445
+ */
446
+ variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
447
+ } : void 0;
448
+ var InputLabel$1 = InputLabel;
449
+
450
+ function getFormControlUtilityClasses(slot) {
451
+ return generateUtilityClass('MuiFormControl', slot);
452
+ }
453
+ generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
454
+
455
+ const _excluded$3 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
456
+ const useUtilityClasses$2 = ownerState => {
457
+ const {
458
+ classes,
459
+ margin,
460
+ fullWidth
461
+ } = ownerState;
462
+ const slots = {
463
+ root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
464
+ };
465
+ return composeClasses(slots, getFormControlUtilityClasses, classes);
466
+ };
467
+ const FormControlRoot = styled$1('div', {
468
+ name: 'MuiFormControl',
469
+ slot: 'Root',
470
+ overridesResolver: ({
471
+ ownerState
472
+ }, styles) => {
473
+ return _extends$1({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
474
+ }
475
+ })(({
476
+ ownerState
477
+ }) => _extends$1({
478
+ display: 'inline-flex',
479
+ flexDirection: 'column',
480
+ position: 'relative',
481
+ // Reset fieldset default style.
482
+ minWidth: 0,
483
+ padding: 0,
484
+ margin: 0,
485
+ border: 0,
486
+ verticalAlign: 'top'
487
+ }, ownerState.margin === 'normal' && {
488
+ marginTop: 16,
489
+ marginBottom: 8
490
+ }, ownerState.margin === 'dense' && {
491
+ marginTop: 8,
492
+ marginBottom: 4
493
+ }, ownerState.fullWidth && {
494
+ width: '100%'
495
+ }));
496
+
497
+ /**
498
+ * Provides context such as filled/focused/error/required for form inputs.
499
+ * Relying on the context provides high flexibility and ensures that the state always stays
500
+ * consistent across the children of the `FormControl`.
501
+ * This context is used by the following components:
502
+ *
503
+ * - FormLabel
504
+ * - FormHelperText
505
+ * - Input
506
+ * - InputLabel
507
+ *
508
+ * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
509
+ *
510
+ * ```jsx
511
+ * <FormControl>
512
+ * <InputLabel htmlFor="my-input">Email address</InputLabel>
513
+ * <Input id="my-input" aria-describedby="my-helper-text" />
514
+ * <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
515
+ * </FormControl>
516
+ * ```
517
+ *
518
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
519
+ * For instance, only one input can be focused at the same time, the state shouldn't be shared.
520
+ */
521
+ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
522
+ const props = useDefaultProps({
523
+ props: inProps,
524
+ name: 'MuiFormControl'
525
+ });
526
+ const {
527
+ children,
528
+ className,
529
+ color = 'primary',
530
+ component = 'div',
531
+ disabled = false,
532
+ error = false,
533
+ focused: visuallyFocused,
534
+ fullWidth = false,
535
+ hiddenLabel = false,
536
+ margin = 'none',
537
+ required = false,
538
+ size = 'medium',
539
+ variant = 'outlined'
540
+ } = props,
541
+ other = _objectWithoutPropertiesLoose$1(props, _excluded$3);
542
+ const ownerState = _extends$1({}, props, {
543
+ color,
544
+ component,
545
+ disabled,
546
+ error,
547
+ fullWidth,
548
+ hiddenLabel,
549
+ margin,
550
+ required,
551
+ size,
552
+ variant
553
+ });
554
+ const classes = useUtilityClasses$2(ownerState);
555
+ const [adornedStart, setAdornedStart] = React.useState(() => {
556
+ // We need to iterate through the children and find the Input in order
557
+ // to fully support server-side rendering.
558
+ let initialAdornedStart = false;
559
+ if (children) {
560
+ React.Children.forEach(children, child => {
561
+ if (!isMuiElement(child, ['Input', 'Select'])) {
562
+ return;
563
+ }
564
+ const input = isMuiElement(child, ['Select']) ? child.props.input : child;
565
+ if (input && isAdornedStart(input.props)) {
566
+ initialAdornedStart = true;
567
+ }
568
+ });
569
+ }
570
+ return initialAdornedStart;
571
+ });
572
+ const [filled, setFilled] = React.useState(() => {
573
+ // We need to iterate through the children and find the Input in order
574
+ // to fully support server-side rendering.
575
+ let initialFilled = false;
576
+ if (children) {
577
+ React.Children.forEach(children, child => {
578
+ if (!isMuiElement(child, ['Input', 'Select'])) {
579
+ return;
580
+ }
581
+ if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
582
+ initialFilled = true;
583
+ }
584
+ });
585
+ }
586
+ return initialFilled;
587
+ });
588
+ const [focusedState, setFocused] = React.useState(false);
589
+ if (disabled && focusedState) {
590
+ setFocused(false);
591
+ }
592
+ const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
593
+ let registerEffect;
594
+ if (process.env.NODE_ENV !== 'production') {
595
+ // eslint-disable-next-line react-hooks/rules-of-hooks
596
+ const registeredInput = React.useRef(false);
597
+ registerEffect = () => {
598
+ if (registeredInput.current) {
599
+ console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
600
+ }
601
+ registeredInput.current = true;
602
+ return () => {
603
+ registeredInput.current = false;
604
+ };
605
+ };
606
+ }
607
+ const childContext = React.useMemo(() => {
608
+ return {
609
+ adornedStart,
610
+ setAdornedStart,
611
+ color,
612
+ disabled,
613
+ error,
614
+ filled,
615
+ focused,
616
+ fullWidth,
617
+ hiddenLabel,
618
+ size,
619
+ onBlur: () => {
620
+ setFocused(false);
621
+ },
622
+ onEmpty: () => {
623
+ setFilled(false);
624
+ },
625
+ onFilled: () => {
626
+ setFilled(true);
627
+ },
628
+ onFocus: () => {
629
+ setFocused(true);
630
+ },
631
+ registerEffect,
632
+ required,
633
+ variant
634
+ };
635
+ }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
636
+ return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
637
+ value: childContext,
638
+ children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends$1({
639
+ as: component,
640
+ ownerState: ownerState,
641
+ className: clsx$1(classes.root, className),
642
+ ref: ref
643
+ }, other, {
644
+ children: children
645
+ }))
646
+ });
647
+ });
648
+ process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
649
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
650
+ // │ These PropTypes are generated from the TypeScript type definitions. │
651
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
652
+ // └─────────────────────────────────────────────────────────────────────┘
653
+ /**
654
+ * The content of the component.
655
+ */
656
+ children: PropTypes.node,
657
+ /**
658
+ * Override or extend the styles applied to the component.
659
+ */
660
+ classes: PropTypes.object,
661
+ /**
662
+ * @ignore
663
+ */
664
+ className: PropTypes.string,
665
+ /**
666
+ * The color of the component.
667
+ * It supports both default and custom theme colors, which can be added as shown in the
668
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
669
+ * @default 'primary'
670
+ */
671
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
672
+ /**
673
+ * The component used for the root node.
674
+ * Either a string to use a HTML element or a component.
675
+ */
676
+ component: PropTypes.elementType,
677
+ /**
678
+ * If `true`, the label, input and helper text should be displayed in a disabled state.
679
+ * @default false
680
+ */
681
+ disabled: PropTypes.bool,
682
+ /**
683
+ * If `true`, the label is displayed in an error state.
684
+ * @default false
685
+ */
686
+ error: PropTypes.bool,
687
+ /**
688
+ * If `true`, the component is displayed in focused state.
689
+ */
690
+ focused: PropTypes.bool,
691
+ /**
692
+ * If `true`, the component will take up the full width of its container.
693
+ * @default false
694
+ */
695
+ fullWidth: PropTypes.bool,
696
+ /**
697
+ * If `true`, the label is hidden.
698
+ * This is used to increase density for a `FilledInput`.
699
+ * Be sure to add `aria-label` to the `input` element.
700
+ * @default false
701
+ */
702
+ hiddenLabel: PropTypes.bool,
703
+ /**
704
+ * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
705
+ * @default 'none'
706
+ */
707
+ margin: PropTypes.oneOf(['dense', 'none', 'normal']),
708
+ /**
709
+ * If `true`, the label will indicate that the `input` is required.
710
+ * @default false
711
+ */
712
+ required: PropTypes.bool,
713
+ /**
714
+ * The size of the component.
715
+ * @default 'medium'
716
+ */
717
+ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
718
+ /**
719
+ * The system prop that allows defining system overrides as well as additional CSS styles.
720
+ */
721
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
722
+ /**
723
+ * The variant to use.
724
+ * @default 'outlined'
725
+ */
726
+ variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
727
+ } : void 0;
728
+ var FormControl$1 = FormControl;
729
+
730
+ function getFormHelperTextUtilityClasses(slot) {
731
+ return generateUtilityClass('MuiFormHelperText', slot);
732
+ }
733
+ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
734
+ var formHelperTextClasses$1 = formHelperTextClasses;
735
+
736
+ var _span;
737
+ const _excluded$2 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
738
+ const useUtilityClasses$1 = ownerState => {
739
+ const {
740
+ classes,
741
+ contained,
742
+ size,
743
+ disabled,
744
+ error,
745
+ filled,
746
+ focused,
747
+ required
748
+ } = ownerState;
749
+ const slots = {
750
+ root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
751
+ };
752
+ return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
753
+ };
754
+ const FormHelperTextRoot = styled$1('p', {
755
+ name: 'MuiFormHelperText',
756
+ slot: 'Root',
757
+ overridesResolver: (props, styles) => {
758
+ const {
759
+ ownerState
760
+ } = props;
761
+ return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
762
+ }
763
+ })(({
764
+ theme,
765
+ ownerState
766
+ }) => _extends$1({
767
+ color: (theme.vars || theme).palette.text.secondary
768
+ }, theme.typography.caption, {
769
+ textAlign: 'left',
770
+ marginTop: 3,
771
+ marginRight: 0,
772
+ marginBottom: 0,
773
+ marginLeft: 0,
774
+ [`&.${formHelperTextClasses$1.disabled}`]: {
775
+ color: (theme.vars || theme).palette.text.disabled
776
+ },
777
+ [`&.${formHelperTextClasses$1.error}`]: {
778
+ color: (theme.vars || theme).palette.error.main
779
+ }
780
+ }, ownerState.size === 'small' && {
781
+ marginTop: 4
782
+ }, ownerState.contained && {
783
+ marginLeft: 14,
784
+ marginRight: 14
785
+ }));
786
+ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
787
+ const props = useDefaultProps({
788
+ props: inProps,
789
+ name: 'MuiFormHelperText'
790
+ });
791
+ const {
792
+ children,
793
+ className,
794
+ component = 'p'
795
+ } = props,
796
+ other = _objectWithoutPropertiesLoose$1(props, _excluded$2);
797
+ const muiFormControl = useFormControl();
798
+ const fcs = formControlState({
799
+ props,
800
+ muiFormControl,
801
+ states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
802
+ });
803
+ const ownerState = _extends$1({}, props, {
804
+ component,
805
+ contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
806
+ variant: fcs.variant,
807
+ size: fcs.size,
808
+ disabled: fcs.disabled,
809
+ error: fcs.error,
810
+ filled: fcs.filled,
811
+ focused: fcs.focused,
812
+ required: fcs.required
813
+ });
814
+ const classes = useUtilityClasses$1(ownerState);
815
+ return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
816
+ as: component,
817
+ ownerState: ownerState,
818
+ className: clsx$1(classes.root, className),
819
+ ref: ref
820
+ }, other, {
821
+ children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
822
+ _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
823
+ className: "notranslate",
824
+ children: "\u200B"
825
+ })) : children
826
+ }));
827
+ });
828
+ process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
829
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
830
+ // │ These PropTypes are generated from the TypeScript type definitions. │
831
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
832
+ // └─────────────────────────────────────────────────────────────────────┘
833
+ /**
834
+ * The content of the component.
835
+ *
836
+ * If `' '` is provided, the component reserves one line height for displaying a future message.
837
+ */
838
+ children: PropTypes.node,
839
+ /**
840
+ * Override or extend the styles applied to the component.
841
+ */
842
+ classes: PropTypes.object,
843
+ /**
844
+ * @ignore
845
+ */
846
+ className: PropTypes.string,
847
+ /**
848
+ * The component used for the root node.
849
+ * Either a string to use a HTML element or a component.
850
+ */
851
+ component: PropTypes.elementType,
852
+ /**
853
+ * If `true`, the helper text should be displayed in a disabled state.
854
+ */
855
+ disabled: PropTypes.bool,
856
+ /**
857
+ * If `true`, helper text should be displayed in an error state.
858
+ */
859
+ error: PropTypes.bool,
860
+ /**
861
+ * If `true`, the helper text should use filled classes key.
862
+ */
863
+ filled: PropTypes.bool,
864
+ /**
865
+ * If `true`, the helper text should use focused classes key.
866
+ */
867
+ focused: PropTypes.bool,
868
+ /**
869
+ * If `dense`, will adjust vertical spacing. This is normally obtained via context from
870
+ * FormControl.
871
+ */
872
+ margin: PropTypes.oneOf(['dense']),
873
+ /**
874
+ * If `true`, the helper text should use required classes key.
875
+ */
876
+ required: PropTypes.bool,
877
+ /**
878
+ * The system prop that allows defining system overrides as well as additional CSS styles.
879
+ */
880
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
881
+ /**
882
+ * The variant to use.
883
+ */
884
+ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
885
+ } : void 0;
886
+ var FormHelperText$1 = FormHelperText;
887
+
888
+ function getTextFieldUtilityClass(slot) {
889
+ return generateUtilityClass('MuiTextField', slot);
890
+ }
891
+ generateUtilityClasses('MuiTextField', ['root']);
892
+
893
+ 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", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
894
+ const variantComponent = {
895
+ standard: Input,
896
+ filled: FilledInput,
897
+ outlined: OutlinedInput
898
+ };
899
+ const useUtilityClasses = ownerState => {
900
+ const {
901
+ classes
902
+ } = ownerState;
903
+ const slots = {
904
+ root: ['root']
905
+ };
906
+ return composeClasses(slots, getTextFieldUtilityClass, classes);
907
+ };
908
+ const TextFieldRoot = styled$1(FormControl$1, {
909
+ name: 'MuiTextField',
910
+ slot: 'Root',
911
+ overridesResolver: (props, styles) => styles.root
912
+ })({});
913
+
914
+ /**
915
+ * The `TextField` is a convenience wrapper for the most common cases (80%).
916
+ * It cannot be all things to all people, otherwise the API would grow out of control.
917
+ *
918
+ * ## Advanced Configuration
919
+ *
920
+ * It's important to understand that the text field is a simple abstraction
921
+ * on top of the following components:
922
+ *
923
+ * - [FormControl](/material-ui/api/form-control/)
924
+ * - [InputLabel](/material-ui/api/input-label/)
925
+ * - [FilledInput](/material-ui/api/filled-input/)
926
+ * - [OutlinedInput](/material-ui/api/outlined-input/)
927
+ * - [Input](/material-ui/api/input/)
928
+ * - [FormHelperText](/material-ui/api/form-helper-text/)
929
+ *
930
+ * If you wish to alter the props applied to the `input` element, you can do so as follows:
931
+ *
932
+ * ```jsx
933
+ * const inputProps = {
934
+ * step: 300,
935
+ * };
936
+ *
937
+ * return <TextField id="time" type="time" inputProps={inputProps} />;
938
+ * ```
939
+ *
940
+ * For advanced cases, please look at the source of TextField by clicking on the
941
+ * "Edit this page" button above. Consider either:
942
+ *
943
+ * - using the upper case props for passing values directly to the components
944
+ * - using the underlying components directly as shown in the demos
945
+ */
946
+ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
947
+ const props = useDefaultProps({
948
+ props: inProps,
949
+ name: 'MuiTextField'
950
+ });
951
+ const {
952
+ autoComplete,
953
+ autoFocus = false,
954
+ children,
955
+ className,
956
+ color = 'primary',
957
+ defaultValue,
958
+ disabled = false,
959
+ error = false,
960
+ FormHelperTextProps,
961
+ fullWidth = false,
962
+ helperText,
963
+ id: idOverride,
964
+ InputLabelProps,
965
+ inputProps,
966
+ InputProps,
967
+ inputRef,
968
+ label,
969
+ maxRows,
970
+ minRows,
971
+ multiline = false,
972
+ name,
973
+ onBlur,
974
+ onChange,
975
+ onFocus,
976
+ placeholder,
977
+ required = false,
978
+ rows,
979
+ select = false,
980
+ SelectProps,
981
+ type,
982
+ value,
983
+ variant = 'outlined'
984
+ } = props,
985
+ other = _objectWithoutPropertiesLoose$1(props, _excluded$1);
986
+ const ownerState = _extends$1({}, props, {
987
+ autoFocus,
988
+ color,
989
+ disabled,
990
+ error,
991
+ fullWidth,
992
+ multiline,
993
+ required,
994
+ select,
995
+ variant
996
+ });
997
+ const classes = useUtilityClasses(ownerState);
998
+ if (process.env.NODE_ENV !== 'production') {
999
+ if (select && !children) {
1000
+ console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
1001
+ }
1002
+ }
1003
+ const InputMore = {};
1004
+ if (variant === 'outlined') {
1005
+ if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
1006
+ InputMore.notched = InputLabelProps.shrink;
1007
+ }
1008
+ InputMore.label = label;
1009
+ }
1010
+ if (select) {
1011
+ // unset defaults from textbox inputs
1012
+ if (!SelectProps || !SelectProps.native) {
1013
+ InputMore.id = undefined;
1014
+ }
1015
+ InputMore['aria-describedby'] = undefined;
1016
+ }
1017
+ const id = useId(idOverride);
1018
+ const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
1019
+ const inputLabelId = label && id ? `${id}-label` : undefined;
1020
+ const InputComponent = variantComponent[variant];
1021
+ const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends$1({
1022
+ "aria-describedby": helperTextId,
1023
+ autoComplete: autoComplete,
1024
+ autoFocus: autoFocus,
1025
+ defaultValue: defaultValue,
1026
+ fullWidth: fullWidth,
1027
+ multiline: multiline,
1028
+ name: name,
1029
+ rows: rows,
1030
+ maxRows: maxRows,
1031
+ minRows: minRows,
1032
+ type: type,
1033
+ value: value,
1034
+ id: id,
1035
+ inputRef: inputRef,
1036
+ onBlur: onBlur,
1037
+ onChange: onChange,
1038
+ onFocus: onFocus,
1039
+ placeholder: placeholder,
1040
+ inputProps: inputProps
1041
+ }, InputMore, InputProps));
1042
+ return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends$1({
1043
+ className: clsx$1(classes.root, className),
1044
+ disabled: disabled,
1045
+ error: error,
1046
+ fullWidth: fullWidth,
1047
+ ref: ref,
1048
+ required: required,
1049
+ color: color,
1050
+ variant: variant,
1051
+ ownerState: ownerState
1052
+ }, other, {
1053
+ children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends$1({
1054
+ htmlFor: id,
1055
+ id: inputLabelId
1056
+ }, InputLabelProps, {
1057
+ children: label
1058
+ })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends$1({
1059
+ "aria-describedby": helperTextId,
1060
+ id: id,
1061
+ labelId: inputLabelId,
1062
+ value: value,
1063
+ input: InputElement
1064
+ }, SelectProps, {
1065
+ children: children
1066
+ })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends$1({
1067
+ id: helperTextId
1068
+ }, FormHelperTextProps, {
1069
+ children: helperText
1070
+ }))]
1071
+ }));
1072
+ });
1073
+ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
1074
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
1075
+ // │ These PropTypes are generated from the TypeScript type definitions. │
1076
+ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
1077
+ // └─────────────────────────────────────────────────────────────────────┘
1078
+ /**
1079
+ * This prop helps users to fill forms faster, especially on mobile devices.
1080
+ * The name can be confusing, as it's more like an autofill.
1081
+ * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
1082
+ */
1083
+ autoComplete: PropTypes.string,
1084
+ /**
1085
+ * If `true`, the `input` element is focused during the first mount.
1086
+ * @default false
1087
+ */
1088
+ autoFocus: PropTypes.bool,
1089
+ /**
1090
+ * @ignore
1091
+ */
1092
+ children: PropTypes.node,
1093
+ /**
1094
+ * Override or extend the styles applied to the component.
1095
+ */
1096
+ classes: PropTypes.object,
1097
+ /**
1098
+ * @ignore
1099
+ */
1100
+ className: PropTypes.string,
1101
+ /**
1102
+ * The color of the component.
1103
+ * It supports both default and custom theme colors, which can be added as shown in the
1104
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
1105
+ * @default 'primary'
1106
+ */
1107
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
1108
+ /**
1109
+ * The default value. Use when the component is not controlled.
1110
+ */
1111
+ defaultValue: PropTypes.any,
1112
+ /**
1113
+ * If `true`, the component is disabled.
1114
+ * @default false
1115
+ */
1116
+ disabled: PropTypes.bool,
1117
+ /**
1118
+ * If `true`, the label is displayed in an error state.
1119
+ * @default false
1120
+ */
1121
+ error: PropTypes.bool,
1122
+ /**
1123
+ * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
1124
+ */
1125
+ FormHelperTextProps: PropTypes.object,
1126
+ /**
1127
+ * If `true`, the input will take up the full width of its container.
1128
+ * @default false
1129
+ */
1130
+ fullWidth: PropTypes.bool,
1131
+ /**
1132
+ * The helper text content.
1133
+ */
1134
+ helperText: PropTypes.node,
1135
+ /**
1136
+ * The id of the `input` element.
1137
+ * Use this prop to make `label` and `helperText` accessible for screen readers.
1138
+ */
1139
+ id: PropTypes.string,
1140
+ /**
1141
+ * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
1142
+ * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
1143
+ */
1144
+ InputLabelProps: PropTypes.object,
1145
+ /**
1146
+ * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
1147
+ */
1148
+ inputProps: PropTypes.object,
1149
+ /**
1150
+ * Props applied to the Input element.
1151
+ * It will be a [`FilledInput`](/material-ui/api/filled-input/),
1152
+ * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
1153
+ * component depending on the `variant` prop value.
1154
+ */
1155
+ InputProps: PropTypes.object,
1156
+ /**
1157
+ * Pass a ref to the `input` element.
1158
+ */
1159
+ inputRef: refType,
1160
+ /**
1161
+ * The label content.
1162
+ */
1163
+ label: PropTypes.node,
1164
+ /**
1165
+ * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
1166
+ * @default 'none'
1167
+ */
1168
+ margin: PropTypes.oneOf(['dense', 'none', 'normal']),
1169
+ /**
1170
+ * Maximum number of rows to display when multiline option is set to true.
1171
+ */
1172
+ maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1173
+ /**
1174
+ * Minimum number of rows to display when multiline option is set to true.
1175
+ */
1176
+ minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1177
+ /**
1178
+ * If `true`, a `textarea` element is rendered instead of an input.
1179
+ * @default false
1180
+ */
1181
+ multiline: PropTypes.bool,
1182
+ /**
1183
+ * Name attribute of the `input` element.
1184
+ */
1185
+ name: PropTypes.string,
1186
+ /**
1187
+ * @ignore
1188
+ */
1189
+ onBlur: PropTypes.func,
1190
+ /**
1191
+ * Callback fired when the value is changed.
1192
+ *
1193
+ * @param {object} event The event source of the callback.
1194
+ * You can pull out the new value by accessing `event.target.value` (string).
1195
+ */
1196
+ onChange: PropTypes.func,
1197
+ /**
1198
+ * @ignore
1199
+ */
1200
+ onFocus: PropTypes.func,
1201
+ /**
1202
+ * The short hint displayed in the `input` before the user enters a value.
1203
+ */
1204
+ placeholder: PropTypes.string,
1205
+ /**
1206
+ * If `true`, the label is displayed as required and the `input` element is required.
1207
+ * @default false
1208
+ */
1209
+ required: PropTypes.bool,
1210
+ /**
1211
+ * Number of rows to display when multiline option is set to true.
1212
+ */
1213
+ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1214
+ /**
1215
+ * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
1216
+ * If this option is set you must pass the options of the select as children.
1217
+ * @default false
1218
+ */
1219
+ select: PropTypes.bool,
1220
+ /**
1221
+ * Props applied to the [`Select`](/material-ui/api/select/) element.
1222
+ */
1223
+ SelectProps: PropTypes.object,
1224
+ /**
1225
+ * The size of the component.
1226
+ */
1227
+ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
1228
+ /**
1229
+ * The system prop that allows defining system overrides as well as additional CSS styles.
1230
+ */
1231
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
1232
+ /**
1233
+ * 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).
1234
+ */
1235
+ type: PropTypes /* @typescript-to-proptypes-ignore */.string,
1236
+ /**
1237
+ * The value of the `input` element, required for a controlled component.
1238
+ */
1239
+ value: PropTypes.any,
1240
+ /**
1241
+ * The variant to use.
1242
+ * @default 'outlined'
1243
+ */
1244
+ variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
1245
+ } : void 0;
1246
+ var TextField$1 = TextField;
16
1247
 
17
1248
  const SUBMIT_FILTER_STROKE_TIME = 500;
18
1249
  const InputNumberInterval = props => {
@@ -54,7 +1285,7 @@ const InputNumberInterval = props => {
54
1285
  const newLowerBound = event.target.value;
55
1286
  updateFilterValue(newLowerBound, filterValueState[1]);
56
1287
  };
57
- return /*#__PURE__*/React.createElement(Box, {
1288
+ return /*#__PURE__*/React.createElement(Box$1, {
58
1289
  sx: {
59
1290
  display: 'inline-flex',
60
1291
  flexDirection: 'row',
@@ -62,7 +1293,7 @@ const InputNumberInterval = props => {
62
1293
  height: 48,
63
1294
  pl: '20px'
64
1295
  }
65
- }, /*#__PURE__*/React.createElement(TextField, {
1296
+ }, /*#__PURE__*/React.createElement(TextField$1, {
66
1297
  name: "lower-bound-input",
67
1298
  placeholder: "From",
68
1299
  label: "From",
@@ -74,7 +1305,7 @@ const InputNumberInterval = props => {
74
1305
  sx: {
75
1306
  mr: 2
76
1307
  }
77
- }), /*#__PURE__*/React.createElement(TextField, {
1308
+ }), /*#__PURE__*/React.createElement(TextField$1, {
78
1309
  name: "upper-bound-input",
79
1310
  placeholder: "To",
80
1311
  label: "To",
@@ -106,8 +1337,8 @@ const isBetweenOperator = {
106
1337
  if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
107
1338
  return null;
108
1339
  }
109
- return value => {
110
- return value !== null && value !== undefined && filterItem.value[0] <= value && value <= filterItem.value[1];
1340
+ return params => {
1341
+ return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
111
1342
  };
112
1343
  },
113
1344
  InputComponent: InputNumberInterval
@@ -123,14 +1354,14 @@ const doesNotContain = {
123
1354
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
124
1355
  return null;
125
1356
  }
126
- return value => {
1357
+ return params => {
127
1358
  if (filterItem.value.length === 0) {
128
1359
  return true;
129
1360
  }
130
- if (value == null) {
1361
+ if (params.value == null) {
131
1362
  return true;
132
1363
  }
133
- if (String(value).indexOf(filterItem.value) !== -1) {
1364
+ if (String(params.value).indexOf(filterItem.value) !== -1) {
134
1365
  return false;
135
1366
  }
136
1367
  return true;
@@ -147,11 +1378,11 @@ const doesNotEndWithOperator = {
147
1378
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
148
1379
  return null;
149
1380
  }
150
- return value => {
151
- if (value == null) {
1381
+ return params => {
1382
+ if (params.value == null) {
152
1383
  return true;
153
1384
  }
154
- return !String(value).endsWith(filterItem.value);
1385
+ return !String(params.value).endsWith(filterItem.value);
155
1386
  };
156
1387
  },
157
1388
  InputComponent: GridFilterInputValue
@@ -165,11 +1396,11 @@ const doesNotEqual = {
165
1396
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
166
1397
  return null;
167
1398
  }
168
- return value => {
169
- if (value == null) {
1399
+ return params => {
1400
+ if (params.value == null) {
170
1401
  return true;
171
1402
  }
172
- if (String(value) === filterItem.value) {
1403
+ if (String(params.value) === filterItem.value) {
173
1404
  return false;
174
1405
  }
175
1406
  return true;
@@ -186,11 +1417,11 @@ const doesNotHaveOperator = {
186
1417
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
187
1418
  return null;
188
1419
  }
189
- return value => {
190
- if (value == null) {
1420
+ return params => {
1421
+ if (params.value == null) {
191
1422
  return true;
192
1423
  }
193
- const cellValues = Array.isArray(value) ? value : [value];
1424
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
194
1425
  return !cellValues.map(value => String(value)).includes(filterItem.value);
195
1426
  };
196
1427
  },
@@ -208,11 +1439,11 @@ const doesNotStartWithOperator = {
208
1439
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
209
1440
  return null;
210
1441
  }
211
- return value => {
212
- if (value == null) {
1442
+ return params => {
1443
+ if (params.value == null) {
213
1444
  return true;
214
1445
  }
215
- return !String(value).startsWith(filterItem.value);
1446
+ return !String(params.value).startsWith(filterItem.value);
216
1447
  };
217
1448
  },
218
1449
  InputComponent: GridFilterInputValue
@@ -226,11 +1457,11 @@ const hasOperator = {
226
1457
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
227
1458
  return null;
228
1459
  }
229
- return value => {
230
- if (value == null) {
1460
+ return params => {
1461
+ if (params.value == null) {
231
1462
  return false;
232
1463
  }
233
- const cellValues = Array.isArray(value) ? value : [value];
1464
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
234
1465
  return cellValues.map(value => String(value)).includes(filterItem.value);
235
1466
  };
236
1467
  },
@@ -248,11 +1479,11 @@ const hasOnlyOperator = {
248
1479
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
249
1480
  return null;
250
1481
  }
251
- return value => {
252
- if (value == null) {
1482
+ return params => {
1483
+ if (params.value == null) {
253
1484
  return false;
254
1485
  }
255
- const cellValues = Array.isArray(value) ? value : [value];
1486
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
256
1487
  return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
257
1488
  };
258
1489
  },
@@ -270,14 +1501,14 @@ const isOperator = {
270
1501
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
271
1502
  return null;
272
1503
  }
273
- return value => {
274
- if (value == null) {
1504
+ return params => {
1505
+ if (params.value == null) {
275
1506
  return false;
276
1507
  }
277
- if (Array.isArray(value)) {
1508
+ if (Array.isArray(params.value)) {
278
1509
  return false;
279
1510
  }
280
- return String(value) === filterItem.value;
1511
+ return String(params.value) === filterItem.value;
281
1512
  };
282
1513
  },
283
1514
  InputComponent: GridFilterInputValue
@@ -294,14 +1525,14 @@ const isNotOperator = {
294
1525
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
295
1526
  return null;
296
1527
  }
297
- return value => {
298
- if (value == null) {
1528
+ return params => {
1529
+ if (params.value == null) {
299
1530
  return true;
300
1531
  }
301
- if (Array.isArray(value)) {
1532
+ if (Array.isArray(params.value)) {
302
1533
  return true;
303
1534
  }
304
- return String(value) !== filterItem.value;
1535
+ return String(params.value) !== filterItem.value;
305
1536
  };
306
1537
  },
307
1538
  InputComponent: GridFilterInputValue
@@ -318,14 +1549,14 @@ const containsAnyOfOperator = {
318
1549
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
319
1550
  return null;
320
1551
  }
321
- return value => {
1552
+ return params => {
322
1553
  if (filterItem.value.length === 0) {
323
1554
  return true;
324
1555
  }
325
- if (value == null) {
1556
+ if (params.value == null) {
326
1557
  return false;
327
1558
  }
328
- const paramValues = Array.isArray(value) ? value : [value];
1559
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
329
1560
  let match = false;
330
1561
  filterItem.value.forEach(filteredValue => {
331
1562
  paramValues.forEach(paramValue => {
@@ -348,14 +1579,14 @@ const doesNotContainAnyOfOperator = {
348
1579
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
349
1580
  return null;
350
1581
  }
351
- return value => {
1582
+ return params => {
352
1583
  if (filterItem.value.length === 0) {
353
1584
  return true;
354
1585
  }
355
- if (value == null) {
1586
+ if (params.value == null) {
356
1587
  return true;
357
1588
  }
358
- const paramValues = Array.isArray(value) ? value : [value];
1589
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
359
1590
  for (const filteredValue of filterItem.value) {
360
1591
  for (const paramValue of paramValues) {
361
1592
  if (String(paramValue).indexOf(filteredValue) !== -1) {
@@ -377,14 +1608,14 @@ const doesNotEndWithAnyOfOperator = {
377
1608
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
378
1609
  return null;
379
1610
  }
380
- return value => {
1611
+ return params => {
381
1612
  if (filterItem.value.length === 0) {
382
1613
  return true;
383
1614
  }
384
- if (value == null) {
1615
+ if (params.value == null) {
385
1616
  return true;
386
1617
  }
387
- const paramValues = Array.isArray(value) ? value : [value];
1618
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
388
1619
  for (const filteredValue of filterItem.value) {
389
1620
  for (const paramValue of paramValues) {
390
1621
  if (String(paramValue).endsWith(filteredValue)) {
@@ -406,11 +1637,11 @@ const doesNotHaveAnyOf = {
406
1637
  if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
407
1638
  return null;
408
1639
  }
409
- return value => {
410
- if (value == null) {
1640
+ return params => {
1641
+ if (params.value == null) {
411
1642
  return true;
412
1643
  }
413
- const cellValues = Array.isArray(value) ? value : [value];
1644
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
414
1645
 
415
1646
  // Return true only if none of the filter values are in the cell values
416
1647
  return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
@@ -430,14 +1661,14 @@ const doesNotStartWithAnyOfOperator = {
430
1661
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
431
1662
  return null;
432
1663
  }
433
- return value => {
1664
+ return params => {
434
1665
  if (filterItem.value.length === 0) {
435
1666
  return true;
436
1667
  }
437
- if (value == null) {
1668
+ if (params.value == null) {
438
1669
  return true;
439
1670
  }
440
- const paramValues = Array.isArray(value) ? value : [value];
1671
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
441
1672
  for (const filteredValue of filterItem.value) {
442
1673
  for (const paramValue of paramValues) {
443
1674
  if (String(paramValue).startsWith(filteredValue)) {
@@ -459,14 +1690,14 @@ const endsWithAnyOfOperator = {
459
1690
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
460
1691
  return null;
461
1692
  }
462
- return value => {
1693
+ return params => {
463
1694
  if (filterItem.value.length === 0) {
464
1695
  return true;
465
1696
  }
466
- if (value == null) {
1697
+ if (params.value == null) {
467
1698
  return false;
468
1699
  }
469
- const paramValues = Array.isArray(value) ? value : [value];
1700
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
470
1701
  let match = false;
471
1702
  filterItem.value.forEach(filteredValue => {
472
1703
  paramValues.forEach(paramValue => {
@@ -489,14 +1720,14 @@ const hasAllOfOperator = {
489
1720
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
490
1721
  return null;
491
1722
  }
492
- return value => {
1723
+ return params => {
493
1724
  if (filterItem.value.length === 0) {
494
1725
  return true;
495
1726
  }
496
- if (value == null) {
1727
+ if (params.value == null) {
497
1728
  return false;
498
1729
  }
499
- const cellValues = Array.isArray(value) ? value : [value];
1730
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
500
1731
  const cellStrings = cellValues.map(value => String(value));
501
1732
  const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
502
1733
  return filterItemValues.every(v => cellStrings.includes(v));
@@ -516,14 +1747,14 @@ const hasAnyOfOperator = {
516
1747
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
517
1748
  return null;
518
1749
  }
519
- return value => {
1750
+ return params => {
520
1751
  if (filterItem.value.length === 0) {
521
1752
  return true;
522
1753
  }
523
- if (value == null) {
1754
+ if (params.value == null) {
524
1755
  return false;
525
1756
  }
526
- const cellValues = Array.isArray(value) ? value : [value];
1757
+ const cellValues = Array.isArray(params.value) ? params.value : [params.value];
527
1758
  const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
528
1759
  return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
529
1760
  };
@@ -542,14 +1773,14 @@ const isAnyOfOperator = {
542
1773
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
543
1774
  return null;
544
1775
  }
545
- return value => {
1776
+ return params => {
546
1777
  if (filterItem.value.length === 0) {
547
1778
  return true;
548
1779
  }
549
- if (value == null) {
1780
+ if (params.value == null) {
550
1781
  return false;
551
1782
  }
552
- const paramValues = Array.isArray(value) ? value : [value];
1783
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
553
1784
  for (const paramValue of paramValues) {
554
1785
  if (filterItem.value.includes(String(paramValue))) {
555
1786
  return true;
@@ -572,14 +1803,14 @@ const isNotAnyOfOperator = {
572
1803
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
573
1804
  return null;
574
1805
  }
575
- return value => {
1806
+ return params => {
576
1807
  if (filterItem.value.length === 0) {
577
1808
  return true;
578
1809
  }
579
- if (value == null) {
1810
+ if (params.value == null) {
580
1811
  return true;
581
1812
  }
582
- const paramValues = Array.isArray(value) ? value : [value];
1813
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
583
1814
  for (const paramValue of paramValues) {
584
1815
  if (filterItem.value.includes(String(paramValue))) {
585
1816
  return false;
@@ -602,14 +1833,14 @@ const startsWithAnyOfOperator = {
602
1833
  if (!filterItem.field || !filterItem.value || !filterItem.operator) {
603
1834
  return null;
604
1835
  }
605
- return value => {
1836
+ return params => {
606
1837
  if (filterItem.value.length === 0) {
607
1838
  return true;
608
1839
  }
609
- if (value == null) {
1840
+ if (params.value == null) {
610
1841
  return false;
611
1842
  }
612
- const paramValues = Array.isArray(value) ? value : [value];
1843
+ const paramValues = Array.isArray(params.value) ? params.value : [params.value];
613
1844
  let match = false;
614
1845
  filterItem.value.forEach(filteredValue => {
615
1846
  paramValues.forEach(paramValue => {
@@ -636,15 +1867,15 @@ const isEmptyOperator = {
636
1867
  value: 'isEmpty',
637
1868
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
638
1869
  getApplyFilterFn: _filterItem => {
639
- return value => {
640
- if (value == null) {
1870
+ return params => {
1871
+ if (params.value == null) {
641
1872
  return true;
642
1873
  }
643
- if (Array.isArray(value)) {
644
- return value.length === 0;
1874
+ if (Array.isArray(params.value)) {
1875
+ return params.value.length === 0;
645
1876
  }
646
- if (typeof value === 'string') {
647
- return value.trim() === '';
1877
+ if (typeof params.value === 'string') {
1878
+ return params.value.trim() === '';
648
1879
  }
649
1880
  return false;
650
1881
  };
@@ -656,15 +1887,15 @@ const isNotEmptyOperator = {
656
1887
  value: 'isNotEmpty',
657
1888
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
658
1889
  getApplyFilterFn: _filterItem => {
659
- return value => {
660
- if (value == null) {
1890
+ return params => {
1891
+ if (params.value == null) {
661
1892
  return false;
662
1893
  }
663
- if (Array.isArray(value)) {
664
- return value.length > 0;
1894
+ if (Array.isArray(params.value)) {
1895
+ return params.value.length > 0;
665
1896
  }
666
- if (typeof value === 'string') {
667
- return value.trim() !== '';
1897
+ if (typeof params.value === 'string') {
1898
+ return params.value.trim() !== '';
668
1899
  }
669
1900
  return true;
670
1901
  };
@@ -703,20 +1934,14 @@ const DIMENSION_MODEL_KEY = 'dimension';
703
1934
  const FILTER_SEARCH_KEY = 'searchModel';
704
1935
  const DENSITY_MODEL_KEY = 'densityModel';
705
1936
  const COLUMN_ORDER_MODEL_KEY = 'columnOrderModel';
706
- const ROW_GROUPING_MODEL_KEY = 'rowGroupingModel';
707
- const AGGREGATION_MODEL_KEY = 'aggregationModel';
708
- /** Storage category key for the pivot column/row/value configuration. Consumer interop — use with `buildStorageKey`. */
709
- const PIVOT_MODEL_KEY = 'pivotModel';
710
- /** Storage category key for whether pivoting is active. Consumer interop — use with `buildStorageKey`. */
711
- const PIVOT_ACTIVE_KEY = 'pivotActive';
712
- const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY, COLUMN_ORDER_MODEL_KEY, ROW_GROUPING_MODEL_KEY, AGGREGATION_MODEL_KEY, PIVOT_MODEL_KEY, PIVOT_ACTIVE_KEY];
1937
+ const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY, COLUMN_ORDER_MODEL_KEY];
713
1938
  /**
714
1939
  * Build the localStorage key for a specific grid state category.
715
1940
  * Consumers can use this to read or clear individual state entries directly.
716
1941
  *
717
1942
  * @example
718
1943
  * ```ts
719
- * const key = buildStorageKey({ id: pathname, version: 2, category: PIVOT_ACTIVE_KEY });
1944
+ * const key = buildStorageKey({ id: pathname, version: 2, category: 'filterModel' });
720
1945
  * localStorage.removeItem(key);
721
1946
  * ```
722
1947
  */
@@ -766,22 +1991,6 @@ const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
766
1991
  id,
767
1992
  version,
768
1993
  category: COLUMN_ORDER_MODEL_KEY
769
- }), buildStorageKey({
770
- id,
771
- version,
772
- category: ROW_GROUPING_MODEL_KEY
773
- }), buildStorageKey({
774
- id,
775
- version,
776
- category: AGGREGATION_MODEL_KEY
777
- }), buildStorageKey({
778
- id,
779
- version,
780
- category: PIVOT_MODEL_KEY
781
- }), buildStorageKey({
782
- id,
783
- version,
784
- category: PIVOT_ACTIVE_KEY
785
1994
  })];
786
1995
  for (const keyToDelete of keysToDelete) {
787
1996
  try {
@@ -846,7 +2055,7 @@ const COMPRESSED_PREFIX = '~';
846
2055
  * Params listed first are compressed first (least valuable to read in the URL).
847
2056
  * The filter aggregate step uses the special key `_filters_aggregate`.
848
2057
  */
849
- const COMPRESSION_PRIORITY = ['_columnOrder', '_columnVisibility', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_filters_aggregate', '_aggregation', '_rowGrouping', '_quickFilterValues', '_pivot'];
2058
+ const COMPRESSION_PRIORITY = ['_columnOrder', '_columnVisibility', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_filters_aggregate', '_quickFilterValues'];
850
2059
 
851
2060
  /** Params that are always short and should never be compressed. */
852
2061
  const NEVER_COMPRESS = new Set(['_sortColumn', '_pagination', '_density', '_logicOperator', 'v', 'tab']);
@@ -1087,13 +2296,6 @@ const convertToDisplayFormat = search => {
1087
2296
  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
1088
2297
  const params = cleanSearch.split('&');
1089
2298
  const converted = params.map(param => {
1090
- const eqIndex = param.indexOf('=');
1091
- if (eqIndex !== -1) {
1092
- const value = param.slice(eqIndex + 1);
1093
- // Skip conversion for compressed values — already URL-safe
1094
- if (isCompressed(value)) return param;
1095
- }
1096
-
1097
2299
  // Handle _sortColumn=[field,direction]
1098
2300
  if (param.startsWith('_sortColumn=')) {
1099
2301
  const value = param.slice('_sortColumn='.length);
@@ -1147,6 +2349,7 @@ const convertToDisplayFormat = search => {
1147
2349
  // Handle _columnOrder=[a,b,c]
1148
2350
  if (param.startsWith('_columnOrder=')) {
1149
2351
  const value = param.slice('_columnOrder='.length);
2352
+ if (value.startsWith('~')) return param; // compressed — skip
1150
2353
  if (value.startsWith('[') && value.endsWith(']')) {
1151
2354
  const inner = value.slice(1, -1);
1152
2355
  return `_columnOrder=${inner}`;
@@ -1154,21 +2357,6 @@ const convertToDisplayFormat = search => {
1154
2357
  return param;
1155
2358
  }
1156
2359
 
1157
- // Handle _rowGrouping=[a,b,c]
1158
- if (param.startsWith('_rowGrouping=')) {
1159
- const value = param.slice('_rowGrouping='.length);
1160
- if (value.startsWith('[') && value.endsWith(']')) {
1161
- const inner = value.slice(1, -1);
1162
- return `_rowGrouping=${inner}`;
1163
- }
1164
- return param;
1165
- }
1166
-
1167
- // _aggregation and _pivot do not use bracket notation — pass through
1168
- if (param.startsWith('_aggregation=') || param.startsWith('_pivot=')) {
1169
- return param;
1170
- }
1171
-
1172
2360
  // Handle _field[operator,type]=value or _field[operator,type]=list[a,b,c]
1173
2361
  const bracketMatch = param.match(/^_([^[]+)\[([^\]]+)\]=(.*)$/);
1174
2362
  if (bracketMatch) {
@@ -1208,13 +2396,6 @@ const convertFromDisplayFormat = (search, columns) => {
1208
2396
  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
1209
2397
  const params = cleanSearch.split('&');
1210
2398
  const converted = params.map(param => {
1211
- const eqIndex = param.indexOf('=');
1212
- if (eqIndex !== -1) {
1213
- const value = param.slice(eqIndex + 1);
1214
- // Skip conversion for compressed values — already URL-safe
1215
- if (isCompressed(value)) return param;
1216
- }
1217
-
1218
2399
  // Handle _sortColumn=field.direction or _sortColumn=
1219
2400
  if (param.startsWith('_sortColumn=')) {
1220
2401
  const value = param.slice('_sortColumn='.length);
@@ -1267,7 +2448,7 @@ const convertFromDisplayFormat = (search, columns) => {
1267
2448
  if (param.startsWith('_columnVisibility=')) {
1268
2449
  const value = param.slice('_columnVisibility='.length);
1269
2450
  // If it already has brackets, leave it alone
1270
- if (value.startsWith('[')) {
2451
+ if (value.startsWith('[') || value.startsWith('~')) {
1271
2452
  return param;
1272
2453
  }
1273
2454
  return `_columnVisibility=[${value}]`;
@@ -1276,26 +2457,13 @@ const convertFromDisplayFormat = (search, columns) => {
1276
2457
  // Handle _columnOrder=a,b,c
1277
2458
  if (param.startsWith('_columnOrder=')) {
1278
2459
  const value = param.slice('_columnOrder='.length);
1279
- if (value.startsWith('[')) {
2460
+ // If it already has brackets or is compressed, leave it alone
2461
+ if (value.startsWith('[') || value.startsWith('~')) {
1280
2462
  return param;
1281
2463
  }
1282
2464
  return `_columnOrder=[${value}]`;
1283
2465
  }
1284
2466
 
1285
- // Handle _rowGrouping=a,b,c
1286
- if (param.startsWith('_rowGrouping=')) {
1287
- const value = param.slice('_rowGrouping='.length);
1288
- if (value.startsWith('[')) {
1289
- return param;
1290
- }
1291
- return `_rowGrouping=[${value}]`;
1292
- }
1293
-
1294
- // _aggregation, _pivot, _filters — pass through (no bracket conversion needed)
1295
- if (param.startsWith('_aggregation=') || param.startsWith('_pivot=') || param.startsWith('_filters=')) {
1296
- return param;
1297
- }
1298
-
1299
2467
  // Handle field.operator=value (dot notation for filters)
1300
2468
  const dotMatch = param.match(/^([^.]+)\.([a-zA-Z_]+)=(.*)$/);
1301
2469
  if (dotMatch) {
@@ -1338,10 +2506,9 @@ const getDecodedSearchFromUrl = (search, columns) => {
1338
2506
  const hasPaginationDotNotation = /_pagination=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
1339
2507
  const hasPinnedWithoutBrackets = /(_pinnedColumnsLeft|_pinnedColumnsRight)=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
1340
2508
  const hasVisibilityWithoutBrackets = /_columnVisibility=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
1341
- const hasColumnOrderWithoutBrackets = /_columnOrder=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
1342
- const hasRowGroupingWithoutBrackets = /_rowGrouping=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
2509
+ const hasColumnOrderWithoutBrackets = /_columnOrder=[^&[~]*(&|$)/.test(searchWithoutLeadingQuestion);
1343
2510
  const hasBracketNotation = /\[.*\]=/.test(searchWithoutLeadingQuestion);
1344
- const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets || hasColumnOrderWithoutBrackets || hasRowGroupingWithoutBrackets) && !hasBracketNotation;
2511
+ const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets || hasColumnOrderWithoutBrackets) && !hasBracketNotation;
1345
2512
  if (isDisplayFormat) {
1346
2513
  return '?' + convertFromDisplayFormat(searchWithoutLeadingQuestion, columns);
1347
2514
  }
@@ -1502,7 +2669,7 @@ const getFilterModelFromString = (searchString, columns) => {
1502
2669
  let quickFilterValues = [];
1503
2670
  const searchParams = new URLSearchParams();
1504
2671
  for (const [key, value] of new URLSearchParams(searchString)) {
1505
- if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues', '_columnOrder', '_rowGrouping', '_aggregation', '_pivot', '_density', '_filters'].includes(key)) {
2672
+ if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues', '_columnOrder', '_density', '_filters'].includes(key)) {
1506
2673
  searchParams.set(key, value);
1507
2674
  }
1508
2675
  if (key === '_logicOperator') {
@@ -1967,10 +3134,9 @@ const getSearchParamsFromDensity = density => {
1967
3134
  searchParams.set('_density', density);
1968
3135
  return searchParams;
1969
3136
  };
1970
- const getDensityModel = (search, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion) => {
1971
- // Default density: honour initialState.density if valid, otherwise fall back to 'compact'
1972
- const initialDensity = initialState === null || initialState === void 0 ? void 0 : initialState.density;
1973
- const defaultValue = initialDensity && VALID_DENSITIES.includes(initialDensity) ? initialDensity : 'compact';
3137
+ const getDensityModel = (search, localStorageDensity, setLocalStorageDensity, _initialState, isNewVersion) => {
3138
+ // MUI v6 GridInitialStatePro does not include density default to 'compact'
3139
+ const defaultValue = 'compact';
1974
3140
 
1975
3141
  // Persist initialState-derived density to localStorage so all three sources stay in sync
1976
3142
  const persistDefaultDensity = () => {
@@ -2051,275 +3217,7 @@ const getColumnOrder = (search, columns, localStorageColumnOrder, setLocalStorag
2051
3217
  persistDefault();
2052
3218
  return defaultValue;
2053
3219
  };
2054
-
2055
- /** ROW GROUPING */
2056
-
2057
- const getRowGroupingFromString = searchString => {
2058
- if (!searchString) return 'invalid';
2059
- const searchParams = new URLSearchParams(searchString);
2060
- const value = searchParams.get('_rowGrouping');
2061
- if (value === '' || value === null || value === '[]') return 'invalid';
2062
- const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
2063
- if (!inner) return 'invalid';
2064
- return inner.split(',').filter(Boolean);
2065
- };
2066
- const getSearchParamsFromRowGrouping = rowGrouping => {
2067
- const searchParams = new URLSearchParams();
2068
- if (rowGrouping.length > 0) {
2069
- searchParams.set('_rowGrouping', `[${rowGrouping.join(',')}]`);
2070
- }
2071
- return searchParams;
2072
- };
2073
- const getRowGroupingModel = (search, localStorageRowGrouping, setLocalStorageRowGrouping, initialState, isNewVersion) => {
2074
- var _initialState$rowGrou, _initialState$rowGrou2;
2075
- const defaultValue = (_initialState$rowGrou = initialState === null || initialState === void 0 ? void 0 : (_initialState$rowGrou2 = initialState.rowGrouping) === null || _initialState$rowGrou2 === void 0 ? void 0 : _initialState$rowGrou2.model) !== null && _initialState$rowGrou !== void 0 ? _initialState$rowGrou : [];
2076
- const persistDefault = () => {
2077
- const searchFromDefault = getSearchParamsFromRowGrouping(defaultValue);
2078
- const searchString = urlSearchParamsToString(searchFromDefault);
2079
- if (searchString !== localStorageRowGrouping) {
2080
- setLocalStorageRowGrouping(searchString);
2081
- }
2082
- };
2083
- if (isNewVersion) {
2084
- persistDefault();
2085
- return defaultValue;
2086
- }
2087
- const fromUrl = getRowGroupingFromString(search);
2088
- if (fromUrl !== 'invalid') {
2089
- const searchFromModel = getSearchParamsFromRowGrouping(fromUrl);
2090
- const searchString = urlSearchParamsToString(searchFromModel);
2091
- if (searchString !== localStorageRowGrouping) {
2092
- setLocalStorageRowGrouping(searchString);
2093
- }
2094
- return fromUrl;
2095
- }
2096
- const fromLocalStorage = getRowGroupingFromString(localStorageRowGrouping);
2097
- if (fromLocalStorage !== 'invalid') {
2098
- return fromLocalStorage;
2099
- }
2100
- persistDefault();
2101
- return defaultValue;
2102
- };
2103
-
2104
- /** AGGREGATION */
2105
-
2106
- const getAggregationFromString = searchString => {
2107
- if (!searchString) return 'invalid';
2108
- const searchParams = new URLSearchParams(searchString);
2109
- const value = searchParams.get('_aggregation');
2110
- if (value === '' || value === null) return 'invalid';
2111
-
2112
- // Format: field1.sum,field2.avg or [field1.sum,field2.avg]
2113
- const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
2114
- if (!inner) return 'invalid';
2115
- const model = {};
2116
- for (const entry of inner.split(',')) {
2117
- const dotIndex = entry.lastIndexOf('.');
2118
- if (dotIndex <= 0) return 'invalid';
2119
- const field = entry.slice(0, dotIndex);
2120
- const aggFunc = entry.slice(dotIndex + 1);
2121
- if (!field || !aggFunc) return 'invalid';
2122
- model[field] = aggFunc;
2123
- }
2124
- return Object.keys(model).length > 0 ? model : 'invalid';
2125
- };
2126
- const getSearchParamsFromAggregation = aggregation => {
2127
- const searchParams = new URLSearchParams();
2128
- const entries = Object.entries(aggregation);
2129
- if (entries.length > 0) {
2130
- const value = entries.map(_ref => {
2131
- let [field, aggFunc] = _ref;
2132
- return `${field}.${aggFunc}`;
2133
- }).join(',');
2134
- searchParams.set('_aggregation', value);
2135
- }
2136
- return searchParams;
2137
- };
2138
- const getAggregationModel = (search, localStorageAggregation, setLocalStorageAggregation, initialState, isNewVersion) => {
2139
- var _initialState$aggrega, _initialState$aggrega2;
2140
- const defaultValue = (_initialState$aggrega = initialState === null || initialState === void 0 ? void 0 : (_initialState$aggrega2 = initialState.aggregation) === null || _initialState$aggrega2 === void 0 ? void 0 : _initialState$aggrega2.model) !== null && _initialState$aggrega !== void 0 ? _initialState$aggrega : {};
2141
- const persistDefault = () => {
2142
- const searchFromDefault = getSearchParamsFromAggregation(defaultValue);
2143
- const searchString = urlSearchParamsToString(searchFromDefault);
2144
- if (searchString !== localStorageAggregation) {
2145
- setLocalStorageAggregation(searchString);
2146
- }
2147
- };
2148
- if (isNewVersion) {
2149
- persistDefault();
2150
- return defaultValue;
2151
- }
2152
- const fromUrl = getAggregationFromString(search);
2153
- if (fromUrl !== 'invalid') {
2154
- const searchFromModel = getSearchParamsFromAggregation(fromUrl);
2155
- const searchString = urlSearchParamsToString(searchFromModel);
2156
- if (searchString !== localStorageAggregation) {
2157
- setLocalStorageAggregation(searchString);
2158
- }
2159
- return fromUrl;
2160
- }
2161
- const fromLocalStorage = getAggregationFromString(localStorageAggregation);
2162
- if (fromLocalStorage !== 'invalid') {
2163
- return fromLocalStorage;
2164
- }
2165
- persistDefault();
2166
- return defaultValue;
2167
- };
2168
-
2169
- /** PIVOT */
2170
-
2171
- /** Convert MUI's GridPivotModel → our simplified PivotModel */
2172
- const fromGridPivotModel = model => ({
2173
- columns: model.columns.map(c => c.field),
2174
- rows: model.rows.map(r => r.field),
2175
- values: model.values.map(_ref2 => {
2176
- let {
2177
- field,
2178
- aggFunc
2179
- } = _ref2;
2180
- return {
2181
- field,
2182
- aggFunc
2183
- };
2184
- })
2185
- });
2186
-
2187
- /**
2188
- * Pivot format: `cols:f1,f2;rows:f3;vals:f4.sum,f5.avg`
2189
- */
2190
- const getPivotFromString = searchString => {
2191
- if (!searchString) return 'invalid';
2192
- const searchParams = new URLSearchParams(searchString);
2193
- const value = searchParams.get('_pivot');
2194
- if (value === '' || value === null) return 'invalid';
2195
- const model = {
2196
- columns: [],
2197
- rows: [],
2198
- values: []
2199
- };
2200
- for (const segment of value.split(';')) {
2201
- const colonIndex = segment.indexOf(':');
2202
- if (colonIndex <= 0) return 'invalid';
2203
- const key = segment.slice(0, colonIndex);
2204
- const content = segment.slice(colonIndex + 1);
2205
- if (key === 'cols') {
2206
- model.columns = content ? content.split(',').filter(Boolean) : [];
2207
- } else if (key === 'rows') {
2208
- model.rows = content ? content.split(',').filter(Boolean) : [];
2209
- } else if (key === 'vals') {
2210
- if (!content) continue;
2211
- for (const entry of content.split(',')) {
2212
- const dotIndex = entry.lastIndexOf('.');
2213
- if (dotIndex <= 0) return 'invalid';
2214
- model.values.push({
2215
- field: entry.slice(0, dotIndex),
2216
- aggFunc: entry.slice(dotIndex + 1)
2217
- });
2218
- }
2219
- }
2220
- }
2221
-
2222
- // At least one section must have content
2223
- if (model.columns.length === 0 && model.rows.length === 0 && model.values.length === 0) {
2224
- return 'invalid';
2225
- }
2226
- return model;
2227
- };
2228
- const getSearchParamsFromPivot = pivot => {
2229
- const searchParams = new URLSearchParams();
2230
- const hasContent = pivot.columns.length > 0 || pivot.rows.length > 0 || pivot.values.length > 0;
2231
- if (hasContent) {
2232
- const parts = [];
2233
- parts.push(`cols:${pivot.columns.join(',')}`);
2234
- parts.push(`rows:${pivot.rows.join(',')}`);
2235
- if (pivot.values.length > 0) {
2236
- parts.push(`vals:${pivot.values.map(v => `${v.field}.${v.aggFunc}`).join(',')}`);
2237
- }
2238
- searchParams.set('_pivot', parts.join(';'));
2239
- }
2240
- return searchParams;
2241
- };
2242
- const getPivotModel = (search, localStoragePivot, setLocalStoragePivot, initialState, isNewVersion) => {
2243
- var _initialState$pivotin;
2244
- const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$pivotin = initialState.pivoting) !== null && _initialState$pivotin !== void 0 && _initialState$pivotin.model ? fromGridPivotModel(initialState.pivoting.model) : {
2245
- columns: [],
2246
- rows: [],
2247
- values: []
2248
- };
2249
- const persistDefault = () => {
2250
- const searchFromDefault = getSearchParamsFromPivot(defaultValue);
2251
- const searchString = urlSearchParamsToString(searchFromDefault);
2252
- if (searchString !== localStoragePivot) {
2253
- setLocalStoragePivot(searchString);
2254
- }
2255
- };
2256
- if (isNewVersion) {
2257
- persistDefault();
2258
- return defaultValue;
2259
- }
2260
- const fromUrl = getPivotFromString(search);
2261
- if (fromUrl !== 'invalid') {
2262
- const searchFromModel = getSearchParamsFromPivot(fromUrl);
2263
- const searchString = urlSearchParamsToString(searchFromModel);
2264
- if (searchString !== localStoragePivot) {
2265
- setLocalStoragePivot(searchString);
2266
- }
2267
- return fromUrl;
2268
- }
2269
- const fromLocalStorage = getPivotFromString(localStoragePivot);
2270
- if (fromLocalStorage !== 'invalid') {
2271
- return fromLocalStorage;
2272
- }
2273
- persistDefault();
2274
- return defaultValue;
2275
- };
2276
-
2277
- /** PIVOT ACTIVE */
2278
-
2279
- const getPivotActiveFromString = searchString => {
2280
- if (!searchString) return 'invalid';
2281
- const searchParams = new URLSearchParams(searchString);
2282
- const value = searchParams.get('_pivotActive');
2283
- if (value === 'true') return true;
2284
- if (value === 'false') return false;
2285
- return 'invalid';
2286
- };
2287
- const getSearchParamsFromPivotActive = active => {
2288
- const searchParams = new URLSearchParams();
2289
- searchParams.set('_pivotActive', String(active));
2290
- return searchParams;
2291
- };
2292
- const getPivotActive = (search, localStoragePivotActive, setLocalStoragePivotActive, initialState, isNewVersion) => {
2293
- var _initialState$pivotin2, _initialState$pivotin3;
2294
- const defaultValue = (_initialState$pivotin2 = initialState === null || initialState === void 0 ? void 0 : (_initialState$pivotin3 = initialState.pivoting) === null || _initialState$pivotin3 === void 0 ? void 0 : _initialState$pivotin3.enabled) !== null && _initialState$pivotin2 !== void 0 ? _initialState$pivotin2 : false;
2295
- const persistDefault = () => {
2296
- const searchFromDefault = getSearchParamsFromPivotActive(defaultValue);
2297
- const searchString = urlSearchParamsToString(searchFromDefault);
2298
- if (searchString !== localStoragePivotActive) {
2299
- setLocalStoragePivotActive(searchString);
2300
- }
2301
- };
2302
- if (isNewVersion) {
2303
- persistDefault();
2304
- return defaultValue;
2305
- }
2306
- const fromUrl = getPivotActiveFromString(search);
2307
- if (fromUrl !== 'invalid') {
2308
- const searchFromModel = getSearchParamsFromPivotActive(fromUrl);
2309
- const searchString = urlSearchParamsToString(searchFromModel);
2310
- if (searchString !== localStoragePivotActive) {
2311
- setLocalStoragePivotActive(searchString);
2312
- }
2313
- return fromUrl;
2314
- }
2315
- const fromLocalStorage = getPivotActiveFromString(localStoragePivotActive);
2316
- if (fromLocalStorage !== 'invalid') {
2317
- return fromLocalStorage;
2318
- }
2319
- persistDefault();
2320
- return defaultValue;
2321
- };
2322
- const getFinalSearch = _ref3 => {
3220
+ const getFinalSearch = _ref => {
2323
3221
  let {
2324
3222
  search,
2325
3223
  localStorageVersion,
@@ -2331,12 +3229,8 @@ const getFinalSearch = _ref3 => {
2331
3229
  density,
2332
3230
  columnOrderModel,
2333
3231
  defaultColumnOrder,
2334
- rowGroupingModel,
2335
- aggregationModel,
2336
- pivotModel,
2337
- pivotActive,
2338
3232
  columns
2339
- } = _ref3;
3233
+ } = _ref;
2340
3234
  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
2341
3235
  const sortModelSearch = getSearchParamsFromSorting(sortModel);
2342
3236
  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
@@ -2345,10 +3239,6 @@ const getFinalSearch = _ref3 => {
2345
3239
  const densitySearch = getSearchParamsFromDensity(density);
2346
3240
  // Only include _columnOrder in URL when it differs from the default
2347
3241
  const columnOrderSearch = columnOrderModel.length !== defaultColumnOrder.length || columnOrderModel.some((field, i) => field !== defaultColumnOrder[i]) ? getSearchParamsFromColumnOrder(columnOrderModel) : new URLSearchParams();
2348
- const rowGroupingSearch = getSearchParamsFromRowGrouping(rowGroupingModel);
2349
- const aggregationSearch = getSearchParamsFromAggregation(aggregationModel);
2350
- const pivotSearch = getSearchParamsFromPivot(pivotModel);
2351
- const pivotActiveSearch = getSearchParamsFromPivotActive(pivotActive);
2352
3242
  const tabSearch = getSearchParamsFromTab(search);
2353
3243
  const searchParams = new URLSearchParams();
2354
3244
  for (const [key, value] of new URLSearchParams(search)) {
@@ -2363,7 +3253,7 @@ const getFinalSearch = _ref3 => {
2363
3253
  // Encode array as JSON string to preserve all values in one param
2364
3254
  searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
2365
3255
  }
2366
- return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch, ...columnOrderSearch, ...rowGroupingSearch, ...aggregationSearch, ...pivotSearch, ...pivotActiveSearch]);
3256
+ return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch, ...columnOrderSearch]);
2367
3257
  };
2368
3258
  /** Return the state of the table given the URL and the local storage state */
2369
3259
  const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage) => {
@@ -2388,15 +3278,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
2388
3278
  localStorageDensity,
2389
3279
  setLocalStorageDensity,
2390
3280
  localStorageColumnOrder,
2391
- setLocalStorageColumnOrder,
2392
- localStorageRowGrouping,
2393
- setLocalStorageRowGrouping,
2394
- localStorageAggregation,
2395
- setLocalStorageAggregation,
2396
- localStoragePivot,
2397
- setLocalStoragePivot,
2398
- localStoragePivotActive,
2399
- setLocalStoragePivotActive
3281
+ setLocalStorageColumnOrder
2400
3282
  } = localStorage;
2401
3283
  const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
2402
3284
  const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
@@ -2405,10 +3287,6 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
2405
3287
  const pinnedColumnsModel = getPinnedColumns(decodedSearch, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
2406
3288
  const density = getDensityModel(decodedSearch, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion);
2407
3289
  const columnOrderModel = getColumnOrder(decodedSearch, columns, localStorageColumnOrder, setLocalStorageColumnOrder, initialState, isNewVersion);
2408
- const rowGroupingModel = getRowGroupingModel(decodedSearch, localStorageRowGrouping, setLocalStorageRowGrouping, initialState, isNewVersion);
2409
- const aggregationModel = getAggregationModel(decodedSearch, localStorageAggregation, setLocalStorageAggregation, initialState, isNewVersion);
2410
- const pivotModel = getPivotModel(decodedSearch, localStoragePivot, setLocalStoragePivot, initialState, isNewVersion);
2411
- const pivotActive = getPivotActive(decodedSearch, localStoragePivotActive, setLocalStoragePivotActive, initialState, isNewVersion);
2412
3290
  const defaultColumnOrder = (_initialState$columns6 = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns7 = initialState.columns) === null || _initialState$columns7 === void 0 ? void 0 : _initialState$columns7.orderedFields) !== null && _initialState$columns6 !== void 0 ? _initialState$columns6 : columns.map(c => c.field);
2413
3291
  const finalSearch = getFinalSearch({
2414
3292
  localStorageVersion,
@@ -2421,10 +3299,6 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
2421
3299
  density,
2422
3300
  columnOrderModel,
2423
3301
  defaultColumnOrder,
2424
- rowGroupingModel,
2425
- aggregationModel,
2426
- pivotModel,
2427
- pivotActive,
2428
3302
  columns
2429
3303
  });
2430
3304
  const internalSearchString = urlSearchParamsToString(finalSearch);
@@ -2445,14 +3319,10 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
2445
3319
  pinnedColumnsModel,
2446
3320
  density,
2447
3321
  columnOrderModel,
2448
- rowGroupingModel,
2449
- aggregationModel,
2450
- pivotModel,
2451
- pivotActive,
2452
3322
  pendingSearch
2453
3323
  };
2454
3324
  };
2455
- const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns) => {
3325
+ const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
2456
3326
  let {
2457
3327
  filterModel,
2458
3328
  sortModel,
@@ -2461,12 +3331,8 @@ const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns)
2461
3331
  pinnedColumnsModel,
2462
3332
  density,
2463
3333
  columnOrderModel,
2464
- defaultColumnOrder,
2465
- rowGroupingModel,
2466
- aggregationModel,
2467
- pivotModel,
2468
- pivotActive
2469
- } = _ref4;
3334
+ defaultColumnOrder
3335
+ } = _ref2;
2470
3336
  // Convert from display format to internal format if needed
2471
3337
  const decodedSearch = getDecodedSearchFromUrl(search, columns);
2472
3338
  const newSearch = getFinalSearch({
@@ -2480,10 +3346,6 @@ const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns)
2480
3346
  density,
2481
3347
  columnOrderModel,
2482
3348
  defaultColumnOrder,
2483
- rowGroupingModel,
2484
- aggregationModel,
2485
- pivotModel,
2486
- pivotActive,
2487
3349
  columns
2488
3350
  });
2489
3351
  const internalSearchString = urlSearchParamsToString(newSearch);
@@ -2671,26 +3533,6 @@ const useTableStates = (id, version) => {
2671
3533
  version,
2672
3534
  category: COLUMN_ORDER_MODEL_KEY
2673
3535
  }));
2674
- const [rowGroupingModel, setRowGroupingModel] = useFetchState('', buildStorageKey({
2675
- id,
2676
- version,
2677
- category: ROW_GROUPING_MODEL_KEY
2678
- }));
2679
- const [aggregationModel, setAggregationModel] = useFetchState('', buildStorageKey({
2680
- id,
2681
- version,
2682
- category: AGGREGATION_MODEL_KEY
2683
- }));
2684
- const [pivotModel, setPivotModel] = useFetchState('', buildStorageKey({
2685
- id,
2686
- version,
2687
- category: PIVOT_MODEL_KEY
2688
- }));
2689
- const [pivotActive, setPivotActive] = useFetchState('', buildStorageKey({
2690
- id,
2691
- version,
2692
- category: PIVOT_ACTIVE_KEY
2693
- }));
2694
3536
  return {
2695
3537
  paginationModel,
2696
3538
  setPaginationModel,
@@ -2707,55 +3549,10 @@ const useTableStates = (id, version) => {
2707
3549
  densityModel,
2708
3550
  setDensityModel,
2709
3551
  columnOrderModel,
2710
- setColumnOrderModel,
2711
- rowGroupingModel,
2712
- setRowGroupingModel,
2713
- aggregationModel,
2714
- setAggregationModel,
2715
- pivotModel,
2716
- setPivotModel,
2717
- pivotActive,
2718
- setPivotActive
3552
+ setColumnOrderModel
2719
3553
  };
2720
3554
  };
2721
3555
 
2722
- /** Convert our simplified PivotModel → MUI's GridPivotModel */
2723
- const toGridPivotModel = model => ({
2724
- columns: model.columns.map(field => ({
2725
- field
2726
- })),
2727
- rows: model.rows.map(field => ({
2728
- field
2729
- })),
2730
- values: model.values.map(_ref => {
2731
- let {
2732
- field,
2733
- aggFunc
2734
- } = _ref;
2735
- return {
2736
- field,
2737
- aggFunc
2738
- };
2739
- })
2740
- });
2741
-
2742
- /**
2743
- * Deep-equal comparison for plain objects / arrays.
2744
- * Used to stabilise parsed model references so that MUI v8 does not
2745
- * reset pagination on every render.
2746
- */
2747
- function isDeepEqual(a, b) {
2748
- if (a === b) return true;
2749
- if (a == null || b == null) return false;
2750
- if (typeof a !== typeof b) return false;
2751
- if (typeof a !== 'object') return false;
2752
- const aObj = a;
2753
- const bObj = b;
2754
- const aKeys = Object.keys(aObj);
2755
- const bKeys = Object.keys(bObj);
2756
- if (aKeys.length !== bKeys.length) return false;
2757
- return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
2758
- }
2759
3556
  const useStatefulTable = props => {
2760
3557
  var _initialState$columns, _initialState$columns2;
2761
3558
  const {
@@ -2768,9 +3565,6 @@ const useStatefulTable = props => {
2768
3565
  onPaginationModelChange: propsOnPaginationModelChange,
2769
3566
  onPinnedColumnsChange: propsOnPinnedColumnsChange,
2770
3567
  onSortModelChange: propsOnSortModelChange,
2771
- onRowGroupingModelChange: propsOnRowGroupingModelChange,
2772
- onAggregationModelChange: propsOnAggregationModelChange,
2773
- onPivotModelChange: propsOnPivotModelChange,
2774
3568
  useRouter,
2775
3569
  localStorageVersion = 1,
2776
3570
  previousLocalStorageVersions = []
@@ -2799,24 +3593,16 @@ const useStatefulTable = props => {
2799
3593
  densityModel,
2800
3594
  setDensityModel,
2801
3595
  columnOrderModel: localStorageColumnOrder,
2802
- setColumnOrderModel: setLocalStorageColumnOrder,
2803
- rowGroupingModel: localStorageRowGrouping,
2804
- setRowGroupingModel: setLocalStorageRowGrouping,
2805
- aggregationModel: localStorageAggregation,
2806
- setAggregationModel: setLocalStorageAggregation,
2807
- pivotModel: localStoragePivot,
2808
- setPivotModel: setLocalStoragePivot,
2809
- pivotActive: localStoragePivotActive,
2810
- setPivotActive: setLocalStoragePivotActive
3596
+ setColumnOrderModel: setLocalStorageColumnOrder
2811
3597
  } = useTableStates(id, localStorageVersion);
2812
3598
 
2813
3599
  // clearing up old version keys, triggering only on first render
2814
3600
  useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
2815
- const onColumnDimensionChange = useCallback(_ref2 => {
3601
+ const onColumnDimensionChange = useCallback(_ref => {
2816
3602
  let {
2817
3603
  newWidth,
2818
3604
  field
2819
- } = _ref2;
3605
+ } = _ref;
2820
3606
  setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
2821
3607
  [field]: newWidth
2822
3608
  }));
@@ -2829,10 +3615,6 @@ const useStatefulTable = props => {
2829
3615
  pinnedColumnsModel,
2830
3616
  density: densityParsed,
2831
3617
  columnOrderModel: columnOrderParsed,
2832
- rowGroupingModel: rowGroupingParsed,
2833
- aggregationModel: aggregationParsed,
2834
- pivotModel: pivotParsed,
2835
- pivotActive: pivotActiveParsed,
2836
3618
  pendingSearch
2837
3619
  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, initialState, {
2838
3620
  localStorageFilters,
@@ -2848,15 +3630,7 @@ const useStatefulTable = props => {
2848
3630
  localStorageDensity: densityModel,
2849
3631
  setLocalStorageDensity: setDensityModel,
2850
3632
  localStorageColumnOrder,
2851
- setLocalStorageColumnOrder,
2852
- localStorageRowGrouping,
2853
- setLocalStorageRowGrouping,
2854
- localStorageAggregation,
2855
- setLocalStorageAggregation,
2856
- localStoragePivot,
2857
- setLocalStoragePivot,
2858
- localStoragePivotActive: localStoragePivotActive,
2859
- setLocalStoragePivotActive: setLocalStoragePivotActive
3633
+ setLocalStorageColumnOrder
2860
3634
  });
2861
3635
 
2862
3636
  // Sync URL in an effect rather than during render to comply with React rules
@@ -2865,45 +3639,6 @@ const useStatefulTable = props => {
2865
3639
  historyReplace(pendingSearch);
2866
3640
  }
2867
3641
  }, [pendingSearch, historyReplace]);
2868
-
2869
- // Stabilise parsed model references to prevent MUI v8 from resetting
2870
- // pagination on every render due to new object identity.
2871
- const filterParsedRef = useRef(filterParsed);
2872
- if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
2873
- filterParsedRef.current = filterParsed;
2874
- }
2875
- const sortModelParsedRef = useRef(sortModelParsed);
2876
- if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
2877
- sortModelParsedRef.current = sortModelParsed;
2878
- }
2879
- const paginationModelParsedRef = useRef(paginationModelParsed);
2880
- if (!isDeepEqual(paginationModelParsedRef.current, paginationModelParsed)) {
2881
- paginationModelParsedRef.current = paginationModelParsed;
2882
- }
2883
- const visibilityModelRef = useRef(visibilityModel);
2884
- if (!isDeepEqual(visibilityModelRef.current, visibilityModel)) {
2885
- visibilityModelRef.current = visibilityModel;
2886
- }
2887
- const pinnedColumnsModelRef = useRef(pinnedColumnsModel);
2888
- if (!isDeepEqual(pinnedColumnsModelRef.current, pinnedColumnsModel)) {
2889
- pinnedColumnsModelRef.current = pinnedColumnsModel;
2890
- }
2891
- const columnOrderParsedRef = useRef(columnOrderParsed);
2892
- if (!isDeepEqual(columnOrderParsedRef.current, columnOrderParsed)) {
2893
- columnOrderParsedRef.current = columnOrderParsed;
2894
- }
2895
- const rowGroupingParsedRef = useRef(rowGroupingParsed);
2896
- if (!isDeepEqual(rowGroupingParsedRef.current, rowGroupingParsed)) {
2897
- rowGroupingParsedRef.current = rowGroupingParsed;
2898
- }
2899
- const aggregationParsedRef = useRef(aggregationParsed);
2900
- if (!isDeepEqual(aggregationParsedRef.current, aggregationParsed)) {
2901
- aggregationParsedRef.current = aggregationParsed;
2902
- }
2903
- const pivotParsedRef = useRef(pivotParsed);
2904
- if (!isDeepEqual(pivotParsedRef.current, pivotParsed)) {
2905
- pivotParsedRef.current = pivotParsed;
2906
- }
2907
3642
  const columns = useMemo(() => propsColumns.map(column => {
2908
3643
  return _objectSpread2(_objectSpread2({}, column), {}, {
2909
3644
  width: dimensionModel[column.field] || column.width || 100
@@ -2912,61 +3647,56 @@ const useStatefulTable = props => {
2912
3647
  if (apiRef.current) {
2913
3648
  /** Add resetPage method to apiRef. */
2914
3649
  apiRef.current.resetPage = () => {
2915
- var _apiRef$current;
2916
- (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
3650
+ apiRef.current.setPage(0);
2917
3651
  };
2918
3652
  }
2919
3653
  const defaultColumnOrder = (_initialState$columns = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns2 = initialState.columns) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2.orderedFields) !== null && _initialState$columns !== void 0 ? _initialState$columns : propsColumns.map(c => c.field);
2920
3654
 
3655
+ // Helper to build the current DataGridModel for updateUrl calls
3656
+ const buildModel = function () {
3657
+ var _apiRef$current$state, _apiRef$current;
3658
+ let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
3659
+ return _objectSpread2({
3660
+ filterModel: filterParsed,
3661
+ sortModel: sortModelParsed,
3662
+ paginationModel: paginationModelParsed,
3663
+ columnsModel: (_apiRef$current$state = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
3664
+ pinnedColumnsModel: pinnedColumnsModel,
3665
+ density: densityParsed,
3666
+ columnOrderModel: columnOrderParsed,
3667
+ defaultColumnOrder
3668
+ }, overrides);
3669
+ };
3670
+
2921
3671
  // Subscribe to density changes via stateChange event (MUI v6 has no densityChange event)
2922
3672
  useEffect(() => {
2923
3673
  const api = apiRef.current;
2924
3674
  if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
2925
3675
  let prevDensity = densityParsed;
2926
3676
  const unsub = api.subscribeEvent('stateChange', () => {
2927
- const currentDensity = api.state.density;
3677
+ const currentDensity = api.state.density.value;
2928
3678
  if (currentDensity !== prevDensity) {
2929
3679
  prevDensity = currentDensity;
2930
- updateUrl({
2931
- filterModel: filterParsed,
2932
- sortModel: sortModelParsed,
2933
- paginationModel: paginationModelParsed,
3680
+ updateUrl(buildModel({
2934
3681
  columnsModel: api.state.columns.columnVisibilityModel,
2935
- pinnedColumnsModel: pinnedColumnsModel,
2936
- density: currentDensity,
2937
- columnOrderModel: columnOrderParsed,
2938
- defaultColumnOrder,
2939
- rowGroupingModel: rowGroupingParsed,
2940
- aggregationModel: aggregationParsed,
2941
- pivotModel: pivotParsed,
2942
- pivotActive: pivotActiveParsed
2943
- }, search, localStorageVersion, historyReplace, columns);
3682
+ density: currentDensity
3683
+ }), search, localStorageVersion, historyReplace, columns);
2944
3684
  }
2945
3685
  });
2946
3686
  return unsub;
2947
- }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, columnOrderParsed, defaultColumnOrder, rowGroupingParsed, aggregationParsed, pivotParsed, pivotActiveParsed, search, localStorageVersion, historyReplace, columns]);
3687
+ }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, columnOrderParsed, defaultColumnOrder, search, localStorageVersion, historyReplace, columns]);
2948
3688
 
2949
3689
  // Subscribe to column order changes via columnOrderChange (drag-drop) and columnIndexChange (programmatic setColumnIndex)
2950
3690
  useEffect(() => {
2951
3691
  const api = apiRef.current;
2952
3692
  if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
3693
+ const isDeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
2953
3694
  const handleColumnOrderChange = () => {
2954
3695
  const orderedFields = api.state.columns.orderedFields;
2955
3696
  if (orderedFields && !isDeepEqual(orderedFields, columnOrderParsed)) {
2956
- updateUrl({
2957
- filterModel: filterParsed,
2958
- sortModel: sortModelParsed,
2959
- paginationModel: paginationModelParsed,
2960
- columnsModel: api.state.columns.columnVisibilityModel,
2961
- pinnedColumnsModel,
2962
- density: densityParsed,
2963
- columnOrderModel: orderedFields,
2964
- defaultColumnOrder,
2965
- rowGroupingModel: rowGroupingParsed,
2966
- aggregationModel: aggregationParsed,
2967
- pivotModel: pivotParsed,
2968
- pivotActive: pivotActiveParsed
2969
- }, search, localStorageVersion, historyReplace, columns);
3697
+ updateUrl(buildModel({
3698
+ columnOrderModel: orderedFields
3699
+ }), search, localStorageVersion, historyReplace, columns);
2970
3700
  }
2971
3701
  };
2972
3702
  const unsub1 = api.subscribeEvent('columnOrderChange', handleColumnOrderChange);
@@ -2975,99 +3705,69 @@ const useStatefulTable = props => {
2975
3705
  unsub1();
2976
3706
  unsub2();
2977
3707
  };
2978
- }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, rowGroupingParsed, aggregationParsed, pivotParsed, pivotActiveParsed, search, localStorageVersion, historyReplace, columns]);
2979
-
2980
- // Helper to build the current DataGridModel for updateUrl calls
2981
- const buildModel = function () {
2982
- var _apiRef$current$state, _apiRef$current2;
2983
- let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
2984
- return _objectSpread2({
2985
- filterModel: filterParsed,
2986
- sortModel: sortModelParsed,
2987
- paginationModel: paginationModelParsed,
2988
- columnsModel: (_apiRef$current$state = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
2989
- pinnedColumnsModel: pinnedColumnsModel,
2990
- density: densityParsed,
2991
- columnOrderModel: columnOrderParsed,
2992
- defaultColumnOrder,
2993
- rowGroupingModel: rowGroupingParsed,
2994
- aggregationModel: aggregationParsed,
2995
- pivotModel: pivotParsed,
2996
- pivotActive: pivotActiveParsed
2997
- }, overrides);
2998
- };
2999
-
3000
- // Stable GridPivotModel identity — only recompute when the simplified value changes.
3001
- // eslint-disable-next-line react-hooks/exhaustive-deps
3002
- const pivotModelMui = useMemo(() => toGridPivotModel(pivotParsed), [JSON.stringify(pivotParsed)]);
3708
+ }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, search, localStorageVersion, historyReplace, columns]);
3003
3709
 
3004
3710
  // Track last emitted values for deep-equal guards to avoid feedback loops.
3005
- // Initialised from the current parsed values; updated only when we actually fire.
3006
3711
  const lastEmittedFilterRef = useRef(filterParsed);
3007
3712
  const lastEmittedSortRef = useRef(sortModelParsed);
3008
3713
  const lastEmittedPaginationRef = useRef(paginationModelParsed);
3009
- const lastEmittedPivotRef = useRef(pivotParsed);
3714
+ const isModelDeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
3010
3715
  return {
3011
3716
  apiRef,
3012
3717
  columns,
3013
3718
  density: densityParsed,
3014
- columnOrderModel: columnOrderParsedRef.current,
3015
- rowGroupingModel: rowGroupingParsedRef.current,
3016
- aggregationModel: aggregationParsedRef.current,
3017
- pivotModel: pivotModelMui,
3018
- pivotActive: pivotActiveParsed,
3719
+ columnOrderModel: columnOrderParsed,
3019
3720
  onFilterModelChange: (model, details) => {
3020
3721
  const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
3021
3722
  items: model.items.map(item => {
3022
- var _apiRef$current3;
3023
- const column = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.getColumn(item.field);
3024
- item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
3723
+ const column = apiRef.current.getColumn(item.field);
3724
+ item.type = column.type || 'string';
3025
3725
  return item;
3026
3726
  }),
3027
3727
  quickFilterValues: model.quickFilterValues || []
3028
3728
  });
3029
- if (isDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
3729
+ if (isModelDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
3030
3730
  lastEmittedFilterRef.current = filterModel;
3731
+ propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
3031
3732
  updateUrl(buildModel({
3032
3733
  filterModel
3033
3734
  }), search, localStorageVersion, historyReplace, columns);
3034
- propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
3035
3735
  },
3036
- filterModel: filterParsedRef.current,
3736
+ filterModel: filterParsed,
3037
3737
  onSortModelChange: (model, details) => {
3038
- if (isDeepEqual(model, lastEmittedSortRef.current)) return;
3738
+ if (isModelDeepEqual(model, lastEmittedSortRef.current)) return;
3039
3739
  lastEmittedSortRef.current = model;
3740
+ propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
3040
3741
  updateUrl(buildModel({
3041
3742
  sortModel: model
3042
3743
  }), search, localStorageVersion, historyReplace, columns);
3043
- propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
3044
3744
  },
3045
- sortModel: sortModelParsedRef.current,
3745
+ sortModel: sortModelParsed,
3046
3746
  onPinnedColumnsChange: (pinnedColumns, details) => {
3747
+ propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
3047
3748
  updateUrl(buildModel({
3048
3749
  pinnedColumnsModel: pinnedColumns
3049
3750
  }), search, localStorageVersion, historyReplace, columns);
3050
- propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
3051
3751
  },
3052
- pinnedColumns: pinnedColumnsModelRef.current,
3053
- paginationModel: paginationModelParsedRef.current,
3752
+ pinnedColumns: pinnedColumnsModel,
3753
+ paginationModel: paginationModelParsed,
3054
3754
  onPaginationModelChange: (model, details) => {
3055
3755
  const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
3056
3756
  direction: paginationModelParsed.page < model.page ? 'next' : 'back'
3057
3757
  });
3058
- if (isDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
3758
+ if (isModelDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
3059
3759
  lastEmittedPaginationRef.current = paginationModel;
3760
+ propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
3060
3761
  updateUrl(buildModel({
3061
3762
  paginationModel
3062
3763
  }), search, localStorageVersion, historyReplace, columns);
3063
- propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
3064
3764
  },
3065
- columnVisibilityModel: visibilityModelRef.current,
3765
+ columnVisibilityModel: visibilityModel,
3066
3766
  onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
3767
+ propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
3067
3768
  updateUrl(buildModel({
3068
3769
  columnsModel: columnsVisibilityModel
3069
3770
  }), search, localStorageVersion, historyReplace, columns);
3070
- propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
3071
3771
  },
3072
3772
  onColumnWidthChange: (params, event, details) => {
3073
3773
  propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -3075,38 +3775,11 @@ const useStatefulTable = props => {
3075
3775
  newWidth: params.width,
3076
3776
  field: params.colDef.field
3077
3777
  });
3078
- },
3079
- onRowGroupingModelChange: (model, details) => {
3080
- updateUrl(buildModel({
3081
- rowGroupingModel: model
3082
- }), search, localStorageVersion, historyReplace, columns);
3083
- propsOnRowGroupingModelChange === null || propsOnRowGroupingModelChange === void 0 ? void 0 : propsOnRowGroupingModelChange(model, details);
3084
- },
3085
- onAggregationModelChange: (model, details) => {
3086
- updateUrl(buildModel({
3087
- aggregationModel: model
3088
- }), search, localStorageVersion, historyReplace, columns);
3089
- propsOnAggregationModelChange === null || propsOnAggregationModelChange === void 0 ? void 0 : propsOnAggregationModelChange(model, details);
3090
- },
3091
- onPivotModelChange: model => {
3092
- const simplified = fromGridPivotModel(model);
3093
- if (isDeepEqual(simplified, lastEmittedPivotRef.current)) return;
3094
- lastEmittedPivotRef.current = simplified;
3095
- updateUrl(buildModel({
3096
- pivotModel: simplified
3097
- }), search, localStorageVersion, historyReplace, columns);
3098
- propsOnPivotModelChange === null || propsOnPivotModelChange === void 0 ? void 0 : propsOnPivotModelChange(model);
3099
- },
3100
- onPivotActiveChange: active => {
3101
- if (active === pivotActiveParsed) return;
3102
- updateUrl(buildModel({
3103
- pivotActive: active
3104
- }), search, localStorageVersion, historyReplace, columns);
3105
3778
  }
3106
3779
  };
3107
3780
  };
3108
3781
 
3109
- 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", "onRowGroupingModelChange", "onAggregationModelChange", "onPivotModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount", "density", "dataSource", "filterMode", "sortingMode"];
3782
+ 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"];
3110
3783
  const COMPONENT_NAME = 'DataGrid';
3111
3784
  const CLASSNAME = 'redsift-datagrid';
3112
3785
 
@@ -3190,9 +3863,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3190
3863
  onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
3191
3864
  onPinnedColumnsChange: propsOnPinnedColumnsChange,
3192
3865
  onSortModelChange: propsOnSortModelChange,
3193
- onRowGroupingModelChange: propsOnRowGroupingModelChange,
3194
- onAggregationModelChange: propsOnAggregationModelChange,
3195
- onPivotModelChange: propsOnPivotModelChange,
3196
3866
  pagination,
3197
3867
  paginationPlacement = 'both',
3198
3868
  paginationProps,
@@ -3202,26 +3872,15 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3202
3872
  theme: propsTheme,
3203
3873
  useRouter,
3204
3874
  paginationMode = 'client',
3205
- rowCount,
3206
- density: _density,
3207
- dataSource,
3208
- filterMode: propsFilterMode,
3209
- sortingMode: propsSortingMode
3875
+ rowCount
3210
3876
  } = props,
3211
3877
  forwardedProps = _objectWithoutProperties(props, _excluded);
3212
- const theme = useTheme(propsTheme);
3878
+ const theme = useTheme$1(propsTheme);
3213
3879
  const _apiRef = useGridApiRef();
3214
3880
  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
3881
+ const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar;
3215
3882
  LicenseInfo.setLicenseKey(license);
3216
3883
  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
3217
-
3218
- // When dataSource is present, MUI manages filter/sort/pagination internally.
3219
- // We must not pass controlled models — only initialState (one-time) and
3220
- // write-only onChange handlers for URL/localStorage persistence.
3221
- const isDataSourceMode = Boolean(dataSource);
3222
- const effectivePaginationMode = isDataSourceMode ? 'server' : paginationMode;
3223
- const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode;
3224
- const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode;
3225
3884
  const {
3226
3885
  onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
3227
3886
  onFilterModelChange: controlledOnFilterModelChange,
@@ -3255,15 +3914,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3255
3914
  pinnedColumns,
3256
3915
  sortModel,
3257
3916
  onColumnWidthChange,
3258
- columnOrderModel,
3259
- rowGroupingModel,
3260
- aggregationModel,
3261
- pivotModel,
3262
- pivotActive,
3263
- onRowGroupingModelChange,
3264
- onAggregationModelChange,
3265
- onPivotModelChange,
3266
- onPivotActiveChange
3917
+ columnOrderModel
3267
3918
  } = useStatefulTable({
3268
3919
  apiRef: apiRef,
3269
3920
  initialState,
@@ -3274,39 +3925,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3274
3925
  onPaginationModelChange: controlledOnPaginationModelChange,
3275
3926
  onPinnedColumnsChange: controlledOnPinnedColumnsChange,
3276
3927
  onSortModelChange: controlledOnSortModelChange,
3277
- onRowGroupingModelChange: propsOnRowGroupingModelChange,
3278
- onAggregationModelChange: propsOnAggregationModelChange,
3279
- onPivotModelChange: propsOnPivotModelChange,
3280
3928
  useRouter: useRouter,
3281
3929
  localStorageVersion,
3282
3930
  previousLocalStorageVersions
3283
3931
  });
3284
-
3285
- // In dataSource mode, track pagination locally for the custom pagination slots
3286
- // (rendered outside DataGridPremium). MUI owns the actual pagination state internally.
3287
- const [dataSourcePaginationModel, setDataSourcePaginationModel] = useState(paginationModel);
3288
-
3289
- // The pagination model to use for display in pagination slots
3290
- const activePaginationModel = isDataSourceMode ? dataSourcePaginationModel : paginationModel;
3291
-
3292
- // In dataSource mode, the top pagination (outside DataGridPremium) must go through
3293
- // apiRef to change MUI's internal page. MUI then fires onPaginationModelChange
3294
- // which updates URL and local state.
3295
- const dataSourceTopPaginationChange = useCallback(model => {
3296
- var _apiRef$current;
3297
- (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPaginationModel(model);
3298
- }, [apiRef]);
3299
-
3300
- // Wrap onPaginationModelChange to also track state locally in dataSource mode
3301
- const wrappedOnPaginationModelChange = useCallback((model, details) => {
3302
- if (isDataSourceMode) {
3303
- setDataSourcePaginationModel(model);
3304
- }
3305
- onPaginationModelChange(model, details);
3306
- }, [isDataSourceMode, onPaginationModelChange]);
3307
- const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
3932
+ const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
3308
3933
  useEffect(() => {
3309
- setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
3934
+ setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
3310
3935
  }, [propsRowSelectionModel]);
3311
3936
  const onRowSelectionModelChange = (selectionModel, details) => {
3312
3937
  setRowSelectionModel(selectionModel);
@@ -3320,41 +3945,18 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3320
3945
  pageSize: paginationModel.pageSize
3321
3946
  });
3322
3947
 
3323
- // Version counter to force re-renders when selectionStatus ref changes
3324
- const [, forceSelectionUpdate] = useState(0);
3325
-
3326
3948
  // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
3327
3949
  // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
3328
- const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(effectivePaginationMode != 'server');
3329
-
3330
- // Track when the grid API is ready to ensure top pagination renders correctly
3331
- const [gridReady, setGridReady] = useState(false);
3332
-
3333
- // Force re-render when the grid API becomes ready (for top pagination)
3334
- useEffect(() => {
3335
- if (apiRef.current && !gridReady) {
3336
- setGridReady(true);
3337
- }
3338
- });
3339
-
3340
- // Sync persisted density via apiRef — initialState only applies on mount,
3341
- // so this handles SPA back/forward navigation where controlledDensity changes after mount
3342
- useEffect(() => {
3343
- if (apiRef.current) {
3344
- apiRef.current.setDensity(controlledDensity);
3345
- }
3346
- }, [controlledDensity, apiRef]);
3950
+ const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
3347
3951
 
3348
3952
  // in server-side pagination we want to update the selection status
3349
3953
  // every time we navigate between pages, resize our page or select something
3350
3954
  useEffect(() => {
3351
- if (effectivePaginationMode == 'server') {
3352
- onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, activePaginationModel.page, activePaginationModel.pageSize);
3955
+ if (paginationMode == 'server') {
3956
+ onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatusRef, isRowSelectable, paginationModel.page, paginationModel.pageSize);
3353
3957
  }
3354
- }, [rowSelectionModel, activePaginationModel.page, activePaginationModel.pageSize, rows]);
3355
-
3356
- // In dataSource mode MUI provides rows internally; skip the guard.
3357
- if (!isDataSourceMode && !Array.isArray(rows)) {
3958
+ }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize, rows]);
3959
+ if (!Array.isArray(rows)) {
3358
3960
  return null;
3359
3961
  }
3360
3962
 
@@ -3363,15 +3965,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3363
3965
  // receive the fresh value in the same render cycle — no extra re-render needed.
3364
3966
  // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
3365
3967
  let selectionStatus = selectionStatusRef.current;
3366
- if (pagination && effectivePaginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
3968
+ if (pagination && paginationMode !== 'server' && Array.isArray(rowSelectionModel) && rowSelectionModel.length > 0) {
3367
3969
  try {
3368
- // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors.
3369
- // MUI's paginated selectors use apiRef internal state which may be stale when
3370
- // paginationModel prop changes — our React state is always up to date.
3371
- const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
3372
- const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
3373
- const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
3374
- const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref => {
3970
+ const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
3375
3971
  let {
3376
3972
  model
3377
3973
  } = _ref;
@@ -3383,29 +3979,24 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3383
3979
  id
3384
3980
  } = _ref2;
3385
3981
  return id;
3386
- }) : pageEntries.map(_ref3 => {
3387
- let {
3388
- id
3389
- } = _ref3;
3390
- return id;
3391
- });
3982
+ }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
3392
3983
  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
3393
- const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref4 => {
3984
+ const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
3394
3985
  let {
3395
3986
  model
3396
- } = _ref4;
3987
+ } = _ref3;
3397
3988
  return isRowSelectable({
3398
3989
  row: model
3399
3990
  });
3400
- }).map(_ref5 => {
3991
+ }).map(_ref4 => {
3401
3992
  let {
3402
3993
  id
3403
- } = _ref5;
3994
+ } = _ref4;
3404
3995
  return id;
3405
3996
  }) : gridFilteredSortedRowIdsSelector(apiRef);
3406
3997
  const numberOfSelectableRowsInTable = selectableRowsInTable.length;
3407
- const numberOfSelectedRows = getSelectionCount(rowSelectionModel);
3408
- const selectedOnCurrentPage = selectableRowsInPage.filter(id => isRowSelected(rowSelectionModel, id));
3998
+ const numberOfSelectedRows = rowSelectionModel.length;
3999
+ const selectedOnCurrentPage = selectableRowsInPage.filter(id => rowSelectionModel.includes(id));
3409
4000
  if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
3410
4001
  selectionStatus = {
3411
4002
  type: 'table',
@@ -3430,7 +4021,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3430
4021
  } catch {
3431
4022
  // apiRef may not be initialized on first render
3432
4023
  }
3433
- } else if (pagination && effectivePaginationMode !== 'server') {
4024
+ } else if (pagination && paginationMode !== 'server') {
3434
4025
  selectionStatus = {
3435
4026
  type: 'none',
3436
4027
  numberOfSelectedRows: 0
@@ -3459,206 +4050,156 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3459
4050
  ref: datagridRef,
3460
4051
  className: classNames(StatefulDataGrid.className, className),
3461
4052
  $height: height
3462
- }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
3463
- displaySelection: true,
3464
- displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
3465
- displayPagination: ['top', 'both'].includes(paginationPlacement),
3466
- selectionStatus: selectionStatus,
3467
- paginationModel: activePaginationModel,
3468
- onPaginationModelChange: isDataSourceMode ? dataSourceTopPaginationChange : onPaginationModelChange,
3469
- pageSizeOptions: pageSizeOptions,
3470
- paginationProps: paginationProps,
3471
- rowCount: rowCount
3472
- }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
3473
- displaySelection: true,
3474
- displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
3475
- displayPagination: ['top', 'both'].includes(paginationPlacement),
3476
- selectionStatus: selectionStatus,
3477
- apiRef: apiRef,
3478
- isRowSelectable: isRowSelectable,
3479
- paginationModel: activePaginationModel,
3480
- onPaginationModelChange: onPaginationModelChange,
3481
- pageSizeOptions: pageSizeOptions,
3482
- paginationProps: paginationProps
3483
- }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
4053
+ }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
3484
4054
  apiRef: apiRef,
3485
- dataSource: dataSource,
3486
4055
  columns: columns,
3487
4056
  columnVisibilityModel: columnVisibilityModel,
4057
+ density: controlledDensity,
4058
+ filterModel: filterModel,
3488
4059
  onColumnVisibilityModelChange: onColumnVisibilityModelChange,
4060
+ onFilterModelChange: onFilterModelChange,
4061
+ onPaginationModelChange: onPaginationModelChange,
3489
4062
  onPinnedColumnsChange: onPinnedColumnsChange,
4063
+ onSortModelChange: onSortModelChange,
4064
+ paginationModel: paginationModel,
3490
4065
  pinnedColumns: pinnedColumns,
4066
+ sortModel: sortModel,
3491
4067
  pageSizeOptions: pageSizeOptions,
3492
4068
  onColumnWidthChange: onColumnWidthChange,
3493
- rowGroupingModel: rowGroupingModel,
3494
- onRowGroupingModelChange: onRowGroupingModelChange,
3495
- aggregationModel: aggregationModel,
3496
- onAggregationModelChange: onAggregationModelChange,
3497
- pivotModel: pivotModel,
3498
- onPivotModelChange: onPivotModelChange,
3499
- pivotActive: pivotActive,
3500
- onPivotActiveChange: onPivotActiveChange
3501
- // In dataSource mode: models are uncontrolled (MUI owns them),
3502
- // onChange handlers are write-only for URL/localStorage persistence,
3503
- // and initialState seeds MUI on mount from the persisted URL state.
3504
- }, isDataSourceMode ? {
3505
- onFilterModelChange: onFilterModelChange,
3506
- onSortModelChange: onSortModelChange,
3507
- onPaginationModelChange: wrappedOnPaginationModelChange,
3508
- initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
3509
- density: controlledDensity,
3510
- columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
3511
- orderedFields: columnOrderModel
3512
- }),
3513
- filter: {
3514
- filterModel
3515
- },
3516
- sorting: {
3517
- sortModel
3518
- },
3519
- pagination: {
3520
- paginationModel
3521
- },
3522
- pivoting: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.pivoting), {}, {
3523
- enabled: pivotActive
3524
- })
3525
- })
3526
- } : {
3527
- filterModel,
3528
- sortModel,
3529
- paginationModel,
3530
- onFilterModelChange: onFilterModelChange,
3531
- onSortModelChange: onSortModelChange,
3532
- onPaginationModelChange: wrappedOnPaginationModelChange,
3533
4069
  initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
3534
- density: controlledDensity,
3535
4070
  columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
3536
4071
  orderedFields: columnOrderModel
3537
4072
  })
3538
- })
3539
- }, {
4073
+ }),
3540
4074
  isRowSelectable: isRowSelectable,
3541
4075
  pagination: pagination,
3542
- paginationMode: effectivePaginationMode,
3543
- filterMode: effectiveFilterMode,
3544
- sortingMode: effectiveSortingMode,
3545
- keepNonExistentRowsSelected: effectivePaginationMode == 'server',
3546
- rows: isDataSourceMode ? [] : rows,
4076
+ paginationMode: paginationMode,
4077
+ keepNonExistentRowsSelected: paginationMode == 'server',
4078
+ rows: rows,
3547
4079
  rowCount: rowCount,
3548
4080
  autoHeight: autoHeight,
3549
4081
  checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
3550
- disableRowSelectionExcludeModel: true,
3551
- showToolbar: !hideToolbar,
3552
4082
  slots: _objectSpread2(_objectSpread2({
3553
4083
  baseButton: BaseButton,
3554
4084
  baseCheckbox: BaseCheckbox,
3555
- baseIconButton: BaseIconButton,
3556
- columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3557
- displayName: "columnFilteredIcon"
4085
+ // baseTextField,
4086
+ basePopper: BasePopper,
4087
+ columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4088
+ displayName: "ColumnFilteredIcon"
3558
4089
  })),
3559
- columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3560
- displayName: "columnSelectorIcon"
4090
+ columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4091
+ displayName: "ColumnSelectorIcon"
3561
4092
  })),
3562
- columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3563
- displayName: "columnSortedAscendingIcon"
4093
+ columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4094
+ displayName: "ColumnSortedAscendingIcon"
3564
4095
  })),
3565
- columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3566
- displayName: "columnSortedDescendingIcon"
4096
+ columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4097
+ displayName: "ColumnSortedDescendingIcon"
3567
4098
  })),
3568
- densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3569
- displayName: "densityCompactIcon"
4099
+ densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4100
+ displayName: "DensityCompactIcon"
3570
4101
  })),
3571
- densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3572
- displayName: "densityStandardIcon"
4102
+ densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4103
+ displayName: "DensityStandardIcon"
3573
4104
  })),
3574
- densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3575
- displayName: "densityComfortableIcon"
4105
+ densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4106
+ displayName: "DensityComfortableIcon"
3576
4107
  })),
3577
- detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3578
- displayName: "detailPanelCollapseIcon"
4108
+ detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4109
+ displayName: "DetailPanelCollapseIcon"
3579
4110
  })),
3580
- detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3581
- displayName: "detailPanelExpandIcon"
4111
+ detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4112
+ displayName: "DetailPanelExpandIcon"
3582
4113
  })),
3583
- exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3584
- displayName: "exportIcon"
4114
+ exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
4115
+ displayName: "ExportIcon"
3585
4116
  })),
3586
- openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
3587
- displayName: "openFilterButtonIcon"
3588
- }))
4117
+ openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
4118
+ displayName: "OpenFilterButtonIcon"
4119
+ }, props))
3589
4120
  }, slots), {}, {
4121
+ toolbar: ToolbarWrapper,
3590
4122
  pagination: props => {
3591
- return pagination ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
4123
+ return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
3592
4124
  displaySelection: false,
3593
4125
  displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
3594
4126
  displayPagination: ['bottom', 'both'].includes(paginationPlacement),
3595
4127
  selectionStatus: selectionStatus,
3596
- paginationModel: activePaginationModel,
3597
- onPaginationModelChange: wrappedOnPaginationModelChange,
4128
+ paginationModel: paginationModel,
4129
+ onPaginationModelChange: onPaginationModelChange,
3598
4130
  pageSizeOptions: pageSizeOptions,
3599
4131
  paginationProps: paginationProps,
4132
+ paginationMode: paginationMode,
3600
4133
  rowCount: rowCount
3601
- })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
4134
+ })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
3602
4135
  displaySelection: false,
3603
4136
  displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
3604
4137
  displayPagination: ['bottom', 'both'].includes(paginationPlacement),
3605
4138
  selectionStatus: selectionStatus,
3606
4139
  apiRef: apiRef,
3607
4140
  isRowSelectable: isRowSelectable,
3608
- paginationModel: activePaginationModel,
3609
- onPaginationModelChange: wrappedOnPaginationModelChange,
4141
+ paginationModel: paginationModel,
4142
+ onPaginationModelChange: onPaginationModelChange,
3610
4143
  pageSizeOptions: pageSizeOptions,
3611
- paginationProps: paginationProps
4144
+ paginationProps: paginationProps,
4145
+ paginationMode: paginationMode
3612
4146
  })) : null;
3613
4147
  }
3614
4148
  }),
3615
- slotProps: _objectSpread2({}, slotProps),
4149
+ slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
4150
+ toolbar: _objectSpread2({
4151
+ hideToolbar,
4152
+ RenderedToolbar,
4153
+ filterModel,
4154
+ onFilterModelChange,
4155
+ pagination,
4156
+ paginationPlacement,
4157
+ selectionStatus,
4158
+ apiRef,
4159
+ isRowSelectable,
4160
+ paginationModel,
4161
+ onPaginationModelChange,
4162
+ pageSizeOptions,
4163
+ paginationProps,
4164
+ paginationMode,
4165
+ rowCount
4166
+ }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
4167
+ }),
3616
4168
  rowSelectionModel: rowSelectionModel,
3617
4169
  onRowSelectionModelChange: (newSelectionModel, details) => {
3618
- if (pagination && effectivePaginationMode != 'server') {
3619
- // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors
3620
- // to avoid stale apiRef pagination state.
3621
- const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
3622
- const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
3623
- const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
3624
- const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref6 => {
4170
+ if (pagination && paginationMode != 'server') {
4171
+ const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
3625
4172
  let {
3626
4173
  model
3627
- } = _ref6;
4174
+ } = _ref5;
3628
4175
  return isRowSelectable({
3629
4176
  row: model
3630
4177
  });
3631
- }).map(_ref7 => {
3632
- let {
3633
- id
3634
- } = _ref7;
3635
- return id;
3636
- }) : pageEntries.map(_ref8 => {
4178
+ }).map(_ref6 => {
3637
4179
  let {
3638
4180
  id
3639
- } = _ref8;
4181
+ } = _ref6;
3640
4182
  return id;
3641
- });
4183
+ }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
3642
4184
  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
3643
- const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref9 => {
4185
+ const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
3644
4186
  let {
3645
4187
  model
3646
- } = _ref9;
4188
+ } = _ref7;
3647
4189
  return isRowSelectable({
3648
4190
  row: model
3649
4191
  });
3650
- }).map(_ref10 => {
4192
+ }).map(_ref8 => {
3651
4193
  let {
3652
4194
  id
3653
- } = _ref10;
4195
+ } = _ref8;
3654
4196
  return id;
3655
4197
  }) : gridFilteredSortedRowIdsSelector(apiRef);
3656
4198
  const numberOfSelectableRowsInTable = selectableRowsInTable.length;
3657
- const numberOfSelectedRows = getSelectionCount(newSelectionModel);
4199
+ const numberOfSelectedRows = newSelectionModel.length;
3658
4200
  if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
3659
4201
  setTimeout(() => {
3660
- var _apiRef$current2;
3661
- (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.selectRows([], true, true);
4202
+ apiRef.current.selectRows([], true, true);
3662
4203
  }, 0);
3663
4204
  }
3664
4205
  if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
@@ -3682,7 +4223,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3682
4223
  numberOfSelectedRows
3683
4224
  };
3684
4225
  }
3685
- forceSelectionUpdate(v => v + 1);
3686
4226
  }
3687
4227
  onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
3688
4228
  },
@@ -3700,5 +4240,5 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
3700
4240
  StatefulDataGrid.className = CLASSNAME;
3701
4241
  StatefulDataGrid.displayName = COMPONENT_NAME;
3702
4242
 
3703
- export { buildStorageKey as $, ARRAY_IS_EMPTY as A, IS as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS_NOT as F, getGridStringOperators as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, FILTER_MODEL_KEY as M, SORT_MODEL_KEY as N, PINNED_COLUMNS as O, PAGINATION_MODEL_KEY as P, DIMENSION_MODEL_KEY as Q, FILTER_SEARCH_KEY as R, STARTS_WITH_ANY_OF as S, DENSITY_MODEL_KEY as T, COLUMN_ORDER_MODEL_KEY as U, VISIBILITY_MODEL_KEY as V, ROW_GROUPING_MODEL_KEY as W, AGGREGATION_MODEL_KEY as X, PIVOT_MODEL_KEY as Y, PIVOT_ACTIVE_KEY as Z, CATEGORIES as _, DOES_NOT_EQUAL as a, clearPreviousVersionStorage as a0, clearAllVersionStorage as a1, resetStatefulDataGridState as a2, convertToDisplayFormat as a3, convertFromDisplayFormat as a4, getDecodedSearchFromUrl as a5, buildQueryParamsString as a6, areSearchStringsEqual as a7, decodeValue as a8, encodeValue as a9, getPivotFromString as aA, getSearchParamsFromPivot as aB, getPivotActiveFromString as aC, getSearchParamsFromPivotActive as aD, getFinalSearch as aE, getModelsParsedOrUpdateLocalStorage as aF, updateUrl as aG, areFilterModelsEquivalent as aH, StatefulDataGrid as aI, urlSearchParamsToString as aa, numberOperatorEncoder as ab, numberOperatorDecoder as ac, isOperatorValueValid as ad, isValueValid as ae, getFilterModelFromString as af, getSearchParamsFromFilterModel as ag, getSortingFromString as ah, getSearchParamsFromSorting as ai, getPaginationFromString as aj, getSearchParamsFromPagination as ak, getColumnVisibilityFromString as al, getSearchParamsFromColumnVisibility as am, getPinnedColumnsFromString as an, getSearchParamsFromPinnedColumns as ao, getSearchParamsFromTab as ap, getDensityFromString as aq, getSearchParamsFromDensity as ar, getDensityModel as as, getColumnOrderFromString as at, getSearchParamsFromColumnOrder as au, getRowGroupingFromString as av, getSearchParamsFromRowGrouping as aw, getAggregationFromString as ax, getSearchParamsFromAggregation as ay, fromGridPivotModel as az, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
4243
+ export { clearAllVersionStorage as $, ARRAY_IS_EMPTY as A, Box$1 as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS as F, IS_NOT as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringOperators as J, getGridStringArrayOperators as K, getGridStringArrayOperatorsWithSelect as L, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as M, FILTER_MODEL_KEY as N, SORT_MODEL_KEY as O, PAGINATION_MODEL_KEY as P, PINNED_COLUMNS as Q, DIMENSION_MODEL_KEY as R, STARTS_WITH_ANY_OF as S, TextField$1 as T, FILTER_SEARCH_KEY as U, VISIBILITY_MODEL_KEY as V, DENSITY_MODEL_KEY as W, COLUMN_ORDER_MODEL_KEY as X, CATEGORIES as Y, buildStorageKey as Z, clearPreviousVersionStorage as _, DOES_NOT_EQUAL as a, resetStatefulDataGridState as a0, convertToDisplayFormat as a1, convertFromDisplayFormat as a2, getDecodedSearchFromUrl as a3, buildQueryParamsString as a4, areSearchStringsEqual as a5, decodeValue as a6, encodeValue as a7, urlSearchParamsToString as a8, numberOperatorEncoder as a9, numberOperatorDecoder as aa, isOperatorValueValid as ab, isValueValid as ac, getFilterModelFromString as ad, getSearchParamsFromFilterModel as ae, getSortingFromString as af, getSearchParamsFromSorting as ag, getPaginationFromString as ah, getSearchParamsFromPagination as ai, getColumnVisibilityFromString as aj, getSearchParamsFromColumnVisibility as ak, getPinnedColumnsFromString as al, getSearchParamsFromPinnedColumns as am, getSearchParamsFromTab as an, getDensityFromString as ao, getSearchParamsFromDensity as ap, getColumnOrderFromString as aq, getSearchParamsFromColumnOrder as ar, getFinalSearch as as, getModelsParsedOrUpdateLocalStorage as at, updateUrl as au, areFilterModelsEquivalent as av, StatefulDataGrid as aw, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
3704
4244
  //# sourceMappingURL=StatefulDataGrid2.js.map