@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.
- package/_internal/BaseComponents.js +1 -1
- package/_internal/BasePopper.js +2469 -0
- package/_internal/BasePopper.js.map +1 -0
- package/_internal/ControlledPagination.js +10985 -0
- package/_internal/ControlledPagination.js.map +1 -0
- package/_internal/DataGrid2.js +76 -115
- package/_internal/DataGrid2.js.map +1 -1
- package/_internal/GridToolbarFilterSemanticField2.js +3 -1340
- package/_internal/GridToolbarFilterSemanticField2.js.map +1 -1
- package/_internal/Pagination.js +1 -1
- package/_internal/Portal.js +6538 -0
- package/_internal/Portal.js.map +1 -0
- package/_internal/StatefulDataGrid.js +1 -1
- package/_internal/StatefulDataGrid2.js +1491 -951
- package/_internal/StatefulDataGrid2.js.map +1 -1
- package/_internal/Toolbar2.js +6 -23
- package/_internal/Toolbar2.js.map +1 -1
- package/_internal/ToolbarWrapper2.js +1 -1
- package/_internal/jsx-runtime.js +1342 -0
- package/_internal/jsx-runtime.js.map +1 -0
- package/_internal/useControlledDatagridState.js +287 -13
- package/_internal/useControlledDatagridState.js.map +1 -1
- package/index.d.ts +349 -513
- package/index.js +15 -46
- package/index.js.map +1 -1
- package/package.json +8 -7
- package/_internal/BaseIconButton.js +0 -126
- package/_internal/BaseIconButton.js.map +0 -1
- package/_internal/ServerSideControlledPagination.js +0 -318
- package/_internal/ServerSideControlledPagination.js.map +0 -1
|
@@ -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,
|
|
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 {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
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 {
|
|
15
|
-
import { B as BaseButton, a as BaseCheckbox, c as
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
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', '
|
|
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
|
-
|
|
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
|
|
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', '
|
|
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,
|
|
1971
|
-
//
|
|
1972
|
-
const
|
|
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
|
-
} =
|
|
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
|
|
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 = (
|
|
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
|
-
|
|
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(
|
|
3601
|
+
const onColumnDimensionChange = useCallback(_ref => {
|
|
2816
3602
|
let {
|
|
2817
3603
|
newWidth,
|
|
2818
3604
|
field
|
|
2819
|
-
} =
|
|
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
|
-
|
|
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
|
-
|
|
2936
|
-
|
|
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,
|
|
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
|
-
|
|
2958
|
-
|
|
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,
|
|
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
|
|
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:
|
|
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
|
-
|
|
3023
|
-
|
|
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 (
|
|
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:
|
|
3736
|
+
filterModel: filterParsed,
|
|
3037
3737
|
onSortModelChange: (model, details) => {
|
|
3038
|
-
if (
|
|
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:
|
|
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:
|
|
3053
|
-
paginationModel:
|
|
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 (
|
|
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:
|
|
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", "
|
|
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(
|
|
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(
|
|
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 (
|
|
3352
|
-
onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef,
|
|
3955
|
+
if (paginationMode == 'server') {
|
|
3956
|
+
onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatusRef, isRowSelectable, paginationModel.page, paginationModel.pageSize);
|
|
3353
3957
|
}
|
|
3354
|
-
}, [rowSelectionModel,
|
|
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 &&
|
|
3968
|
+
if (pagination && paginationMode !== 'server' && Array.isArray(rowSelectionModel) && rowSelectionModel.length > 0) {
|
|
3367
3969
|
try {
|
|
3368
|
-
|
|
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
|
-
}) :
|
|
3387
|
-
let {
|
|
3388
|
-
id
|
|
3389
|
-
} = _ref3;
|
|
3390
|
-
return id;
|
|
3391
|
-
});
|
|
3982
|
+
}) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
|
|
3392
3983
|
const numberOfSelectableRowsInPage = selectableRowsInPage.length;
|
|
3393
|
-
const selectableRowsInTable = isRowSelectable ?
|
|
3984
|
+
const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
|
|
3394
3985
|
let {
|
|
3395
3986
|
model
|
|
3396
|
-
} =
|
|
3987
|
+
} = _ref3;
|
|
3397
3988
|
return isRowSelectable({
|
|
3398
3989
|
row: model
|
|
3399
3990
|
});
|
|
3400
|
-
}).map(
|
|
3991
|
+
}).map(_ref4 => {
|
|
3401
3992
|
let {
|
|
3402
3993
|
id
|
|
3403
|
-
} =
|
|
3994
|
+
} = _ref4;
|
|
3404
3995
|
return id;
|
|
3405
3996
|
}) : gridFilteredSortedRowIdsSelector(apiRef);
|
|
3406
3997
|
const numberOfSelectableRowsInTable = selectableRowsInTable.length;
|
|
3407
|
-
const numberOfSelectedRows =
|
|
3408
|
-
const selectedOnCurrentPage = selectableRowsInPage.filter(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 &&
|
|
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
|
-
},
|
|
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:
|
|
3543
|
-
|
|
3544
|
-
|
|
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
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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: "
|
|
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({
|
|
3587
|
-
displayName: "
|
|
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 ?
|
|
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:
|
|
3597
|
-
onPaginationModelChange:
|
|
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:
|
|
3609
|
-
onPaginationModelChange:
|
|
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 &&
|
|
3619
|
-
|
|
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
|
-
} =
|
|
4174
|
+
} = _ref5;
|
|
3628
4175
|
return isRowSelectable({
|
|
3629
4176
|
row: model
|
|
3630
4177
|
});
|
|
3631
|
-
}).map(
|
|
3632
|
-
let {
|
|
3633
|
-
id
|
|
3634
|
-
} = _ref7;
|
|
3635
|
-
return id;
|
|
3636
|
-
}) : pageEntries.map(_ref8 => {
|
|
4178
|
+
}).map(_ref6 => {
|
|
3637
4179
|
let {
|
|
3638
4180
|
id
|
|
3639
|
-
} =
|
|
4181
|
+
} = _ref6;
|
|
3640
4182
|
return id;
|
|
3641
|
-
});
|
|
4183
|
+
}) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
|
|
3642
4184
|
const numberOfSelectableRowsInPage = selectableRowsInPage.length;
|
|
3643
|
-
const selectableRowsInTable = isRowSelectable ?
|
|
4185
|
+
const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
|
|
3644
4186
|
let {
|
|
3645
4187
|
model
|
|
3646
|
-
} =
|
|
4188
|
+
} = _ref7;
|
|
3647
4189
|
return isRowSelectable({
|
|
3648
4190
|
row: model
|
|
3649
4191
|
});
|
|
3650
|
-
}).map(
|
|
4192
|
+
}).map(_ref8 => {
|
|
3651
4193
|
let {
|
|
3652
4194
|
id
|
|
3653
|
-
} =
|
|
4195
|
+
} = _ref8;
|
|
3654
4196
|
return id;
|
|
3655
4197
|
}) : gridFilteredSortedRowIdsSelector(apiRef);
|
|
3656
4198
|
const numberOfSelectableRowsInTable = selectableRowsInTable.length;
|
|
3657
|
-
const numberOfSelectedRows =
|
|
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
|
-
|
|
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 {
|
|
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
|