@redsift/table 11.9.0-muiv5 → 11.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,97 +1,14 @@
1
- import { _ as _objectWithoutPropertiesLoose, a as _extends, d as defaultSxConfig, i as isPlainObject, s as styled, b as styleFunctionSx, u as useTheme$1, c as clsx, P as PropTypes, e as exactProp, f as useTheme$2, T as THEME_ID, g as createTheme, C as ClassNameGenerator, h as generateUtilityClasses, j as generateUtilityClass, k as styled$1, l as useThemeProps, m as capitalize, n as composeClasses, r as rootShouldForwardProp, o as refType } from './Portal.js';
1
+ import { P as PropTypes, z as exactProp, x as useTheme$1, a as _extends, _ as _objectWithoutPropertiesLoose, T as THEME_ID } from './Portal.js';
2
2
  import * as React from 'react';
3
3
  import { useState, useEffect } from 'react';
4
4
  import { j as jsxRuntimeExports } from './jsx-runtime.js';
5
5
  import { ThemeContext as ThemeContext$2 } from '@emotion/react';
6
- import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
7
- import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
8
- import { Icon } from '@redsift/design-system';
9
- import { mdiSync } from '@redsift/icons';
10
- import { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput } from './ControlledPagination.js';
11
- import styled$2, { css } from 'styled-components';
6
+ import styled, { css } from 'styled-components';
12
7
 
13
8
  /* eslint-disable */
14
9
  // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
15
10
  var ponyfillGlobal = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
16
11
 
17
- function isMuiElement(element, muiNames) {
18
- return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
19
- }
20
-
21
- const _excluded$7 = ["sx"];
22
- const splitProps = props => {
23
- var _props$theme$unstable, _props$theme;
24
- const result = {
25
- systemProps: {},
26
- otherProps: {}
27
- };
28
- const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
29
- Object.keys(props).forEach(prop => {
30
- if (config[prop]) {
31
- result.systemProps[prop] = props[prop];
32
- } else {
33
- result.otherProps[prop] = props[prop];
34
- }
35
- });
36
- return result;
37
- };
38
- function extendSxProp(props) {
39
- const {
40
- sx: inSx
41
- } = props,
42
- other = _objectWithoutPropertiesLoose(props, _excluded$7);
43
- const {
44
- systemProps,
45
- otherProps
46
- } = splitProps(other);
47
- let finalSx;
48
- if (Array.isArray(inSx)) {
49
- finalSx = [systemProps, ...inSx];
50
- } else if (typeof inSx === 'function') {
51
- finalSx = (...args) => {
52
- const result = inSx(...args);
53
- if (!isPlainObject(result)) {
54
- return systemProps;
55
- }
56
- return _extends({}, systemProps, result);
57
- };
58
- } else {
59
- finalSx = _extends({}, systemProps, inSx);
60
- }
61
- return _extends({}, otherProps, {
62
- sx: finalSx
63
- });
64
- }
65
-
66
- const _excluded$6 = ["className", "component"];
67
- function createBox(options = {}) {
68
- const {
69
- themeId,
70
- defaultTheme,
71
- defaultClassName = 'MuiBox-root',
72
- generateClassName
73
- } = options;
74
- const BoxRoot = styled('div', {
75
- shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
76
- })(styleFunctionSx);
77
- const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
78
- const theme = useTheme$1(defaultTheme);
79
- const _extendSxProp = extendSxProp(inProps),
80
- {
81
- className,
82
- component = 'div'
83
- } = _extendSxProp,
84
- other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
85
- return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
86
- as: component,
87
- ref: ref,
88
- className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
89
- theme: themeId ? theme[themeId] || theme : theme
90
- }, other));
91
- });
92
- return Box;
93
- }
94
-
95
12
  const ThemeContext = /*#__PURE__*/React.createContext(null);
96
13
  if (process.env.NODE_ENV !== 'production') {
97
14
  ThemeContext.displayName = 'ThemeContext';
@@ -203,7 +120,7 @@ function ThemeProvider$1(props) {
203
120
  theme: localTheme,
204
121
  themeId
205
122
  } = props;
206
- const upperTheme = useTheme$2(EMPTY_THEME);
123
+ const upperTheme = useTheme$1(EMPTY_THEME);
207
124
  const upperPrivateTheme = useTheme() || EMPTY_THEME;
208
125
  if (process.env.NODE_ENV !== 'production') {
209
126
  if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
@@ -242,12 +159,12 @@ if (process.env.NODE_ENV !== 'production') {
242
159
  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
243
160
  }
244
161
 
245
- const _excluded$5 = ["theme"];
162
+ const _excluded = ["theme"];
246
163
  function ThemeProvider(_ref) {
247
164
  let {
248
165
  theme: themeInput
249
166
  } = _ref,
250
- props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
167
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
251
168
  const scopedTheme = themeInput[THEME_ID];
252
169
  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
253
170
  themeId: scopedTheme ? THEME_ID : undefined,
@@ -265,1743 +182,6 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
265
182
  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
266
183
  } : void 0;
267
184
 
268
- const defaultTheme = createTheme();
269
- const Box = createBox({
270
- themeId: THEME_ID,
271
- defaultTheme,
272
- defaultClassName: 'MuiBox-root',
273
- generateClassName: ClassNameGenerator.generate
274
- });
275
- process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
276
- // ----------------------------- Warning --------------------------------
277
- // | These PropTypes are generated from the TypeScript type definitions |
278
- // | To update them edit the d.ts file and run "yarn proptypes" |
279
- // ----------------------------------------------------------------------
280
- /**
281
- * @ignore
282
- */
283
- children: PropTypes.node,
284
- /**
285
- * The component used for the root node.
286
- * Either a string to use a HTML element or a component.
287
- */
288
- component: PropTypes.elementType,
289
- /**
290
- * The system prop that allows defining system overrides as well as additional CSS styles.
291
- */
292
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
293
- } : void 0;
294
- var Box$1 = Box;
295
-
296
- function getFormLabelUtilityClasses(slot) {
297
- return generateUtilityClass('MuiFormLabel', slot);
298
- }
299
- const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
300
- var formLabelClasses$1 = formLabelClasses;
301
-
302
- const _excluded$4 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
303
- const useUtilityClasses$4 = ownerState => {
304
- const {
305
- classes,
306
- color,
307
- focused,
308
- disabled,
309
- error,
310
- filled,
311
- required
312
- } = ownerState;
313
- const slots = {
314
- root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
315
- asterisk: ['asterisk', error && 'error']
316
- };
317
- return composeClasses(slots, getFormLabelUtilityClasses, classes);
318
- };
319
- const FormLabelRoot = styled$1('label', {
320
- name: 'MuiFormLabel',
321
- slot: 'Root',
322
- overridesResolver: ({
323
- ownerState
324
- }, styles) => {
325
- return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
326
- }
327
- })(({
328
- theme,
329
- ownerState
330
- }) => _extends({
331
- color: (theme.vars || theme).palette.text.secondary
332
- }, theme.typography.body1, {
333
- lineHeight: '1.4375em',
334
- padding: 0,
335
- position: 'relative',
336
- [`&.${formLabelClasses$1.focused}`]: {
337
- color: (theme.vars || theme).palette[ownerState.color].main
338
- },
339
- [`&.${formLabelClasses$1.disabled}`]: {
340
- color: (theme.vars || theme).palette.text.disabled
341
- },
342
- [`&.${formLabelClasses$1.error}`]: {
343
- color: (theme.vars || theme).palette.error.main
344
- }
345
- }));
346
- const AsteriskComponent = styled$1('span', {
347
- name: 'MuiFormLabel',
348
- slot: 'Asterisk',
349
- overridesResolver: (props, styles) => styles.asterisk
350
- })(({
351
- theme
352
- }) => ({
353
- [`&.${formLabelClasses$1.error}`]: {
354
- color: (theme.vars || theme).palette.error.main
355
- }
356
- }));
357
- const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
358
- const props = useThemeProps({
359
- props: inProps,
360
- name: 'MuiFormLabel'
361
- });
362
- const {
363
- children,
364
- className,
365
- component = 'label'
366
- } = props,
367
- other = _objectWithoutPropertiesLoose(props, _excluded$4);
368
- const muiFormControl = useFormControl();
369
- const fcs = formControlState({
370
- props,
371
- muiFormControl,
372
- states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
373
- });
374
- const ownerState = _extends({}, props, {
375
- color: fcs.color || 'primary',
376
- component,
377
- disabled: fcs.disabled,
378
- error: fcs.error,
379
- filled: fcs.filled,
380
- focused: fcs.focused,
381
- required: fcs.required
382
- });
383
- const classes = useUtilityClasses$4(ownerState);
384
- return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
385
- as: component,
386
- ownerState: ownerState,
387
- className: clsx(classes.root, className),
388
- ref: ref
389
- }, other, {
390
- children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
391
- ownerState: ownerState,
392
- "aria-hidden": true,
393
- className: classes.asterisk,
394
- children: ["\u2009", '*']
395
- })]
396
- }));
397
- });
398
- process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
399
- // ----------------------------- Warning --------------------------------
400
- // | These PropTypes are generated from the TypeScript type definitions |
401
- // | To update them edit the d.ts file and run "yarn proptypes" |
402
- // ----------------------------------------------------------------------
403
- /**
404
- * The content of the component.
405
- */
406
- children: PropTypes.node,
407
- /**
408
- * Override or extend the styles applied to the component.
409
- */
410
- classes: PropTypes.object,
411
- /**
412
- * @ignore
413
- */
414
- className: PropTypes.string,
415
- /**
416
- * The color of the component.
417
- * It supports both default and custom theme colors, which can be added as shown in the
418
- * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
419
- */
420
- color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
421
- /**
422
- * The component used for the root node.
423
- * Either a string to use a HTML element or a component.
424
- */
425
- component: PropTypes.elementType,
426
- /**
427
- * If `true`, the label should be displayed in a disabled state.
428
- */
429
- disabled: PropTypes.bool,
430
- /**
431
- * If `true`, the label is displayed in an error state.
432
- */
433
- error: PropTypes.bool,
434
- /**
435
- * If `true`, the label should use filled classes key.
436
- */
437
- filled: PropTypes.bool,
438
- /**
439
- * If `true`, the input of this label is focused (used by `FormGroup` components).
440
- */
441
- focused: PropTypes.bool,
442
- /**
443
- * If `true`, the label will indicate that the `input` is required.
444
- */
445
- required: PropTypes.bool,
446
- /**
447
- * The system prop that allows defining system overrides as well as additional CSS styles.
448
- */
449
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
450
- } : void 0;
451
- var FormLabel$1 = FormLabel;
452
-
453
- function getInputLabelUtilityClasses(slot) {
454
- return generateUtilityClass('MuiInputLabel', slot);
455
- }
456
- generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
457
-
458
- const _excluded$3 = ["disableAnimation", "margin", "shrink", "variant", "className"];
459
- const useUtilityClasses$3 = ownerState => {
460
- const {
461
- classes,
462
- formControl,
463
- size,
464
- shrink,
465
- disableAnimation,
466
- variant,
467
- required
468
- } = ownerState;
469
- const slots = {
470
- root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
471
- asterisk: [required && 'asterisk']
472
- };
473
- const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
474
- return _extends({}, classes, composedClasses);
475
- };
476
- const InputLabelRoot = styled$1(FormLabel$1, {
477
- shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
478
- name: 'MuiInputLabel',
479
- slot: 'Root',
480
- overridesResolver: (props, styles) => {
481
- const {
482
- ownerState
483
- } = props;
484
- return [{
485
- [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
486
- }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
487
- }
488
- })(({
489
- theme,
490
- ownerState
491
- }) => _extends({
492
- display: 'block',
493
- transformOrigin: 'top left',
494
- whiteSpace: 'nowrap',
495
- overflow: 'hidden',
496
- textOverflow: 'ellipsis',
497
- maxWidth: '100%'
498
- }, ownerState.formControl && {
499
- position: 'absolute',
500
- left: 0,
501
- top: 0,
502
- // slight alteration to spec spacing to match visual spec result
503
- transform: 'translate(0, 20px) scale(1)'
504
- }, ownerState.size === 'small' && {
505
- // Compensation for the `Input.inputSizeSmall` style.
506
- transform: 'translate(0, 17px) scale(1)'
507
- }, ownerState.shrink && {
508
- transform: 'translate(0, -1.5px) scale(0.75)',
509
- transformOrigin: 'top left',
510
- maxWidth: '133%'
511
- }, !ownerState.disableAnimation && {
512
- transition: theme.transitions.create(['color', 'transform', 'max-width'], {
513
- duration: theme.transitions.duration.shorter,
514
- easing: theme.transitions.easing.easeOut
515
- })
516
- }, ownerState.variant === 'filled' && _extends({
517
- // Chrome's autofill feature gives the input field a yellow background.
518
- // Since the input field is behind the label in the HTML tree,
519
- // the input field is drawn last and hides the label with an opaque background color.
520
- // zIndex: 1 will raise the label above opaque background-colors of input.
521
- zIndex: 1,
522
- pointerEvents: 'none',
523
- transform: 'translate(12px, 16px) scale(1)',
524
- maxWidth: 'calc(100% - 24px)'
525
- }, ownerState.size === 'small' && {
526
- transform: 'translate(12px, 13px) scale(1)'
527
- }, ownerState.shrink && _extends({
528
- userSelect: 'none',
529
- pointerEvents: 'auto',
530
- transform: 'translate(12px, 7px) scale(0.75)',
531
- maxWidth: 'calc(133% - 24px)'
532
- }, ownerState.size === 'small' && {
533
- transform: 'translate(12px, 4px) scale(0.75)'
534
- })), ownerState.variant === 'outlined' && _extends({
535
- // see comment above on filled.zIndex
536
- zIndex: 1,
537
- pointerEvents: 'none',
538
- transform: 'translate(14px, 16px) scale(1)',
539
- maxWidth: 'calc(100% - 24px)'
540
- }, ownerState.size === 'small' && {
541
- transform: 'translate(14px, 9px) scale(1)'
542
- }, ownerState.shrink && {
543
- userSelect: 'none',
544
- pointerEvents: 'auto',
545
- // Theoretically, we should have (8+5)*2/0.75 = 34px
546
- // but it feels a better when it bleeds a bit on the left, so 32px.
547
- maxWidth: 'calc(133% - 32px)',
548
- transform: 'translate(14px, -9px) scale(0.75)'
549
- })));
550
- const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
551
- const props = useThemeProps({
552
- name: 'MuiInputLabel',
553
- props: inProps
554
- });
555
- const {
556
- disableAnimation = false,
557
- shrink: shrinkProp,
558
- className
559
- } = props,
560
- other = _objectWithoutPropertiesLoose(props, _excluded$3);
561
- const muiFormControl = useFormControl();
562
- let shrink = shrinkProp;
563
- if (typeof shrink === 'undefined' && muiFormControl) {
564
- shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
565
- }
566
- const fcs = formControlState({
567
- props,
568
- muiFormControl,
569
- states: ['size', 'variant', 'required']
570
- });
571
- const ownerState = _extends({}, props, {
572
- disableAnimation,
573
- formControl: muiFormControl,
574
- shrink,
575
- size: fcs.size,
576
- variant: fcs.variant,
577
- required: fcs.required
578
- });
579
- const classes = useUtilityClasses$3(ownerState);
580
- return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
581
- "data-shrink": shrink,
582
- ownerState: ownerState,
583
- ref: ref,
584
- className: clsx(classes.root, className)
585
- }, other, {
586
- classes: classes
587
- }));
588
- });
589
- process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
590
- // ----------------------------- Warning --------------------------------
591
- // | These PropTypes are generated from the TypeScript type definitions |
592
- // | To update them edit the d.ts file and run "yarn proptypes" |
593
- // ----------------------------------------------------------------------
594
- /**
595
- * The content of the component.
596
- */
597
- children: PropTypes.node,
598
- /**
599
- * Override or extend the styles applied to the component.
600
- */
601
- classes: PropTypes.object,
602
- /**
603
- * @ignore
604
- */
605
- className: PropTypes.string,
606
- /**
607
- * The color of the component.
608
- * It supports both default and custom theme colors, which can be added as shown in the
609
- * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
610
- */
611
- color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
612
- /**
613
- * If `true`, the transition animation is disabled.
614
- * @default false
615
- */
616
- disableAnimation: PropTypes.bool,
617
- /**
618
- * If `true`, the component is disabled.
619
- */
620
- disabled: PropTypes.bool,
621
- /**
622
- * If `true`, the label is displayed in an error state.
623
- */
624
- error: PropTypes.bool,
625
- /**
626
- * If `true`, the `input` of this label is focused.
627
- */
628
- focused: PropTypes.bool,
629
- /**
630
- * If `dense`, will adjust vertical spacing. This is normally obtained via context from
631
- * FormControl.
632
- */
633
- margin: PropTypes.oneOf(['dense']),
634
- /**
635
- * if `true`, the label will indicate that the `input` is required.
636
- */
637
- required: PropTypes.bool,
638
- /**
639
- * If `true`, the label is shrunk.
640
- */
641
- shrink: PropTypes.bool,
642
- /**
643
- * The size of the component.
644
- * @default 'normal'
645
- */
646
- size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
647
- /**
648
- * The system prop that allows defining system overrides as well as additional CSS styles.
649
- */
650
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
651
- /**
652
- * The variant to use.
653
- */
654
- variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
655
- } : void 0;
656
- var InputLabel$1 = InputLabel;
657
-
658
- function getFormControlUtilityClasses(slot) {
659
- return generateUtilityClass('MuiFormControl', slot);
660
- }
661
- generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
662
-
663
- const _excluded$2 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
664
- const useUtilityClasses$2 = ownerState => {
665
- const {
666
- classes,
667
- margin,
668
- fullWidth
669
- } = ownerState;
670
- const slots = {
671
- root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
672
- };
673
- return composeClasses(slots, getFormControlUtilityClasses, classes);
674
- };
675
- const FormControlRoot = styled$1('div', {
676
- name: 'MuiFormControl',
677
- slot: 'Root',
678
- overridesResolver: ({
679
- ownerState
680
- }, styles) => {
681
- return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
682
- }
683
- })(({
684
- ownerState
685
- }) => _extends({
686
- display: 'inline-flex',
687
- flexDirection: 'column',
688
- position: 'relative',
689
- // Reset fieldset default style.
690
- minWidth: 0,
691
- padding: 0,
692
- margin: 0,
693
- border: 0,
694
- verticalAlign: 'top'
695
- }, ownerState.margin === 'normal' && {
696
- marginTop: 16,
697
- marginBottom: 8
698
- }, ownerState.margin === 'dense' && {
699
- marginTop: 8,
700
- marginBottom: 4
701
- }, ownerState.fullWidth && {
702
- width: '100%'
703
- }));
704
-
705
- /**
706
- * Provides context such as filled/focused/error/required for form inputs.
707
- * Relying on the context provides high flexibility and ensures that the state always stays
708
- * consistent across the children of the `FormControl`.
709
- * This context is used by the following components:
710
- *
711
- * - FormLabel
712
- * - FormHelperText
713
- * - Input
714
- * - InputLabel
715
- *
716
- * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
717
- *
718
- * ```jsx
719
- * <FormControl>
720
- * <InputLabel htmlFor="my-input">Email address</InputLabel>
721
- * <Input id="my-input" aria-describedby="my-helper-text" />
722
- * <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
723
- * </FormControl>
724
- * ```
725
- *
726
- * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
727
- * For instance, only one input can be focused at the same time, the state shouldn't be shared.
728
- */
729
- const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
730
- const props = useThemeProps({
731
- props: inProps,
732
- name: 'MuiFormControl'
733
- });
734
- const {
735
- children,
736
- className,
737
- color = 'primary',
738
- component = 'div',
739
- disabled = false,
740
- error = false,
741
- focused: visuallyFocused,
742
- fullWidth = false,
743
- hiddenLabel = false,
744
- margin = 'none',
745
- required = false,
746
- size = 'medium',
747
- variant = 'outlined'
748
- } = props,
749
- other = _objectWithoutPropertiesLoose(props, _excluded$2);
750
- const ownerState = _extends({}, props, {
751
- color,
752
- component,
753
- disabled,
754
- error,
755
- fullWidth,
756
- hiddenLabel,
757
- margin,
758
- required,
759
- size,
760
- variant
761
- });
762
- const classes = useUtilityClasses$2(ownerState);
763
- const [adornedStart, setAdornedStart] = React.useState(() => {
764
- // We need to iterate through the children and find the Input in order
765
- // to fully support server-side rendering.
766
- let initialAdornedStart = false;
767
- if (children) {
768
- React.Children.forEach(children, child => {
769
- if (!isMuiElement(child, ['Input', 'Select'])) {
770
- return;
771
- }
772
- const input = isMuiElement(child, ['Select']) ? child.props.input : child;
773
- if (input && isAdornedStart(input.props)) {
774
- initialAdornedStart = true;
775
- }
776
- });
777
- }
778
- return initialAdornedStart;
779
- });
780
- const [filled, setFilled] = React.useState(() => {
781
- // We need to iterate through the children and find the Input in order
782
- // to fully support server-side rendering.
783
- let initialFilled = false;
784
- if (children) {
785
- React.Children.forEach(children, child => {
786
- if (!isMuiElement(child, ['Input', 'Select'])) {
787
- return;
788
- }
789
- if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
790
- initialFilled = true;
791
- }
792
- });
793
- }
794
- return initialFilled;
795
- });
796
- const [focusedState, setFocused] = React.useState(false);
797
- if (disabled && focusedState) {
798
- setFocused(false);
799
- }
800
- const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
801
- let registerEffect;
802
- if (process.env.NODE_ENV !== 'production') {
803
- // eslint-disable-next-line react-hooks/rules-of-hooks
804
- const registeredInput = React.useRef(false);
805
- registerEffect = () => {
806
- if (registeredInput.current) {
807
- console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
808
- }
809
- registeredInput.current = true;
810
- return () => {
811
- registeredInput.current = false;
812
- };
813
- };
814
- }
815
- const childContext = React.useMemo(() => {
816
- return {
817
- adornedStart,
818
- setAdornedStart,
819
- color,
820
- disabled,
821
- error,
822
- filled,
823
- focused,
824
- fullWidth,
825
- hiddenLabel,
826
- size,
827
- onBlur: () => {
828
- setFocused(false);
829
- },
830
- onEmpty: () => {
831
- setFilled(false);
832
- },
833
- onFilled: () => {
834
- setFilled(true);
835
- },
836
- onFocus: () => {
837
- setFocused(true);
838
- },
839
- registerEffect,
840
- required,
841
- variant
842
- };
843
- }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
844
- return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
845
- value: childContext,
846
- children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
847
- as: component,
848
- ownerState: ownerState,
849
- className: clsx(classes.root, className),
850
- ref: ref
851
- }, other, {
852
- children: children
853
- }))
854
- });
855
- });
856
- process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
857
- // ----------------------------- Warning --------------------------------
858
- // | These PropTypes are generated from the TypeScript type definitions |
859
- // | To update them edit the d.ts file and run "yarn proptypes" |
860
- // ----------------------------------------------------------------------
861
- /**
862
- * The content of the component.
863
- */
864
- children: PropTypes.node,
865
- /**
866
- * Override or extend the styles applied to the component.
867
- */
868
- classes: PropTypes.object,
869
- /**
870
- * @ignore
871
- */
872
- className: PropTypes.string,
873
- /**
874
- * The color of the component.
875
- * It supports both default and custom theme colors, which can be added as shown in the
876
- * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
877
- * @default 'primary'
878
- */
879
- color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
880
- /**
881
- * The component used for the root node.
882
- * Either a string to use a HTML element or a component.
883
- */
884
- component: PropTypes.elementType,
885
- /**
886
- * If `true`, the label, input and helper text should be displayed in a disabled state.
887
- * @default false
888
- */
889
- disabled: PropTypes.bool,
890
- /**
891
- * If `true`, the label is displayed in an error state.
892
- * @default false
893
- */
894
- error: PropTypes.bool,
895
- /**
896
- * If `true`, the component is displayed in focused state.
897
- */
898
- focused: PropTypes.bool,
899
- /**
900
- * If `true`, the component will take up the full width of its container.
901
- * @default false
902
- */
903
- fullWidth: PropTypes.bool,
904
- /**
905
- * If `true`, the label is hidden.
906
- * This is used to increase density for a `FilledInput`.
907
- * Be sure to add `aria-label` to the `input` element.
908
- * @default false
909
- */
910
- hiddenLabel: PropTypes.bool,
911
- /**
912
- * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
913
- * @default 'none'
914
- */
915
- margin: PropTypes.oneOf(['dense', 'none', 'normal']),
916
- /**
917
- * If `true`, the label will indicate that the `input` is required.
918
- * @default false
919
- */
920
- required: PropTypes.bool,
921
- /**
922
- * The size of the component.
923
- * @default 'medium'
924
- */
925
- size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
926
- /**
927
- * The system prop that allows defining system overrides as well as additional CSS styles.
928
- */
929
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
930
- /**
931
- * The variant to use.
932
- * @default 'outlined'
933
- */
934
- variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
935
- } : void 0;
936
- var FormControl$1 = FormControl;
937
-
938
- function getFormHelperTextUtilityClasses(slot) {
939
- return generateUtilityClass('MuiFormHelperText', slot);
940
- }
941
- const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
942
- var formHelperTextClasses$1 = formHelperTextClasses;
943
-
944
- var _span;
945
- const _excluded$1 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
946
- const useUtilityClasses$1 = ownerState => {
947
- const {
948
- classes,
949
- contained,
950
- size,
951
- disabled,
952
- error,
953
- filled,
954
- focused,
955
- required
956
- } = ownerState;
957
- const slots = {
958
- root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
959
- };
960
- return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
961
- };
962
- const FormHelperTextRoot = styled$1('p', {
963
- name: 'MuiFormHelperText',
964
- slot: 'Root',
965
- overridesResolver: (props, styles) => {
966
- const {
967
- ownerState
968
- } = props;
969
- return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
970
- }
971
- })(({
972
- theme,
973
- ownerState
974
- }) => _extends({
975
- color: (theme.vars || theme).palette.text.secondary
976
- }, theme.typography.caption, {
977
- textAlign: 'left',
978
- marginTop: 3,
979
- marginRight: 0,
980
- marginBottom: 0,
981
- marginLeft: 0,
982
- [`&.${formHelperTextClasses$1.disabled}`]: {
983
- color: (theme.vars || theme).palette.text.disabled
984
- },
985
- [`&.${formHelperTextClasses$1.error}`]: {
986
- color: (theme.vars || theme).palette.error.main
987
- }
988
- }, ownerState.size === 'small' && {
989
- marginTop: 4
990
- }, ownerState.contained && {
991
- marginLeft: 14,
992
- marginRight: 14
993
- }));
994
- const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
995
- const props = useThemeProps({
996
- props: inProps,
997
- name: 'MuiFormHelperText'
998
- });
999
- const {
1000
- children,
1001
- className,
1002
- component = 'p'
1003
- } = props,
1004
- other = _objectWithoutPropertiesLoose(props, _excluded$1);
1005
- const muiFormControl = useFormControl();
1006
- const fcs = formControlState({
1007
- props,
1008
- muiFormControl,
1009
- states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
1010
- });
1011
- const ownerState = _extends({}, props, {
1012
- component,
1013
- contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
1014
- variant: fcs.variant,
1015
- size: fcs.size,
1016
- disabled: fcs.disabled,
1017
- error: fcs.error,
1018
- filled: fcs.filled,
1019
- focused: fcs.focused,
1020
- required: fcs.required
1021
- });
1022
- const classes = useUtilityClasses$1(ownerState);
1023
- return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
1024
- as: component,
1025
- ownerState: ownerState,
1026
- className: clsx(classes.root, className),
1027
- ref: ref
1028
- }, other, {
1029
- children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
1030
- _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
1031
- className: "notranslate",
1032
- children: "\u200B"
1033
- })) : children
1034
- }));
1035
- });
1036
- process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
1037
- // ----------------------------- Warning --------------------------------
1038
- // | These PropTypes are generated from the TypeScript type definitions |
1039
- // | To update them edit the d.ts file and run "yarn proptypes" |
1040
- // ----------------------------------------------------------------------
1041
- /**
1042
- * The content of the component.
1043
- *
1044
- * If `' '` is provided, the component reserves one line height for displaying a future message.
1045
- */
1046
- children: PropTypes.node,
1047
- /**
1048
- * Override or extend the styles applied to the component.
1049
- */
1050
- classes: PropTypes.object,
1051
- /**
1052
- * @ignore
1053
- */
1054
- className: PropTypes.string,
1055
- /**
1056
- * The component used for the root node.
1057
- * Either a string to use a HTML element or a component.
1058
- */
1059
- component: PropTypes.elementType,
1060
- /**
1061
- * If `true`, the helper text should be displayed in a disabled state.
1062
- */
1063
- disabled: PropTypes.bool,
1064
- /**
1065
- * If `true`, helper text should be displayed in an error state.
1066
- */
1067
- error: PropTypes.bool,
1068
- /**
1069
- * If `true`, the helper text should use filled classes key.
1070
- */
1071
- filled: PropTypes.bool,
1072
- /**
1073
- * If `true`, the helper text should use focused classes key.
1074
- */
1075
- focused: PropTypes.bool,
1076
- /**
1077
- * If `dense`, will adjust vertical spacing. This is normally obtained via context from
1078
- * FormControl.
1079
- */
1080
- margin: PropTypes.oneOf(['dense']),
1081
- /**
1082
- * If `true`, the helper text should use required classes key.
1083
- */
1084
- required: PropTypes.bool,
1085
- /**
1086
- * The system prop that allows defining system overrides as well as additional CSS styles.
1087
- */
1088
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
1089
- /**
1090
- * The variant to use.
1091
- */
1092
- variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
1093
- } : void 0;
1094
- var FormHelperText$1 = FormHelperText;
1095
-
1096
- function getTextFieldUtilityClass(slot) {
1097
- return generateUtilityClass('MuiTextField', slot);
1098
- }
1099
- generateUtilityClasses('MuiTextField', ['root']);
1100
-
1101
- const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
1102
- const variantComponent = {
1103
- standard: Input,
1104
- filled: FilledInput,
1105
- outlined: OutlinedInput
1106
- };
1107
- const useUtilityClasses = ownerState => {
1108
- const {
1109
- classes
1110
- } = ownerState;
1111
- const slots = {
1112
- root: ['root']
1113
- };
1114
- return composeClasses(slots, getTextFieldUtilityClass, classes);
1115
- };
1116
- const TextFieldRoot = styled$1(FormControl$1, {
1117
- name: 'MuiTextField',
1118
- slot: 'Root',
1119
- overridesResolver: (props, styles) => styles.root
1120
- })({});
1121
-
1122
- /**
1123
- * The `TextField` is a convenience wrapper for the most common cases (80%).
1124
- * It cannot be all things to all people, otherwise the API would grow out of control.
1125
- *
1126
- * ## Advanced Configuration
1127
- *
1128
- * It's important to understand that the text field is a simple abstraction
1129
- * on top of the following components:
1130
- *
1131
- * - [FormControl](/material-ui/api/form-control/)
1132
- * - [InputLabel](/material-ui/api/input-label/)
1133
- * - [FilledInput](/material-ui/api/filled-input/)
1134
- * - [OutlinedInput](/material-ui/api/outlined-input/)
1135
- * - [Input](/material-ui/api/input/)
1136
- * - [FormHelperText](/material-ui/api/form-helper-text/)
1137
- *
1138
- * If you wish to alter the props applied to the `input` element, you can do so as follows:
1139
- *
1140
- * ```jsx
1141
- * const inputProps = {
1142
- * step: 300,
1143
- * };
1144
- *
1145
- * return <TextField id="time" type="time" inputProps={inputProps} />;
1146
- * ```
1147
- *
1148
- * For advanced cases, please look at the source of TextField by clicking on the
1149
- * "Edit this page" button above. Consider either:
1150
- *
1151
- * - using the upper case props for passing values directly to the components
1152
- * - using the underlying components directly as shown in the demos
1153
- */
1154
- const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
1155
- const props = useThemeProps({
1156
- props: inProps,
1157
- name: 'MuiTextField'
1158
- });
1159
- const {
1160
- autoComplete,
1161
- autoFocus = false,
1162
- children,
1163
- className,
1164
- color = 'primary',
1165
- defaultValue,
1166
- disabled = false,
1167
- error = false,
1168
- FormHelperTextProps,
1169
- fullWidth = false,
1170
- helperText,
1171
- id: idOverride,
1172
- InputLabelProps,
1173
- inputProps,
1174
- InputProps,
1175
- inputRef,
1176
- label,
1177
- maxRows,
1178
- minRows,
1179
- multiline = false,
1180
- name,
1181
- onBlur,
1182
- onChange,
1183
- onClick,
1184
- onFocus,
1185
- placeholder,
1186
- required = false,
1187
- rows,
1188
- select = false,
1189
- SelectProps,
1190
- type,
1191
- value,
1192
- variant = 'outlined'
1193
- } = props,
1194
- other = _objectWithoutPropertiesLoose(props, _excluded);
1195
- const ownerState = _extends({}, props, {
1196
- autoFocus,
1197
- color,
1198
- disabled,
1199
- error,
1200
- fullWidth,
1201
- multiline,
1202
- required,
1203
- select,
1204
- variant
1205
- });
1206
- const classes = useUtilityClasses(ownerState);
1207
- if (process.env.NODE_ENV !== 'production') {
1208
- if (select && !children) {
1209
- console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
1210
- }
1211
- }
1212
- const InputMore = {};
1213
- if (variant === 'outlined') {
1214
- if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
1215
- InputMore.notched = InputLabelProps.shrink;
1216
- }
1217
- InputMore.label = label;
1218
- }
1219
- if (select) {
1220
- // unset defaults from textbox inputs
1221
- if (!SelectProps || !SelectProps.native) {
1222
- InputMore.id = undefined;
1223
- }
1224
- InputMore['aria-describedby'] = undefined;
1225
- }
1226
- const id = useId(idOverride);
1227
- const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
1228
- const inputLabelId = label && id ? `${id}-label` : undefined;
1229
- const InputComponent = variantComponent[variant];
1230
- const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends({
1231
- "aria-describedby": helperTextId,
1232
- autoComplete: autoComplete,
1233
- autoFocus: autoFocus,
1234
- defaultValue: defaultValue,
1235
- fullWidth: fullWidth,
1236
- multiline: multiline,
1237
- name: name,
1238
- rows: rows,
1239
- maxRows: maxRows,
1240
- minRows: minRows,
1241
- type: type,
1242
- value: value,
1243
- id: id,
1244
- inputRef: inputRef,
1245
- onBlur: onBlur,
1246
- onChange: onChange,
1247
- onFocus: onFocus,
1248
- onClick: onClick,
1249
- placeholder: placeholder,
1250
- inputProps: inputProps
1251
- }, InputMore, InputProps));
1252
- return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
1253
- className: clsx(classes.root, className),
1254
- disabled: disabled,
1255
- error: error,
1256
- fullWidth: fullWidth,
1257
- ref: ref,
1258
- required: required,
1259
- color: color,
1260
- variant: variant,
1261
- ownerState: ownerState
1262
- }, other, {
1263
- children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends({
1264
- htmlFor: id,
1265
- id: inputLabelId
1266
- }, InputLabelProps, {
1267
- children: label
1268
- })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
1269
- "aria-describedby": helperTextId,
1270
- id: id,
1271
- labelId: inputLabelId,
1272
- value: value,
1273
- input: InputElement
1274
- }, SelectProps, {
1275
- children: children
1276
- })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
1277
- id: helperTextId
1278
- }, FormHelperTextProps, {
1279
- children: helperText
1280
- }))]
1281
- }));
1282
- });
1283
- process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
1284
- // ----------------------------- Warning --------------------------------
1285
- // | These PropTypes are generated from the TypeScript type definitions |
1286
- // | To update them edit the d.ts file and run "yarn proptypes" |
1287
- // ----------------------------------------------------------------------
1288
- /**
1289
- * This prop helps users to fill forms faster, especially on mobile devices.
1290
- * The name can be confusing, as it's more like an autofill.
1291
- * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
1292
- */
1293
- autoComplete: PropTypes.string,
1294
- /**
1295
- * If `true`, the `input` element is focused during the first mount.
1296
- * @default false
1297
- */
1298
- autoFocus: PropTypes.bool,
1299
- /**
1300
- * @ignore
1301
- */
1302
- children: PropTypes.node,
1303
- /**
1304
- * Override or extend the styles applied to the component.
1305
- */
1306
- classes: PropTypes.object,
1307
- /**
1308
- * @ignore
1309
- */
1310
- className: PropTypes.string,
1311
- /**
1312
- * The color of the component.
1313
- * It supports both default and custom theme colors, which can be added as shown in the
1314
- * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
1315
- * @default 'primary'
1316
- */
1317
- color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
1318
- /**
1319
- * The default value. Use when the component is not controlled.
1320
- */
1321
- defaultValue: PropTypes.any,
1322
- /**
1323
- * If `true`, the component is disabled.
1324
- * @default false
1325
- */
1326
- disabled: PropTypes.bool,
1327
- /**
1328
- * If `true`, the label is displayed in an error state.
1329
- * @default false
1330
- */
1331
- error: PropTypes.bool,
1332
- /**
1333
- * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
1334
- */
1335
- FormHelperTextProps: PropTypes.object,
1336
- /**
1337
- * If `true`, the input will take up the full width of its container.
1338
- * @default false
1339
- */
1340
- fullWidth: PropTypes.bool,
1341
- /**
1342
- * The helper text content.
1343
- */
1344
- helperText: PropTypes.node,
1345
- /**
1346
- * The id of the `input` element.
1347
- * Use this prop to make `label` and `helperText` accessible for screen readers.
1348
- */
1349
- id: PropTypes.string,
1350
- /**
1351
- * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
1352
- * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
1353
- */
1354
- InputLabelProps: PropTypes.object,
1355
- /**
1356
- * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
1357
- */
1358
- inputProps: PropTypes.object,
1359
- /**
1360
- * Props applied to the Input element.
1361
- * It will be a [`FilledInput`](/material-ui/api/filled-input/),
1362
- * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
1363
- * component depending on the `variant` prop value.
1364
- */
1365
- InputProps: PropTypes.object,
1366
- /**
1367
- * Pass a ref to the `input` element.
1368
- */
1369
- inputRef: refType,
1370
- /**
1371
- * The label content.
1372
- */
1373
- label: PropTypes.node,
1374
- /**
1375
- * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
1376
- * @default 'none'
1377
- */
1378
- margin: PropTypes.oneOf(['dense', 'none', 'normal']),
1379
- /**
1380
- * Maximum number of rows to display when multiline option is set to true.
1381
- */
1382
- maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1383
- /**
1384
- * Minimum number of rows to display when multiline option is set to true.
1385
- */
1386
- minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1387
- /**
1388
- * If `true`, a `textarea` element is rendered instead of an input.
1389
- * @default false
1390
- */
1391
- multiline: PropTypes.bool,
1392
- /**
1393
- * Name attribute of the `input` element.
1394
- */
1395
- name: PropTypes.string,
1396
- /**
1397
- * @ignore
1398
- */
1399
- onBlur: PropTypes.func,
1400
- /**
1401
- * Callback fired when the value is changed.
1402
- *
1403
- * @param {object} event The event source of the callback.
1404
- * You can pull out the new value by accessing `event.target.value` (string).
1405
- */
1406
- onChange: PropTypes.func,
1407
- /**
1408
- * @ignore
1409
- */
1410
- onClick: PropTypes.func,
1411
- /**
1412
- * @ignore
1413
- */
1414
- onFocus: PropTypes.func,
1415
- /**
1416
- * The short hint displayed in the `input` before the user enters a value.
1417
- */
1418
- placeholder: PropTypes.string,
1419
- /**
1420
- * If `true`, the label is displayed as required and the `input` element is required.
1421
- * @default false
1422
- */
1423
- required: PropTypes.bool,
1424
- /**
1425
- * Number of rows to display when multiline option is set to true.
1426
- */
1427
- rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
1428
- /**
1429
- * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
1430
- * If this option is set you must pass the options of the select as children.
1431
- * @default false
1432
- */
1433
- select: PropTypes.bool,
1434
- /**
1435
- * Props applied to the [`Select`](/material-ui/api/select/) element.
1436
- */
1437
- SelectProps: PropTypes.object,
1438
- /**
1439
- * The size of the component.
1440
- */
1441
- size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
1442
- /**
1443
- * The system prop that allows defining system overrides as well as additional CSS styles.
1444
- */
1445
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
1446
- /**
1447
- * 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).
1448
- */
1449
- type: PropTypes /* @typescript-to-proptypes-ignore */.string,
1450
- /**
1451
- * The value of the `input` element, required for a controlled component.
1452
- */
1453
- value: PropTypes.any,
1454
- /**
1455
- * The variant to use.
1456
- * @default 'outlined'
1457
- */
1458
- variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
1459
- } : void 0;
1460
- var TextField$1 = TextField;
1461
-
1462
- const SUBMIT_FILTER_STROKE_TIME = 500;
1463
- const InputNumberInterval = props => {
1464
- var _item$value;
1465
- const {
1466
- item,
1467
- applyValue,
1468
- focusElementRef = null
1469
- } = props;
1470
- const filterTimeout = React.useRef();
1471
- const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
1472
- const [applying, setIsApplying] = React.useState(false);
1473
- React.useEffect(() => {
1474
- return () => {
1475
- clearTimeout(filterTimeout.current);
1476
- };
1477
- }, []);
1478
- React.useEffect(() => {
1479
- var _item$value2;
1480
- const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
1481
- setFilterValueState(itemValue);
1482
- }, [item.value]);
1483
- const updateFilterValue = (lowerBound, upperBound) => {
1484
- clearTimeout(filterTimeout.current);
1485
- setFilterValueState([lowerBound, upperBound]);
1486
- setIsApplying(true);
1487
- filterTimeout.current = setTimeout(() => {
1488
- setIsApplying(false);
1489
- applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
1490
- value: [lowerBound, upperBound]
1491
- }));
1492
- }, SUBMIT_FILTER_STROKE_TIME);
1493
- };
1494
- const handleUpperFilterChange = event => {
1495
- const newUpperBound = event.target.value;
1496
- updateFilterValue(filterValueState[0], newUpperBound);
1497
- };
1498
- const handleLowerFilterChange = event => {
1499
- const newLowerBound = event.target.value;
1500
- updateFilterValue(newLowerBound, filterValueState[1]);
1501
- };
1502
- return /*#__PURE__*/React.createElement(Box$1, {
1503
- sx: {
1504
- display: 'inline-flex',
1505
- flexDirection: 'row',
1506
- alignItems: 'end',
1507
- height: 48,
1508
- pl: '20px'
1509
- }
1510
- }, /*#__PURE__*/React.createElement(TextField$1, {
1511
- name: "lower-bound-input",
1512
- placeholder: "From",
1513
- label: "From",
1514
- variant: "standard",
1515
- value: Number(filterValueState[0]),
1516
- onChange: handleLowerFilterChange,
1517
- type: "number",
1518
- inputRef: focusElementRef,
1519
- sx: {
1520
- mr: 2
1521
- }
1522
- }), /*#__PURE__*/React.createElement(TextField$1, {
1523
- name: "upper-bound-input",
1524
- placeholder: "To",
1525
- label: "To",
1526
- variant: "standard",
1527
- value: Number(filterValueState[1]),
1528
- onChange: handleUpperFilterChange,
1529
- type: "number",
1530
- InputProps: applying ? {
1531
- endAdornment: /*#__PURE__*/React.createElement(Icon, {
1532
- icon: mdiSync
1533
- })
1534
- } : {}
1535
- }));
1536
- };
1537
-
1538
- const isBetweenOperator = {
1539
- label: 'is between',
1540
- value: 'isBetween',
1541
- getApplyFilterFn: filterItem => {
1542
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1543
- return null;
1544
- }
1545
- if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
1546
- return null;
1547
- }
1548
- if (filterItem.value[0] == null || filterItem.value[1] == null) {
1549
- return null;
1550
- }
1551
- if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
1552
- return null;
1553
- }
1554
- return params => {
1555
- return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
1556
- };
1557
- },
1558
- InputComponent: InputNumberInterval
1559
- };
1560
- const IS_BETWEEN = isBetweenOperator;
1561
-
1562
- const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
1563
-
1564
- const doesNotContain = {
1565
- label: 'does not contain',
1566
- value: 'doesNotContain',
1567
- getApplyFilterFn: filterItem => {
1568
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1569
- return null;
1570
- }
1571
- return params => {
1572
- if (filterItem.value.length === 0) {
1573
- return true;
1574
- }
1575
- if (String(params.value).indexOf(filterItem.value) !== -1) {
1576
- return false;
1577
- }
1578
- return true;
1579
- };
1580
- },
1581
- InputComponent: GridFilterInputValue
1582
- };
1583
- const DOES_NOT_CONTAIN = doesNotContain;
1584
-
1585
- const doesNotEqual = {
1586
- label: 'does not equal',
1587
- value: 'doesNotEqual',
1588
- getApplyFilterFn: filterItem => {
1589
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1590
- return null;
1591
- }
1592
- return params => {
1593
- if (filterItem.value.length === 0) {
1594
- return true;
1595
- }
1596
- if (String(params.value) === filterItem.value) {
1597
- return false;
1598
- }
1599
- return true;
1600
- };
1601
- },
1602
- InputComponent: GridFilterInputValue
1603
- };
1604
- const DOES_NOT_EQUAL = doesNotEqual;
1605
-
1606
- const doesNotHaveOperator = {
1607
- label: "doesn't have",
1608
- value: 'doesNotHave',
1609
- getApplyFilterFn: filterItem => {
1610
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1611
- return null;
1612
- }
1613
- return params => {
1614
- const cellValues = Array.isArray(params.value) ? params.value : [params.value];
1615
- return !cellValues.map(value => String(value)).includes(filterItem.value);
1616
- };
1617
- },
1618
- InputComponent: GridFilterInputValue
1619
- };
1620
- const DOES_NOT_HAVE = doesNotHaveOperator;
1621
- const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
1622
- InputComponent: GridFilterInputSingleSelect
1623
- });
1624
-
1625
- const hasOperator = {
1626
- label: 'has',
1627
- value: 'has',
1628
- getApplyFilterFn: filterItem => {
1629
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1630
- return null;
1631
- }
1632
- return params => {
1633
- const cellValues = Array.isArray(params.value) ? params.value : [params.value];
1634
- return cellValues.map(value => String(value)).includes(filterItem.value);
1635
- };
1636
- },
1637
- InputComponent: GridFilterInputValue
1638
- };
1639
- const HAS = hasOperator;
1640
- const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
1641
- InputComponent: GridFilterInputSingleSelect
1642
- });
1643
-
1644
- const hasOnlyOperator = {
1645
- label: 'has only',
1646
- value: 'hasOnly',
1647
- getApplyFilterFn: filterItem => {
1648
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1649
- return null;
1650
- }
1651
- return params => {
1652
- const cellValues = Array.isArray(params.value) ? params.value : [params.value];
1653
- return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
1654
- };
1655
- },
1656
- InputComponent: GridFilterInputValue
1657
- };
1658
- const HAS_ONLY = hasOnlyOperator;
1659
- const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
1660
- InputComponent: GridFilterInputSingleSelect
1661
- });
1662
-
1663
- const isOperator = {
1664
- label: 'is',
1665
- value: 'is',
1666
- getApplyFilterFn: filterItem => {
1667
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1668
- return null;
1669
- }
1670
- return params => {
1671
- if (Array.isArray(params.value)) {
1672
- return false;
1673
- }
1674
- return String(params.value) === filterItem.value;
1675
- };
1676
- },
1677
- InputComponent: GridFilterInputValue
1678
- };
1679
- const IS = isOperator;
1680
- const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
1681
- InputComponent: GridFilterInputSingleSelect
1682
- });
1683
-
1684
- const isNotOperator = {
1685
- label: 'is not',
1686
- value: 'isNot',
1687
- getApplyFilterFn: filterItem => {
1688
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1689
- return null;
1690
- }
1691
- return params => {
1692
- if (Array.isArray(params.value)) {
1693
- return true;
1694
- }
1695
- return String(params.value) !== filterItem.value;
1696
- };
1697
- },
1698
- InputComponent: GridFilterInputValue
1699
- };
1700
- const IS_NOT = isNotOperator;
1701
- const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
1702
- InputComponent: GridFilterInputSingleSelect
1703
- });
1704
-
1705
- const containsAnyOfOperator = {
1706
- label: 'contains any of',
1707
- value: 'containsAnyOf',
1708
- getApplyFilterFn: filterItem => {
1709
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1710
- return null;
1711
- }
1712
- return params => {
1713
- if (filterItem.value.length === 0) {
1714
- return true;
1715
- }
1716
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1717
- let match = false;
1718
- filterItem.value.forEach(filteredValue => {
1719
- paramValues.forEach(paramValue => {
1720
- if (String(paramValue).indexOf(filteredValue) !== -1) {
1721
- match = true;
1722
- }
1723
- });
1724
- });
1725
- return match;
1726
- };
1727
- },
1728
- InputComponent: GridFilterInputMultipleValue
1729
- };
1730
- const containsAnyOfCIOperator = {
1731
- label: 'contains any of (case insensitive)',
1732
- value: 'containsAnyOf',
1733
- getApplyFilterFn: filterItem => {
1734
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1735
- return null;
1736
- }
1737
- return params => {
1738
- if (filterItem.value.length === 0) {
1739
- return true;
1740
- }
1741
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1742
- const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
1743
- let match = false;
1744
- filterItem.value.forEach(filteredValue => {
1745
- if (paramValuesLower.indexOf(filteredValue.toLowerCase()) !== -1) {
1746
- match = true;
1747
- }
1748
- });
1749
- return match;
1750
- };
1751
- },
1752
- InputComponent: GridFilterInputMultipleValue
1753
- };
1754
- const CONTAINS_ANY_OF = containsAnyOfOperator;
1755
- const CONTAINS_ANY_OF_I = containsAnyOfCIOperator;
1756
-
1757
- const doesNotHaveAnyOf = {
1758
- label: "doesn't have any of",
1759
- value: 'doesNotHaveAnyOf',
1760
- getApplyFilterFn: filterItem => {
1761
- if (!filterItem.columnField || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
1762
- return null;
1763
- }
1764
- return params => {
1765
- const cellValues = Array.isArray(params.value) ? params.value : [params.value];
1766
-
1767
- // Return true only if none of the filter values are in the cell values
1768
- return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
1769
- };
1770
- },
1771
- InputComponent: GridFilterInputMultipleValue
1772
- };
1773
- const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
1774
- const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
1775
- InputComponent: GridFilterInputMultipleSingleSelect
1776
- });
1777
-
1778
- const endsWithAnyOfOperator = {
1779
- label: 'ends with any of',
1780
- value: 'endsWithAnyOf',
1781
- getApplyFilterFn: filterItem => {
1782
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1783
- return null;
1784
- }
1785
- return params => {
1786
- if (filterItem.value.length === 0) {
1787
- return true;
1788
- }
1789
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1790
- let match = false;
1791
- filterItem.value.forEach(filteredValue => {
1792
- paramValues.forEach(paramValue => {
1793
- if (String(paramValue).endsWith(filteredValue)) {
1794
- match = true;
1795
- }
1796
- });
1797
- });
1798
- return match;
1799
- };
1800
- },
1801
- InputComponent: GridFilterInputMultipleValue
1802
- };
1803
- const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
1804
-
1805
- const isAnyOfOperator = {
1806
- label: 'is any of',
1807
- value: 'isAnyOf',
1808
- getApplyFilterFn: filterItem => {
1809
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1810
- return null;
1811
- }
1812
- return params => {
1813
- if (filterItem.value.length === 0) {
1814
- return true;
1815
- }
1816
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1817
- for (const paramValue of paramValues) {
1818
- if (filterItem.value.includes(String(paramValue))) {
1819
- return true;
1820
- }
1821
- }
1822
- return false;
1823
- };
1824
- },
1825
- InputComponent: GridFilterInputMultipleValue
1826
- };
1827
- const IS_ANY_OF = isAnyOfOperator;
1828
- const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
1829
- InputComponent: GridFilterInputMultipleSingleSelect
1830
- });
1831
-
1832
- const isAnyOfIOperator = {
1833
- label: 'is any of (case-insensitive)',
1834
- value: 'isAnyOfI',
1835
- getApplyFilterFn: filterItem => {
1836
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1837
- return null;
1838
- }
1839
- const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
1840
- return params => {
1841
- if (filterItem.value.length === 0) {
1842
- return true;
1843
- }
1844
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1845
- for (const paramValue of paramValues) {
1846
- if (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
1847
- return true;
1848
- }
1849
- }
1850
- return false;
1851
- };
1852
- },
1853
- InputComponent: GridFilterInputMultipleValue
1854
- };
1855
- const IS_ANY_OF_I = isAnyOfIOperator;
1856
- const IS_ANY_OF_I_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF_I), {}, {
1857
- InputComponent: GridFilterInputMultipleSingleSelect
1858
- });
1859
-
1860
- const hasAnyOfOperator = {
1861
- label: 'has any of',
1862
- value: 'hasAnyOf',
1863
- getApplyFilterFn: filterItem => {
1864
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1865
- return null;
1866
- }
1867
- return params => {
1868
- if (filterItem.value.length === 0) {
1869
- return true;
1870
- }
1871
- const cellValues = Array.isArray(params.value) ? params.value : [params.value];
1872
- const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
1873
- return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
1874
- };
1875
- },
1876
- InputComponent: GridFilterInputMultipleValue
1877
- };
1878
- const HAS_ANY_OF = hasAnyOfOperator;
1879
- const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
1880
- InputComponent: GridFilterInputMultipleSingleSelect
1881
- });
1882
-
1883
- const isNotAnyOfOperator = {
1884
- label: 'is not any of',
1885
- value: 'isNotAnyOf',
1886
- getApplyFilterFn: filterItem => {
1887
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1888
- return null;
1889
- }
1890
- return params => {
1891
- if (filterItem.value.length === 0) {
1892
- return true;
1893
- }
1894
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1895
- for (const paramValue of paramValues) {
1896
- if (filterItem.value.includes(String(paramValue))) {
1897
- return false;
1898
- }
1899
- }
1900
- return true;
1901
- };
1902
- },
1903
- InputComponent: GridFilterInputMultipleValue
1904
- };
1905
- const IS_NOT_ANY_OF = isNotAnyOfOperator;
1906
-
1907
- const startsWithAnyOfOperator = {
1908
- label: 'starts with any of',
1909
- value: 'startsWithAnyOf',
1910
- getApplyFilterFn: filterItem => {
1911
- if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
1912
- return null;
1913
- }
1914
- return params => {
1915
- if (filterItem.value.length === 0) {
1916
- return true;
1917
- }
1918
- const paramValues = Array.isArray(params.value) ? params.value : [params.value];
1919
- let match = false;
1920
- filterItem.value.forEach(filteredValue => {
1921
- paramValues.forEach(paramValue => {
1922
- if (String(paramValue).startsWith(filteredValue)) {
1923
- match = true;
1924
- }
1925
- });
1926
- });
1927
- return match;
1928
- };
1929
- },
1930
- InputComponent: GridFilterInputMultipleValue
1931
- };
1932
- const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
1933
-
1934
- const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_ANY_OF_I, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
1935
- const getGridStringArrayOperatorsWithSelect = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_ANY_OF_I_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF];
1936
- const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
1937
-
1938
- const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
1939
-
1940
- // istanbul ignore file
1941
- const operatorList = {
1942
- // Default types
1943
- string: getGridStringOperators$1(),
1944
- number: getGridNumericOperators$1(),
1945
- boolean: getGridBooleanOperators(),
1946
- date: getGridDateOperators(),
1947
- dateTime: getGridDateOperators(true),
1948
- singleSelect: getGridSingleSelectOperators(),
1949
- // Extended types
1950
- rsString: getGridStringOperators(),
1951
- rsNumber: getGridNumericOperators(),
1952
- rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
1953
- rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
1954
- rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT],
1955
- rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
1956
- // Custom types
1957
- rsStringArray: getGridStringArrayOperators()
1958
- };
1959
-
1960
- const getRsStringColumnType = () => {
1961
- return {
1962
- extendType: 'string',
1963
- filterOperators: operatorList.rsString
1964
- };
1965
- };
1966
- const getRsNumberColumnType = () => {
1967
- return {
1968
- extendType: 'number',
1969
- filterOperators: operatorList.rsNumber
1970
- };
1971
- };
1972
- const getRsSingleSelectColumnType = () => {
1973
- return {
1974
- extendType: 'singleSelect',
1975
- filterOperators: operatorList.rsSingleSelect
1976
- };
1977
- };
1978
- const getRsSingleSelectWithShortOperatorListColumnType = () => {
1979
- return {
1980
- extendType: 'singleSelect',
1981
- filterOperators: operatorList.rsSingleSelectWithShortOperatorList
1982
- };
1983
- };
1984
- const getRsMultipleSelectColumnType = () => {
1985
- return {
1986
- extendType: 'singleSelect',
1987
- filterOperators: operatorList.rsMultipleSelect
1988
- };
1989
- };
1990
- const getRsMultipleSelectWithShortOperatorListColumnType = () => {
1991
- return {
1992
- extendType: 'singleSelect',
1993
- filterOperators: operatorList.rsMultipleSelectWithShortOperatorList
1994
- };
1995
- };
1996
- const customColumnTypes = {
1997
- rsString: getRsStringColumnType(),
1998
- rsNumber: getRsNumberColumnType(),
1999
- rsSingleSelect: getRsSingleSelectColumnType(),
2000
- rsSingleSelectWithShortOperatorList: getRsSingleSelectWithShortOperatorListColumnType(),
2001
- rsMultipleSelect: getRsMultipleSelectColumnType(),
2002
- rsMultipleSelectWithShortOperatorList: getRsMultipleSelectWithShortOperatorListColumnType()
2003
- };
2004
-
2005
185
  // Store the license information in a global, so it can be shared
2006
186
  // when module duplication occurs. The duplication of the modules can happen
2007
187
  // if using multiple version of MUI X at the same time of the bundler
@@ -2027,7 +207,7 @@ class LicenseInfo {
2027
207
  /**
2028
208
  * Component style.
2029
209
  */
2030
- const StyledDataGrid = styled$2.div`
210
+ const StyledDataGrid = styled.div`
2031
211
  ${_ref => {
2032
212
  let {
2033
213
  $height
@@ -2095,20 +275,18 @@ const StyledDataGrid = styled$2.div`
2095
275
  `;
2096
276
 
2097
277
  const useControlledDatagridState = _ref => {
2098
- var _initialState$paginat, _initialState$paginat2;
278
+ var _ref2, _ref3, _propsPaginationModel, _initialState$paginat, _initialState$paginat2, _pageSizeOptions$, _ref4, _propsPaginationModel2, _initialState$paginat3, _initialState$paginat4;
2099
279
  let {
2100
280
  initialState,
2101
- rowsPerPageOptions,
281
+ pageSizeOptions,
2102
282
  propsColumnVisibilityModel,
2103
283
  propsFilterModel,
2104
284
  propsOnColumnVisibilityModelChange,
2105
285
  propsOnFilterModelChange,
2106
- propsOnPageChange,
2107
- propsOnPageSizeChange,
286
+ propsOnPaginationModelChange,
2108
287
  propsOnPinnedColumnsChange,
2109
288
  propsOnSortModelChange,
2110
- propsPage,
2111
- propsPageSize,
289
+ propsPaginationModel,
2112
290
  propsPinnedColumns,
2113
291
  propsSortModel
2114
292
  } = _ref;
@@ -2156,33 +334,22 @@ const useControlledDatagridState = _ref => {
2156
334
  setSortModel(model);
2157
335
  }
2158
336
  };
2159
- const [page, setPage] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
2160
- const [pageSize, setPageSize] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 25);
2161
- const onPageChange = page => {
2162
- if (propsOnPageChange) {
2163
- propsOnPageChange(page, undefined);
2164
- } else {
2165
- setPage(page);
2166
- }
2167
- };
2168
- useEffect(() => {
2169
- if (propsPage || propsPage === 0) {
2170
- setPage(propsPage);
2171
- }
2172
- }, [propsPage]);
2173
- const onPageSizeChange = pageSize => {
2174
- onPageChange(0);
2175
- if (propsOnPageSizeChange) {
2176
- propsOnPageSizeChange(pageSize, undefined);
337
+ const [paginationModel, setPaginationModel] = useState({
338
+ pageSize: (_ref2 = (_ref3 = (_propsPaginationModel = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _propsPaginationModel !== void 0 ? _propsPaginationModel : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : (_initialState$paginat2 = _initialState$paginat.paginationModel) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 25,
339
+ page: (_ref4 = (_propsPaginationModel2 = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _propsPaginationModel2 !== void 0 ? _propsPaginationModel2 : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat3 = initialState.pagination) === null || _initialState$paginat3 === void 0 ? void 0 : (_initialState$paginat4 = _initialState$paginat3.paginationModel) === null || _initialState$paginat4 === void 0 ? void 0 : _initialState$paginat4.page) !== null && _ref4 !== void 0 ? _ref4 : 0
340
+ });
341
+ const onPaginationModelChange = (model, details) => {
342
+ if (propsOnPaginationModelChange) {
343
+ propsOnPaginationModelChange(model, details);
2177
344
  } else {
2178
- setPageSize(pageSize);
345
+ setPaginationModel(model);
2179
346
  }
2180
347
  };
2181
348
  useEffect(() => {
2182
- if (propsPageSize) {
2183
- setPageSize(propsPageSize);
349
+ if (propsPaginationModel) {
350
+ setPaginationModel(propsPaginationModel);
2184
351
  }
2185
- }, [propsPageSize]);
352
+ }, [propsPaginationModel]);
2186
353
  return {
2187
354
  filterModel,
2188
355
  onFilterModelChange,
@@ -2192,12 +359,10 @@ const useControlledDatagridState = _ref => {
2192
359
  onPinnedColumnsChange,
2193
360
  sortModel,
2194
361
  onSortModelChange,
2195
- page,
2196
- pageSize,
2197
- onPageChange,
2198
- onPageSizeChange
362
+ paginationModel,
363
+ onPaginationModelChange
2199
364
  };
2200
365
  };
2201
366
 
2202
- export { IS_ANY_OF_I_WITH_SELECT as A, HAS_ANY_OF as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, HAS_ANY_OF_WITH_SELECT as F, IS_NOT_ANY_OF as G, HAS as H, IS_BETWEEN as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, LicenseInfo as M, useControlledDatagridState as N, StyledDataGrid as O, STARTS_WITH_ANY_OF as S, ThemeProvider as T, getRsNumberColumnType as a, getRsSingleSelectColumnType as b, getRsSingleSelectWithShortOperatorListColumnType as c, getRsMultipleSelectColumnType as d, getRsMultipleSelectWithShortOperatorListColumnType as e, customColumnTypes as f, getRsStringColumnType as g, getGridNumericOperators as h, DOES_NOT_EQUAL as i, DOES_NOT_HAVE as j, DOES_NOT_HAVE_WITH_SELECT as k, HAS_WITH_SELECT as l, HAS_ONLY as m, HAS_ONLY_WITH_SELECT as n, operatorList as o, IS as p, IS_WITH_SELECT as q, IS_NOT as r, IS_NOT_WITH_SELECT as s, getGridStringOperators as t, CONTAINS_ANY_OF_I as u, DOES_NOT_HAVE_ANY_OF as v, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as w, IS_ANY_OF as x, IS_ANY_OF_WITH_SELECT as y, IS_ANY_OF_I as z };
367
+ export { LicenseInfo as L, StyledDataGrid as S, ThemeProvider as T, useControlledDatagridState as u };
2203
368
  //# sourceMappingURL=useControlledDatagridState.js.map