@redsift/table 9.0.0 → 9.1.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.
- package/index.js +2970 -219
- package/index.js.map +1 -1
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
|
|
1
|
+
import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowIdsSelector } from '@mui/x-data-grid-pro';
|
|
2
2
|
export * from '@mui/x-data-grid-pro';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
|
|
5
|
-
import { Icon, Flexbox, CtasColorPalette, NotificationsColorPalette, Button, Checkbox, Shield } from '@redsift/design-system';
|
|
4
|
+
import React__default, { Children, isValidElement, cloneElement, forwardRef, createElement, useRef, useState, useEffect } from 'react';
|
|
5
|
+
import { Icon, Flexbox, CtasColorPalette, NotificationsColorPalette, Button, Checkbox, LinkButton, Shield } from '@redsift/design-system';
|
|
6
6
|
import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
|
|
7
7
|
import emStyled from '@emotion/styled';
|
|
8
|
-
import { Global, ThemeContext } from '@emotion/react';
|
|
8
|
+
import { Global, ThemeContext, keyframes } from '@emotion/react';
|
|
9
9
|
import * as ReactDOM from 'react-dom';
|
|
10
10
|
import ReactDOM__default from 'react-dom';
|
|
11
11
|
import classNames from 'classnames';
|
|
@@ -1887,6 +1887,160 @@ function useForkRef(...refs) {
|
|
|
1887
1887
|
}, refs);
|
|
1888
1888
|
}
|
|
1889
1889
|
|
|
1890
|
+
// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
|
|
1891
|
+
let hadKeyboardEvent = true;
|
|
1892
|
+
let hadFocusVisibleRecently = false;
|
|
1893
|
+
let hadFocusVisibleRecentlyTimeout;
|
|
1894
|
+
const inputTypesWhitelist = {
|
|
1895
|
+
text: true,
|
|
1896
|
+
search: true,
|
|
1897
|
+
url: true,
|
|
1898
|
+
tel: true,
|
|
1899
|
+
email: true,
|
|
1900
|
+
password: true,
|
|
1901
|
+
number: true,
|
|
1902
|
+
date: true,
|
|
1903
|
+
month: true,
|
|
1904
|
+
week: true,
|
|
1905
|
+
time: true,
|
|
1906
|
+
datetime: true,
|
|
1907
|
+
'datetime-local': true
|
|
1908
|
+
};
|
|
1909
|
+
|
|
1910
|
+
/**
|
|
1911
|
+
* Computes whether the given element should automatically trigger the
|
|
1912
|
+
* `focus-visible` class being added, i.e. whether it should always match
|
|
1913
|
+
* `:focus-visible` when focused.
|
|
1914
|
+
* @param {Element} node
|
|
1915
|
+
* @returns {boolean}
|
|
1916
|
+
*/
|
|
1917
|
+
function focusTriggersKeyboardModality(node) {
|
|
1918
|
+
const {
|
|
1919
|
+
type,
|
|
1920
|
+
tagName
|
|
1921
|
+
} = node;
|
|
1922
|
+
if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
|
|
1923
|
+
return true;
|
|
1924
|
+
}
|
|
1925
|
+
if (tagName === 'TEXTAREA' && !node.readOnly) {
|
|
1926
|
+
return true;
|
|
1927
|
+
}
|
|
1928
|
+
if (node.isContentEditable) {
|
|
1929
|
+
return true;
|
|
1930
|
+
}
|
|
1931
|
+
return false;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
/**
|
|
1935
|
+
* Keep track of our keyboard modality state with `hadKeyboardEvent`.
|
|
1936
|
+
* If the most recent user interaction was via the keyboard;
|
|
1937
|
+
* and the key press did not include a meta, alt/option, or control key;
|
|
1938
|
+
* then the modality is keyboard. Otherwise, the modality is not keyboard.
|
|
1939
|
+
* @param {KeyboardEvent} event
|
|
1940
|
+
*/
|
|
1941
|
+
function handleKeyDown(event) {
|
|
1942
|
+
if (event.metaKey || event.altKey || event.ctrlKey) {
|
|
1943
|
+
return;
|
|
1944
|
+
}
|
|
1945
|
+
hadKeyboardEvent = true;
|
|
1946
|
+
}
|
|
1947
|
+
|
|
1948
|
+
/**
|
|
1949
|
+
* If at any point a user clicks with a pointing device, ensure that we change
|
|
1950
|
+
* the modality away from keyboard.
|
|
1951
|
+
* This avoids the situation where a user presses a key on an already focused
|
|
1952
|
+
* element, and then clicks on a different element, focusing it with a
|
|
1953
|
+
* pointing device, while we still think we're in keyboard modality.
|
|
1954
|
+
*/
|
|
1955
|
+
function handlePointerDown() {
|
|
1956
|
+
hadKeyboardEvent = false;
|
|
1957
|
+
}
|
|
1958
|
+
function handleVisibilityChange() {
|
|
1959
|
+
if (this.visibilityState === 'hidden') {
|
|
1960
|
+
// If the tab becomes active again, the browser will handle calling focus
|
|
1961
|
+
// on the element (Safari actually calls it twice).
|
|
1962
|
+
// If this tab change caused a blur on an element with focus-visible,
|
|
1963
|
+
// re-apply the class when the user switches back to the tab.
|
|
1964
|
+
if (hadFocusVisibleRecently) {
|
|
1965
|
+
hadKeyboardEvent = true;
|
|
1966
|
+
}
|
|
1967
|
+
}
|
|
1968
|
+
}
|
|
1969
|
+
function prepare(doc) {
|
|
1970
|
+
doc.addEventListener('keydown', handleKeyDown, true);
|
|
1971
|
+
doc.addEventListener('mousedown', handlePointerDown, true);
|
|
1972
|
+
doc.addEventListener('pointerdown', handlePointerDown, true);
|
|
1973
|
+
doc.addEventListener('touchstart', handlePointerDown, true);
|
|
1974
|
+
doc.addEventListener('visibilitychange', handleVisibilityChange, true);
|
|
1975
|
+
}
|
|
1976
|
+
function isFocusVisible(event) {
|
|
1977
|
+
const {
|
|
1978
|
+
target
|
|
1979
|
+
} = event;
|
|
1980
|
+
try {
|
|
1981
|
+
return target.matches(':focus-visible');
|
|
1982
|
+
} catch (error) {
|
|
1983
|
+
// Browsers not implementing :focus-visible will throw a SyntaxError.
|
|
1984
|
+
// We use our own heuristic for those browsers.
|
|
1985
|
+
// Rethrow might be better if it's not the expected error but do we really
|
|
1986
|
+
// want to crash if focus-visible malfunctioned?
|
|
1987
|
+
}
|
|
1988
|
+
|
|
1989
|
+
// No need for validFocusTarget check. The user does that by attaching it to
|
|
1990
|
+
// focusable events only.
|
|
1991
|
+
return hadKeyboardEvent || focusTriggersKeyboardModality(target);
|
|
1992
|
+
}
|
|
1993
|
+
function useIsFocusVisible() {
|
|
1994
|
+
const ref = React.useCallback(node => {
|
|
1995
|
+
if (node != null) {
|
|
1996
|
+
prepare(node.ownerDocument);
|
|
1997
|
+
}
|
|
1998
|
+
}, []);
|
|
1999
|
+
const isFocusVisibleRef = React.useRef(false);
|
|
2000
|
+
|
|
2001
|
+
/**
|
|
2002
|
+
* Should be called if a blur event is fired
|
|
2003
|
+
*/
|
|
2004
|
+
function handleBlurVisible() {
|
|
2005
|
+
// checking against potential state variable does not suffice if we focus and blur synchronously.
|
|
2006
|
+
// React wouldn't have time to trigger a re-render so `focusVisible` would be stale.
|
|
2007
|
+
// Ideally we would adjust `isFocusVisible(event)` to look at `relatedTarget` for blur events.
|
|
2008
|
+
// This doesn't work in IE11 due to https://github.com/facebook/react/issues/3751
|
|
2009
|
+
// TODO: check again if React releases their internal changes to focus event handling (https://github.com/facebook/react/pull/19186).
|
|
2010
|
+
if (isFocusVisibleRef.current) {
|
|
2011
|
+
// To detect a tab/window switch, we look for a blur event followed
|
|
2012
|
+
// rapidly by a visibility change.
|
|
2013
|
+
// If we don't see a visibility change within 100ms, it's probably a
|
|
2014
|
+
// regular focus change.
|
|
2015
|
+
hadFocusVisibleRecently = true;
|
|
2016
|
+
window.clearTimeout(hadFocusVisibleRecentlyTimeout);
|
|
2017
|
+
hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
|
|
2018
|
+
hadFocusVisibleRecently = false;
|
|
2019
|
+
}, 100);
|
|
2020
|
+
isFocusVisibleRef.current = false;
|
|
2021
|
+
return true;
|
|
2022
|
+
}
|
|
2023
|
+
return false;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
/**
|
|
2027
|
+
* Should be called if a blur event is fired
|
|
2028
|
+
*/
|
|
2029
|
+
function handleFocusVisible(event) {
|
|
2030
|
+
if (isFocusVisible(event)) {
|
|
2031
|
+
isFocusVisibleRef.current = true;
|
|
2032
|
+
return true;
|
|
2033
|
+
}
|
|
2034
|
+
return false;
|
|
2035
|
+
}
|
|
2036
|
+
return {
|
|
2037
|
+
isFocusVisibleRef,
|
|
2038
|
+
onFocus: handleFocusVisible,
|
|
2039
|
+
onBlur: handleBlurVisible,
|
|
2040
|
+
ref
|
|
2041
|
+
};
|
|
2042
|
+
}
|
|
2043
|
+
|
|
1890
2044
|
// A change of the browser zoom change the scrollbar size.
|
|
1891
2045
|
// Credit https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
|
|
1892
2046
|
function getScrollbarSize(doc) {
|
|
@@ -3470,7 +3624,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
3470
3624
|
return target;
|
|
3471
3625
|
}
|
|
3472
3626
|
|
|
3473
|
-
const _excluded$
|
|
3627
|
+
const _excluded$O = ["values", "unit", "step"];
|
|
3474
3628
|
const sortBreakpointsValues = values => {
|
|
3475
3629
|
const breakpointsAsArray = Object.keys(values).map(key => ({
|
|
3476
3630
|
key,
|
|
@@ -3505,7 +3659,7 @@ function createBreakpoints(breakpoints) {
|
|
|
3505
3659
|
unit = 'px',
|
|
3506
3660
|
step = 5
|
|
3507
3661
|
} = breakpoints,
|
|
3508
|
-
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$
|
|
3662
|
+
other = _objectWithoutPropertiesLoose(breakpoints, _excluded$O);
|
|
3509
3663
|
const sortedValues = sortBreakpointsValues(values);
|
|
3510
3664
|
const keys = Object.keys(sortedValues);
|
|
3511
3665
|
function up(key) {
|
|
@@ -3568,7 +3722,7 @@ function merge(acc, item) {
|
|
|
3568
3722
|
|
|
3569
3723
|
// The breakpoint **start** at this value.
|
|
3570
3724
|
// For instance with the first breakpoint xs: [xs, sm[.
|
|
3571
|
-
const values = {
|
|
3725
|
+
const values$1 = {
|
|
3572
3726
|
xs: 0,
|
|
3573
3727
|
// phone
|
|
3574
3728
|
sm: 600,
|
|
@@ -3584,7 +3738,7 @@ const defaultBreakpoints = {
|
|
|
3584
3738
|
// Sorted ASC by size. That's important.
|
|
3585
3739
|
// It can't be configured as it's used statically for propTypes.
|
|
3586
3740
|
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
|
|
3587
|
-
up: key => `@media (min-width:${values[key]}px)`
|
|
3741
|
+
up: key => `@media (min-width:${values$1[key]}px)`
|
|
3588
3742
|
};
|
|
3589
3743
|
function handleBreakpoints(props, propValue, styleFromPropValue) {
|
|
3590
3744
|
const theme = props.theme || {};
|
|
@@ -3599,7 +3753,7 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
|
|
|
3599
3753
|
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
|
|
3600
3754
|
return Object.keys(propValue).reduce((acc, breakpoint) => {
|
|
3601
3755
|
// key is breakpoint
|
|
3602
|
-
if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
|
|
3756
|
+
if (Object.keys(themeBreakpoints.values || values$1).indexOf(breakpoint) !== -1) {
|
|
3603
3757
|
const mediaKey = themeBreakpoints.up(breakpoint);
|
|
3604
3758
|
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
|
|
3605
3759
|
} else {
|
|
@@ -4091,7 +4245,7 @@ const maxWidth = props => {
|
|
|
4091
4245
|
if (props.maxWidth !== undefined && props.maxWidth !== null) {
|
|
4092
4246
|
const styleFromPropValue = propValue => {
|
|
4093
4247
|
var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
|
|
4094
|
-
const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values[propValue];
|
|
4248
|
+
const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$1[propValue];
|
|
4095
4249
|
return {
|
|
4096
4250
|
maxWidth: breakpoint || sizingTransform(propValue)
|
|
4097
4251
|
};
|
|
@@ -4534,7 +4688,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
|
|
|
4534
4688
|
styleFunctionSx.filterProps = ['sx'];
|
|
4535
4689
|
var styleFunctionSx$1 = styleFunctionSx;
|
|
4536
4690
|
|
|
4537
|
-
const _excluded$
|
|
4691
|
+
const _excluded$N = ["breakpoints", "palette", "spacing", "shape"];
|
|
4538
4692
|
function createTheme$1(options = {}, ...args) {
|
|
4539
4693
|
const {
|
|
4540
4694
|
breakpoints: breakpointsInput = {},
|
|
@@ -4542,7 +4696,7 @@ function createTheme$1(options = {}, ...args) {
|
|
|
4542
4696
|
spacing: spacingInput,
|
|
4543
4697
|
shape: shapeInput = {}
|
|
4544
4698
|
} = options,
|
|
4545
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
|
4699
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$N);
|
|
4546
4700
|
const breakpoints = createBreakpoints(breakpointsInput);
|
|
4547
4701
|
const spacing = createSpacing(spacingInput);
|
|
4548
4702
|
let muiTheme = deepmerge({
|
|
@@ -4610,7 +4764,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
|
|
|
4610
4764
|
themeId: PropTypes.string
|
|
4611
4765
|
} : void 0;
|
|
4612
4766
|
|
|
4613
|
-
const _excluded$
|
|
4767
|
+
const _excluded$M = ["sx"];
|
|
4614
4768
|
const splitProps = props => {
|
|
4615
4769
|
var _props$theme$unstable, _props$theme;
|
|
4616
4770
|
const result = {
|
|
@@ -4631,7 +4785,7 @@ function extendSxProp(props) {
|
|
|
4631
4785
|
const {
|
|
4632
4786
|
sx: inSx
|
|
4633
4787
|
} = props,
|
|
4634
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4788
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$M);
|
|
4635
4789
|
const {
|
|
4636
4790
|
systemProps,
|
|
4637
4791
|
otherProps
|
|
@@ -4657,7 +4811,7 @@ function extendSxProp(props) {
|
|
|
4657
4811
|
|
|
4658
4812
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
4659
4813
|
|
|
4660
|
-
const _excluded$
|
|
4814
|
+
const _excluded$L = ["className", "component"];
|
|
4661
4815
|
function createBox(options = {}) {
|
|
4662
4816
|
const {
|
|
4663
4817
|
themeId,
|
|
@@ -4675,7 +4829,7 @@ function createBox(options = {}) {
|
|
|
4675
4829
|
className,
|
|
4676
4830
|
component = 'div'
|
|
4677
4831
|
} = _extendSxProp,
|
|
4678
|
-
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$
|
|
4832
|
+
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$L);
|
|
4679
4833
|
return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
|
|
4680
4834
|
as: component,
|
|
4681
4835
|
ref: ref,
|
|
@@ -4686,7 +4840,7 @@ function createBox(options = {}) {
|
|
|
4686
4840
|
return Box;
|
|
4687
4841
|
}
|
|
4688
4842
|
|
|
4689
|
-
const _excluded$
|
|
4843
|
+
const _excluded$K = ["variant"];
|
|
4690
4844
|
function isEmpty$3(string) {
|
|
4691
4845
|
return string.length === 0;
|
|
4692
4846
|
}
|
|
@@ -4700,7 +4854,7 @@ function propsToClassKey(props) {
|
|
|
4700
4854
|
const {
|
|
4701
4855
|
variant
|
|
4702
4856
|
} = props,
|
|
4703
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
4857
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$K);
|
|
4704
4858
|
let classKey = variant || '';
|
|
4705
4859
|
Object.keys(other).sort().forEach(key => {
|
|
4706
4860
|
if (key === 'color') {
|
|
@@ -4712,7 +4866,7 @@ function propsToClassKey(props) {
|
|
|
4712
4866
|
return classKey;
|
|
4713
4867
|
}
|
|
4714
4868
|
|
|
4715
|
-
const _excluded$
|
|
4869
|
+
const _excluded$J = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
|
4716
4870
|
function isEmpty$2(obj) {
|
|
4717
4871
|
return Object.keys(obj).length === 0;
|
|
4718
4872
|
}
|
|
@@ -4807,7 +4961,7 @@ function createStyled(input = {}) {
|
|
|
4807
4961
|
skipSx: inputSkipSx,
|
|
4808
4962
|
overridesResolver
|
|
4809
4963
|
} = inputOptions,
|
|
4810
|
-
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$
|
|
4964
|
+
options = _objectWithoutPropertiesLoose(inputOptions, _excluded$J);
|
|
4811
4965
|
|
|
4812
4966
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
|
4813
4967
|
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
|
|
@@ -5334,7 +5488,7 @@ const green = {
|
|
|
5334
5488
|
};
|
|
5335
5489
|
var green$1 = green;
|
|
5336
5490
|
|
|
5337
|
-
const _excluded$
|
|
5491
|
+
const _excluded$I = ["mode", "contrastThreshold", "tonalOffset"];
|
|
5338
5492
|
const light = {
|
|
5339
5493
|
// The colors used to style the text.
|
|
5340
5494
|
text: {
|
|
@@ -5503,7 +5657,7 @@ function createPalette(palette) {
|
|
|
5503
5657
|
contrastThreshold = 3,
|
|
5504
5658
|
tonalOffset = 0.2
|
|
5505
5659
|
} = palette,
|
|
5506
|
-
other = _objectWithoutPropertiesLoose(palette, _excluded$
|
|
5660
|
+
other = _objectWithoutPropertiesLoose(palette, _excluded$I);
|
|
5507
5661
|
const primary = palette.primary || getDefaultPrimary(mode);
|
|
5508
5662
|
const secondary = palette.secondary || getDefaultSecondary(mode);
|
|
5509
5663
|
const error = palette.error || getDefaultError(mode);
|
|
@@ -5627,7 +5781,7 @@ const theme2 = createTheme({ palette: {
|
|
|
5627
5781
|
return paletteOutput;
|
|
5628
5782
|
}
|
|
5629
5783
|
|
|
5630
|
-
const _excluded$
|
|
5784
|
+
const _excluded$H = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
|
5631
5785
|
function round$1(value) {
|
|
5632
5786
|
return Math.round(value * 1e5) / 1e5;
|
|
5633
5787
|
}
|
|
@@ -5658,7 +5812,7 @@ function createTypography(palette, typography) {
|
|
|
5658
5812
|
allVariants,
|
|
5659
5813
|
pxToRem: pxToRem2
|
|
5660
5814
|
} = _ref,
|
|
5661
|
-
other = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
5815
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded$H);
|
|
5662
5816
|
if (process.env.NODE_ENV !== 'production') {
|
|
5663
5817
|
if (typeof fontSize !== 'number') {
|
|
5664
5818
|
console.error('MUI: `fontSize` is required to be a number.');
|
|
@@ -5725,7 +5879,7 @@ function createShadow(...px) {
|
|
|
5725
5879
|
const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
|
|
5726
5880
|
var shadows$1 = shadows;
|
|
5727
5881
|
|
|
5728
|
-
const _excluded$
|
|
5882
|
+
const _excluded$G = ["duration", "easing", "delay"];
|
|
5729
5883
|
// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
|
|
5730
5884
|
// to learn the context in which each easing should be used.
|
|
5731
5885
|
const easing = {
|
|
@@ -5776,7 +5930,7 @@ function createTransitions(inputTransitions) {
|
|
|
5776
5930
|
easing: easingOption = mergedEasing.easeInOut,
|
|
5777
5931
|
delay = 0
|
|
5778
5932
|
} = options,
|
|
5779
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
|
5933
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$G);
|
|
5780
5934
|
if (process.env.NODE_ENV !== 'production') {
|
|
5781
5935
|
const isString = value => typeof value === 'string';
|
|
5782
5936
|
// IE11 support, replace with Number.isNaN
|
|
@@ -5823,7 +5977,7 @@ const zIndex = {
|
|
|
5823
5977
|
};
|
|
5824
5978
|
var zIndex$1 = zIndex;
|
|
5825
5979
|
|
|
5826
|
-
const _excluded$
|
|
5980
|
+
const _excluded$F = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
|
|
5827
5981
|
function createTheme(options = {}, ...args) {
|
|
5828
5982
|
const {
|
|
5829
5983
|
mixins: mixinsInput = {},
|
|
@@ -5831,7 +5985,7 @@ function createTheme(options = {}, ...args) {
|
|
|
5831
5985
|
transitions: transitionsInput = {},
|
|
5832
5986
|
typography: typographyInput = {}
|
|
5833
5987
|
} = options,
|
|
5834
|
-
other = _objectWithoutPropertiesLoose(options, _excluded$
|
|
5988
|
+
other = _objectWithoutPropertiesLoose(options, _excluded$F);
|
|
5835
5989
|
if (options.vars) {
|
|
5836
5990
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
|
|
5837
5991
|
Please use another name.` : formatMuiErrorMessage(18));
|
|
@@ -6128,7 +6282,7 @@ function mergeSlotProps(parameters) {
|
|
|
6128
6282
|
};
|
|
6129
6283
|
}
|
|
6130
6284
|
|
|
6131
|
-
const _excluded$
|
|
6285
|
+
const _excluded$E = ["elementType", "externalSlotProps", "ownerState"];
|
|
6132
6286
|
/**
|
|
6133
6287
|
* @ignore - do not document.
|
|
6134
6288
|
* Builds the props to be passed into the slot of an unstyled component.
|
|
@@ -6144,7 +6298,7 @@ function useSlotProps(parameters) {
|
|
|
6144
6298
|
externalSlotProps,
|
|
6145
6299
|
ownerState
|
|
6146
6300
|
} = parameters,
|
|
6147
|
-
rest = _objectWithoutPropertiesLoose(parameters, _excluded$
|
|
6301
|
+
rest = _objectWithoutPropertiesLoose(parameters, _excluded$E);
|
|
6148
6302
|
const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
|
|
6149
6303
|
const {
|
|
6150
6304
|
props: mergedProps,
|
|
@@ -8360,7 +8514,7 @@ function getPopperUtilityClass(slot) {
|
|
|
8360
8514
|
}
|
|
8361
8515
|
generateUtilityClasses('MuiPopper', ['root']);
|
|
8362
8516
|
|
|
8363
|
-
const _excluded$
|
|
8517
|
+
const _excluded$D = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
|
|
8364
8518
|
_excluded2$2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
|
|
8365
8519
|
function flipPlacement(placement, direction) {
|
|
8366
8520
|
if (direction === 'ltr') {
|
|
@@ -8388,7 +8542,7 @@ function isHTMLElement(element) {
|
|
|
8388
8542
|
function isVirtualElement(element) {
|
|
8389
8543
|
return !isHTMLElement(element);
|
|
8390
8544
|
}
|
|
8391
|
-
const useUtilityClasses$
|
|
8545
|
+
const useUtilityClasses$p = () => {
|
|
8392
8546
|
const slots = {
|
|
8393
8547
|
root: ['root']
|
|
8394
8548
|
};
|
|
@@ -8413,7 +8567,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
|
|
|
8413
8567
|
// @ts-ignore internal logic
|
|
8414
8568
|
// prevent from spreading to DOM, it can come from the parent component e.g. Select.
|
|
8415
8569
|
} = props,
|
|
8416
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
8570
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$D);
|
|
8417
8571
|
const tooltipRef = React.useRef(null);
|
|
8418
8572
|
const ownRef = useForkRef(tooltipRef, forwardedRef);
|
|
8419
8573
|
const popperRef = React.useRef(null);
|
|
@@ -8498,7 +8652,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
|
|
|
8498
8652
|
if (TransitionProps !== null) {
|
|
8499
8653
|
childProps.TransitionProps = TransitionProps;
|
|
8500
8654
|
}
|
|
8501
|
-
const classes = useUtilityClasses$
|
|
8655
|
+
const classes = useUtilityClasses$p();
|
|
8502
8656
|
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
|
|
8503
8657
|
const rootProps = useSlotProps({
|
|
8504
8658
|
elementType: Root,
|
|
@@ -8940,8 +9094,8 @@ function getModalUtilityClass(slot) {
|
|
|
8940
9094
|
}
|
|
8941
9095
|
generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
|
|
8942
9096
|
|
|
8943
|
-
const _excluded$
|
|
8944
|
-
const useUtilityClasses$
|
|
9097
|
+
const _excluded$C = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
|
|
9098
|
+
const useUtilityClasses$o = ownerState => {
|
|
8945
9099
|
const {
|
|
8946
9100
|
open,
|
|
8947
9101
|
exited
|
|
@@ -9009,7 +9163,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
|
9009
9163
|
slotProps = {},
|
|
9010
9164
|
slots = {}
|
|
9011
9165
|
} = props,
|
|
9012
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
9166
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$C);
|
|
9013
9167
|
// TODO: `modal`` must change its type in this file to match the type of methods
|
|
9014
9168
|
// provided by `ModalManager`
|
|
9015
9169
|
const manager = managerProp;
|
|
@@ -9084,7 +9238,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
|
|
|
9084
9238
|
hideBackdrop,
|
|
9085
9239
|
keepMounted
|
|
9086
9240
|
});
|
|
9087
|
-
const classes = useUtilityClasses$
|
|
9241
|
+
const classes = useUtilityClasses$o(ownerState);
|
|
9088
9242
|
const handleEnter = () => {
|
|
9089
9243
|
setExited(false);
|
|
9090
9244
|
if (onTransitionEnter) {
|
|
@@ -9299,7 +9453,7 @@ process.env.NODE_ENV !== "production" ? Modal$2.propTypes /* remove-proptypes */
|
|
|
9299
9453
|
} : void 0;
|
|
9300
9454
|
var ModalUnstyled = Modal$2;
|
|
9301
9455
|
|
|
9302
|
-
const _excluded$
|
|
9456
|
+
const _excluded$B = ["onChange", "maxRows", "minRows", "style", "value"];
|
|
9303
9457
|
function getStyleValue(value) {
|
|
9304
9458
|
return parseInt(value, 10) || 0;
|
|
9305
9459
|
}
|
|
@@ -9341,7 +9495,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
|
|
|
9341
9495
|
style,
|
|
9342
9496
|
value
|
|
9343
9497
|
} = props,
|
|
9344
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
9498
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$B);
|
|
9345
9499
|
const {
|
|
9346
9500
|
current: isControlled
|
|
9347
9501
|
} = React.useRef(value != null);
|
|
@@ -9635,7 +9789,7 @@ function getInputBaseUtilityClass(slot) {
|
|
|
9635
9789
|
const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
|
|
9636
9790
|
var inputBaseClasses$1 = inputBaseClasses;
|
|
9637
9791
|
|
|
9638
|
-
const _excluded$
|
|
9792
|
+
const _excluded$A = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
|
|
9639
9793
|
const rootOverridesResolver = (props, styles) => {
|
|
9640
9794
|
const {
|
|
9641
9795
|
ownerState
|
|
@@ -9648,7 +9802,7 @@ const inputOverridesResolver = (props, styles) => {
|
|
|
9648
9802
|
} = props;
|
|
9649
9803
|
return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
|
|
9650
9804
|
};
|
|
9651
|
-
const useUtilityClasses$
|
|
9805
|
+
const useUtilityClasses$n = ownerState => {
|
|
9652
9806
|
const {
|
|
9653
9807
|
classes,
|
|
9654
9808
|
color,
|
|
@@ -9866,7 +10020,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
|
|
|
9866
10020
|
type = 'text',
|
|
9867
10021
|
value: valueProp
|
|
9868
10022
|
} = props,
|
|
9869
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
10023
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$A);
|
|
9870
10024
|
const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
|
|
9871
10025
|
const {
|
|
9872
10026
|
current: isControlled
|
|
@@ -10040,7 +10194,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
|
|
|
10040
10194
|
startAdornment,
|
|
10041
10195
|
type
|
|
10042
10196
|
});
|
|
10043
|
-
const classes = useUtilityClasses$
|
|
10197
|
+
const classes = useUtilityClasses$n(ownerState);
|
|
10044
10198
|
const Root = slots.root || components.Root || InputBaseRoot;
|
|
10045
10199
|
const rootProps = slotProps.root || componentsProps.root || {};
|
|
10046
10200
|
const Input = slots.input || components.Input || InputBaseComponent;
|
|
@@ -10328,8 +10482,8 @@ function getInputUtilityClass(slot) {
|
|
|
10328
10482
|
const inputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
|
|
10329
10483
|
var inputClasses$1 = inputClasses;
|
|
10330
10484
|
|
|
10331
|
-
const _excluded$
|
|
10332
|
-
const useUtilityClasses$
|
|
10485
|
+
const _excluded$z = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
|
|
10486
|
+
const useUtilityClasses$m = ownerState => {
|
|
10333
10487
|
const {
|
|
10334
10488
|
classes,
|
|
10335
10489
|
disableUnderline
|
|
@@ -10441,8 +10595,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
|
|
|
10441
10595
|
slots = {},
|
|
10442
10596
|
type = 'text'
|
|
10443
10597
|
} = props,
|
|
10444
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
10445
|
-
const classes = useUtilityClasses$
|
|
10598
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$z);
|
|
10599
|
+
const classes = useUtilityClasses$m(props);
|
|
10446
10600
|
const ownerState = {
|
|
10447
10601
|
disableUnderline
|
|
10448
10602
|
};
|
|
@@ -10664,8 +10818,8 @@ function getFilledInputUtilityClass(slot) {
|
|
|
10664
10818
|
const filledInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
|
|
10665
10819
|
var filledInputClasses$1 = filledInputClasses;
|
|
10666
10820
|
|
|
10667
|
-
const _excluded$
|
|
10668
|
-
const useUtilityClasses$
|
|
10821
|
+
const _excluded$y = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
|
|
10822
|
+
const useUtilityClasses$l = ownerState => {
|
|
10669
10823
|
const {
|
|
10670
10824
|
classes,
|
|
10671
10825
|
disableUnderline
|
|
@@ -10848,14 +11002,14 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
|
|
|
10848
11002
|
slots = {},
|
|
10849
11003
|
type = 'text'
|
|
10850
11004
|
} = props,
|
|
10851
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
11005
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$y);
|
|
10852
11006
|
const ownerState = _extends({}, props, {
|
|
10853
11007
|
fullWidth,
|
|
10854
11008
|
inputComponent,
|
|
10855
11009
|
multiline,
|
|
10856
11010
|
type
|
|
10857
11011
|
});
|
|
10858
|
-
const classes = useUtilityClasses$
|
|
11012
|
+
const classes = useUtilityClasses$l(props);
|
|
10859
11013
|
const filledInputComponentsProps = {
|
|
10860
11014
|
root: {
|
|
10861
11015
|
ownerState
|
|
@@ -11079,7 +11233,7 @@ FilledInput.muiName = 'Input';
|
|
|
11079
11233
|
var FilledInput$1 = FilledInput;
|
|
11080
11234
|
|
|
11081
11235
|
var _span$2;
|
|
11082
|
-
const _excluded$
|
|
11236
|
+
const _excluded$x = ["children", "classes", "className", "label", "notched"];
|
|
11083
11237
|
const NotchedOutlineRoot$1 = styled$1('fieldset')({
|
|
11084
11238
|
textAlign: 'left',
|
|
11085
11239
|
position: 'absolute',
|
|
@@ -11152,7 +11306,7 @@ function NotchedOutline(props) {
|
|
|
11152
11306
|
label,
|
|
11153
11307
|
notched
|
|
11154
11308
|
} = props,
|
|
11155
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
11309
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$x);
|
|
11156
11310
|
const withLabel = label != null && label !== '';
|
|
11157
11311
|
const ownerState = _extends({}, props, {
|
|
11158
11312
|
notched,
|
|
@@ -11209,8 +11363,8 @@ function getOutlinedInputUtilityClass(slot) {
|
|
|
11209
11363
|
const outlinedInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
|
|
11210
11364
|
var outlinedInputClasses$1 = outlinedInputClasses;
|
|
11211
11365
|
|
|
11212
|
-
const _excluded$
|
|
11213
|
-
const useUtilityClasses$
|
|
11366
|
+
const _excluded$w = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
|
|
11367
|
+
const useUtilityClasses$k = ownerState => {
|
|
11214
11368
|
const {
|
|
11215
11369
|
classes
|
|
11216
11370
|
} = ownerState;
|
|
@@ -11328,8 +11482,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
|
|
|
11328
11482
|
slots = {},
|
|
11329
11483
|
type = 'text'
|
|
11330
11484
|
} = props,
|
|
11331
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
11332
|
-
const classes = useUtilityClasses$
|
|
11485
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$w);
|
|
11486
|
+
const classes = useUtilityClasses$k(props);
|
|
11333
11487
|
const muiFormControl = useFormControl();
|
|
11334
11488
|
const fcs = formControlState({
|
|
11335
11489
|
props,
|
|
@@ -11549,8 +11703,8 @@ function getFormLabelUtilityClasses(slot) {
|
|
|
11549
11703
|
const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
|
|
11550
11704
|
var formLabelClasses$1 = formLabelClasses;
|
|
11551
11705
|
|
|
11552
|
-
const _excluded$
|
|
11553
|
-
const useUtilityClasses$
|
|
11706
|
+
const _excluded$v = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
|
|
11707
|
+
const useUtilityClasses$j = ownerState => {
|
|
11554
11708
|
const {
|
|
11555
11709
|
classes,
|
|
11556
11710
|
color,
|
|
@@ -11614,7 +11768,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
|
|
|
11614
11768
|
className,
|
|
11615
11769
|
component = 'label'
|
|
11616
11770
|
} = props,
|
|
11617
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
11771
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$v);
|
|
11618
11772
|
const muiFormControl = useFormControl();
|
|
11619
11773
|
const fcs = formControlState({
|
|
11620
11774
|
props,
|
|
@@ -11630,7 +11784,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
|
|
|
11630
11784
|
focused: fcs.focused,
|
|
11631
11785
|
required: fcs.required
|
|
11632
11786
|
});
|
|
11633
|
-
const classes = useUtilityClasses$
|
|
11787
|
+
const classes = useUtilityClasses$j(ownerState);
|
|
11634
11788
|
return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
|
|
11635
11789
|
as: component,
|
|
11636
11790
|
ownerState: ownerState,
|
|
@@ -11705,8 +11859,8 @@ function getInputLabelUtilityClasses(slot) {
|
|
|
11705
11859
|
}
|
|
11706
11860
|
generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
|
|
11707
11861
|
|
|
11708
|
-
const _excluded$
|
|
11709
|
-
const useUtilityClasses$
|
|
11862
|
+
const _excluded$u = ["disableAnimation", "margin", "shrink", "variant", "className"];
|
|
11863
|
+
const useUtilityClasses$i = ownerState => {
|
|
11710
11864
|
const {
|
|
11711
11865
|
classes,
|
|
11712
11866
|
formControl,
|
|
@@ -11807,7 +11961,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
|
|
|
11807
11961
|
shrink: shrinkProp,
|
|
11808
11962
|
className
|
|
11809
11963
|
} = props,
|
|
11810
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
11964
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$u);
|
|
11811
11965
|
const muiFormControl = useFormControl();
|
|
11812
11966
|
let shrink = shrinkProp;
|
|
11813
11967
|
if (typeof shrink === 'undefined' && muiFormControl) {
|
|
@@ -11826,7 +11980,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
|
|
|
11826
11980
|
variant: fcs.variant,
|
|
11827
11981
|
required: fcs.required
|
|
11828
11982
|
});
|
|
11829
|
-
const classes = useUtilityClasses$
|
|
11983
|
+
const classes = useUtilityClasses$i(ownerState);
|
|
11830
11984
|
return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
|
|
11831
11985
|
"data-shrink": shrink,
|
|
11832
11986
|
ownerState: ownerState,
|
|
@@ -11910,8 +12064,8 @@ function getFormControlUtilityClasses(slot) {
|
|
|
11910
12064
|
}
|
|
11911
12065
|
generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
|
|
11912
12066
|
|
|
11913
|
-
const _excluded$
|
|
11914
|
-
const useUtilityClasses$
|
|
12067
|
+
const _excluded$t = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
|
|
12068
|
+
const useUtilityClasses$h = ownerState => {
|
|
11915
12069
|
const {
|
|
11916
12070
|
classes,
|
|
11917
12071
|
margin,
|
|
@@ -11996,7 +12150,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
|
|
|
11996
12150
|
size = 'medium',
|
|
11997
12151
|
variant = 'outlined'
|
|
11998
12152
|
} = props,
|
|
11999
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
12153
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$t);
|
|
12000
12154
|
const ownerState = _extends({}, props, {
|
|
12001
12155
|
color,
|
|
12002
12156
|
component,
|
|
@@ -12009,7 +12163,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
|
|
|
12009
12163
|
size,
|
|
12010
12164
|
variant
|
|
12011
12165
|
});
|
|
12012
|
-
const classes = useUtilityClasses$
|
|
12166
|
+
const classes = useUtilityClasses$h(ownerState);
|
|
12013
12167
|
const [adornedStart, setAdornedStart] = React.useState(() => {
|
|
12014
12168
|
// We need to iterate through the children and find the Input in order
|
|
12015
12169
|
// to fully support server-side rendering.
|
|
@@ -12192,8 +12346,8 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
|
|
|
12192
12346
|
var formHelperTextClasses$1 = formHelperTextClasses;
|
|
12193
12347
|
|
|
12194
12348
|
var _span$1;
|
|
12195
|
-
const _excluded$
|
|
12196
|
-
const useUtilityClasses$
|
|
12349
|
+
const _excluded$s = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
|
|
12350
|
+
const useUtilityClasses$g = ownerState => {
|
|
12197
12351
|
const {
|
|
12198
12352
|
classes,
|
|
12199
12353
|
contained,
|
|
@@ -12251,7 +12405,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
|
|
|
12251
12405
|
className,
|
|
12252
12406
|
component = 'p'
|
|
12253
12407
|
} = props,
|
|
12254
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
12408
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$s);
|
|
12255
12409
|
const muiFormControl = useFormControl();
|
|
12256
12410
|
const fcs = formControlState({
|
|
12257
12411
|
props,
|
|
@@ -12269,7 +12423,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
|
|
|
12269
12423
|
focused: fcs.focused,
|
|
12270
12424
|
required: fcs.required
|
|
12271
12425
|
});
|
|
12272
|
-
const classes = useUtilityClasses$
|
|
12426
|
+
const classes = useUtilityClasses$g(ownerState);
|
|
12273
12427
|
return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
|
|
12274
12428
|
as: component,
|
|
12275
12429
|
ownerState: ownerState,
|
|
@@ -12357,8 +12511,8 @@ function getListUtilityClass(slot) {
|
|
|
12357
12511
|
}
|
|
12358
12512
|
generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
|
|
12359
12513
|
|
|
12360
|
-
const _excluded$
|
|
12361
|
-
const useUtilityClasses$
|
|
12514
|
+
const _excluded$r = ["children", "className", "component", "dense", "disablePadding", "subheader"];
|
|
12515
|
+
const useUtilityClasses$f = ownerState => {
|
|
12362
12516
|
const {
|
|
12363
12517
|
classes,
|
|
12364
12518
|
disablePadding,
|
|
@@ -12405,7 +12559,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
|
|
|
12405
12559
|
disablePadding = false,
|
|
12406
12560
|
subheader
|
|
12407
12561
|
} = props,
|
|
12408
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
12562
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$r);
|
|
12409
12563
|
const context = React.useMemo(() => ({
|
|
12410
12564
|
dense
|
|
12411
12565
|
}), [dense]);
|
|
@@ -12414,7 +12568,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
|
|
|
12414
12568
|
dense,
|
|
12415
12569
|
disablePadding
|
|
12416
12570
|
});
|
|
12417
|
-
const classes = useUtilityClasses$
|
|
12571
|
+
const classes = useUtilityClasses$f(ownerState);
|
|
12418
12572
|
return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
|
|
12419
12573
|
value: context,
|
|
12420
12574
|
children: /*#__PURE__*/jsxRuntimeExports.jsxs(ListRoot, _extends({
|
|
@@ -12472,7 +12626,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
|
|
|
12472
12626
|
} : void 0;
|
|
12473
12627
|
var List$1 = List;
|
|
12474
12628
|
|
|
12475
|
-
const _excluded$
|
|
12629
|
+
const _excluded$q = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
|
|
12476
12630
|
function nextItem(list, item, disableListWrap) {
|
|
12477
12631
|
if (list === item) {
|
|
12478
12632
|
return list.firstChild;
|
|
@@ -12554,7 +12708,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
|
|
|
12554
12708
|
onKeyDown,
|
|
12555
12709
|
variant = 'selectedMenu'
|
|
12556
12710
|
} = props,
|
|
12557
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
12711
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$q);
|
|
12558
12712
|
const listRef = React.useRef(null);
|
|
12559
12713
|
const textCriteriaRef = React.useRef({
|
|
12560
12714
|
keys: [],
|
|
@@ -13401,6 +13555,334 @@ Transition.ENTERED = ENTERED;
|
|
|
13401
13555
|
Transition.EXITING = EXITING;
|
|
13402
13556
|
var Transition$1 = Transition;
|
|
13403
13557
|
|
|
13558
|
+
function _assertThisInitialized(self) {
|
|
13559
|
+
if (self === void 0) {
|
|
13560
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
13561
|
+
}
|
|
13562
|
+
return self;
|
|
13563
|
+
}
|
|
13564
|
+
|
|
13565
|
+
/**
|
|
13566
|
+
* Given `this.props.children`, return an object mapping key to child.
|
|
13567
|
+
*
|
|
13568
|
+
* @param {*} children `this.props.children`
|
|
13569
|
+
* @return {object} Mapping of key to child
|
|
13570
|
+
*/
|
|
13571
|
+
|
|
13572
|
+
function getChildMapping(children, mapFn) {
|
|
13573
|
+
var mapper = function mapper(child) {
|
|
13574
|
+
return mapFn && isValidElement(child) ? mapFn(child) : child;
|
|
13575
|
+
};
|
|
13576
|
+
|
|
13577
|
+
var result = Object.create(null);
|
|
13578
|
+
if (children) Children.map(children, function (c) {
|
|
13579
|
+
return c;
|
|
13580
|
+
}).forEach(function (child) {
|
|
13581
|
+
// run the map function here instead so that the key is the computed one
|
|
13582
|
+
result[child.key] = mapper(child);
|
|
13583
|
+
});
|
|
13584
|
+
return result;
|
|
13585
|
+
}
|
|
13586
|
+
/**
|
|
13587
|
+
* When you're adding or removing children some may be added or removed in the
|
|
13588
|
+
* same render pass. We want to show *both* since we want to simultaneously
|
|
13589
|
+
* animate elements in and out. This function takes a previous set of keys
|
|
13590
|
+
* and a new set of keys and merges them with its best guess of the correct
|
|
13591
|
+
* ordering. In the future we may expose some of the utilities in
|
|
13592
|
+
* ReactMultiChild to make this easy, but for now React itself does not
|
|
13593
|
+
* directly have this concept of the union of prevChildren and nextChildren
|
|
13594
|
+
* so we implement it here.
|
|
13595
|
+
*
|
|
13596
|
+
* @param {object} prev prev children as returned from
|
|
13597
|
+
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
13598
|
+
* @param {object} next next children as returned from
|
|
13599
|
+
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
13600
|
+
* @return {object} a key set that contains all keys in `prev` and all keys
|
|
13601
|
+
* in `next` in a reasonable order.
|
|
13602
|
+
*/
|
|
13603
|
+
|
|
13604
|
+
function mergeChildMappings(prev, next) {
|
|
13605
|
+
prev = prev || {};
|
|
13606
|
+
next = next || {};
|
|
13607
|
+
|
|
13608
|
+
function getValueForKey(key) {
|
|
13609
|
+
return key in next ? next[key] : prev[key];
|
|
13610
|
+
} // For each key of `next`, the list of keys to insert before that key in
|
|
13611
|
+
// the combined list
|
|
13612
|
+
|
|
13613
|
+
|
|
13614
|
+
var nextKeysPending = Object.create(null);
|
|
13615
|
+
var pendingKeys = [];
|
|
13616
|
+
|
|
13617
|
+
for (var prevKey in prev) {
|
|
13618
|
+
if (prevKey in next) {
|
|
13619
|
+
if (pendingKeys.length) {
|
|
13620
|
+
nextKeysPending[prevKey] = pendingKeys;
|
|
13621
|
+
pendingKeys = [];
|
|
13622
|
+
}
|
|
13623
|
+
} else {
|
|
13624
|
+
pendingKeys.push(prevKey);
|
|
13625
|
+
}
|
|
13626
|
+
}
|
|
13627
|
+
|
|
13628
|
+
var i;
|
|
13629
|
+
var childMapping = {};
|
|
13630
|
+
|
|
13631
|
+
for (var nextKey in next) {
|
|
13632
|
+
if (nextKeysPending[nextKey]) {
|
|
13633
|
+
for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
|
13634
|
+
var pendingNextKey = nextKeysPending[nextKey][i];
|
|
13635
|
+
childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
|
13636
|
+
}
|
|
13637
|
+
}
|
|
13638
|
+
|
|
13639
|
+
childMapping[nextKey] = getValueForKey(nextKey);
|
|
13640
|
+
} // Finally, add the keys which didn't appear before any key in `next`
|
|
13641
|
+
|
|
13642
|
+
|
|
13643
|
+
for (i = 0; i < pendingKeys.length; i++) {
|
|
13644
|
+
childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
|
13645
|
+
}
|
|
13646
|
+
|
|
13647
|
+
return childMapping;
|
|
13648
|
+
}
|
|
13649
|
+
|
|
13650
|
+
function getProp(child, prop, props) {
|
|
13651
|
+
return props[prop] != null ? props[prop] : child.props[prop];
|
|
13652
|
+
}
|
|
13653
|
+
|
|
13654
|
+
function getInitialChildMapping(props, onExited) {
|
|
13655
|
+
return getChildMapping(props.children, function (child) {
|
|
13656
|
+
return cloneElement(child, {
|
|
13657
|
+
onExited: onExited.bind(null, child),
|
|
13658
|
+
in: true,
|
|
13659
|
+
appear: getProp(child, 'appear', props),
|
|
13660
|
+
enter: getProp(child, 'enter', props),
|
|
13661
|
+
exit: getProp(child, 'exit', props)
|
|
13662
|
+
});
|
|
13663
|
+
});
|
|
13664
|
+
}
|
|
13665
|
+
function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
|
13666
|
+
var nextChildMapping = getChildMapping(nextProps.children);
|
|
13667
|
+
var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
|
13668
|
+
Object.keys(children).forEach(function (key) {
|
|
13669
|
+
var child = children[key];
|
|
13670
|
+
if (!isValidElement(child)) return;
|
|
13671
|
+
var hasPrev = (key in prevChildMapping);
|
|
13672
|
+
var hasNext = (key in nextChildMapping);
|
|
13673
|
+
var prevChild = prevChildMapping[key];
|
|
13674
|
+
var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
|
|
13675
|
+
|
|
13676
|
+
if (hasNext && (!hasPrev || isLeaving)) {
|
|
13677
|
+
// console.log('entering', key)
|
|
13678
|
+
children[key] = cloneElement(child, {
|
|
13679
|
+
onExited: onExited.bind(null, child),
|
|
13680
|
+
in: true,
|
|
13681
|
+
exit: getProp(child, 'exit', nextProps),
|
|
13682
|
+
enter: getProp(child, 'enter', nextProps)
|
|
13683
|
+
});
|
|
13684
|
+
} else if (!hasNext && hasPrev && !isLeaving) {
|
|
13685
|
+
// item is old (exiting)
|
|
13686
|
+
// console.log('leaving', key)
|
|
13687
|
+
children[key] = cloneElement(child, {
|
|
13688
|
+
in: false
|
|
13689
|
+
});
|
|
13690
|
+
} else if (hasNext && hasPrev && isValidElement(prevChild)) {
|
|
13691
|
+
// item hasn't changed transition states
|
|
13692
|
+
// copy over the last transition props;
|
|
13693
|
+
// console.log('unchanged', key)
|
|
13694
|
+
children[key] = cloneElement(child, {
|
|
13695
|
+
onExited: onExited.bind(null, child),
|
|
13696
|
+
in: prevChild.props.in,
|
|
13697
|
+
exit: getProp(child, 'exit', nextProps),
|
|
13698
|
+
enter: getProp(child, 'enter', nextProps)
|
|
13699
|
+
});
|
|
13700
|
+
}
|
|
13701
|
+
});
|
|
13702
|
+
return children;
|
|
13703
|
+
}
|
|
13704
|
+
|
|
13705
|
+
var values = Object.values || function (obj) {
|
|
13706
|
+
return Object.keys(obj).map(function (k) {
|
|
13707
|
+
return obj[k];
|
|
13708
|
+
});
|
|
13709
|
+
};
|
|
13710
|
+
|
|
13711
|
+
var defaultProps = {
|
|
13712
|
+
component: 'div',
|
|
13713
|
+
childFactory: function childFactory(child) {
|
|
13714
|
+
return child;
|
|
13715
|
+
}
|
|
13716
|
+
};
|
|
13717
|
+
/**
|
|
13718
|
+
* The `<TransitionGroup>` component manages a set of transition components
|
|
13719
|
+
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
|
|
13720
|
+
* components, `<TransitionGroup>` is a state machine for managing the mounting
|
|
13721
|
+
* and unmounting of components over time.
|
|
13722
|
+
*
|
|
13723
|
+
* Consider the example below. As items are removed or added to the TodoList the
|
|
13724
|
+
* `in` prop is toggled automatically by the `<TransitionGroup>`.
|
|
13725
|
+
*
|
|
13726
|
+
* Note that `<TransitionGroup>` does not define any animation behavior!
|
|
13727
|
+
* Exactly _how_ a list item animates is up to the individual transition
|
|
13728
|
+
* component. This means you can mix and match animations across different list
|
|
13729
|
+
* items.
|
|
13730
|
+
*/
|
|
13731
|
+
|
|
13732
|
+
var TransitionGroup = /*#__PURE__*/function (_React$Component) {
|
|
13733
|
+
_inheritsLoose(TransitionGroup, _React$Component);
|
|
13734
|
+
|
|
13735
|
+
function TransitionGroup(props, context) {
|
|
13736
|
+
var _this;
|
|
13737
|
+
|
|
13738
|
+
_this = _React$Component.call(this, props, context) || this;
|
|
13739
|
+
|
|
13740
|
+
var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
|
|
13741
|
+
|
|
13742
|
+
|
|
13743
|
+
_this.state = {
|
|
13744
|
+
contextValue: {
|
|
13745
|
+
isMounting: true
|
|
13746
|
+
},
|
|
13747
|
+
handleExited: handleExited,
|
|
13748
|
+
firstRender: true
|
|
13749
|
+
};
|
|
13750
|
+
return _this;
|
|
13751
|
+
}
|
|
13752
|
+
|
|
13753
|
+
var _proto = TransitionGroup.prototype;
|
|
13754
|
+
|
|
13755
|
+
_proto.componentDidMount = function componentDidMount() {
|
|
13756
|
+
this.mounted = true;
|
|
13757
|
+
this.setState({
|
|
13758
|
+
contextValue: {
|
|
13759
|
+
isMounting: false
|
|
13760
|
+
}
|
|
13761
|
+
});
|
|
13762
|
+
};
|
|
13763
|
+
|
|
13764
|
+
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
13765
|
+
this.mounted = false;
|
|
13766
|
+
};
|
|
13767
|
+
|
|
13768
|
+
TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
|
13769
|
+
var prevChildMapping = _ref.children,
|
|
13770
|
+
handleExited = _ref.handleExited,
|
|
13771
|
+
firstRender = _ref.firstRender;
|
|
13772
|
+
return {
|
|
13773
|
+
children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
|
|
13774
|
+
firstRender: false
|
|
13775
|
+
};
|
|
13776
|
+
} // node is `undefined` when user provided `nodeRef` prop
|
|
13777
|
+
;
|
|
13778
|
+
|
|
13779
|
+
_proto.handleExited = function handleExited(child, node) {
|
|
13780
|
+
var currentChildMapping = getChildMapping(this.props.children);
|
|
13781
|
+
if (child.key in currentChildMapping) return;
|
|
13782
|
+
|
|
13783
|
+
if (child.props.onExited) {
|
|
13784
|
+
child.props.onExited(node);
|
|
13785
|
+
}
|
|
13786
|
+
|
|
13787
|
+
if (this.mounted) {
|
|
13788
|
+
this.setState(function (state) {
|
|
13789
|
+
var children = _extends({}, state.children);
|
|
13790
|
+
|
|
13791
|
+
delete children[child.key];
|
|
13792
|
+
return {
|
|
13793
|
+
children: children
|
|
13794
|
+
};
|
|
13795
|
+
});
|
|
13796
|
+
}
|
|
13797
|
+
};
|
|
13798
|
+
|
|
13799
|
+
_proto.render = function render() {
|
|
13800
|
+
var _this$props = this.props,
|
|
13801
|
+
Component = _this$props.component,
|
|
13802
|
+
childFactory = _this$props.childFactory,
|
|
13803
|
+
props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
|
13804
|
+
|
|
13805
|
+
var contextValue = this.state.contextValue;
|
|
13806
|
+
var children = values(this.state.children).map(childFactory);
|
|
13807
|
+
delete props.appear;
|
|
13808
|
+
delete props.enter;
|
|
13809
|
+
delete props.exit;
|
|
13810
|
+
|
|
13811
|
+
if (Component === null) {
|
|
13812
|
+
return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
|
|
13813
|
+
value: contextValue
|
|
13814
|
+
}, children);
|
|
13815
|
+
}
|
|
13816
|
+
|
|
13817
|
+
return /*#__PURE__*/React__default.createElement(TransitionGroupContext.Provider, {
|
|
13818
|
+
value: contextValue
|
|
13819
|
+
}, /*#__PURE__*/React__default.createElement(Component, props, children));
|
|
13820
|
+
};
|
|
13821
|
+
|
|
13822
|
+
return TransitionGroup;
|
|
13823
|
+
}(React__default.Component);
|
|
13824
|
+
|
|
13825
|
+
TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
13826
|
+
/**
|
|
13827
|
+
* `<TransitionGroup>` renders a `<div>` by default. You can change this
|
|
13828
|
+
* behavior by providing a `component` prop.
|
|
13829
|
+
* If you use React v16+ and would like to avoid a wrapping `<div>` element
|
|
13830
|
+
* you can pass in `component={null}`. This is useful if the wrapping div
|
|
13831
|
+
* borks your css styles.
|
|
13832
|
+
*/
|
|
13833
|
+
component: PropTypes.any,
|
|
13834
|
+
|
|
13835
|
+
/**
|
|
13836
|
+
* A set of `<Transition>` components, that are toggled `in` and out as they
|
|
13837
|
+
* leave. the `<TransitionGroup>` will inject specific transition props, so
|
|
13838
|
+
* remember to spread them through if you are wrapping the `<Transition>` as
|
|
13839
|
+
* with our `<Fade>` example.
|
|
13840
|
+
*
|
|
13841
|
+
* While this component is meant for multiple `Transition` or `CSSTransition`
|
|
13842
|
+
* children, sometimes you may want to have a single transition child with
|
|
13843
|
+
* content that you want to be transitioned out and in when you change it
|
|
13844
|
+
* (e.g. routes, images etc.) In that case you can change the `key` prop of
|
|
13845
|
+
* the transition child as you change its content, this will cause
|
|
13846
|
+
* `TransitionGroup` to transition the child out and back in.
|
|
13847
|
+
*/
|
|
13848
|
+
children: PropTypes.node,
|
|
13849
|
+
|
|
13850
|
+
/**
|
|
13851
|
+
* A convenience prop that enables or disables appear animations
|
|
13852
|
+
* for all children. Note that specifying this will override any defaults set
|
|
13853
|
+
* on individual children Transitions.
|
|
13854
|
+
*/
|
|
13855
|
+
appear: PropTypes.bool,
|
|
13856
|
+
|
|
13857
|
+
/**
|
|
13858
|
+
* A convenience prop that enables or disables enter animations
|
|
13859
|
+
* for all children. Note that specifying this will override any defaults set
|
|
13860
|
+
* on individual children Transitions.
|
|
13861
|
+
*/
|
|
13862
|
+
enter: PropTypes.bool,
|
|
13863
|
+
|
|
13864
|
+
/**
|
|
13865
|
+
* A convenience prop that enables or disables exit animations
|
|
13866
|
+
* for all children. Note that specifying this will override any defaults set
|
|
13867
|
+
* on individual children Transitions.
|
|
13868
|
+
*/
|
|
13869
|
+
exit: PropTypes.bool,
|
|
13870
|
+
|
|
13871
|
+
/**
|
|
13872
|
+
* You may need to apply reactive updates to a child as it is exiting.
|
|
13873
|
+
* This is generally done by using `cloneElement` however in the case of an exiting
|
|
13874
|
+
* child the element has already been removed and not accessible to the consumer.
|
|
13875
|
+
*
|
|
13876
|
+
* If you do need to update a child as it leaves you can provide a `childFactory`
|
|
13877
|
+
* to wrap every child, even the ones that are leaving.
|
|
13878
|
+
*
|
|
13879
|
+
* @type Function(child: ReactElement) -> ReactElement
|
|
13880
|
+
*/
|
|
13881
|
+
childFactory: PropTypes.func
|
|
13882
|
+
} : {};
|
|
13883
|
+
TransitionGroup.defaultProps = defaultProps;
|
|
13884
|
+
var TransitionGroup$1 = TransitionGroup;
|
|
13885
|
+
|
|
13404
13886
|
const reflow = node => node.scrollTop;
|
|
13405
13887
|
function getTransitionProps(props, options) {
|
|
13406
13888
|
var _style$transitionDura, _style$transitionTimi;
|
|
@@ -13416,7 +13898,7 @@ function getTransitionProps(props, options) {
|
|
|
13416
13898
|
};
|
|
13417
13899
|
}
|
|
13418
13900
|
|
|
13419
|
-
const _excluded$
|
|
13901
|
+
const _excluded$p = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
|
13420
13902
|
function getScale(value) {
|
|
13421
13903
|
return `scale(${value}, ${value ** 2})`;
|
|
13422
13904
|
}
|
|
@@ -13460,7 +13942,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
|
|
|
13460
13942
|
// eslint-disable-next-line react/prop-types
|
|
13461
13943
|
TransitionComponent = Transition$1
|
|
13462
13944
|
} = props,
|
|
13463
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
13945
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$p);
|
|
13464
13946
|
const timer = React.useRef();
|
|
13465
13947
|
const autoTimeout = React.useRef();
|
|
13466
13948
|
const theme = useTheme();
|
|
@@ -13664,7 +14146,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
|
|
|
13664
14146
|
Grow.muiSupportAuto = true;
|
|
13665
14147
|
var Grow$1 = Grow;
|
|
13666
14148
|
|
|
13667
|
-
const _excluded$
|
|
14149
|
+
const _excluded$o = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
|
|
13668
14150
|
const styles = {
|
|
13669
14151
|
entering: {
|
|
13670
14152
|
opacity: 1
|
|
@@ -13701,7 +14183,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
|
|
|
13701
14183
|
// eslint-disable-next-line react/prop-types
|
|
13702
14184
|
TransitionComponent = Transition$1
|
|
13703
14185
|
} = props,
|
|
13704
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
14186
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$o);
|
|
13705
14187
|
const nodeRef = React.useRef(null);
|
|
13706
14188
|
const handleRef = useForkRef(nodeRef, children.ref, ref);
|
|
13707
14189
|
const normalizedTransitionCallback = callback => maybeIsAppearing => {
|
|
@@ -13862,8 +14344,8 @@ function getBackdropUtilityClass(slot) {
|
|
|
13862
14344
|
}
|
|
13863
14345
|
generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
|
|
13864
14346
|
|
|
13865
|
-
const _excluded$
|
|
13866
|
-
const useUtilityClasses$
|
|
14347
|
+
const _excluded$n = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
|
|
14348
|
+
const useUtilityClasses$e = ownerState => {
|
|
13867
14349
|
const {
|
|
13868
14350
|
classes,
|
|
13869
14351
|
invisible
|
|
@@ -13917,12 +14399,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
|
|
|
13917
14399
|
TransitionComponent = Fade$1,
|
|
13918
14400
|
transitionDuration
|
|
13919
14401
|
} = props,
|
|
13920
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
14402
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$n);
|
|
13921
14403
|
const ownerState = _extends({}, props, {
|
|
13922
14404
|
component,
|
|
13923
14405
|
invisible
|
|
13924
14406
|
});
|
|
13925
|
-
const classes = useUtilityClasses$
|
|
14407
|
+
const classes = useUtilityClasses$e(ownerState);
|
|
13926
14408
|
const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
|
|
13927
14409
|
return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends({
|
|
13928
14410
|
in: open,
|
|
@@ -14038,7 +14520,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
|
|
|
14038
14520
|
} : void 0;
|
|
14039
14521
|
var Backdrop$1 = Backdrop;
|
|
14040
14522
|
|
|
14041
|
-
const _excluded$
|
|
14523
|
+
const _excluded$m = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
|
|
14042
14524
|
const ModalRoot = styled$1('div', {
|
|
14043
14525
|
name: 'MuiModal',
|
|
14044
14526
|
slot: 'Root',
|
|
@@ -14117,7 +14599,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
|
|
|
14117
14599
|
// eslint-disable-next-line react/prop-types
|
|
14118
14600
|
theme
|
|
14119
14601
|
} = props,
|
|
14120
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
14602
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$m);
|
|
14121
14603
|
const [exited, setExited] = React.useState(true);
|
|
14122
14604
|
const commonProps = {
|
|
14123
14605
|
container,
|
|
@@ -14341,8 +14823,8 @@ function getPaperUtilityClass(slot) {
|
|
|
14341
14823
|
}
|
|
14342
14824
|
generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
|
|
14343
14825
|
|
|
14344
|
-
const _excluded$
|
|
14345
|
-
const useUtilityClasses$
|
|
14826
|
+
const _excluded$l = ["className", "component", "elevation", "square", "variant"];
|
|
14827
|
+
const useUtilityClasses$d = ownerState => {
|
|
14346
14828
|
const {
|
|
14347
14829
|
square,
|
|
14348
14830
|
elevation,
|
|
@@ -14396,14 +14878,14 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
|
|
|
14396
14878
|
square = false,
|
|
14397
14879
|
variant = 'elevation'
|
|
14398
14880
|
} = props,
|
|
14399
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
14881
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$l);
|
|
14400
14882
|
const ownerState = _extends({}, props, {
|
|
14401
14883
|
component,
|
|
14402
14884
|
elevation,
|
|
14403
14885
|
square,
|
|
14404
14886
|
variant
|
|
14405
14887
|
});
|
|
14406
|
-
const classes = useUtilityClasses$
|
|
14888
|
+
const classes = useUtilityClasses$d(ownerState);
|
|
14407
14889
|
if (process.env.NODE_ENV !== 'production') {
|
|
14408
14890
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
14409
14891
|
const theme = useTheme();
|
|
@@ -14477,7 +14959,7 @@ function getPopoverUtilityClass(slot) {
|
|
|
14477
14959
|
}
|
|
14478
14960
|
generateUtilityClasses('MuiPopover', ['root', 'paper']);
|
|
14479
14961
|
|
|
14480
|
-
const _excluded$
|
|
14962
|
+
const _excluded$k = ["onEntering"],
|
|
14481
14963
|
_excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
|
|
14482
14964
|
_excluded3 = ["slotProps"];
|
|
14483
14965
|
function getOffsetTop(rect, vertical) {
|
|
@@ -14508,7 +14990,7 @@ function getTransformOriginValue(transformOrigin) {
|
|
|
14508
14990
|
function resolveAnchorEl(anchorEl) {
|
|
14509
14991
|
return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
|
|
14510
14992
|
}
|
|
14511
|
-
const useUtilityClasses$
|
|
14993
|
+
const useUtilityClasses$c = ownerState => {
|
|
14512
14994
|
const {
|
|
14513
14995
|
classes
|
|
14514
14996
|
} = ownerState;
|
|
@@ -14574,7 +15056,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
|
|
|
14574
15056
|
onEntering
|
|
14575
15057
|
} = {}
|
|
14576
15058
|
} = props,
|
|
14577
|
-
TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$
|
|
15059
|
+
TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$k),
|
|
14578
15060
|
other = _objectWithoutPropertiesLoose(props, _excluded2$1);
|
|
14579
15061
|
const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
|
|
14580
15062
|
const paperRef = React.useRef();
|
|
@@ -14590,7 +15072,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
|
|
|
14590
15072
|
transitionDuration: transitionDurationProp,
|
|
14591
15073
|
TransitionProps
|
|
14592
15074
|
});
|
|
14593
|
-
const classes = useUtilityClasses$
|
|
15075
|
+
const classes = useUtilityClasses$c(ownerState);
|
|
14594
15076
|
|
|
14595
15077
|
// Returns the top/left offset of the position
|
|
14596
15078
|
// to attach to on the anchor element (or body if none is provided)
|
|
@@ -14980,7 +15462,7 @@ function getMenuUtilityClass(slot) {
|
|
|
14980
15462
|
}
|
|
14981
15463
|
generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
|
|
14982
15464
|
|
|
14983
|
-
const _excluded$
|
|
15465
|
+
const _excluded$j = ["onEntering"],
|
|
14984
15466
|
_excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
|
|
14985
15467
|
const RTL_ORIGIN = {
|
|
14986
15468
|
vertical: 'top',
|
|
@@ -14990,7 +15472,7 @@ const LTR_ORIGIN = {
|
|
|
14990
15472
|
vertical: 'top',
|
|
14991
15473
|
horizontal: 'left'
|
|
14992
15474
|
};
|
|
14993
|
-
const useUtilityClasses$
|
|
15475
|
+
const useUtilityClasses$b = ownerState => {
|
|
14994
15476
|
const {
|
|
14995
15477
|
classes
|
|
14996
15478
|
} = ownerState;
|
|
@@ -15047,7 +15529,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
|
|
|
15047
15529
|
} = {},
|
|
15048
15530
|
variant = 'selectedMenu'
|
|
15049
15531
|
} = props,
|
|
15050
|
-
TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$
|
|
15532
|
+
TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$j),
|
|
15051
15533
|
other = _objectWithoutPropertiesLoose(props, _excluded2);
|
|
15052
15534
|
const theme = useTheme();
|
|
15053
15535
|
const isRtl = theme.direction === 'rtl';
|
|
@@ -15061,7 +15543,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
|
|
|
15061
15543
|
TransitionProps,
|
|
15062
15544
|
variant
|
|
15063
15545
|
});
|
|
15064
|
-
const classes = useUtilityClasses$
|
|
15546
|
+
const classes = useUtilityClasses$b(ownerState);
|
|
15065
15547
|
const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
|
|
15066
15548
|
const menuListActionsRef = React.useRef(null);
|
|
15067
15549
|
const handleEntering = (element, isAppearing) => {
|
|
@@ -15237,8 +15719,8 @@ function getNativeSelectUtilityClasses(slot) {
|
|
|
15237
15719
|
const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
|
|
15238
15720
|
var nativeSelectClasses$1 = nativeSelectClasses;
|
|
15239
15721
|
|
|
15240
|
-
const _excluded$
|
|
15241
|
-
const useUtilityClasses$
|
|
15722
|
+
const _excluded$i = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
|
|
15723
|
+
const useUtilityClasses$a = ownerState => {
|
|
15242
15724
|
const {
|
|
15243
15725
|
classes,
|
|
15244
15726
|
variant,
|
|
@@ -15366,13 +15848,13 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
|
|
|
15366
15848
|
inputRef,
|
|
15367
15849
|
variant = 'standard'
|
|
15368
15850
|
} = props,
|
|
15369
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
15851
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$i);
|
|
15370
15852
|
const ownerState = _extends({}, props, {
|
|
15371
15853
|
disabled,
|
|
15372
15854
|
variant,
|
|
15373
15855
|
error
|
|
15374
15856
|
});
|
|
15375
|
-
const classes = useUtilityClasses$
|
|
15857
|
+
const classes = useUtilityClasses$a(ownerState);
|
|
15376
15858
|
return /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
|
|
15377
15859
|
children: [/*#__PURE__*/jsxRuntimeExports.jsx(NativeSelectSelect, _extends({
|
|
15378
15860
|
ownerState: ownerState,
|
|
@@ -15451,7 +15933,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
|
|
|
15451
15933
|
var selectClasses$1 = selectClasses;
|
|
15452
15934
|
|
|
15453
15935
|
var _span;
|
|
15454
|
-
const _excluded$
|
|
15936
|
+
const _excluded$h = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
|
|
15455
15937
|
const SelectSelect = styled$1('div', {
|
|
15456
15938
|
name: 'MuiSelect',
|
|
15457
15939
|
slot: 'Select',
|
|
@@ -15518,7 +16000,7 @@ function areEqualValues(a, b) {
|
|
|
15518
16000
|
function isEmpty(display) {
|
|
15519
16001
|
return display == null || typeof display === 'string' && !display.trim();
|
|
15520
16002
|
}
|
|
15521
|
-
const useUtilityClasses$
|
|
16003
|
+
const useUtilityClasses$9 = ownerState => {
|
|
15522
16004
|
const {
|
|
15523
16005
|
classes,
|
|
15524
16006
|
variant,
|
|
@@ -15573,7 +16055,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
15573
16055
|
value: valueProp,
|
|
15574
16056
|
variant = 'standard'
|
|
15575
16057
|
} = props,
|
|
15576
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
16058
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$h);
|
|
15577
16059
|
const [value, setValueState] = useControlled({
|
|
15578
16060
|
controlled: valueProp,
|
|
15579
16061
|
default: defaultValue,
|
|
@@ -15861,7 +16343,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
15861
16343
|
open,
|
|
15862
16344
|
error
|
|
15863
16345
|
});
|
|
15864
|
-
const classes = useUtilityClasses$
|
|
16346
|
+
const classes = useUtilityClasses$9(ownerState);
|
|
15865
16347
|
return /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
|
|
15866
16348
|
children: [/*#__PURE__*/jsxRuntimeExports.jsx(SelectSelect, _extends({
|
|
15867
16349
|
ref: handleDisplayRef,
|
|
@@ -16084,8 +16566,8 @@ function getSvgIconUtilityClass(slot) {
|
|
|
16084
16566
|
}
|
|
16085
16567
|
generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
|
|
16086
16568
|
|
|
16087
|
-
const _excluded$
|
|
16088
|
-
const useUtilityClasses$
|
|
16569
|
+
const _excluded$g = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
|
|
16570
|
+
const useUtilityClasses$8 = ownerState => {
|
|
16089
16571
|
const {
|
|
16090
16572
|
color,
|
|
16091
16573
|
fontSize,
|
|
@@ -16150,7 +16632,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
|
16150
16632
|
titleAccess,
|
|
16151
16633
|
viewBox = '0 0 24 24'
|
|
16152
16634
|
} = props,
|
|
16153
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
16635
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$g);
|
|
16154
16636
|
const ownerState = _extends({}, props, {
|
|
16155
16637
|
color,
|
|
16156
16638
|
component,
|
|
@@ -16163,7 +16645,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
|
16163
16645
|
if (!inheritViewBox) {
|
|
16164
16646
|
more.viewBox = viewBox;
|
|
16165
16647
|
}
|
|
16166
|
-
const classes = useUtilityClasses$
|
|
16648
|
+
const classes = useUtilityClasses$8(ownerState);
|
|
16167
16649
|
return /*#__PURE__*/jsxRuntimeExports.jsxs(SvgIconRoot, _extends({
|
|
16168
16650
|
as: component,
|
|
16169
16651
|
className: clsx(classes.root, className),
|
|
@@ -16276,8 +16758,8 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path"
|
|
|
16276
16758
|
d: "M7 10l5 5 5-5z"
|
|
16277
16759
|
}), 'ArrowDropDown');
|
|
16278
16760
|
|
|
16279
|
-
const _excluded$
|
|
16280
|
-
const useUtilityClasses$
|
|
16761
|
+
const _excluded$f = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
|
|
16762
|
+
const useUtilityClasses$7 = ownerState => {
|
|
16281
16763
|
const {
|
|
16282
16764
|
classes
|
|
16283
16765
|
} = ownerState;
|
|
@@ -16320,7 +16802,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
|
|
|
16320
16802
|
SelectDisplayProps,
|
|
16321
16803
|
variant: variantProp = 'outlined'
|
|
16322
16804
|
} = props,
|
|
16323
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
16805
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$f);
|
|
16324
16806
|
const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
|
|
16325
16807
|
const muiFormControl = useFormControl();
|
|
16326
16808
|
const fcs = formControlState({
|
|
@@ -16333,7 +16815,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
|
|
|
16333
16815
|
variant,
|
|
16334
16816
|
classes: classesProp
|
|
16335
16817
|
});
|
|
16336
|
-
const classes = useUtilityClasses$
|
|
16818
|
+
const classes = useUtilityClasses$7(ownerState);
|
|
16337
16819
|
const InputComponent = input || {
|
|
16338
16820
|
standard: /*#__PURE__*/jsxRuntimeExports.jsx(StyledInput, {
|
|
16339
16821
|
ownerState: ownerState
|
|
@@ -16543,13 +17025,13 @@ function getTextFieldUtilityClass(slot) {
|
|
|
16543
17025
|
}
|
|
16544
17026
|
generateUtilityClasses('MuiTextField', ['root']);
|
|
16545
17027
|
|
|
16546
|
-
const _excluded$
|
|
17028
|
+
const _excluded$e = ["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"];
|
|
16547
17029
|
const variantComponent = {
|
|
16548
17030
|
standard: Input$1,
|
|
16549
17031
|
filled: FilledInput$1,
|
|
16550
17032
|
outlined: OutlinedInput$1
|
|
16551
17033
|
};
|
|
16552
|
-
const useUtilityClasses = ownerState => {
|
|
17034
|
+
const useUtilityClasses$6 = ownerState => {
|
|
16553
17035
|
const {
|
|
16554
17036
|
classes
|
|
16555
17037
|
} = ownerState;
|
|
@@ -16636,7 +17118,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
|
|
|
16636
17118
|
value,
|
|
16637
17119
|
variant = 'outlined'
|
|
16638
17120
|
} = props,
|
|
16639
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
17121
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$e);
|
|
16640
17122
|
const ownerState = _extends({}, props, {
|
|
16641
17123
|
autoFocus,
|
|
16642
17124
|
color,
|
|
@@ -16648,7 +17130,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
|
|
|
16648
17130
|
select,
|
|
16649
17131
|
variant
|
|
16650
17132
|
});
|
|
16651
|
-
const classes = useUtilityClasses(ownerState);
|
|
17133
|
+
const classes = useUtilityClasses$6(ownerState);
|
|
16652
17134
|
if (process.env.NODE_ENV !== 'production') {
|
|
16653
17135
|
if (select && !children) {
|
|
16654
17136
|
console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
|
|
@@ -17249,7 +17731,7 @@ const GridToolbarWrapper = styled$3.div`
|
|
|
17249
17731
|
|
|
17250
17732
|
/** ------ */
|
|
17251
17733
|
|
|
17252
|
-
const Toolbar = props => {
|
|
17734
|
+
const Toolbar$2 = props => {
|
|
17253
17735
|
const {
|
|
17254
17736
|
hasExportButton = true,
|
|
17255
17737
|
exportButtonProps,
|
|
@@ -17289,7 +17771,7 @@ const Toolbar = props => {
|
|
|
17289
17771
|
})) : null)));
|
|
17290
17772
|
};
|
|
17291
17773
|
|
|
17292
|
-
const _excluded$
|
|
17774
|
+
const _excluded$d = ["displayName", "fontSize"];
|
|
17293
17775
|
const muiIconToDSIcon = {
|
|
17294
17776
|
ColumnFilteredIcon: mdiFilterVariant,
|
|
17295
17777
|
ColumnSelectorIcon: mdiViewColumn,
|
|
@@ -17308,7 +17790,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17308
17790
|
displayName,
|
|
17309
17791
|
fontSize = 'small'
|
|
17310
17792
|
} = props,
|
|
17311
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$
|
|
17793
|
+
forwardedProps = _objectWithoutProperties(props, _excluded$d);
|
|
17312
17794
|
return /*#__PURE__*/React__default.createElement(Icon, _extends$1({}, forwardedProps, forwardedProps.inputProps, {
|
|
17313
17795
|
ref: ref,
|
|
17314
17796
|
size: fontSize,
|
|
@@ -17316,7 +17798,7 @@ const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17316
17798
|
}));
|
|
17317
17799
|
});
|
|
17318
17800
|
|
|
17319
|
-
const _excluded$
|
|
17801
|
+
const _excluded$c = ["children", "color", "onClick", "startIcon"];
|
|
17320
17802
|
const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
17321
17803
|
const {
|
|
17322
17804
|
children,
|
|
@@ -17324,7 +17806,8 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17324
17806
|
onClick,
|
|
17325
17807
|
startIcon
|
|
17326
17808
|
} = props,
|
|
17327
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$
|
|
17809
|
+
forwardedProps = _objectWithoutProperties(props, _excluded$c);
|
|
17810
|
+
console.log(props);
|
|
17328
17811
|
const color = [...Object.values(CtasColorPalette), ...Object.values(NotificationsColorPalette)].includes(propsColor) ? propsColor : 'primary';
|
|
17329
17812
|
return /*#__PURE__*/React__default.createElement(Button, _extends$1({}, forwardedProps, {
|
|
17330
17813
|
color: color,
|
|
@@ -17336,7 +17819,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17336
17819
|
}), children);
|
|
17337
17820
|
});
|
|
17338
17821
|
|
|
17339
|
-
const _excluded$
|
|
17822
|
+
const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
|
|
17340
17823
|
const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
17341
17824
|
const {
|
|
17342
17825
|
checked,
|
|
@@ -17344,10 +17827,9 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17344
17827
|
disabled,
|
|
17345
17828
|
onChange
|
|
17346
17829
|
} = props,
|
|
17347
|
-
forwardedProps = _objectWithoutProperties(props, _excluded$
|
|
17830
|
+
forwardedProps = _objectWithoutProperties(props, _excluded$b);
|
|
17348
17831
|
return /*#__PURE__*/React__default.createElement(Checkbox, _extends$1({}, forwardedProps, forwardedProps.inputProps, {
|
|
17349
17832
|
isSelected: checked && !indeterminate,
|
|
17350
|
-
isColored: false,
|
|
17351
17833
|
isDisabled: disabled,
|
|
17352
17834
|
isIndeterminate: indeterminate,
|
|
17353
17835
|
ref: ref,
|
|
@@ -17355,7 +17837,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17355
17837
|
}));
|
|
17356
17838
|
});
|
|
17357
17839
|
|
|
17358
|
-
const _excluded$
|
|
17840
|
+
const _excluded$a = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
|
|
17359
17841
|
const PopperRoot = styled$1(BasePopper$1, {
|
|
17360
17842
|
name: 'MuiPopper',
|
|
17361
17843
|
slot: 'Root',
|
|
@@ -17398,7 +17880,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
|
|
|
17398
17880
|
slots,
|
|
17399
17881
|
slotProps
|
|
17400
17882
|
} = props,
|
|
17401
|
-
other = _objectWithoutPropertiesLoose(props, _excluded$
|
|
17883
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$a);
|
|
17402
17884
|
const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
|
|
17403
17885
|
const otherProps = _extends({
|
|
17404
17886
|
anchorEl,
|
|
@@ -17556,98 +18038,2367 @@ const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17556
18038
|
}));
|
|
17557
18039
|
});
|
|
17558
18040
|
|
|
17559
|
-
|
|
17560
|
-
const COMPONENT_NAME$1 = 'DataGrid';
|
|
17561
|
-
const CLASSNAME$1 = 'redsift-datagrid';
|
|
17562
|
-
const DEFAULT_PROPS = {
|
|
17563
|
-
license: process.env.MUI_LICENSE_KEY
|
|
17564
|
-
};
|
|
17565
|
-
const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
|
|
17566
|
-
var _props$slotProps;
|
|
17567
|
-
const datagridRef = ref || useRef();
|
|
18041
|
+
function Ripple(props) {
|
|
17568
18042
|
const {
|
|
17569
|
-
|
|
17570
|
-
|
|
17571
|
-
|
|
17572
|
-
|
|
17573
|
-
|
|
17574
|
-
|
|
17575
|
-
|
|
17576
|
-
|
|
18043
|
+
className,
|
|
18044
|
+
classes,
|
|
18045
|
+
pulsate = false,
|
|
18046
|
+
rippleX,
|
|
18047
|
+
rippleY,
|
|
18048
|
+
rippleSize,
|
|
18049
|
+
in: inProp,
|
|
18050
|
+
onExited,
|
|
18051
|
+
timeout
|
|
18052
|
+
} = props;
|
|
18053
|
+
const [leaving, setLeaving] = React.useState(false);
|
|
18054
|
+
const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
|
|
18055
|
+
const rippleStyles = {
|
|
18056
|
+
width: rippleSize,
|
|
18057
|
+
height: rippleSize,
|
|
18058
|
+
top: -(rippleSize / 2) + rippleY,
|
|
18059
|
+
left: -(rippleSize / 2) + rippleX
|
|
18060
|
+
};
|
|
18061
|
+
const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
|
|
18062
|
+
if (!inProp && !leaving) {
|
|
18063
|
+
setLeaving(true);
|
|
18064
|
+
}
|
|
18065
|
+
React.useEffect(() => {
|
|
18066
|
+
if (!inProp && onExited != null) {
|
|
18067
|
+
// react-transition-group#onExited
|
|
18068
|
+
const timeoutId = setTimeout(onExited, timeout);
|
|
18069
|
+
return () => {
|
|
18070
|
+
clearTimeout(timeoutId);
|
|
18071
|
+
};
|
|
18072
|
+
}
|
|
18073
|
+
return undefined;
|
|
18074
|
+
}, [onExited, inProp, timeout]);
|
|
18075
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
|
|
18076
|
+
className: rippleClassName,
|
|
18077
|
+
style: rippleStyles,
|
|
18078
|
+
children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
|
|
18079
|
+
className: childClassName
|
|
18080
|
+
})
|
|
18081
|
+
});
|
|
18082
|
+
}
|
|
18083
|
+
process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
|
|
18084
|
+
/**
|
|
18085
|
+
* Override or extend the styles applied to the component.
|
|
18086
|
+
* See [CSS API](#css) below for more details.
|
|
18087
|
+
*/
|
|
18088
|
+
classes: PropTypes.object.isRequired,
|
|
18089
|
+
className: PropTypes.string,
|
|
18090
|
+
/**
|
|
18091
|
+
* @ignore - injected from TransitionGroup
|
|
18092
|
+
*/
|
|
18093
|
+
in: PropTypes.bool,
|
|
18094
|
+
/**
|
|
18095
|
+
* @ignore - injected from TransitionGroup
|
|
18096
|
+
*/
|
|
18097
|
+
onExited: PropTypes.func,
|
|
18098
|
+
/**
|
|
18099
|
+
* If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
|
|
18100
|
+
*/
|
|
18101
|
+
pulsate: PropTypes.bool,
|
|
18102
|
+
/**
|
|
18103
|
+
* Diameter of the ripple.
|
|
18104
|
+
*/
|
|
18105
|
+
rippleSize: PropTypes.number,
|
|
18106
|
+
/**
|
|
18107
|
+
* Horizontal position of the ripple center.
|
|
18108
|
+
*/
|
|
18109
|
+
rippleX: PropTypes.number,
|
|
18110
|
+
/**
|
|
18111
|
+
* Vertical position of the ripple center.
|
|
18112
|
+
*/
|
|
18113
|
+
rippleY: PropTypes.number,
|
|
18114
|
+
/**
|
|
18115
|
+
* exit delay
|
|
18116
|
+
*/
|
|
18117
|
+
timeout: PropTypes.number.isRequired
|
|
18118
|
+
} : void 0;
|
|
18119
|
+
|
|
18120
|
+
const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
|
|
18121
|
+
var touchRippleClasses$1 = touchRippleClasses;
|
|
18122
|
+
|
|
18123
|
+
const _excluded$9 = ["center", "classes", "className"];
|
|
18124
|
+
let _ = t => t,
|
|
18125
|
+
_t,
|
|
18126
|
+
_t2,
|
|
18127
|
+
_t3,
|
|
18128
|
+
_t4;
|
|
18129
|
+
const DURATION = 550;
|
|
18130
|
+
const DELAY_RIPPLE = 80;
|
|
18131
|
+
const enterKeyframe = keyframes(_t || (_t = _`
|
|
18132
|
+
0% {
|
|
18133
|
+
transform: scale(0);
|
|
18134
|
+
opacity: 0.1;
|
|
18135
|
+
}
|
|
18136
|
+
|
|
18137
|
+
100% {
|
|
18138
|
+
transform: scale(1);
|
|
18139
|
+
opacity: 0.3;
|
|
18140
|
+
}
|
|
18141
|
+
`));
|
|
18142
|
+
const exitKeyframe = keyframes(_t2 || (_t2 = _`
|
|
18143
|
+
0% {
|
|
18144
|
+
opacity: 1;
|
|
18145
|
+
}
|
|
18146
|
+
|
|
18147
|
+
100% {
|
|
18148
|
+
opacity: 0;
|
|
18149
|
+
}
|
|
18150
|
+
`));
|
|
18151
|
+
const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
|
|
18152
|
+
0% {
|
|
18153
|
+
transform: scale(1);
|
|
18154
|
+
}
|
|
18155
|
+
|
|
18156
|
+
50% {
|
|
18157
|
+
transform: scale(0.92);
|
|
18158
|
+
}
|
|
18159
|
+
|
|
18160
|
+
100% {
|
|
18161
|
+
transform: scale(1);
|
|
18162
|
+
}
|
|
18163
|
+
`));
|
|
18164
|
+
const TouchRippleRoot = styled$1('span', {
|
|
18165
|
+
name: 'MuiTouchRipple',
|
|
18166
|
+
slot: 'Root'
|
|
18167
|
+
})({
|
|
18168
|
+
overflow: 'hidden',
|
|
18169
|
+
pointerEvents: 'none',
|
|
18170
|
+
position: 'absolute',
|
|
18171
|
+
zIndex: 0,
|
|
18172
|
+
top: 0,
|
|
18173
|
+
right: 0,
|
|
18174
|
+
bottom: 0,
|
|
18175
|
+
left: 0,
|
|
18176
|
+
borderRadius: 'inherit'
|
|
18177
|
+
});
|
|
18178
|
+
|
|
18179
|
+
// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
|
|
18180
|
+
// in string templates. Do not convert these styles in JS object as it will break.
|
|
18181
|
+
const TouchRippleRipple = styled$1(Ripple, {
|
|
18182
|
+
name: 'MuiTouchRipple',
|
|
18183
|
+
slot: 'Ripple'
|
|
18184
|
+
})(_t4 || (_t4 = _`
|
|
18185
|
+
opacity: 0;
|
|
18186
|
+
position: absolute;
|
|
18187
|
+
|
|
18188
|
+
&.${0} {
|
|
18189
|
+
opacity: 0.3;
|
|
18190
|
+
transform: scale(1);
|
|
18191
|
+
animation-name: ${0};
|
|
18192
|
+
animation-duration: ${0}ms;
|
|
18193
|
+
animation-timing-function: ${0};
|
|
18194
|
+
}
|
|
18195
|
+
|
|
18196
|
+
&.${0} {
|
|
18197
|
+
animation-duration: ${0}ms;
|
|
18198
|
+
}
|
|
18199
|
+
|
|
18200
|
+
& .${0} {
|
|
18201
|
+
opacity: 1;
|
|
18202
|
+
display: block;
|
|
18203
|
+
width: 100%;
|
|
18204
|
+
height: 100%;
|
|
18205
|
+
border-radius: 50%;
|
|
18206
|
+
background-color: currentColor;
|
|
18207
|
+
}
|
|
18208
|
+
|
|
18209
|
+
& .${0} {
|
|
18210
|
+
opacity: 0;
|
|
18211
|
+
animation-name: ${0};
|
|
18212
|
+
animation-duration: ${0}ms;
|
|
18213
|
+
animation-timing-function: ${0};
|
|
18214
|
+
}
|
|
18215
|
+
|
|
18216
|
+
& .${0} {
|
|
18217
|
+
position: absolute;
|
|
18218
|
+
/* @noflip */
|
|
18219
|
+
left: 0px;
|
|
18220
|
+
top: 0;
|
|
18221
|
+
animation-name: ${0};
|
|
18222
|
+
animation-duration: 2500ms;
|
|
18223
|
+
animation-timing-function: ${0};
|
|
18224
|
+
animation-iteration-count: infinite;
|
|
18225
|
+
animation-delay: 200ms;
|
|
18226
|
+
}
|
|
18227
|
+
`), touchRippleClasses$1.rippleVisible, enterKeyframe, DURATION, ({
|
|
18228
|
+
theme
|
|
18229
|
+
}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.ripplePulsate, ({
|
|
18230
|
+
theme
|
|
18231
|
+
}) => theme.transitions.duration.shorter, touchRippleClasses$1.child, touchRippleClasses$1.childLeaving, exitKeyframe, DURATION, ({
|
|
18232
|
+
theme
|
|
18233
|
+
}) => theme.transitions.easing.easeInOut, touchRippleClasses$1.childPulsate, pulsateKeyframe, ({
|
|
18234
|
+
theme
|
|
18235
|
+
}) => theme.transitions.easing.easeInOut);
|
|
18236
|
+
|
|
18237
|
+
/**
|
|
18238
|
+
* @ignore - internal component.
|
|
18239
|
+
*
|
|
18240
|
+
* TODO v5: Make private
|
|
18241
|
+
*/
|
|
18242
|
+
const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
|
|
18243
|
+
const props = useThemeProps({
|
|
18244
|
+
props: inProps,
|
|
18245
|
+
name: 'MuiTouchRipple'
|
|
18246
|
+
});
|
|
18247
|
+
const {
|
|
18248
|
+
center: centerProp = false,
|
|
18249
|
+
classes = {},
|
|
18250
|
+
className
|
|
17577
18251
|
} = props,
|
|
17578
|
-
|
|
17579
|
-
|
|
17580
|
-
const
|
|
17581
|
-
const
|
|
17582
|
-
useEffect(() => {
|
|
17583
|
-
|
|
17584
|
-
|
|
17585
|
-
|
|
17586
|
-
|
|
17587
|
-
|
|
18252
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$9);
|
|
18253
|
+
const [ripples, setRipples] = React.useState([]);
|
|
18254
|
+
const nextKey = React.useRef(0);
|
|
18255
|
+
const rippleCallback = React.useRef(null);
|
|
18256
|
+
React.useEffect(() => {
|
|
18257
|
+
if (rippleCallback.current) {
|
|
18258
|
+
rippleCallback.current();
|
|
18259
|
+
rippleCallback.current = null;
|
|
18260
|
+
}
|
|
18261
|
+
}, [ripples]);
|
|
18262
|
+
|
|
18263
|
+
// Used to filter out mouse emulated events on mobile.
|
|
18264
|
+
const ignoringMouseDown = React.useRef(false);
|
|
18265
|
+
// We use a timer in order to only show the ripples for touch "click" like events.
|
|
18266
|
+
// We don't want to display the ripple for touch scroll events.
|
|
18267
|
+
const startTimer = React.useRef(null);
|
|
18268
|
+
|
|
18269
|
+
// This is the hook called once the previous timeout is ready.
|
|
18270
|
+
const startTimerCommit = React.useRef(null);
|
|
18271
|
+
const container = React.useRef(null);
|
|
18272
|
+
React.useEffect(() => {
|
|
18273
|
+
return () => {
|
|
18274
|
+
clearTimeout(startTimer.current);
|
|
18275
|
+
};
|
|
18276
|
+
}, []);
|
|
18277
|
+
const startCommit = React.useCallback(params => {
|
|
18278
|
+
const {
|
|
18279
|
+
pulsate,
|
|
18280
|
+
rippleX,
|
|
18281
|
+
rippleY,
|
|
18282
|
+
rippleSize,
|
|
18283
|
+
cb
|
|
18284
|
+
} = params;
|
|
18285
|
+
setRipples(oldRipples => [...oldRipples, /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRipple, {
|
|
18286
|
+
classes: {
|
|
18287
|
+
ripple: clsx(classes.ripple, touchRippleClasses$1.ripple),
|
|
18288
|
+
rippleVisible: clsx(classes.rippleVisible, touchRippleClasses$1.rippleVisible),
|
|
18289
|
+
ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses$1.ripplePulsate),
|
|
18290
|
+
child: clsx(classes.child, touchRippleClasses$1.child),
|
|
18291
|
+
childLeaving: clsx(classes.childLeaving, touchRippleClasses$1.childLeaving),
|
|
18292
|
+
childPulsate: clsx(classes.childPulsate, touchRippleClasses$1.childPulsate)
|
|
18293
|
+
},
|
|
18294
|
+
timeout: DURATION,
|
|
18295
|
+
pulsate: pulsate,
|
|
18296
|
+
rippleX: rippleX,
|
|
18297
|
+
rippleY: rippleY,
|
|
18298
|
+
rippleSize: rippleSize
|
|
18299
|
+
}, nextKey.current)]);
|
|
18300
|
+
nextKey.current += 1;
|
|
18301
|
+
rippleCallback.current = cb;
|
|
18302
|
+
}, [classes]);
|
|
18303
|
+
const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
|
|
18304
|
+
const {
|
|
18305
|
+
pulsate = false,
|
|
18306
|
+
center = centerProp || options.pulsate,
|
|
18307
|
+
fakeElement = false // For test purposes
|
|
18308
|
+
} = options;
|
|
18309
|
+
if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
|
|
18310
|
+
ignoringMouseDown.current = false;
|
|
18311
|
+
return;
|
|
18312
|
+
}
|
|
18313
|
+
if ((event == null ? void 0 : event.type) === 'touchstart') {
|
|
18314
|
+
ignoringMouseDown.current = true;
|
|
18315
|
+
}
|
|
18316
|
+
const element = fakeElement ? null : container.current;
|
|
18317
|
+
const rect = element ? element.getBoundingClientRect() : {
|
|
18318
|
+
width: 0,
|
|
18319
|
+
height: 0,
|
|
18320
|
+
left: 0,
|
|
18321
|
+
top: 0
|
|
18322
|
+
};
|
|
18323
|
+
|
|
18324
|
+
// Get the size of the ripple
|
|
18325
|
+
let rippleX;
|
|
18326
|
+
let rippleY;
|
|
18327
|
+
let rippleSize;
|
|
18328
|
+
if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
|
|
18329
|
+
rippleX = Math.round(rect.width / 2);
|
|
18330
|
+
rippleY = Math.round(rect.height / 2);
|
|
17588
18331
|
} else {
|
|
17589
|
-
|
|
18332
|
+
const {
|
|
18333
|
+
clientX,
|
|
18334
|
+
clientY
|
|
18335
|
+
} = event.touches && event.touches.length > 0 ? event.touches[0] : event;
|
|
18336
|
+
rippleX = Math.round(clientX - rect.left);
|
|
18337
|
+
rippleY = Math.round(clientY - rect.top);
|
|
18338
|
+
}
|
|
18339
|
+
if (center) {
|
|
18340
|
+
rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
|
|
18341
|
+
|
|
18342
|
+
// For some reason the animation is broken on Mobile Chrome if the size is even.
|
|
18343
|
+
if (rippleSize % 2 === 0) {
|
|
18344
|
+
rippleSize += 1;
|
|
18345
|
+
}
|
|
18346
|
+
} else {
|
|
18347
|
+
const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
|
|
18348
|
+
const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
|
|
18349
|
+
rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
|
|
18350
|
+
}
|
|
18351
|
+
|
|
18352
|
+
// Touche devices
|
|
18353
|
+
if (event != null && event.touches) {
|
|
18354
|
+
// check that this isn't another touchstart due to multitouch
|
|
18355
|
+
// otherwise we will only clear a single timer when unmounting while two
|
|
18356
|
+
// are running
|
|
18357
|
+
if (startTimerCommit.current === null) {
|
|
18358
|
+
// Prepare the ripple effect.
|
|
18359
|
+
startTimerCommit.current = () => {
|
|
18360
|
+
startCommit({
|
|
18361
|
+
pulsate,
|
|
18362
|
+
rippleX,
|
|
18363
|
+
rippleY,
|
|
18364
|
+
rippleSize,
|
|
18365
|
+
cb
|
|
18366
|
+
});
|
|
18367
|
+
};
|
|
18368
|
+
// Delay the execution of the ripple effect.
|
|
18369
|
+
startTimer.current = setTimeout(() => {
|
|
18370
|
+
if (startTimerCommit.current) {
|
|
18371
|
+
startTimerCommit.current();
|
|
18372
|
+
startTimerCommit.current = null;
|
|
18373
|
+
}
|
|
18374
|
+
}, DELAY_RIPPLE); // We have to make a tradeoff with this value.
|
|
18375
|
+
}
|
|
18376
|
+
} else {
|
|
18377
|
+
startCommit({
|
|
18378
|
+
pulsate,
|
|
18379
|
+
rippleX,
|
|
18380
|
+
rippleY,
|
|
18381
|
+
rippleSize,
|
|
18382
|
+
cb
|
|
18383
|
+
});
|
|
18384
|
+
}
|
|
18385
|
+
}, [centerProp, startCommit]);
|
|
18386
|
+
const pulsate = React.useCallback(() => {
|
|
18387
|
+
start({}, {
|
|
18388
|
+
pulsate: true
|
|
18389
|
+
});
|
|
18390
|
+
}, [start]);
|
|
18391
|
+
const stop = React.useCallback((event, cb) => {
|
|
18392
|
+
clearTimeout(startTimer.current);
|
|
18393
|
+
|
|
18394
|
+
// The touch interaction occurs too quickly.
|
|
18395
|
+
// We still want to show ripple effect.
|
|
18396
|
+
if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
|
|
18397
|
+
startTimerCommit.current();
|
|
18398
|
+
startTimerCommit.current = null;
|
|
18399
|
+
startTimer.current = setTimeout(() => {
|
|
18400
|
+
stop(event, cb);
|
|
18401
|
+
});
|
|
18402
|
+
return;
|
|
17590
18403
|
}
|
|
18404
|
+
startTimerCommit.current = null;
|
|
18405
|
+
setRipples(oldRipples => {
|
|
18406
|
+
if (oldRipples.length > 0) {
|
|
18407
|
+
return oldRipples.slice(1);
|
|
18408
|
+
}
|
|
18409
|
+
return oldRipples;
|
|
18410
|
+
});
|
|
18411
|
+
rippleCallback.current = cb;
|
|
18412
|
+
}, []);
|
|
18413
|
+
React.useImperativeHandle(ref, () => ({
|
|
18414
|
+
pulsate,
|
|
18415
|
+
start,
|
|
18416
|
+
stop
|
|
18417
|
+
}), [pulsate, start, stop]);
|
|
18418
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(TouchRippleRoot, _extends({
|
|
18419
|
+
className: clsx(touchRippleClasses$1.root, classes.root, className),
|
|
18420
|
+
ref: container
|
|
18421
|
+
}, other, {
|
|
18422
|
+
children: /*#__PURE__*/jsxRuntimeExports.jsx(TransitionGroup$1, {
|
|
18423
|
+
component: null,
|
|
18424
|
+
exit: true,
|
|
18425
|
+
children: ripples
|
|
18426
|
+
})
|
|
18427
|
+
}));
|
|
18428
|
+
});
|
|
18429
|
+
process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
|
|
18430
|
+
/**
|
|
18431
|
+
* If `true`, the ripple starts at the center of the component
|
|
18432
|
+
* rather than at the point of interaction.
|
|
18433
|
+
*/
|
|
18434
|
+
center: PropTypes.bool,
|
|
18435
|
+
/**
|
|
18436
|
+
* Override or extend the styles applied to the component.
|
|
18437
|
+
* See [CSS API](#css) below for more details.
|
|
18438
|
+
*/
|
|
18439
|
+
classes: PropTypes.object,
|
|
18440
|
+
/**
|
|
18441
|
+
* @ignore
|
|
18442
|
+
*/
|
|
18443
|
+
className: PropTypes.string
|
|
18444
|
+
} : void 0;
|
|
18445
|
+
var TouchRipple$1 = TouchRipple;
|
|
18446
|
+
|
|
18447
|
+
function getButtonBaseUtilityClass(slot) {
|
|
18448
|
+
return generateUtilityClass('MuiButtonBase', slot);
|
|
18449
|
+
}
|
|
18450
|
+
const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
|
|
18451
|
+
var buttonBaseClasses$1 = buttonBaseClasses;
|
|
18452
|
+
|
|
18453
|
+
const _excluded$8 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
|
|
18454
|
+
const useUtilityClasses$5 = ownerState => {
|
|
18455
|
+
const {
|
|
18456
|
+
disabled,
|
|
18457
|
+
focusVisible,
|
|
18458
|
+
focusVisibleClassName,
|
|
18459
|
+
classes
|
|
18460
|
+
} = ownerState;
|
|
18461
|
+
const slots = {
|
|
18462
|
+
root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
|
|
17591
18463
|
};
|
|
17592
|
-
|
|
17593
|
-
|
|
18464
|
+
const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
|
|
18465
|
+
if (focusVisible && focusVisibleClassName) {
|
|
18466
|
+
composedClasses.root += ` ${focusVisibleClassName}`;
|
|
17594
18467
|
}
|
|
17595
|
-
return
|
|
17596
|
-
|
|
17597
|
-
|
|
17598
|
-
|
|
17599
|
-
|
|
17600
|
-
|
|
17601
|
-
|
|
17602
|
-
|
|
17603
|
-
|
|
17604
|
-
|
|
17605
|
-
|
|
17606
|
-
|
|
17607
|
-
|
|
17608
|
-
|
|
17609
|
-
|
|
17610
|
-
|
|
17611
|
-
|
|
17612
|
-
|
|
17613
|
-
|
|
17614
|
-
|
|
17615
|
-
|
|
17616
|
-
|
|
17617
|
-
|
|
17618
|
-
|
|
17619
|
-
|
|
17620
|
-
|
|
17621
|
-
|
|
17622
|
-
|
|
17623
|
-
|
|
17624
|
-
|
|
17625
|
-
|
|
17626
|
-
|
|
17627
|
-
|
|
17628
|
-
|
|
17629
|
-
|
|
17630
|
-
|
|
17631
|
-
|
|
17632
|
-
|
|
17633
|
-
|
|
17634
|
-
|
|
17635
|
-
|
|
17636
|
-
|
|
17637
|
-
|
|
17638
|
-
|
|
17639
|
-
|
|
17640
|
-
|
|
17641
|
-
|
|
17642
|
-
|
|
17643
|
-
|
|
17644
|
-
|
|
17645
|
-
|
|
17646
|
-
|
|
17647
|
-
|
|
17648
|
-
|
|
17649
|
-
|
|
17650
|
-
|
|
18468
|
+
return composedClasses;
|
|
18469
|
+
};
|
|
18470
|
+
const ButtonBaseRoot = styled$1('button', {
|
|
18471
|
+
name: 'MuiButtonBase',
|
|
18472
|
+
slot: 'Root',
|
|
18473
|
+
overridesResolver: (props, styles) => styles.root
|
|
18474
|
+
})({
|
|
18475
|
+
display: 'inline-flex',
|
|
18476
|
+
alignItems: 'center',
|
|
18477
|
+
justifyContent: 'center',
|
|
18478
|
+
position: 'relative',
|
|
18479
|
+
boxSizing: 'border-box',
|
|
18480
|
+
WebkitTapHighlightColor: 'transparent',
|
|
18481
|
+
backgroundColor: 'transparent',
|
|
18482
|
+
// Reset default value
|
|
18483
|
+
// We disable the focus ring for mouse, touch and keyboard users.
|
|
18484
|
+
outline: 0,
|
|
18485
|
+
border: 0,
|
|
18486
|
+
margin: 0,
|
|
18487
|
+
// Remove the margin in Safari
|
|
18488
|
+
borderRadius: 0,
|
|
18489
|
+
padding: 0,
|
|
18490
|
+
// Remove the padding in Firefox
|
|
18491
|
+
cursor: 'pointer',
|
|
18492
|
+
userSelect: 'none',
|
|
18493
|
+
verticalAlign: 'middle',
|
|
18494
|
+
MozAppearance: 'none',
|
|
18495
|
+
// Reset
|
|
18496
|
+
WebkitAppearance: 'none',
|
|
18497
|
+
// Reset
|
|
18498
|
+
textDecoration: 'none',
|
|
18499
|
+
// So we take precedent over the style of a native <a /> element.
|
|
18500
|
+
color: 'inherit',
|
|
18501
|
+
'&::-moz-focus-inner': {
|
|
18502
|
+
borderStyle: 'none' // Remove Firefox dotted outline.
|
|
18503
|
+
},
|
|
18504
|
+
|
|
18505
|
+
[`&.${buttonBaseClasses$1.disabled}`]: {
|
|
18506
|
+
pointerEvents: 'none',
|
|
18507
|
+
// Disable link interactions
|
|
18508
|
+
cursor: 'default'
|
|
18509
|
+
},
|
|
18510
|
+
'@media print': {
|
|
18511
|
+
colorAdjust: 'exact'
|
|
18512
|
+
}
|
|
18513
|
+
});
|
|
18514
|
+
|
|
18515
|
+
/**
|
|
18516
|
+
* `ButtonBase` contains as few styles as possible.
|
|
18517
|
+
* It aims to be a simple building block for creating a button.
|
|
18518
|
+
* It contains a load of style reset and some focus/ripple logic.
|
|
18519
|
+
*/
|
|
18520
|
+
const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
|
|
18521
|
+
const props = useThemeProps({
|
|
18522
|
+
props: inProps,
|
|
18523
|
+
name: 'MuiButtonBase'
|
|
18524
|
+
});
|
|
18525
|
+
const {
|
|
18526
|
+
action,
|
|
18527
|
+
centerRipple = false,
|
|
18528
|
+
children,
|
|
18529
|
+
className,
|
|
18530
|
+
component = 'button',
|
|
18531
|
+
disabled = false,
|
|
18532
|
+
disableRipple = false,
|
|
18533
|
+
disableTouchRipple = false,
|
|
18534
|
+
focusRipple = false,
|
|
18535
|
+
LinkComponent = 'a',
|
|
18536
|
+
onBlur,
|
|
18537
|
+
onClick,
|
|
18538
|
+
onContextMenu,
|
|
18539
|
+
onDragLeave,
|
|
18540
|
+
onFocus,
|
|
18541
|
+
onFocusVisible,
|
|
18542
|
+
onKeyDown,
|
|
18543
|
+
onKeyUp,
|
|
18544
|
+
onMouseDown,
|
|
18545
|
+
onMouseLeave,
|
|
18546
|
+
onMouseUp,
|
|
18547
|
+
onTouchEnd,
|
|
18548
|
+
onTouchMove,
|
|
18549
|
+
onTouchStart,
|
|
18550
|
+
tabIndex = 0,
|
|
18551
|
+
TouchRippleProps,
|
|
18552
|
+
touchRippleRef,
|
|
18553
|
+
type
|
|
18554
|
+
} = props,
|
|
18555
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$8);
|
|
18556
|
+
const buttonRef = React.useRef(null);
|
|
18557
|
+
const rippleRef = React.useRef(null);
|
|
18558
|
+
const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
|
|
18559
|
+
const {
|
|
18560
|
+
isFocusVisibleRef,
|
|
18561
|
+
onFocus: handleFocusVisible,
|
|
18562
|
+
onBlur: handleBlurVisible,
|
|
18563
|
+
ref: focusVisibleRef
|
|
18564
|
+
} = useIsFocusVisible();
|
|
18565
|
+
const [focusVisible, setFocusVisible] = React.useState(false);
|
|
18566
|
+
if (disabled && focusVisible) {
|
|
18567
|
+
setFocusVisible(false);
|
|
18568
|
+
}
|
|
18569
|
+
React.useImperativeHandle(action, () => ({
|
|
18570
|
+
focusVisible: () => {
|
|
18571
|
+
setFocusVisible(true);
|
|
18572
|
+
buttonRef.current.focus();
|
|
18573
|
+
}
|
|
18574
|
+
}), []);
|
|
18575
|
+
const [mountedState, setMountedState] = React.useState(false);
|
|
18576
|
+
React.useEffect(() => {
|
|
18577
|
+
setMountedState(true);
|
|
18578
|
+
}, []);
|
|
18579
|
+
const enableTouchRipple = mountedState && !disableRipple && !disabled;
|
|
18580
|
+
React.useEffect(() => {
|
|
18581
|
+
if (focusVisible && focusRipple && !disableRipple && mountedState) {
|
|
18582
|
+
rippleRef.current.pulsate();
|
|
18583
|
+
}
|
|
18584
|
+
}, [disableRipple, focusRipple, focusVisible, mountedState]);
|
|
18585
|
+
function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
|
|
18586
|
+
return useEventCallback(event => {
|
|
18587
|
+
if (eventCallback) {
|
|
18588
|
+
eventCallback(event);
|
|
18589
|
+
}
|
|
18590
|
+
const ignore = skipRippleAction;
|
|
18591
|
+
if (!ignore && rippleRef.current) {
|
|
18592
|
+
rippleRef.current[rippleAction](event);
|
|
18593
|
+
}
|
|
18594
|
+
return true;
|
|
18595
|
+
});
|
|
18596
|
+
}
|
|
18597
|
+
const handleMouseDown = useRippleHandler('start', onMouseDown);
|
|
18598
|
+
const handleContextMenu = useRippleHandler('stop', onContextMenu);
|
|
18599
|
+
const handleDragLeave = useRippleHandler('stop', onDragLeave);
|
|
18600
|
+
const handleMouseUp = useRippleHandler('stop', onMouseUp);
|
|
18601
|
+
const handleMouseLeave = useRippleHandler('stop', event => {
|
|
18602
|
+
if (focusVisible) {
|
|
18603
|
+
event.preventDefault();
|
|
18604
|
+
}
|
|
18605
|
+
if (onMouseLeave) {
|
|
18606
|
+
onMouseLeave(event);
|
|
18607
|
+
}
|
|
18608
|
+
});
|
|
18609
|
+
const handleTouchStart = useRippleHandler('start', onTouchStart);
|
|
18610
|
+
const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
|
|
18611
|
+
const handleTouchMove = useRippleHandler('stop', onTouchMove);
|
|
18612
|
+
const handleBlur = useRippleHandler('stop', event => {
|
|
18613
|
+
handleBlurVisible(event);
|
|
18614
|
+
if (isFocusVisibleRef.current === false) {
|
|
18615
|
+
setFocusVisible(false);
|
|
18616
|
+
}
|
|
18617
|
+
if (onBlur) {
|
|
18618
|
+
onBlur(event);
|
|
18619
|
+
}
|
|
18620
|
+
}, false);
|
|
18621
|
+
const handleFocus = useEventCallback(event => {
|
|
18622
|
+
// Fix for https://github.com/facebook/react/issues/7769
|
|
18623
|
+
if (!buttonRef.current) {
|
|
18624
|
+
buttonRef.current = event.currentTarget;
|
|
18625
|
+
}
|
|
18626
|
+
handleFocusVisible(event);
|
|
18627
|
+
if (isFocusVisibleRef.current === true) {
|
|
18628
|
+
setFocusVisible(true);
|
|
18629
|
+
if (onFocusVisible) {
|
|
18630
|
+
onFocusVisible(event);
|
|
18631
|
+
}
|
|
18632
|
+
}
|
|
18633
|
+
if (onFocus) {
|
|
18634
|
+
onFocus(event);
|
|
18635
|
+
}
|
|
18636
|
+
});
|
|
18637
|
+
const isNonNativeButton = () => {
|
|
18638
|
+
const button = buttonRef.current;
|
|
18639
|
+
return component && component !== 'button' && !(button.tagName === 'A' && button.href);
|
|
18640
|
+
};
|
|
18641
|
+
|
|
18642
|
+
/**
|
|
18643
|
+
* IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
|
|
18644
|
+
*/
|
|
18645
|
+
const keydownRef = React.useRef(false);
|
|
18646
|
+
const handleKeyDown = useEventCallback(event => {
|
|
18647
|
+
// Check if key is already down to avoid repeats being counted as multiple activations
|
|
18648
|
+
if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
|
|
18649
|
+
keydownRef.current = true;
|
|
18650
|
+
rippleRef.current.stop(event, () => {
|
|
18651
|
+
rippleRef.current.start(event);
|
|
18652
|
+
});
|
|
18653
|
+
}
|
|
18654
|
+
if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
|
|
18655
|
+
event.preventDefault();
|
|
18656
|
+
}
|
|
18657
|
+
if (onKeyDown) {
|
|
18658
|
+
onKeyDown(event);
|
|
18659
|
+
}
|
|
18660
|
+
|
|
18661
|
+
// Keyboard accessibility for non interactive elements
|
|
18662
|
+
if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
|
|
18663
|
+
event.preventDefault();
|
|
18664
|
+
if (onClick) {
|
|
18665
|
+
onClick(event);
|
|
18666
|
+
}
|
|
18667
|
+
}
|
|
18668
|
+
});
|
|
18669
|
+
const handleKeyUp = useEventCallback(event => {
|
|
18670
|
+
// calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
|
|
18671
|
+
// https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
|
|
18672
|
+
if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
|
|
18673
|
+
keydownRef.current = false;
|
|
18674
|
+
rippleRef.current.stop(event, () => {
|
|
18675
|
+
rippleRef.current.pulsate(event);
|
|
18676
|
+
});
|
|
18677
|
+
}
|
|
18678
|
+
if (onKeyUp) {
|
|
18679
|
+
onKeyUp(event);
|
|
18680
|
+
}
|
|
18681
|
+
|
|
18682
|
+
// Keyboard accessibility for non interactive elements
|
|
18683
|
+
if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
|
|
18684
|
+
onClick(event);
|
|
18685
|
+
}
|
|
18686
|
+
});
|
|
18687
|
+
let ComponentProp = component;
|
|
18688
|
+
if (ComponentProp === 'button' && (other.href || other.to)) {
|
|
18689
|
+
ComponentProp = LinkComponent;
|
|
18690
|
+
}
|
|
18691
|
+
const buttonProps = {};
|
|
18692
|
+
if (ComponentProp === 'button') {
|
|
18693
|
+
buttonProps.type = type === undefined ? 'button' : type;
|
|
18694
|
+
buttonProps.disabled = disabled;
|
|
18695
|
+
} else {
|
|
18696
|
+
if (!other.href && !other.to) {
|
|
18697
|
+
buttonProps.role = 'button';
|
|
18698
|
+
}
|
|
18699
|
+
if (disabled) {
|
|
18700
|
+
buttonProps['aria-disabled'] = disabled;
|
|
18701
|
+
}
|
|
18702
|
+
}
|
|
18703
|
+
const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
|
|
18704
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
18705
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
18706
|
+
React.useEffect(() => {
|
|
18707
|
+
if (enableTouchRipple && !rippleRef.current) {
|
|
18708
|
+
console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
|
|
18709
|
+
}
|
|
18710
|
+
}, [enableTouchRipple]);
|
|
18711
|
+
}
|
|
18712
|
+
const ownerState = _extends({}, props, {
|
|
18713
|
+
centerRipple,
|
|
18714
|
+
component,
|
|
18715
|
+
disabled,
|
|
18716
|
+
disableRipple,
|
|
18717
|
+
disableTouchRipple,
|
|
18718
|
+
focusRipple,
|
|
18719
|
+
tabIndex,
|
|
18720
|
+
focusVisible
|
|
18721
|
+
});
|
|
18722
|
+
const classes = useUtilityClasses$5(ownerState);
|
|
18723
|
+
return /*#__PURE__*/jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends({
|
|
18724
|
+
as: ComponentProp,
|
|
18725
|
+
className: clsx(classes.root, className),
|
|
18726
|
+
ownerState: ownerState,
|
|
18727
|
+
onBlur: handleBlur,
|
|
18728
|
+
onClick: onClick,
|
|
18729
|
+
onContextMenu: handleContextMenu,
|
|
18730
|
+
onFocus: handleFocus,
|
|
18731
|
+
onKeyDown: handleKeyDown,
|
|
18732
|
+
onKeyUp: handleKeyUp,
|
|
18733
|
+
onMouseDown: handleMouseDown,
|
|
18734
|
+
onMouseLeave: handleMouseLeave,
|
|
18735
|
+
onMouseUp: handleMouseUp,
|
|
18736
|
+
onDragLeave: handleDragLeave,
|
|
18737
|
+
onTouchEnd: handleTouchEnd,
|
|
18738
|
+
onTouchMove: handleTouchMove,
|
|
18739
|
+
onTouchStart: handleTouchStart,
|
|
18740
|
+
ref: handleRef,
|
|
18741
|
+
tabIndex: disabled ? -1 : tabIndex,
|
|
18742
|
+
type: type
|
|
18743
|
+
}, buttonProps, other, {
|
|
18744
|
+
children: [children, enableTouchRipple ?
|
|
18745
|
+
/*#__PURE__*/
|
|
18746
|
+
/* TouchRipple is only needed client-side, x2 boost on the server. */
|
|
18747
|
+
jsxRuntimeExports.jsx(TouchRipple$1, _extends({
|
|
18748
|
+
ref: handleRippleRef,
|
|
18749
|
+
center: centerRipple
|
|
18750
|
+
}, TouchRippleProps)) : null]
|
|
18751
|
+
}));
|
|
18752
|
+
});
|
|
18753
|
+
process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
|
|
18754
|
+
// ----------------------------- Warning --------------------------------
|
|
18755
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
18756
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
18757
|
+
// ----------------------------------------------------------------------
|
|
18758
|
+
/**
|
|
18759
|
+
* A ref for imperative actions.
|
|
18760
|
+
* It currently only supports `focusVisible()` action.
|
|
18761
|
+
*/
|
|
18762
|
+
action: refType$1,
|
|
18763
|
+
/**
|
|
18764
|
+
* If `true`, the ripples are centered.
|
|
18765
|
+
* They won't start at the cursor interaction position.
|
|
18766
|
+
* @default false
|
|
18767
|
+
*/
|
|
18768
|
+
centerRipple: PropTypes.bool,
|
|
18769
|
+
/**
|
|
18770
|
+
* The content of the component.
|
|
18771
|
+
*/
|
|
18772
|
+
children: PropTypes.node,
|
|
18773
|
+
/**
|
|
18774
|
+
* Override or extend the styles applied to the component.
|
|
18775
|
+
*/
|
|
18776
|
+
classes: PropTypes.object,
|
|
18777
|
+
/**
|
|
18778
|
+
* @ignore
|
|
18779
|
+
*/
|
|
18780
|
+
className: PropTypes.string,
|
|
18781
|
+
/**
|
|
18782
|
+
* The component used for the root node.
|
|
18783
|
+
* Either a string to use a HTML element or a component.
|
|
18784
|
+
*/
|
|
18785
|
+
component: elementTypeAcceptingRef$1,
|
|
18786
|
+
/**
|
|
18787
|
+
* If `true`, the component is disabled.
|
|
18788
|
+
* @default false
|
|
18789
|
+
*/
|
|
18790
|
+
disabled: PropTypes.bool,
|
|
18791
|
+
/**
|
|
18792
|
+
* If `true`, the ripple effect is disabled.
|
|
18793
|
+
*
|
|
18794
|
+
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
|
18795
|
+
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
|
18796
|
+
* @default false
|
|
18797
|
+
*/
|
|
18798
|
+
disableRipple: PropTypes.bool,
|
|
18799
|
+
/**
|
|
18800
|
+
* If `true`, the touch ripple effect is disabled.
|
|
18801
|
+
* @default false
|
|
18802
|
+
*/
|
|
18803
|
+
disableTouchRipple: PropTypes.bool,
|
|
18804
|
+
/**
|
|
18805
|
+
* If `true`, the base button will have a keyboard focus ripple.
|
|
18806
|
+
* @default false
|
|
18807
|
+
*/
|
|
18808
|
+
focusRipple: PropTypes.bool,
|
|
18809
|
+
/**
|
|
18810
|
+
* This prop can help identify which element has keyboard focus.
|
|
18811
|
+
* The class name will be applied when the element gains the focus through keyboard interaction.
|
|
18812
|
+
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
|
|
18813
|
+
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
|
|
18814
|
+
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
|
|
18815
|
+
* if needed.
|
|
18816
|
+
*/
|
|
18817
|
+
focusVisibleClassName: PropTypes.string,
|
|
18818
|
+
/**
|
|
18819
|
+
* @ignore
|
|
18820
|
+
*/
|
|
18821
|
+
href: PropTypes /* @typescript-to-proptypes-ignore */.any,
|
|
18822
|
+
/**
|
|
18823
|
+
* The component used to render a link when the `href` prop is provided.
|
|
18824
|
+
* @default 'a'
|
|
18825
|
+
*/
|
|
18826
|
+
LinkComponent: PropTypes.elementType,
|
|
18827
|
+
/**
|
|
18828
|
+
* @ignore
|
|
18829
|
+
*/
|
|
18830
|
+
onBlur: PropTypes.func,
|
|
18831
|
+
/**
|
|
18832
|
+
* @ignore
|
|
18833
|
+
*/
|
|
18834
|
+
onClick: PropTypes.func,
|
|
18835
|
+
/**
|
|
18836
|
+
* @ignore
|
|
18837
|
+
*/
|
|
18838
|
+
onContextMenu: PropTypes.func,
|
|
18839
|
+
/**
|
|
18840
|
+
* @ignore
|
|
18841
|
+
*/
|
|
18842
|
+
onDragLeave: PropTypes.func,
|
|
18843
|
+
/**
|
|
18844
|
+
* @ignore
|
|
18845
|
+
*/
|
|
18846
|
+
onFocus: PropTypes.func,
|
|
18847
|
+
/**
|
|
18848
|
+
* Callback fired when the component is focused with a keyboard.
|
|
18849
|
+
* We trigger a `onFocus` callback too.
|
|
18850
|
+
*/
|
|
18851
|
+
onFocusVisible: PropTypes.func,
|
|
18852
|
+
/**
|
|
18853
|
+
* @ignore
|
|
18854
|
+
*/
|
|
18855
|
+
onKeyDown: PropTypes.func,
|
|
18856
|
+
/**
|
|
18857
|
+
* @ignore
|
|
18858
|
+
*/
|
|
18859
|
+
onKeyUp: PropTypes.func,
|
|
18860
|
+
/**
|
|
18861
|
+
* @ignore
|
|
18862
|
+
*/
|
|
18863
|
+
onMouseDown: PropTypes.func,
|
|
18864
|
+
/**
|
|
18865
|
+
* @ignore
|
|
18866
|
+
*/
|
|
18867
|
+
onMouseLeave: PropTypes.func,
|
|
18868
|
+
/**
|
|
18869
|
+
* @ignore
|
|
18870
|
+
*/
|
|
18871
|
+
onMouseUp: PropTypes.func,
|
|
18872
|
+
/**
|
|
18873
|
+
* @ignore
|
|
18874
|
+
*/
|
|
18875
|
+
onTouchEnd: PropTypes.func,
|
|
18876
|
+
/**
|
|
18877
|
+
* @ignore
|
|
18878
|
+
*/
|
|
18879
|
+
onTouchMove: PropTypes.func,
|
|
18880
|
+
/**
|
|
18881
|
+
* @ignore
|
|
18882
|
+
*/
|
|
18883
|
+
onTouchStart: PropTypes.func,
|
|
18884
|
+
/**
|
|
18885
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
18886
|
+
*/
|
|
18887
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
18888
|
+
/**
|
|
18889
|
+
* @default 0
|
|
18890
|
+
*/
|
|
18891
|
+
tabIndex: PropTypes.number,
|
|
18892
|
+
/**
|
|
18893
|
+
* Props applied to the `TouchRipple` element.
|
|
18894
|
+
*/
|
|
18895
|
+
TouchRippleProps: PropTypes.object,
|
|
18896
|
+
/**
|
|
18897
|
+
* A ref that points to the `TouchRipple` element.
|
|
18898
|
+
*/
|
|
18899
|
+
touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
18900
|
+
current: PropTypes.shape({
|
|
18901
|
+
pulsate: PropTypes.func.isRequired,
|
|
18902
|
+
start: PropTypes.func.isRequired,
|
|
18903
|
+
stop: PropTypes.func.isRequired
|
|
18904
|
+
})
|
|
18905
|
+
})]),
|
|
18906
|
+
/**
|
|
18907
|
+
* @ignore
|
|
18908
|
+
*/
|
|
18909
|
+
type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
|
|
18910
|
+
} : void 0;
|
|
18911
|
+
var ButtonBase$1 = ButtonBase;
|
|
18912
|
+
|
|
18913
|
+
const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
|
|
18914
|
+
var dividerClasses$1 = dividerClasses;
|
|
18915
|
+
|
|
18916
|
+
const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
|
|
18917
|
+
var listItemIconClasses$1 = listItemIconClasses;
|
|
18918
|
+
|
|
18919
|
+
const listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
|
|
18920
|
+
var listItemTextClasses$1 = listItemTextClasses;
|
|
18921
|
+
|
|
18922
|
+
function getMenuItemUtilityClass(slot) {
|
|
18923
|
+
return generateUtilityClass('MuiMenuItem', slot);
|
|
18924
|
+
}
|
|
18925
|
+
const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
|
|
18926
|
+
var menuItemClasses$1 = menuItemClasses;
|
|
18927
|
+
|
|
18928
|
+
const _excluded$7 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
|
|
18929
|
+
const overridesResolver = (props, styles) => {
|
|
18930
|
+
const {
|
|
18931
|
+
ownerState
|
|
18932
|
+
} = props;
|
|
18933
|
+
return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
|
|
18934
|
+
};
|
|
18935
|
+
const useUtilityClasses$4 = ownerState => {
|
|
18936
|
+
const {
|
|
18937
|
+
disabled,
|
|
18938
|
+
dense,
|
|
18939
|
+
divider,
|
|
18940
|
+
disableGutters,
|
|
18941
|
+
selected,
|
|
18942
|
+
classes
|
|
18943
|
+
} = ownerState;
|
|
18944
|
+
const slots = {
|
|
18945
|
+
root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']
|
|
18946
|
+
};
|
|
18947
|
+
const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);
|
|
18948
|
+
return _extends({}, classes, composedClasses);
|
|
18949
|
+
};
|
|
18950
|
+
const MenuItemRoot = styled$1(ButtonBase$1, {
|
|
18951
|
+
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
|
18952
|
+
name: 'MuiMenuItem',
|
|
18953
|
+
slot: 'Root',
|
|
18954
|
+
overridesResolver
|
|
18955
|
+
})(({
|
|
18956
|
+
theme,
|
|
18957
|
+
ownerState
|
|
18958
|
+
}) => _extends({}, theme.typography.body1, {
|
|
18959
|
+
display: 'flex',
|
|
18960
|
+
justifyContent: 'flex-start',
|
|
18961
|
+
alignItems: 'center',
|
|
18962
|
+
position: 'relative',
|
|
18963
|
+
textDecoration: 'none',
|
|
18964
|
+
minHeight: 48,
|
|
18965
|
+
paddingTop: 6,
|
|
18966
|
+
paddingBottom: 6,
|
|
18967
|
+
boxSizing: 'border-box',
|
|
18968
|
+
whiteSpace: 'nowrap'
|
|
18969
|
+
}, !ownerState.disableGutters && {
|
|
18970
|
+
paddingLeft: 16,
|
|
18971
|
+
paddingRight: 16
|
|
18972
|
+
}, ownerState.divider && {
|
|
18973
|
+
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
|
|
18974
|
+
backgroundClip: 'padding-box'
|
|
18975
|
+
}, {
|
|
18976
|
+
'&:hover': {
|
|
18977
|
+
textDecoration: 'none',
|
|
18978
|
+
backgroundColor: (theme.vars || theme).palette.action.hover,
|
|
18979
|
+
// Reset on touch devices, it doesn't add specificity
|
|
18980
|
+
'@media (hover: none)': {
|
|
18981
|
+
backgroundColor: 'transparent'
|
|
18982
|
+
}
|
|
18983
|
+
},
|
|
18984
|
+
[`&.${menuItemClasses$1.selected}`]: {
|
|
18985
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
|
|
18986
|
+
[`&.${menuItemClasses$1.focusVisible}`]: {
|
|
18987
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
|
|
18988
|
+
}
|
|
18989
|
+
},
|
|
18990
|
+
[`&.${menuItemClasses$1.selected}:hover`]: {
|
|
18991
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
|
|
18992
|
+
// Reset on touch devices, it doesn't add specificity
|
|
18993
|
+
'@media (hover: none)': {
|
|
18994
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
|
|
18995
|
+
}
|
|
18996
|
+
},
|
|
18997
|
+
[`&.${menuItemClasses$1.focusVisible}`]: {
|
|
18998
|
+
backgroundColor: (theme.vars || theme).palette.action.focus
|
|
18999
|
+
},
|
|
19000
|
+
[`&.${menuItemClasses$1.disabled}`]: {
|
|
19001
|
+
opacity: (theme.vars || theme).palette.action.disabledOpacity
|
|
19002
|
+
},
|
|
19003
|
+
[`& + .${dividerClasses$1.root}`]: {
|
|
19004
|
+
marginTop: theme.spacing(1),
|
|
19005
|
+
marginBottom: theme.spacing(1)
|
|
19006
|
+
},
|
|
19007
|
+
[`& + .${dividerClasses$1.inset}`]: {
|
|
19008
|
+
marginLeft: 52
|
|
19009
|
+
},
|
|
19010
|
+
[`& .${listItemTextClasses$1.root}`]: {
|
|
19011
|
+
marginTop: 0,
|
|
19012
|
+
marginBottom: 0
|
|
19013
|
+
},
|
|
19014
|
+
[`& .${listItemTextClasses$1.inset}`]: {
|
|
19015
|
+
paddingLeft: 36
|
|
19016
|
+
},
|
|
19017
|
+
[`& .${listItemIconClasses$1.root}`]: {
|
|
19018
|
+
minWidth: 36
|
|
19019
|
+
}
|
|
19020
|
+
}, !ownerState.dense && {
|
|
19021
|
+
[theme.breakpoints.up('sm')]: {
|
|
19022
|
+
minHeight: 'auto'
|
|
19023
|
+
}
|
|
19024
|
+
}, ownerState.dense && _extends({
|
|
19025
|
+
minHeight: 32,
|
|
19026
|
+
// https://m2.material.io/components/menus#specs > Dense
|
|
19027
|
+
paddingTop: 4,
|
|
19028
|
+
paddingBottom: 4
|
|
19029
|
+
}, theme.typography.body2, {
|
|
19030
|
+
[`& .${listItemIconClasses$1.root} svg`]: {
|
|
19031
|
+
fontSize: '1.25rem'
|
|
19032
|
+
}
|
|
19033
|
+
})));
|
|
19034
|
+
const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
|
|
19035
|
+
const props = useThemeProps({
|
|
19036
|
+
props: inProps,
|
|
19037
|
+
name: 'MuiMenuItem'
|
|
19038
|
+
});
|
|
19039
|
+
const {
|
|
19040
|
+
autoFocus = false,
|
|
19041
|
+
component = 'li',
|
|
19042
|
+
dense = false,
|
|
19043
|
+
divider = false,
|
|
19044
|
+
disableGutters = false,
|
|
19045
|
+
focusVisibleClassName,
|
|
19046
|
+
role = 'menuitem',
|
|
19047
|
+
tabIndex: tabIndexProp,
|
|
19048
|
+
className
|
|
19049
|
+
} = props,
|
|
19050
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$7);
|
|
19051
|
+
const context = React.useContext(ListContext$1);
|
|
19052
|
+
const childContext = React.useMemo(() => ({
|
|
19053
|
+
dense: dense || context.dense || false,
|
|
19054
|
+
disableGutters
|
|
19055
|
+
}), [context.dense, dense, disableGutters]);
|
|
19056
|
+
const menuItemRef = React.useRef(null);
|
|
19057
|
+
useEnhancedEffect$1(() => {
|
|
19058
|
+
if (autoFocus) {
|
|
19059
|
+
if (menuItemRef.current) {
|
|
19060
|
+
menuItemRef.current.focus();
|
|
19061
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
|
19062
|
+
console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');
|
|
19063
|
+
}
|
|
19064
|
+
}
|
|
19065
|
+
}, [autoFocus]);
|
|
19066
|
+
const ownerState = _extends({}, props, {
|
|
19067
|
+
dense: childContext.dense,
|
|
19068
|
+
divider,
|
|
19069
|
+
disableGutters
|
|
19070
|
+
});
|
|
19071
|
+
const classes = useUtilityClasses$4(props);
|
|
19072
|
+
const handleRef = useForkRef(menuItemRef, ref);
|
|
19073
|
+
let tabIndex;
|
|
19074
|
+
if (!props.disabled) {
|
|
19075
|
+
tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;
|
|
19076
|
+
}
|
|
19077
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(ListContext$1.Provider, {
|
|
19078
|
+
value: childContext,
|
|
19079
|
+
children: /*#__PURE__*/jsxRuntimeExports.jsx(MenuItemRoot, _extends({
|
|
19080
|
+
ref: handleRef,
|
|
19081
|
+
role: role,
|
|
19082
|
+
tabIndex: tabIndex,
|
|
19083
|
+
component: component,
|
|
19084
|
+
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
|
19085
|
+
className: clsx(classes.root, className)
|
|
19086
|
+
}, other, {
|
|
19087
|
+
ownerState: ownerState,
|
|
19088
|
+
classes: classes
|
|
19089
|
+
}))
|
|
19090
|
+
});
|
|
19091
|
+
});
|
|
19092
|
+
process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes */ = {
|
|
19093
|
+
// ----------------------------- Warning --------------------------------
|
|
19094
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
19095
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
19096
|
+
// ----------------------------------------------------------------------
|
|
19097
|
+
/**
|
|
19098
|
+
* If `true`, the list item is focused during the first mount.
|
|
19099
|
+
* Focus will also be triggered if the value changes from false to true.
|
|
19100
|
+
* @default false
|
|
19101
|
+
*/
|
|
19102
|
+
autoFocus: PropTypes.bool,
|
|
19103
|
+
/**
|
|
19104
|
+
* The content of the component.
|
|
19105
|
+
*/
|
|
19106
|
+
children: PropTypes.node,
|
|
19107
|
+
/**
|
|
19108
|
+
* Override or extend the styles applied to the component.
|
|
19109
|
+
*/
|
|
19110
|
+
classes: PropTypes.object,
|
|
19111
|
+
/**
|
|
19112
|
+
* @ignore
|
|
19113
|
+
*/
|
|
19114
|
+
className: PropTypes.string,
|
|
19115
|
+
/**
|
|
19116
|
+
* The component used for the root node.
|
|
19117
|
+
* Either a string to use a HTML element or a component.
|
|
19118
|
+
*/
|
|
19119
|
+
component: PropTypes.elementType,
|
|
19120
|
+
/**
|
|
19121
|
+
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
|
|
19122
|
+
* The prop defaults to the value inherited from the parent Menu component.
|
|
19123
|
+
* @default false
|
|
19124
|
+
*/
|
|
19125
|
+
dense: PropTypes.bool,
|
|
19126
|
+
/**
|
|
19127
|
+
* @ignore
|
|
19128
|
+
*/
|
|
19129
|
+
disabled: PropTypes.bool,
|
|
19130
|
+
/**
|
|
19131
|
+
* If `true`, the left and right padding is removed.
|
|
19132
|
+
* @default false
|
|
19133
|
+
*/
|
|
19134
|
+
disableGutters: PropTypes.bool,
|
|
19135
|
+
/**
|
|
19136
|
+
* If `true`, a 1px light border is added to the bottom of the menu item.
|
|
19137
|
+
* @default false
|
|
19138
|
+
*/
|
|
19139
|
+
divider: PropTypes.bool,
|
|
19140
|
+
/**
|
|
19141
|
+
* This prop can help identify which element has keyboard focus.
|
|
19142
|
+
* The class name will be applied when the element gains the focus through keyboard interaction.
|
|
19143
|
+
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
|
|
19144
|
+
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
|
|
19145
|
+
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
|
|
19146
|
+
* if needed.
|
|
19147
|
+
*/
|
|
19148
|
+
focusVisibleClassName: PropTypes.string,
|
|
19149
|
+
/**
|
|
19150
|
+
* @ignore
|
|
19151
|
+
*/
|
|
19152
|
+
role: PropTypes /* @typescript-to-proptypes-ignore */.string,
|
|
19153
|
+
/**
|
|
19154
|
+
* If `true`, the component is selected.
|
|
19155
|
+
* @default false
|
|
19156
|
+
*/
|
|
19157
|
+
selected: PropTypes.bool,
|
|
19158
|
+
/**
|
|
19159
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
19160
|
+
*/
|
|
19161
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
19162
|
+
/**
|
|
19163
|
+
* @default 0
|
|
19164
|
+
*/
|
|
19165
|
+
tabIndex: PropTypes.number
|
|
19166
|
+
} : void 0;
|
|
19167
|
+
var MenuItem$1 = MenuItem;
|
|
19168
|
+
|
|
19169
|
+
/**
|
|
19170
|
+
* @ignore - internal component.
|
|
19171
|
+
*/
|
|
19172
|
+
const TableContext = /*#__PURE__*/React.createContext();
|
|
19173
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
19174
|
+
TableContext.displayName = 'TableContext';
|
|
19175
|
+
}
|
|
19176
|
+
var TableContext$1 = TableContext;
|
|
19177
|
+
|
|
19178
|
+
/**
|
|
19179
|
+
* @ignore - internal component.
|
|
19180
|
+
*/
|
|
19181
|
+
const Tablelvl2Context = /*#__PURE__*/React.createContext();
|
|
19182
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
19183
|
+
Tablelvl2Context.displayName = 'Tablelvl2Context';
|
|
19184
|
+
}
|
|
19185
|
+
var Tablelvl2Context$1 = Tablelvl2Context;
|
|
19186
|
+
|
|
19187
|
+
function getTableCellUtilityClass(slot) {
|
|
19188
|
+
return generateUtilityClass('MuiTableCell', slot);
|
|
19189
|
+
}
|
|
19190
|
+
const tableCellClasses = generateUtilityClasses('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
|
|
19191
|
+
var tableCellClasses$1 = tableCellClasses;
|
|
19192
|
+
|
|
19193
|
+
const _excluded$6 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
|
|
19194
|
+
const useUtilityClasses$3 = ownerState => {
|
|
19195
|
+
const {
|
|
19196
|
+
classes,
|
|
19197
|
+
variant,
|
|
19198
|
+
align,
|
|
19199
|
+
padding,
|
|
19200
|
+
size,
|
|
19201
|
+
stickyHeader
|
|
19202
|
+
} = ownerState;
|
|
19203
|
+
const slots = {
|
|
19204
|
+
root: ['root', variant, stickyHeader && 'stickyHeader', align !== 'inherit' && `align${capitalize(align)}`, padding !== 'normal' && `padding${capitalize(padding)}`, `size${capitalize(size)}`]
|
|
19205
|
+
};
|
|
19206
|
+
return composeClasses(slots, getTableCellUtilityClass, classes);
|
|
19207
|
+
};
|
|
19208
|
+
const TableCellRoot = styled$1('td', {
|
|
19209
|
+
name: 'MuiTableCell',
|
|
19210
|
+
slot: 'Root',
|
|
19211
|
+
overridesResolver: (props, styles) => {
|
|
19212
|
+
const {
|
|
19213
|
+
ownerState
|
|
19214
|
+
} = props;
|
|
19215
|
+
return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.padding !== 'normal' && styles[`padding${capitalize(ownerState.padding)}`], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.stickyHeader && styles.stickyHeader];
|
|
19216
|
+
}
|
|
19217
|
+
})(({
|
|
19218
|
+
theme,
|
|
19219
|
+
ownerState
|
|
19220
|
+
}) => _extends({}, theme.typography.body2, {
|
|
19221
|
+
display: 'table-cell',
|
|
19222
|
+
verticalAlign: 'inherit',
|
|
19223
|
+
// Workaround for a rendering bug with spanned columns in Chrome 62.0.
|
|
19224
|
+
// Removes the alpha (sets it to 1), and lightens or darkens the theme color.
|
|
19225
|
+
borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
|
|
19226
|
+
${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
|
|
19227
|
+
textAlign: 'left',
|
|
19228
|
+
padding: 16
|
|
19229
|
+
}, ownerState.variant === 'head' && {
|
|
19230
|
+
color: (theme.vars || theme).palette.text.primary,
|
|
19231
|
+
lineHeight: theme.typography.pxToRem(24),
|
|
19232
|
+
fontWeight: theme.typography.fontWeightMedium
|
|
19233
|
+
}, ownerState.variant === 'body' && {
|
|
19234
|
+
color: (theme.vars || theme).palette.text.primary
|
|
19235
|
+
}, ownerState.variant === 'footer' && {
|
|
19236
|
+
color: (theme.vars || theme).palette.text.secondary,
|
|
19237
|
+
lineHeight: theme.typography.pxToRem(21),
|
|
19238
|
+
fontSize: theme.typography.pxToRem(12)
|
|
19239
|
+
}, ownerState.size === 'small' && {
|
|
19240
|
+
padding: '6px 16px',
|
|
19241
|
+
[`&.${tableCellClasses$1.paddingCheckbox}`]: {
|
|
19242
|
+
width: 24,
|
|
19243
|
+
// prevent the checkbox column from growing
|
|
19244
|
+
padding: '0 12px 0 16px',
|
|
19245
|
+
'& > *': {
|
|
19246
|
+
padding: 0
|
|
19247
|
+
}
|
|
19248
|
+
}
|
|
19249
|
+
}, ownerState.padding === 'checkbox' && {
|
|
19250
|
+
width: 48,
|
|
19251
|
+
// prevent the checkbox column from growing
|
|
19252
|
+
padding: '0 0 0 4px'
|
|
19253
|
+
}, ownerState.padding === 'none' && {
|
|
19254
|
+
padding: 0
|
|
19255
|
+
}, ownerState.align === 'left' && {
|
|
19256
|
+
textAlign: 'left'
|
|
19257
|
+
}, ownerState.align === 'center' && {
|
|
19258
|
+
textAlign: 'center'
|
|
19259
|
+
}, ownerState.align === 'right' && {
|
|
19260
|
+
textAlign: 'right',
|
|
19261
|
+
flexDirection: 'row-reverse'
|
|
19262
|
+
}, ownerState.align === 'justify' && {
|
|
19263
|
+
textAlign: 'justify'
|
|
19264
|
+
}, ownerState.stickyHeader && {
|
|
19265
|
+
position: 'sticky',
|
|
19266
|
+
top: 0,
|
|
19267
|
+
zIndex: 2,
|
|
19268
|
+
backgroundColor: (theme.vars || theme).palette.background.default
|
|
19269
|
+
}));
|
|
19270
|
+
|
|
19271
|
+
/**
|
|
19272
|
+
* The component renders a `<th>` element when the parent context is a header
|
|
19273
|
+
* or otherwise a `<td>` element.
|
|
19274
|
+
*/
|
|
19275
|
+
const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref) {
|
|
19276
|
+
const props = useThemeProps({
|
|
19277
|
+
props: inProps,
|
|
19278
|
+
name: 'MuiTableCell'
|
|
19279
|
+
});
|
|
19280
|
+
const {
|
|
19281
|
+
align = 'inherit',
|
|
19282
|
+
className,
|
|
19283
|
+
component: componentProp,
|
|
19284
|
+
padding: paddingProp,
|
|
19285
|
+
scope: scopeProp,
|
|
19286
|
+
size: sizeProp,
|
|
19287
|
+
sortDirection,
|
|
19288
|
+
variant: variantProp
|
|
19289
|
+
} = props,
|
|
19290
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$6);
|
|
19291
|
+
const table = React.useContext(TableContext$1);
|
|
19292
|
+
const tablelvl2 = React.useContext(Tablelvl2Context$1);
|
|
19293
|
+
const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
|
|
19294
|
+
let component;
|
|
19295
|
+
if (componentProp) {
|
|
19296
|
+
component = componentProp;
|
|
19297
|
+
} else {
|
|
19298
|
+
component = isHeadCell ? 'th' : 'td';
|
|
19299
|
+
}
|
|
19300
|
+
let scope = scopeProp;
|
|
19301
|
+
// scope is not a valid attribute for <td/> elements.
|
|
19302
|
+
// source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
|
|
19303
|
+
if (component === 'td') {
|
|
19304
|
+
scope = undefined;
|
|
19305
|
+
} else if (!scope && isHeadCell) {
|
|
19306
|
+
scope = 'col';
|
|
19307
|
+
}
|
|
19308
|
+
const variant = variantProp || tablelvl2 && tablelvl2.variant;
|
|
19309
|
+
const ownerState = _extends({}, props, {
|
|
19310
|
+
align,
|
|
19311
|
+
component,
|
|
19312
|
+
padding: paddingProp || (table && table.padding ? table.padding : 'normal'),
|
|
19313
|
+
size: sizeProp || (table && table.size ? table.size : 'medium'),
|
|
19314
|
+
sortDirection,
|
|
19315
|
+
stickyHeader: variant === 'head' && table && table.stickyHeader,
|
|
19316
|
+
variant
|
|
19317
|
+
});
|
|
19318
|
+
const classes = useUtilityClasses$3(ownerState);
|
|
19319
|
+
let ariaSort = null;
|
|
19320
|
+
if (sortDirection) {
|
|
19321
|
+
ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
|
|
19322
|
+
}
|
|
19323
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(TableCellRoot, _extends({
|
|
19324
|
+
as: component,
|
|
19325
|
+
ref: ref,
|
|
19326
|
+
className: clsx(classes.root, className),
|
|
19327
|
+
"aria-sort": ariaSort,
|
|
19328
|
+
scope: scope,
|
|
19329
|
+
ownerState: ownerState
|
|
19330
|
+
}, other));
|
|
19331
|
+
});
|
|
19332
|
+
process.env.NODE_ENV !== "production" ? TableCell.propTypes /* remove-proptypes */ = {
|
|
19333
|
+
// ----------------------------- Warning --------------------------------
|
|
19334
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
19335
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
19336
|
+
// ----------------------------------------------------------------------
|
|
19337
|
+
/**
|
|
19338
|
+
* Set the text-align on the table cell content.
|
|
19339
|
+
*
|
|
19340
|
+
* Monetary or generally number fields **should be right aligned** as that allows
|
|
19341
|
+
* you to add them up quickly in your head without having to worry about decimals.
|
|
19342
|
+
* @default 'inherit'
|
|
19343
|
+
*/
|
|
19344
|
+
align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
|
|
19345
|
+
/**
|
|
19346
|
+
* The content of the component.
|
|
19347
|
+
*/
|
|
19348
|
+
children: PropTypes.node,
|
|
19349
|
+
/**
|
|
19350
|
+
* Override or extend the styles applied to the component.
|
|
19351
|
+
*/
|
|
19352
|
+
classes: PropTypes.object,
|
|
19353
|
+
/**
|
|
19354
|
+
* @ignore
|
|
19355
|
+
*/
|
|
19356
|
+
className: PropTypes.string,
|
|
19357
|
+
/**
|
|
19358
|
+
* The component used for the root node.
|
|
19359
|
+
* Either a string to use a HTML element or a component.
|
|
19360
|
+
*/
|
|
19361
|
+
component: PropTypes.elementType,
|
|
19362
|
+
/**
|
|
19363
|
+
* Sets the padding applied to the cell.
|
|
19364
|
+
* The prop defaults to the value (`'default'`) inherited from the parent Table component.
|
|
19365
|
+
*/
|
|
19366
|
+
padding: PropTypes.oneOf(['checkbox', 'none', 'normal']),
|
|
19367
|
+
/**
|
|
19368
|
+
* Set scope attribute.
|
|
19369
|
+
*/
|
|
19370
|
+
scope: PropTypes.string,
|
|
19371
|
+
/**
|
|
19372
|
+
* Specify the size of the cell.
|
|
19373
|
+
* The prop defaults to the value (`'medium'`) inherited from the parent Table component.
|
|
19374
|
+
*/
|
|
19375
|
+
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
|
|
19376
|
+
/**
|
|
19377
|
+
* Set aria-sort direction.
|
|
19378
|
+
*/
|
|
19379
|
+
sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
|
|
19380
|
+
/**
|
|
19381
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
19382
|
+
*/
|
|
19383
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
19384
|
+
/**
|
|
19385
|
+
* Specify the cell type.
|
|
19386
|
+
* The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
|
|
19387
|
+
*/
|
|
19388
|
+
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string])
|
|
19389
|
+
} : void 0;
|
|
19390
|
+
var TableCell$1 = TableCell;
|
|
19391
|
+
|
|
19392
|
+
function getToolbarUtilityClass(slot) {
|
|
19393
|
+
return generateUtilityClass('MuiToolbar', slot);
|
|
19394
|
+
}
|
|
19395
|
+
generateUtilityClasses('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
|
|
19396
|
+
|
|
19397
|
+
const _excluded$5 = ["className", "component", "disableGutters", "variant"];
|
|
19398
|
+
const useUtilityClasses$2 = ownerState => {
|
|
19399
|
+
const {
|
|
19400
|
+
classes,
|
|
19401
|
+
disableGutters,
|
|
19402
|
+
variant
|
|
19403
|
+
} = ownerState;
|
|
19404
|
+
const slots = {
|
|
19405
|
+
root: ['root', !disableGutters && 'gutters', variant]
|
|
19406
|
+
};
|
|
19407
|
+
return composeClasses(slots, getToolbarUtilityClass, classes);
|
|
19408
|
+
};
|
|
19409
|
+
const ToolbarRoot = styled$1('div', {
|
|
19410
|
+
name: 'MuiToolbar',
|
|
19411
|
+
slot: 'Root',
|
|
19412
|
+
overridesResolver: (props, styles) => {
|
|
19413
|
+
const {
|
|
19414
|
+
ownerState
|
|
19415
|
+
} = props;
|
|
19416
|
+
return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
|
|
19417
|
+
}
|
|
19418
|
+
})(({
|
|
19419
|
+
theme,
|
|
19420
|
+
ownerState
|
|
19421
|
+
}) => _extends({
|
|
19422
|
+
position: 'relative',
|
|
19423
|
+
display: 'flex',
|
|
19424
|
+
alignItems: 'center'
|
|
19425
|
+
}, !ownerState.disableGutters && {
|
|
19426
|
+
paddingLeft: theme.spacing(2),
|
|
19427
|
+
paddingRight: theme.spacing(2),
|
|
19428
|
+
[theme.breakpoints.up('sm')]: {
|
|
19429
|
+
paddingLeft: theme.spacing(3),
|
|
19430
|
+
paddingRight: theme.spacing(3)
|
|
19431
|
+
}
|
|
19432
|
+
}, ownerState.variant === 'dense' && {
|
|
19433
|
+
minHeight: 48
|
|
19434
|
+
}), ({
|
|
19435
|
+
theme,
|
|
19436
|
+
ownerState
|
|
19437
|
+
}) => ownerState.variant === 'regular' && theme.mixins.toolbar);
|
|
19438
|
+
const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
|
|
19439
|
+
const props = useThemeProps({
|
|
19440
|
+
props: inProps,
|
|
19441
|
+
name: 'MuiToolbar'
|
|
19442
|
+
});
|
|
19443
|
+
const {
|
|
19444
|
+
className,
|
|
19445
|
+
component = 'div',
|
|
19446
|
+
disableGutters = false,
|
|
19447
|
+
variant = 'regular'
|
|
19448
|
+
} = props,
|
|
19449
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$5);
|
|
19450
|
+
const ownerState = _extends({}, props, {
|
|
19451
|
+
component,
|
|
19452
|
+
disableGutters,
|
|
19453
|
+
variant
|
|
19454
|
+
});
|
|
19455
|
+
const classes = useUtilityClasses$2(ownerState);
|
|
19456
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(ToolbarRoot, _extends({
|
|
19457
|
+
as: component,
|
|
19458
|
+
className: clsx(classes.root, className),
|
|
19459
|
+
ref: ref,
|
|
19460
|
+
ownerState: ownerState
|
|
19461
|
+
}, other));
|
|
19462
|
+
});
|
|
19463
|
+
process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
|
|
19464
|
+
// ----------------------------- Warning --------------------------------
|
|
19465
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
19466
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
19467
|
+
// ----------------------------------------------------------------------
|
|
19468
|
+
/**
|
|
19469
|
+
* The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
|
|
19470
|
+
* The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
|
|
19471
|
+
*/
|
|
19472
|
+
children: PropTypes.node,
|
|
19473
|
+
/**
|
|
19474
|
+
* Override or extend the styles applied to the component.
|
|
19475
|
+
*/
|
|
19476
|
+
classes: PropTypes.object,
|
|
19477
|
+
/**
|
|
19478
|
+
* @ignore
|
|
19479
|
+
*/
|
|
19480
|
+
className: PropTypes.string,
|
|
19481
|
+
/**
|
|
19482
|
+
* The component used for the root node.
|
|
19483
|
+
* Either a string to use a HTML element or a component.
|
|
19484
|
+
*/
|
|
19485
|
+
component: PropTypes.elementType,
|
|
19486
|
+
/**
|
|
19487
|
+
* If `true`, disables gutter padding.
|
|
19488
|
+
* @default false
|
|
19489
|
+
*/
|
|
19490
|
+
disableGutters: PropTypes.bool,
|
|
19491
|
+
/**
|
|
19492
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
19493
|
+
*/
|
|
19494
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
19495
|
+
/**
|
|
19496
|
+
* The variant to use.
|
|
19497
|
+
* @default 'regular'
|
|
19498
|
+
*/
|
|
19499
|
+
variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['dense', 'regular']), PropTypes.string])
|
|
19500
|
+
} : void 0;
|
|
19501
|
+
var Toolbar$1 = Toolbar;
|
|
19502
|
+
|
|
19503
|
+
var KeyboardArrowLeft = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
|
|
19504
|
+
d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
|
19505
|
+
}), 'KeyboardArrowLeft');
|
|
19506
|
+
|
|
19507
|
+
var KeyboardArrowRight = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
|
|
19508
|
+
d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
|
19509
|
+
}), 'KeyboardArrowRight');
|
|
19510
|
+
|
|
19511
|
+
function getIconButtonUtilityClass(slot) {
|
|
19512
|
+
return generateUtilityClass('MuiIconButton', slot);
|
|
19513
|
+
}
|
|
19514
|
+
const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
|
|
19515
|
+
var iconButtonClasses$1 = iconButtonClasses;
|
|
19516
|
+
|
|
19517
|
+
const _excluded$4 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
|
|
19518
|
+
const useUtilityClasses$1 = ownerState => {
|
|
19519
|
+
const {
|
|
19520
|
+
classes,
|
|
19521
|
+
disabled,
|
|
19522
|
+
color,
|
|
19523
|
+
edge,
|
|
19524
|
+
size
|
|
19525
|
+
} = ownerState;
|
|
19526
|
+
const slots = {
|
|
19527
|
+
root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
|
|
19528
|
+
};
|
|
19529
|
+
return composeClasses(slots, getIconButtonUtilityClass, classes);
|
|
19530
|
+
};
|
|
19531
|
+
const IconButtonRoot = styled$1(ButtonBase$1, {
|
|
19532
|
+
name: 'MuiIconButton',
|
|
19533
|
+
slot: 'Root',
|
|
19534
|
+
overridesResolver: (props, styles) => {
|
|
19535
|
+
const {
|
|
19536
|
+
ownerState
|
|
19537
|
+
} = props;
|
|
19538
|
+
return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
|
|
19539
|
+
}
|
|
19540
|
+
})(({
|
|
19541
|
+
theme,
|
|
19542
|
+
ownerState
|
|
19543
|
+
}) => _extends({
|
|
19544
|
+
textAlign: 'center',
|
|
19545
|
+
flex: '0 0 auto',
|
|
19546
|
+
fontSize: theme.typography.pxToRem(24),
|
|
19547
|
+
padding: 8,
|
|
19548
|
+
borderRadius: '50%',
|
|
19549
|
+
overflow: 'visible',
|
|
19550
|
+
// Explicitly set the default value to solve a bug on IE11.
|
|
19551
|
+
color: (theme.vars || theme).palette.action.active,
|
|
19552
|
+
transition: theme.transitions.create('background-color', {
|
|
19553
|
+
duration: theme.transitions.duration.shortest
|
|
19554
|
+
})
|
|
19555
|
+
}, !ownerState.disableRipple && {
|
|
19556
|
+
'&:hover': {
|
|
19557
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
|
|
19558
|
+
// Reset on touch devices, it doesn't add specificity
|
|
19559
|
+
'@media (hover: none)': {
|
|
19560
|
+
backgroundColor: 'transparent'
|
|
19561
|
+
}
|
|
19562
|
+
}
|
|
19563
|
+
}, ownerState.edge === 'start' && {
|
|
19564
|
+
marginLeft: ownerState.size === 'small' ? -3 : -12
|
|
19565
|
+
}, ownerState.edge === 'end' && {
|
|
19566
|
+
marginRight: ownerState.size === 'small' ? -3 : -12
|
|
19567
|
+
}), ({
|
|
19568
|
+
theme,
|
|
19569
|
+
ownerState
|
|
19570
|
+
}) => {
|
|
19571
|
+
var _palette;
|
|
19572
|
+
const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
|
|
19573
|
+
return _extends({}, ownerState.color === 'inherit' && {
|
|
19574
|
+
color: 'inherit'
|
|
19575
|
+
}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
|
|
19576
|
+
color: palette == null ? void 0 : palette.main
|
|
19577
|
+
}, !ownerState.disableRipple && {
|
|
19578
|
+
'&:hover': _extends({}, palette && {
|
|
19579
|
+
backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
|
|
19580
|
+
}, {
|
|
19581
|
+
// Reset on touch devices, it doesn't add specificity
|
|
19582
|
+
'@media (hover: none)': {
|
|
19583
|
+
backgroundColor: 'transparent'
|
|
19584
|
+
}
|
|
19585
|
+
})
|
|
19586
|
+
}), ownerState.size === 'small' && {
|
|
19587
|
+
padding: 5,
|
|
19588
|
+
fontSize: theme.typography.pxToRem(18)
|
|
19589
|
+
}, ownerState.size === 'large' && {
|
|
19590
|
+
padding: 12,
|
|
19591
|
+
fontSize: theme.typography.pxToRem(28)
|
|
19592
|
+
}, {
|
|
19593
|
+
[`&.${iconButtonClasses$1.disabled}`]: {
|
|
19594
|
+
backgroundColor: 'transparent',
|
|
19595
|
+
color: (theme.vars || theme).palette.action.disabled
|
|
19596
|
+
}
|
|
19597
|
+
});
|
|
19598
|
+
});
|
|
19599
|
+
|
|
19600
|
+
/**
|
|
19601
|
+
* Refer to the [Icons](/material-ui/icons/) section of the documentation
|
|
19602
|
+
* regarding the available icon options.
|
|
19603
|
+
*/
|
|
19604
|
+
const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {
|
|
19605
|
+
const props = useThemeProps({
|
|
19606
|
+
props: inProps,
|
|
19607
|
+
name: 'MuiIconButton'
|
|
19608
|
+
});
|
|
19609
|
+
const {
|
|
19610
|
+
edge = false,
|
|
19611
|
+
children,
|
|
19612
|
+
className,
|
|
19613
|
+
color = 'default',
|
|
19614
|
+
disabled = false,
|
|
19615
|
+
disableFocusRipple = false,
|
|
19616
|
+
size = 'medium'
|
|
19617
|
+
} = props,
|
|
19618
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$4);
|
|
19619
|
+
const ownerState = _extends({}, props, {
|
|
19620
|
+
edge,
|
|
19621
|
+
color,
|
|
19622
|
+
disabled,
|
|
19623
|
+
disableFocusRipple,
|
|
19624
|
+
size
|
|
19625
|
+
});
|
|
19626
|
+
const classes = useUtilityClasses$1(ownerState);
|
|
19627
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(IconButtonRoot, _extends({
|
|
19628
|
+
className: clsx(classes.root, className),
|
|
19629
|
+
centerRipple: true,
|
|
19630
|
+
focusRipple: !disableFocusRipple,
|
|
19631
|
+
disabled: disabled,
|
|
19632
|
+
ref: ref,
|
|
19633
|
+
ownerState: ownerState
|
|
19634
|
+
}, other, {
|
|
19635
|
+
children: children
|
|
19636
|
+
}));
|
|
19637
|
+
});
|
|
19638
|
+
process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
|
|
19639
|
+
// ----------------------------- Warning --------------------------------
|
|
19640
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
19641
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
19642
|
+
// ----------------------------------------------------------------------
|
|
19643
|
+
/**
|
|
19644
|
+
* The icon to display.
|
|
19645
|
+
*/
|
|
19646
|
+
children: chainPropTypes(PropTypes.node, props => {
|
|
19647
|
+
const found = React.Children.toArray(props.children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.onClick);
|
|
19648
|
+
if (found) {
|
|
19649
|
+
return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole <button> will be responsive to click events.'].join('\n'));
|
|
19650
|
+
}
|
|
19651
|
+
return null;
|
|
19652
|
+
}),
|
|
19653
|
+
/**
|
|
19654
|
+
* Override or extend the styles applied to the component.
|
|
19655
|
+
*/
|
|
19656
|
+
classes: PropTypes.object,
|
|
19657
|
+
/**
|
|
19658
|
+
* @ignore
|
|
19659
|
+
*/
|
|
19660
|
+
className: PropTypes.string,
|
|
19661
|
+
/**
|
|
19662
|
+
* The color of the component.
|
|
19663
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
|
19664
|
+
* [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
|
|
19665
|
+
* @default 'default'
|
|
19666
|
+
*/
|
|
19667
|
+
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
|
|
19668
|
+
/**
|
|
19669
|
+
* If `true`, the component is disabled.
|
|
19670
|
+
* @default false
|
|
19671
|
+
*/
|
|
19672
|
+
disabled: PropTypes.bool,
|
|
19673
|
+
/**
|
|
19674
|
+
* If `true`, the keyboard focus ripple is disabled.
|
|
19675
|
+
* @default false
|
|
19676
|
+
*/
|
|
19677
|
+
disableFocusRipple: PropTypes.bool,
|
|
19678
|
+
/**
|
|
19679
|
+
* If `true`, the ripple effect is disabled.
|
|
19680
|
+
*
|
|
19681
|
+
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
|
19682
|
+
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
|
19683
|
+
* @default false
|
|
19684
|
+
*/
|
|
19685
|
+
disableRipple: PropTypes.bool,
|
|
19686
|
+
/**
|
|
19687
|
+
* If given, uses a negative margin to counteract the padding on one
|
|
19688
|
+
* side (this is often helpful for aligning the left or right
|
|
19689
|
+
* side of the icon with content above or below, without ruining the border
|
|
19690
|
+
* size and shape).
|
|
19691
|
+
* @default false
|
|
19692
|
+
*/
|
|
19693
|
+
edge: PropTypes.oneOf(['end', 'start', false]),
|
|
19694
|
+
/**
|
|
19695
|
+
* The size of the component.
|
|
19696
|
+
* `small` is equivalent to the dense button styling.
|
|
19697
|
+
* @default 'medium'
|
|
19698
|
+
*/
|
|
19699
|
+
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
|
|
19700
|
+
/**
|
|
19701
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
19702
|
+
*/
|
|
19703
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
19704
|
+
} : void 0;
|
|
19705
|
+
var IconButton$1 = IconButton;
|
|
19706
|
+
|
|
19707
|
+
var LastPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
|
|
19708
|
+
d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
|
|
19709
|
+
}), 'LastPage');
|
|
19710
|
+
|
|
19711
|
+
var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
|
|
19712
|
+
d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
|
|
19713
|
+
}), 'FirstPage');
|
|
19714
|
+
|
|
19715
|
+
var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
|
|
19716
|
+
const _excluded$3 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
|
|
19717
|
+
const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
|
|
19718
|
+
const {
|
|
19719
|
+
backIconButtonProps,
|
|
19720
|
+
count,
|
|
19721
|
+
getItemAriaLabel,
|
|
19722
|
+
nextIconButtonProps,
|
|
19723
|
+
onPageChange,
|
|
19724
|
+
page,
|
|
19725
|
+
rowsPerPage,
|
|
19726
|
+
showFirstButton,
|
|
19727
|
+
showLastButton
|
|
19728
|
+
} = props,
|
|
19729
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$3);
|
|
19730
|
+
const theme = useTheme();
|
|
19731
|
+
const handleFirstPageButtonClick = event => {
|
|
19732
|
+
onPageChange(event, 0);
|
|
19733
|
+
};
|
|
19734
|
+
const handleBackButtonClick = event => {
|
|
19735
|
+
onPageChange(event, page - 1);
|
|
19736
|
+
};
|
|
19737
|
+
const handleNextButtonClick = event => {
|
|
19738
|
+
onPageChange(event, page + 1);
|
|
19739
|
+
};
|
|
19740
|
+
const handleLastPageButtonClick = event => {
|
|
19741
|
+
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
|
19742
|
+
};
|
|
19743
|
+
return /*#__PURE__*/jsxRuntimeExports.jsxs("div", _extends({
|
|
19744
|
+
ref: ref
|
|
19745
|
+
}, other, {
|
|
19746
|
+
children: [showFirstButton && /*#__PURE__*/jsxRuntimeExports.jsx(IconButton$1, {
|
|
19747
|
+
onClick: handleFirstPageButtonClick,
|
|
19748
|
+
disabled: page === 0,
|
|
19749
|
+
"aria-label": getItemAriaLabel('first', page),
|
|
19750
|
+
title: getItemAriaLabel('first', page),
|
|
19751
|
+
children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/jsxRuntimeExports.jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/jsxRuntimeExports.jsx(FirstPageIcon, {}))
|
|
19752
|
+
}), /*#__PURE__*/jsxRuntimeExports.jsx(IconButton$1, _extends({
|
|
19753
|
+
onClick: handleBackButtonClick,
|
|
19754
|
+
disabled: page === 0,
|
|
19755
|
+
color: "inherit",
|
|
19756
|
+
"aria-label": getItemAriaLabel('previous', page),
|
|
19757
|
+
title: getItemAriaLabel('previous', page)
|
|
19758
|
+
}, backIconButtonProps, {
|
|
19759
|
+
children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/jsxRuntimeExports.jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/jsxRuntimeExports.jsx(KeyboardArrowLeft, {}))
|
|
19760
|
+
})), /*#__PURE__*/jsxRuntimeExports.jsx(IconButton$1, _extends({
|
|
19761
|
+
onClick: handleNextButtonClick,
|
|
19762
|
+
disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
|
|
19763
|
+
color: "inherit",
|
|
19764
|
+
"aria-label": getItemAriaLabel('next', page),
|
|
19765
|
+
title: getItemAriaLabel('next', page)
|
|
19766
|
+
}, nextIconButtonProps, {
|
|
19767
|
+
children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/jsxRuntimeExports.jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/jsxRuntimeExports.jsx(KeyboardArrowRight, {}))
|
|
19768
|
+
})), showLastButton && /*#__PURE__*/jsxRuntimeExports.jsx(IconButton$1, {
|
|
19769
|
+
onClick: handleLastPageButtonClick,
|
|
19770
|
+
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
|
|
19771
|
+
"aria-label": getItemAriaLabel('last', page),
|
|
19772
|
+
title: getItemAriaLabel('last', page),
|
|
19773
|
+
children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/jsxRuntimeExports.jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/jsxRuntimeExports.jsx(LastPageIcon, {}))
|
|
19774
|
+
})]
|
|
19775
|
+
}));
|
|
19776
|
+
});
|
|
19777
|
+
process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
19778
|
+
/**
|
|
19779
|
+
* Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
19780
|
+
*/
|
|
19781
|
+
backIconButtonProps: PropTypes.object,
|
|
19782
|
+
/**
|
|
19783
|
+
* The total number of rows.
|
|
19784
|
+
*/
|
|
19785
|
+
count: PropTypes.number.isRequired,
|
|
19786
|
+
/**
|
|
19787
|
+
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
19788
|
+
*
|
|
19789
|
+
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
|
19790
|
+
*
|
|
19791
|
+
* @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
|
|
19792
|
+
* @param {number} page The page number to format.
|
|
19793
|
+
* @returns {string}
|
|
19794
|
+
*/
|
|
19795
|
+
getItemAriaLabel: PropTypes.func.isRequired,
|
|
19796
|
+
/**
|
|
19797
|
+
* Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
19798
|
+
*/
|
|
19799
|
+
nextIconButtonProps: PropTypes.object,
|
|
19800
|
+
/**
|
|
19801
|
+
* Callback fired when the page is changed.
|
|
19802
|
+
*
|
|
19803
|
+
* @param {object} event The event source of the callback.
|
|
19804
|
+
* @param {number} page The page selected.
|
|
19805
|
+
*/
|
|
19806
|
+
onPageChange: PropTypes.func.isRequired,
|
|
19807
|
+
/**
|
|
19808
|
+
* The zero-based index of the current page.
|
|
19809
|
+
*/
|
|
19810
|
+
page: PropTypes.number.isRequired,
|
|
19811
|
+
/**
|
|
19812
|
+
* The number of rows per page.
|
|
19813
|
+
*/
|
|
19814
|
+
rowsPerPage: PropTypes.number.isRequired,
|
|
19815
|
+
/**
|
|
19816
|
+
* If `true`, show the first-page button.
|
|
19817
|
+
*/
|
|
19818
|
+
showFirstButton: PropTypes.bool.isRequired,
|
|
19819
|
+
/**
|
|
19820
|
+
* If `true`, show the last-page button.
|
|
19821
|
+
*/
|
|
19822
|
+
showLastButton: PropTypes.bool.isRequired
|
|
19823
|
+
} : void 0;
|
|
19824
|
+
var TablePaginationActions$1 = TablePaginationActions;
|
|
19825
|
+
|
|
19826
|
+
function getTablePaginationUtilityClass(slot) {
|
|
19827
|
+
return generateUtilityClass('MuiTablePagination', slot);
|
|
19828
|
+
}
|
|
19829
|
+
const tablePaginationClasses = generateUtilityClasses('MuiTablePagination', ['root', 'toolbar', 'spacer', 'selectLabel', 'selectRoot', 'select', 'selectIcon', 'input', 'menuItem', 'displayedRows', 'actions']);
|
|
19830
|
+
var tablePaginationClasses$1 = tablePaginationClasses;
|
|
19831
|
+
|
|
19832
|
+
var _InputBase;
|
|
19833
|
+
const _excluded$2 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
|
|
19834
|
+
const TablePaginationRoot = styled$1(TableCell$1, {
|
|
19835
|
+
name: 'MuiTablePagination',
|
|
19836
|
+
slot: 'Root',
|
|
19837
|
+
overridesResolver: (props, styles) => styles.root
|
|
19838
|
+
})(({
|
|
19839
|
+
theme
|
|
19840
|
+
}) => ({
|
|
19841
|
+
overflow: 'auto',
|
|
19842
|
+
color: (theme.vars || theme).palette.text.primary,
|
|
19843
|
+
fontSize: theme.typography.pxToRem(14),
|
|
19844
|
+
// Increase the specificity to override TableCell.
|
|
19845
|
+
'&:last-child': {
|
|
19846
|
+
padding: 0
|
|
19847
|
+
}
|
|
19848
|
+
}));
|
|
19849
|
+
const TablePaginationToolbar = styled$1(Toolbar$1, {
|
|
19850
|
+
name: 'MuiTablePagination',
|
|
19851
|
+
slot: 'Toolbar',
|
|
19852
|
+
overridesResolver: (props, styles) => _extends({
|
|
19853
|
+
[`& .${tablePaginationClasses$1.actions}`]: styles.actions
|
|
19854
|
+
}, styles.toolbar)
|
|
19855
|
+
})(({
|
|
19856
|
+
theme
|
|
19857
|
+
}) => ({
|
|
19858
|
+
minHeight: 52,
|
|
19859
|
+
paddingRight: 2,
|
|
19860
|
+
[`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: {
|
|
19861
|
+
minHeight: 52
|
|
19862
|
+
},
|
|
19863
|
+
[theme.breakpoints.up('sm')]: {
|
|
19864
|
+
minHeight: 52,
|
|
19865
|
+
paddingRight: 2
|
|
19866
|
+
},
|
|
19867
|
+
[`& .${tablePaginationClasses$1.actions}`]: {
|
|
19868
|
+
flexShrink: 0,
|
|
19869
|
+
marginLeft: 20
|
|
19870
|
+
}
|
|
19871
|
+
}));
|
|
19872
|
+
const TablePaginationSpacer = styled$1('div', {
|
|
19873
|
+
name: 'MuiTablePagination',
|
|
19874
|
+
slot: 'Spacer',
|
|
19875
|
+
overridesResolver: (props, styles) => styles.spacer
|
|
19876
|
+
})({
|
|
19877
|
+
flex: '1 1 100%'
|
|
19878
|
+
});
|
|
19879
|
+
const TablePaginationSelectLabel = styled$1('p', {
|
|
19880
|
+
name: 'MuiTablePagination',
|
|
19881
|
+
slot: 'SelectLabel',
|
|
19882
|
+
overridesResolver: (props, styles) => styles.selectLabel
|
|
19883
|
+
})(({
|
|
19884
|
+
theme
|
|
19885
|
+
}) => _extends({}, theme.typography.body2, {
|
|
19886
|
+
flexShrink: 0
|
|
19887
|
+
}));
|
|
19888
|
+
const TablePaginationSelect = styled$1(Select$1, {
|
|
19889
|
+
name: 'MuiTablePagination',
|
|
19890
|
+
slot: 'Select',
|
|
19891
|
+
overridesResolver: (props, styles) => _extends({
|
|
19892
|
+
[`& .${tablePaginationClasses$1.selectIcon}`]: styles.selectIcon,
|
|
19893
|
+
[`& .${tablePaginationClasses$1.select}`]: styles.select
|
|
19894
|
+
}, styles.input, styles.selectRoot)
|
|
19895
|
+
})({
|
|
19896
|
+
color: 'inherit',
|
|
19897
|
+
fontSize: 'inherit',
|
|
19898
|
+
flexShrink: 0,
|
|
19899
|
+
marginRight: 32,
|
|
19900
|
+
marginLeft: 8,
|
|
19901
|
+
[`& .${tablePaginationClasses$1.select}`]: {
|
|
19902
|
+
paddingLeft: 8,
|
|
19903
|
+
paddingRight: 24,
|
|
19904
|
+
textAlign: 'right',
|
|
19905
|
+
textAlignLast: 'right' // Align <select> on Chrome.
|
|
19906
|
+
}
|
|
19907
|
+
});
|
|
19908
|
+
|
|
19909
|
+
const TablePaginationMenuItem = styled$1(MenuItem$1, {
|
|
19910
|
+
name: 'MuiTablePagination',
|
|
19911
|
+
slot: 'MenuItem',
|
|
19912
|
+
overridesResolver: (props, styles) => styles.menuItem
|
|
19913
|
+
})({});
|
|
19914
|
+
const TablePaginationDisplayedRows = styled$1('p', {
|
|
19915
|
+
name: 'MuiTablePagination',
|
|
19916
|
+
slot: 'DisplayedRows',
|
|
19917
|
+
overridesResolver: (props, styles) => styles.displayedRows
|
|
19918
|
+
})(({
|
|
19919
|
+
theme
|
|
19920
|
+
}) => _extends({}, theme.typography.body2, {
|
|
19921
|
+
flexShrink: 0
|
|
19922
|
+
}));
|
|
19923
|
+
function defaultLabelDisplayedRows({
|
|
19924
|
+
from,
|
|
19925
|
+
to,
|
|
19926
|
+
count
|
|
19927
|
+
}) {
|
|
19928
|
+
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
|
|
19929
|
+
}
|
|
19930
|
+
function defaultGetAriaLabel(type) {
|
|
19931
|
+
return `Go to ${type} page`;
|
|
19932
|
+
}
|
|
19933
|
+
const useUtilityClasses = ownerState => {
|
|
19934
|
+
const {
|
|
19935
|
+
classes
|
|
19936
|
+
} = ownerState;
|
|
19937
|
+
const slots = {
|
|
19938
|
+
root: ['root'],
|
|
19939
|
+
toolbar: ['toolbar'],
|
|
19940
|
+
spacer: ['spacer'],
|
|
19941
|
+
selectLabel: ['selectLabel'],
|
|
19942
|
+
select: ['select'],
|
|
19943
|
+
input: ['input'],
|
|
19944
|
+
selectIcon: ['selectIcon'],
|
|
19945
|
+
menuItem: ['menuItem'],
|
|
19946
|
+
displayedRows: ['displayedRows'],
|
|
19947
|
+
actions: ['actions']
|
|
19948
|
+
};
|
|
19949
|
+
return composeClasses(slots, getTablePaginationUtilityClass, classes);
|
|
19950
|
+
};
|
|
19951
|
+
|
|
19952
|
+
/**
|
|
19953
|
+
* A `TableCell` based component for placing inside `TableFooter` for pagination.
|
|
19954
|
+
*/
|
|
19955
|
+
const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
|
|
19956
|
+
const props = useThemeProps({
|
|
19957
|
+
props: inProps,
|
|
19958
|
+
name: 'MuiTablePagination'
|
|
19959
|
+
});
|
|
19960
|
+
const {
|
|
19961
|
+
ActionsComponent = TablePaginationActions$1,
|
|
19962
|
+
backIconButtonProps,
|
|
19963
|
+
className,
|
|
19964
|
+
colSpan: colSpanProp,
|
|
19965
|
+
component = TableCell$1,
|
|
19966
|
+
count,
|
|
19967
|
+
getItemAriaLabel = defaultGetAriaLabel,
|
|
19968
|
+
labelDisplayedRows = defaultLabelDisplayedRows,
|
|
19969
|
+
labelRowsPerPage = 'Rows per page:',
|
|
19970
|
+
nextIconButtonProps,
|
|
19971
|
+
onPageChange,
|
|
19972
|
+
onRowsPerPageChange,
|
|
19973
|
+
page,
|
|
19974
|
+
rowsPerPage,
|
|
19975
|
+
rowsPerPageOptions = [10, 25, 50, 100],
|
|
19976
|
+
SelectProps = {},
|
|
19977
|
+
showFirstButton = false,
|
|
19978
|
+
showLastButton = false
|
|
19979
|
+
} = props,
|
|
19980
|
+
other = _objectWithoutPropertiesLoose(props, _excluded$2);
|
|
19981
|
+
const ownerState = props;
|
|
19982
|
+
const classes = useUtilityClasses(ownerState);
|
|
19983
|
+
const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
|
|
19984
|
+
let colSpan;
|
|
19985
|
+
if (component === TableCell$1 || component === 'td') {
|
|
19986
|
+
colSpan = colSpanProp || 1000; // col-span over everything
|
|
19987
|
+
}
|
|
19988
|
+
|
|
19989
|
+
const selectId = useId(SelectProps.id);
|
|
19990
|
+
const labelId = useId(SelectProps.labelId);
|
|
19991
|
+
const getLabelDisplayedRowsTo = () => {
|
|
19992
|
+
if (count === -1) {
|
|
19993
|
+
return (page + 1) * rowsPerPage;
|
|
19994
|
+
}
|
|
19995
|
+
return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
|
|
19996
|
+
};
|
|
19997
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(TablePaginationRoot, _extends({
|
|
19998
|
+
colSpan: colSpan,
|
|
19999
|
+
ref: ref,
|
|
20000
|
+
as: component,
|
|
20001
|
+
ownerState: ownerState,
|
|
20002
|
+
className: clsx(classes.root, className)
|
|
20003
|
+
}, other, {
|
|
20004
|
+
children: /*#__PURE__*/jsxRuntimeExports.jsxs(TablePaginationToolbar, {
|
|
20005
|
+
className: classes.toolbar,
|
|
20006
|
+
children: [/*#__PURE__*/jsxRuntimeExports.jsx(TablePaginationSpacer, {
|
|
20007
|
+
className: classes.spacer
|
|
20008
|
+
}), rowsPerPageOptions.length > 1 && /*#__PURE__*/jsxRuntimeExports.jsx(TablePaginationSelectLabel, {
|
|
20009
|
+
className: classes.selectLabel,
|
|
20010
|
+
id: labelId,
|
|
20011
|
+
children: labelRowsPerPage
|
|
20012
|
+
}), rowsPerPageOptions.length > 1 && /*#__PURE__*/jsxRuntimeExports.jsx(TablePaginationSelect, _extends({
|
|
20013
|
+
variant: "standard"
|
|
20014
|
+
}, !SelectProps.variant && {
|
|
20015
|
+
input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntimeExports.jsx(InputBase$1, {}))
|
|
20016
|
+
}, {
|
|
20017
|
+
value: rowsPerPage,
|
|
20018
|
+
onChange: onRowsPerPageChange,
|
|
20019
|
+
id: selectId,
|
|
20020
|
+
labelId: labelId
|
|
20021
|
+
}, SelectProps, {
|
|
20022
|
+
classes: _extends({}, SelectProps.classes, {
|
|
20023
|
+
// TODO v5 remove `classes.input`
|
|
20024
|
+
root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
|
|
20025
|
+
select: clsx(classes.select, (SelectProps.classes || {}).select),
|
|
20026
|
+
// TODO v5 remove `selectIcon`
|
|
20027
|
+
icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
|
|
20028
|
+
}),
|
|
20029
|
+
children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
|
|
20030
|
+
ownerState
|
|
20031
|
+
}, {
|
|
20032
|
+
className: classes.menuItem,
|
|
20033
|
+
key: rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
|
|
20034
|
+
value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
|
|
20035
|
+
}), rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
|
|
20036
|
+
})), /*#__PURE__*/jsxRuntimeExports.jsx(TablePaginationDisplayedRows, {
|
|
20037
|
+
className: classes.displayedRows,
|
|
20038
|
+
children: labelDisplayedRows({
|
|
20039
|
+
from: count === 0 ? 0 : page * rowsPerPage + 1,
|
|
20040
|
+
to: getLabelDisplayedRowsTo(),
|
|
20041
|
+
count: count === -1 ? -1 : count,
|
|
20042
|
+
page
|
|
20043
|
+
})
|
|
20044
|
+
}), /*#__PURE__*/jsxRuntimeExports.jsx(ActionsComponent, {
|
|
20045
|
+
className: classes.actions,
|
|
20046
|
+
backIconButtonProps: backIconButtonProps,
|
|
20047
|
+
count: count,
|
|
20048
|
+
nextIconButtonProps: nextIconButtonProps,
|
|
20049
|
+
onPageChange: onPageChange,
|
|
20050
|
+
page: page,
|
|
20051
|
+
rowsPerPage: rowsPerPage,
|
|
20052
|
+
showFirstButton: showFirstButton,
|
|
20053
|
+
showLastButton: showLastButton,
|
|
20054
|
+
getItemAriaLabel: getItemAriaLabel
|
|
20055
|
+
})]
|
|
20056
|
+
})
|
|
20057
|
+
}));
|
|
20058
|
+
});
|
|
20059
|
+
process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-proptypes */ = {
|
|
20060
|
+
// ----------------------------- Warning --------------------------------
|
|
20061
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
20062
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
20063
|
+
// ----------------------------------------------------------------------
|
|
20064
|
+
/**
|
|
20065
|
+
* The component used for displaying the actions.
|
|
20066
|
+
* Either a string to use a HTML element or a component.
|
|
20067
|
+
* @default TablePaginationActions
|
|
20068
|
+
*/
|
|
20069
|
+
ActionsComponent: PropTypes.elementType,
|
|
20070
|
+
/**
|
|
20071
|
+
* Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
|
|
20072
|
+
*/
|
|
20073
|
+
backIconButtonProps: PropTypes.object,
|
|
20074
|
+
/**
|
|
20075
|
+
* Override or extend the styles applied to the component.
|
|
20076
|
+
*/
|
|
20077
|
+
classes: PropTypes.object,
|
|
20078
|
+
/**
|
|
20079
|
+
* @ignore
|
|
20080
|
+
*/
|
|
20081
|
+
className: PropTypes.string,
|
|
20082
|
+
/**
|
|
20083
|
+
* @ignore
|
|
20084
|
+
*/
|
|
20085
|
+
colSpan: PropTypes.number,
|
|
20086
|
+
/**
|
|
20087
|
+
* The component used for the root node.
|
|
20088
|
+
* Either a string to use a HTML element or a component.
|
|
20089
|
+
*/
|
|
20090
|
+
component: PropTypes.elementType,
|
|
20091
|
+
/**
|
|
20092
|
+
* The total number of rows.
|
|
20093
|
+
*
|
|
20094
|
+
* To enable server side pagination for an unknown number of items, provide -1.
|
|
20095
|
+
*/
|
|
20096
|
+
count: integerPropType.isRequired,
|
|
20097
|
+
/**
|
|
20098
|
+
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
20099
|
+
* This is important for screen reader users.
|
|
20100
|
+
*
|
|
20101
|
+
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
|
20102
|
+
* @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
|
|
20103
|
+
* @returns {string}
|
|
20104
|
+
* @default function defaultGetAriaLabel(type) {
|
|
20105
|
+
* return `Go to ${type} page`;
|
|
20106
|
+
* }
|
|
20107
|
+
*/
|
|
20108
|
+
getItemAriaLabel: PropTypes.func,
|
|
20109
|
+
/**
|
|
20110
|
+
* Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
|
|
20111
|
+
* object.
|
|
20112
|
+
*
|
|
20113
|
+
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
|
20114
|
+
* @default function defaultLabelDisplayedRows({ from, to, count }) {
|
|
20115
|
+
* return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
|
|
20116
|
+
* }
|
|
20117
|
+
*/
|
|
20118
|
+
labelDisplayedRows: PropTypes.func,
|
|
20119
|
+
/**
|
|
20120
|
+
* Customize the rows per page label.
|
|
20121
|
+
*
|
|
20122
|
+
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
|
|
20123
|
+
* @default 'Rows per page:'
|
|
20124
|
+
*/
|
|
20125
|
+
labelRowsPerPage: PropTypes.node,
|
|
20126
|
+
/**
|
|
20127
|
+
* Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
20128
|
+
*/
|
|
20129
|
+
nextIconButtonProps: PropTypes.object,
|
|
20130
|
+
/**
|
|
20131
|
+
* Callback fired when the page is changed.
|
|
20132
|
+
*
|
|
20133
|
+
* @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
|
|
20134
|
+
* @param {number} page The page selected.
|
|
20135
|
+
*/
|
|
20136
|
+
onPageChange: PropTypes.func.isRequired,
|
|
20137
|
+
/**
|
|
20138
|
+
* Callback fired when the number of rows per page is changed.
|
|
20139
|
+
*
|
|
20140
|
+
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
|
|
20141
|
+
*/
|
|
20142
|
+
onRowsPerPageChange: PropTypes.func,
|
|
20143
|
+
/**
|
|
20144
|
+
* The zero-based index of the current page.
|
|
20145
|
+
*/
|
|
20146
|
+
page: chainPropTypes(integerPropType.isRequired, props => {
|
|
20147
|
+
const {
|
|
20148
|
+
count,
|
|
20149
|
+
page,
|
|
20150
|
+
rowsPerPage
|
|
20151
|
+
} = props;
|
|
20152
|
+
if (count === -1) {
|
|
20153
|
+
return null;
|
|
20154
|
+
}
|
|
20155
|
+
const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
|
|
20156
|
+
if (page < 0 || page > newLastPage) {
|
|
20157
|
+
return new Error('MUI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
|
|
20158
|
+
}
|
|
20159
|
+
return null;
|
|
20160
|
+
}),
|
|
20161
|
+
/**
|
|
20162
|
+
* The number of rows per page.
|
|
20163
|
+
*
|
|
20164
|
+
* Set -1 to display all the rows.
|
|
20165
|
+
*/
|
|
20166
|
+
rowsPerPage: integerPropType.isRequired,
|
|
20167
|
+
/**
|
|
20168
|
+
* Customizes the options of the rows per page select field. If less than two options are
|
|
20169
|
+
* available, no select field will be displayed.
|
|
20170
|
+
* Use -1 for the value with a custom label to show all the rows.
|
|
20171
|
+
* @default [10, 25, 50, 100]
|
|
20172
|
+
*/
|
|
20173
|
+
rowsPerPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
|
20174
|
+
label: PropTypes.string.isRequired,
|
|
20175
|
+
value: PropTypes.number.isRequired
|
|
20176
|
+
})]).isRequired),
|
|
20177
|
+
/**
|
|
20178
|
+
* Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
|
|
20179
|
+
* @default {}
|
|
20180
|
+
*/
|
|
20181
|
+
SelectProps: PropTypes.object,
|
|
20182
|
+
/**
|
|
20183
|
+
* If `true`, show the first-page button.
|
|
20184
|
+
* @default false
|
|
20185
|
+
*/
|
|
20186
|
+
showFirstButton: PropTypes.bool,
|
|
20187
|
+
/**
|
|
20188
|
+
* If `true`, show the last-page button.
|
|
20189
|
+
* @default false
|
|
20190
|
+
*/
|
|
20191
|
+
showLastButton: PropTypes.bool,
|
|
20192
|
+
/**
|
|
20193
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
20194
|
+
*/
|
|
20195
|
+
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
20196
|
+
} : void 0;
|
|
20197
|
+
var TablePagination$1 = TablePagination;
|
|
20198
|
+
|
|
20199
|
+
const _excluded$1 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "hideToolbar", "height", "license", "onFilterModelChange", "onRowSelectionModelChange", "pagination", "rows", "sx", "paginationModel", "onPaginationModelChange"];
|
|
20200
|
+
const COMPONENT_NAME$1 = 'DataGrid';
|
|
20201
|
+
const CLASSNAME$1 = 'redsift-datagrid';
|
|
20202
|
+
const DEFAULT_PROPS = {
|
|
20203
|
+
license: process.env.MUI_LICENSE_KEY
|
|
20204
|
+
};
|
|
20205
|
+
const Pagination = _ref => {
|
|
20206
|
+
let {
|
|
20207
|
+
selectionStatus,
|
|
20208
|
+
apiRef,
|
|
20209
|
+
paginationModel,
|
|
20210
|
+
onPaginationModelChange
|
|
20211
|
+
} = _ref;
|
|
20212
|
+
const rowsCount = apiRef.current.getRowsCount();
|
|
20213
|
+
return /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
20214
|
+
flexDirection: "row",
|
|
20215
|
+
alignItems: "center",
|
|
20216
|
+
justifyContent: "space-between",
|
|
20217
|
+
marginTop: "27px",
|
|
20218
|
+
marginBottom: "7px"
|
|
20219
|
+
}, selectionStatus.type === 'page' ? /*#__PURE__*/React__default.createElement("div", null, `All ${selectionStatus.count} records on this page are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
|
|
20220
|
+
onClick: () => {
|
|
20221
|
+
apiRef.current.selectRows(apiRef.current.getAllRowIds());
|
|
20222
|
+
}
|
|
20223
|
+
}, "Select all ", rowsCount, " records in the table.")) : selectionStatus.type === 'table' ? /*#__PURE__*/React__default.createElement("div", null, `All ${selectionStatus.count} records in the table are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
|
|
20224
|
+
onClick: () => {
|
|
20225
|
+
apiRef.current.selectRows([], true, true);
|
|
20226
|
+
}
|
|
20227
|
+
}, "Clear selection.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement("div", null, `${selectionStatus.count} row${selectionStatus.count > 1 ? 's' : ''} selected.`) : /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(TablePagination$1, {
|
|
20228
|
+
component: "div",
|
|
20229
|
+
count: rowsCount,
|
|
20230
|
+
page: paginationModel.page,
|
|
20231
|
+
onPageChange: (event, newPage) => onPaginationModelChange({
|
|
20232
|
+
page: newPage,
|
|
20233
|
+
pageSize: paginationModel.pageSize
|
|
20234
|
+
}),
|
|
20235
|
+
rowsPerPage: paginationModel.pageSize,
|
|
20236
|
+
onRowsPerPageChange: event => onPaginationModelChange({
|
|
20237
|
+
page: paginationModel.page,
|
|
20238
|
+
pageSize: parseInt(event.target.value, 10)
|
|
20239
|
+
})
|
|
20240
|
+
}));
|
|
20241
|
+
};
|
|
20242
|
+
const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
|
|
20243
|
+
const datagridRef = ref || useRef();
|
|
20244
|
+
const {
|
|
20245
|
+
apiRef: propsApiRef,
|
|
20246
|
+
autoHeight,
|
|
20247
|
+
className,
|
|
20248
|
+
slots,
|
|
20249
|
+
slotProps,
|
|
20250
|
+
filterModel: propsFilterModel,
|
|
20251
|
+
hideToolbar,
|
|
20252
|
+
height: propsHeight,
|
|
20253
|
+
license,
|
|
20254
|
+
onFilterModelChange: propsOnFilterModelChange,
|
|
20255
|
+
onRowSelectionModelChange,
|
|
20256
|
+
pagination,
|
|
20257
|
+
rows,
|
|
20258
|
+
sx,
|
|
20259
|
+
paginationModel: propsPaginationModel,
|
|
20260
|
+
onPaginationModelChange: propsOnPaginationModelChange
|
|
20261
|
+
} = props,
|
|
20262
|
+
forwardedProps = _objectWithoutProperties(props, _excluded$1);
|
|
20263
|
+
const _apiRef = useGridApiRef();
|
|
20264
|
+
const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
|
|
20265
|
+
const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$2;
|
|
20266
|
+
LicenseInfo.setLicenseKey(license);
|
|
20267
|
+
const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? '0' : '500px';
|
|
20268
|
+
const selectionStatus = useRef({
|
|
20269
|
+
type: 'none',
|
|
20270
|
+
count: 0
|
|
20271
|
+
});
|
|
20272
|
+
const [filterModel, setFilterModel] = useState(propsFilterModel);
|
|
20273
|
+
useEffect(() => {
|
|
20274
|
+
setFilterModel(propsFilterModel);
|
|
20275
|
+
}, [propsFilterModel]);
|
|
20276
|
+
const onFilterModelChange = (model, details) => {
|
|
20277
|
+
if (propsOnFilterModelChange) {
|
|
20278
|
+
propsOnFilterModelChange(model, details);
|
|
20279
|
+
} else {
|
|
20280
|
+
setFilterModel(model);
|
|
20281
|
+
}
|
|
20282
|
+
};
|
|
20283
|
+
const [paginationModel, setPaginationModel] = useState({
|
|
20284
|
+
pageSize: (propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) || 100,
|
|
20285
|
+
page: (propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) || 0
|
|
20286
|
+
});
|
|
20287
|
+
const onPaginationModelChange = model => {
|
|
20288
|
+
if (propsOnPaginationModelChange) {
|
|
20289
|
+
propsOnPaginationModelChange(model, undefined);
|
|
20290
|
+
} else {
|
|
20291
|
+
setPaginationModel(model);
|
|
20292
|
+
}
|
|
20293
|
+
};
|
|
20294
|
+
if (!Array.isArray(rows)) {
|
|
20295
|
+
return null;
|
|
20296
|
+
}
|
|
20297
|
+
return /*#__PURE__*/React__default.createElement(StyledDataGrid, {
|
|
20298
|
+
ref: datagridRef,
|
|
20299
|
+
className: classNames(DataGrid.className, className),
|
|
20300
|
+
$height: height
|
|
20301
|
+
}, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$1({
|
|
20302
|
+
apiRef: apiRef,
|
|
20303
|
+
autoHeight: autoHeight,
|
|
20304
|
+
checkboxSelectionVisibleOnly: Boolean(pagination)
|
|
20305
|
+
}, forwardedProps, {
|
|
20306
|
+
rows: rows,
|
|
20307
|
+
filterModel: filterModel,
|
|
20308
|
+
onFilterModelChange: onFilterModelChange,
|
|
20309
|
+
pagination: pagination,
|
|
20310
|
+
slots: _objectSpread2(_objectSpread2({
|
|
20311
|
+
baseButton: BaseButton,
|
|
20312
|
+
baseCheckbox: BaseCheckbox,
|
|
20313
|
+
// baseTextField,
|
|
20314
|
+
basePopper: BasePopper,
|
|
20315
|
+
columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20316
|
+
displayName: "ColumnFilteredIcon"
|
|
20317
|
+
})),
|
|
20318
|
+
columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20319
|
+
displayName: "ColumnSelectorIcon"
|
|
20320
|
+
})),
|
|
20321
|
+
columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20322
|
+
displayName: "ColumnSortedAscendingIcon"
|
|
20323
|
+
})),
|
|
20324
|
+
columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20325
|
+
displayName: "ColumnSortedDescendingIcon"
|
|
20326
|
+
})),
|
|
20327
|
+
densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20328
|
+
displayName: "DensityCompactIcon"
|
|
20329
|
+
})),
|
|
20330
|
+
densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20331
|
+
displayName: "DensityStandardIcon"
|
|
20332
|
+
})),
|
|
20333
|
+
densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20334
|
+
displayName: "DensityComfortableIcon"
|
|
20335
|
+
})),
|
|
20336
|
+
detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20337
|
+
displayName: "DetailPanelCollapseIcon"
|
|
20338
|
+
})),
|
|
20339
|
+
detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20340
|
+
displayName: "DetailPanelExpandIcon"
|
|
20341
|
+
})),
|
|
20342
|
+
exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20343
|
+
displayName: "ExportIcon"
|
|
20344
|
+
})),
|
|
20345
|
+
openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
|
|
20346
|
+
displayName: "OpenFilterButtonIcon"
|
|
20347
|
+
}))
|
|
20348
|
+
}, slots), !hideToolbar && {
|
|
20349
|
+
toolbar: props => {
|
|
20350
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RenderedToolbar, props), pagination ? /*#__PURE__*/React__default.createElement(Pagination, {
|
|
20351
|
+
selectionStatus: selectionStatus.current,
|
|
20352
|
+
apiRef: apiRef,
|
|
20353
|
+
paginationModel: paginationModel,
|
|
20354
|
+
onPaginationModelChange: onPaginationModelChange
|
|
20355
|
+
}) : null);
|
|
20356
|
+
}
|
|
20357
|
+
}),
|
|
20358
|
+
slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
|
|
20359
|
+
toolbar: _objectSpread2(_objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar), {}, {
|
|
20360
|
+
filterModel,
|
|
20361
|
+
onFilterModelChange
|
|
20362
|
+
})
|
|
20363
|
+
}),
|
|
20364
|
+
paginationModel: paginationModel,
|
|
20365
|
+
onPaginationModelChange: onPaginationModelChange,
|
|
20366
|
+
onRowSelectionModelChange: (newSelectionModel, details) => {
|
|
20367
|
+
if (pagination) {
|
|
20368
|
+
if (selectionStatus.current.type === 'table' && newSelectionModel.length === apiRef.current.getRowsCount() - gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state).length) {
|
|
20369
|
+
setTimeout(() => {
|
|
20370
|
+
apiRef.current.selectRows([], true, true);
|
|
20371
|
+
}, 0);
|
|
20372
|
+
}
|
|
20373
|
+
if (newSelectionModel.length === gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state).length && gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state).length < apiRef.current.getRowsCount()) {
|
|
20374
|
+
selectionStatus.current = {
|
|
20375
|
+
type: 'page',
|
|
20376
|
+
count: newSelectionModel.length
|
|
20377
|
+
};
|
|
20378
|
+
} else if (newSelectionModel.length === apiRef.current.getRowsCount() && gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state).length < apiRef.current.getRowsCount()) {
|
|
20379
|
+
selectionStatus.current = {
|
|
20380
|
+
type: 'table',
|
|
20381
|
+
count: newSelectionModel.length
|
|
20382
|
+
};
|
|
20383
|
+
} else if (newSelectionModel.length > 0) {
|
|
20384
|
+
selectionStatus.current = {
|
|
20385
|
+
type: 'other',
|
|
20386
|
+
count: newSelectionModel.length
|
|
20387
|
+
};
|
|
20388
|
+
} else {
|
|
20389
|
+
selectionStatus.current = {
|
|
20390
|
+
type: 'none',
|
|
20391
|
+
count: newSelectionModel.length
|
|
20392
|
+
};
|
|
20393
|
+
}
|
|
20394
|
+
}
|
|
20395
|
+
onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
|
|
20396
|
+
},
|
|
20397
|
+
sx: _objectSpread2(_objectSpread2({}, sx), {}, {
|
|
20398
|
+
'.MuiDataGrid-columnHeaders': {
|
|
20399
|
+
flexDirection: 'column',
|
|
20400
|
+
alignItems: 'normal'
|
|
20401
|
+
}
|
|
17651
20402
|
})
|
|
17652
20403
|
})));
|
|
17653
20404
|
});
|
|
@@ -17713,5 +20464,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17713
20464
|
TextCell.className = CLASSNAME;
|
|
17714
20465
|
TextCell.displayName = COMPONENT_NAME;
|
|
17715
20466
|
|
|
17716
|
-
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
|
|
20467
|
+
export { CONTAINS_ANY_OF, DETAIL_PANEL_TOGGLE_COL_DEF, DataGrid, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF, TextCell, Toolbar$2 as Toolbar, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators };
|
|
17717
20468
|
//# sourceMappingURL=index.js.map
|