@redsift/table 11.11.0-muiv7 → 11.11.0-muiv8-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_internal/BaseComponents.js +1 -1
- package/_internal/BaseIconButton.js +117 -0
- package/_internal/BaseIconButton.js.map +1 -0
- package/_internal/DataGrid2.js +48 -32
- package/_internal/DataGrid2.js.map +1 -1
- package/_internal/Pagination.js +1 -1
- package/_internal/{ControlledPagination.js → ServerSideControlledPagination.js} +7533 -740
- package/_internal/ServerSideControlledPagination.js.map +1 -0
- package/_internal/StatefulDataGrid2.js +103 -47
- package/_internal/StatefulDataGrid2.js.map +1 -1
- package/_internal/ToolbarWrapper2.js +1 -1
- package/_internal/useControlledDatagridState.js +76 -115
- package/_internal/useControlledDatagridState.js.map +1 -1
- package/index.d.ts +284 -80
- package/index.js +2 -2
- package/package.json +7 -8
- package/_internal/BasePopper.js +0 -2452
- package/_internal/BasePopper.js.map +0 -1
- package/_internal/ControlledPagination.js.map +0 -1
- package/_internal/Portal.js +0 -6563
- package/_internal/Portal.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
|
-
import { S as ServerSideControlledPagination, C as ControlledPagination } from './
|
|
3
|
+
import { S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
|
|
4
4
|
|
|
5
5
|
const _excluded = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"];
|
|
6
6
|
const ToolbarWrapper = _ref => {
|
|
@@ -1,42 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
|
-
import { P as PropTypes, R as RtlProvider,
|
|
3
|
+
import { P as PropTypes, J as exactProp, K as useTheme$1, A as useId, L as useEnhancedEffect, M as GlobalStyles, R as RtlProvider, N as DefaultPropsProvider, Q as GlobalStyles$1, T as THEME_ID, j as createTheme, U as createTypography, e as styleFunctionSx } from './ServerSideControlledPagination.js';
|
|
4
4
|
import { j as jsxRuntimeExports } from './jsx-runtime.js';
|
|
5
|
-
import { k as useTheme$1, G as GlobalStyles, l as GlobalStyles$1 } from './ControlledPagination.js';
|
|
6
5
|
import { ThemeContext as ThemeContext$2 } from '@emotion/react';
|
|
7
6
|
import styled, { css } from 'styled-components';
|
|
8
7
|
|
|
9
|
-
/**
|
|
10
|
-
* A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
|
|
11
|
-
* This is useful for effects that are only needed for client-side rendering but not for SSR.
|
|
12
|
-
*
|
|
13
|
-
* Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
|
|
14
|
-
* and confirm it doesn't apply to your use-case.
|
|
15
|
-
*/
|
|
16
|
-
const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
17
|
-
var useEnhancedEffect$1 = useEnhancedEffect;
|
|
18
|
-
|
|
19
|
-
// This module is based on https://github.com/airbnb/prop-types-exact repository.
|
|
20
|
-
// However, in order to reduce the number of dependencies and to remove some extra safe checks
|
|
21
|
-
// the module was forked.
|
|
22
|
-
|
|
23
|
-
const specialProperty$1 = 'exact-prop: \u200b';
|
|
24
|
-
function exactProp$1(propTypes) {
|
|
25
|
-
if (process.env.NODE_ENV === 'production') {
|
|
26
|
-
return propTypes;
|
|
27
|
-
}
|
|
28
|
-
return {
|
|
29
|
-
...propTypes,
|
|
30
|
-
[specialProperty$1]: props => {
|
|
31
|
-
const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
|
|
32
|
-
if (unsupportedProps.length > 0) {
|
|
33
|
-
return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
|
|
34
|
-
}
|
|
35
|
-
return null;
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
8
|
const ThemeContext = /*#__PURE__*/React.createContext(null);
|
|
41
9
|
if (process.env.NODE_ENV !== 'production') {
|
|
42
10
|
ThemeContext.displayName = 'ThemeContext';
|
|
@@ -113,71 +81,7 @@ process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
|
|
|
113
81
|
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
|
|
114
82
|
} : void 0;
|
|
115
83
|
if (process.env.NODE_ENV !== 'production') {
|
|
116
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
// This module is based on https://github.com/airbnb/prop-types-exact repository.
|
|
120
|
-
// However, in order to reduce the number of dependencies and to remove some extra safe checks
|
|
121
|
-
// the module was forked.
|
|
122
|
-
|
|
123
|
-
const specialProperty = 'exact-prop: \u200b';
|
|
124
|
-
function exactProp(propTypes) {
|
|
125
|
-
if (process.env.NODE_ENV === 'production') {
|
|
126
|
-
return propTypes;
|
|
127
|
-
}
|
|
128
|
-
return {
|
|
129
|
-
...propTypes,
|
|
130
|
-
[specialProperty]: props => {
|
|
131
|
-
const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
|
|
132
|
-
if (unsupportedProps.length > 0) {
|
|
133
|
-
return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
|
|
134
|
-
}
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
let globalId = 0;
|
|
141
|
-
|
|
142
|
-
// TODO React 17: Remove `useGlobalId` once React 17 support is removed
|
|
143
|
-
function useGlobalId(idOverride) {
|
|
144
|
-
const [defaultId, setDefaultId] = React.useState(idOverride);
|
|
145
|
-
const id = idOverride || defaultId;
|
|
146
|
-
React.useEffect(() => {
|
|
147
|
-
if (defaultId == null) {
|
|
148
|
-
// Fallback to this default id when possible.
|
|
149
|
-
// Use the incrementing value for client-side rendering only.
|
|
150
|
-
// We can't use it server-side.
|
|
151
|
-
// If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
|
|
152
|
-
globalId += 1;
|
|
153
|
-
setDefaultId(`mui-${globalId}`);
|
|
154
|
-
}
|
|
155
|
-
}, [defaultId]);
|
|
156
|
-
return id;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
|
|
160
|
-
const safeReact = {
|
|
161
|
-
...React
|
|
162
|
-
};
|
|
163
|
-
const maybeReactUseId = safeReact.useId;
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
*
|
|
167
|
-
* @example <div id={useId()} />
|
|
168
|
-
* @param idOverride
|
|
169
|
-
* @returns {string}
|
|
170
|
-
*/
|
|
171
|
-
function useId(idOverride) {
|
|
172
|
-
// React.useId() is only available from React 17.0.0.
|
|
173
|
-
if (maybeReactUseId !== undefined) {
|
|
174
|
-
const reactId = maybeReactUseId();
|
|
175
|
-
return idOverride ?? reactId;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
// TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
|
|
179
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
|
|
180
|
-
return useGlobalId(idOverride);
|
|
84
|
+
process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
|
|
181
85
|
}
|
|
182
86
|
|
|
183
87
|
function useLayerOrder(theme) {
|
|
@@ -195,7 +99,7 @@ function useLayerOrder(theme) {
|
|
|
195
99
|
} else {
|
|
196
100
|
layerOrder = `@layer ${layerOrder};`;
|
|
197
101
|
}
|
|
198
|
-
useEnhancedEffect
|
|
102
|
+
useEnhancedEffect(() => {
|
|
199
103
|
const head = document.querySelector('head');
|
|
200
104
|
if (!head) {
|
|
201
105
|
return;
|
|
@@ -309,9 +213,6 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
309
213
|
process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
|
|
310
214
|
}
|
|
311
215
|
|
|
312
|
-
/**
|
|
313
|
-
* Split this component for RSC import
|
|
314
|
-
*/
|
|
315
216
|
const DEFAULT_MODE_STORAGE_KEY = 'mode';
|
|
316
217
|
const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
|
|
317
218
|
const DEFAULT_ATTRIBUTE = 'data-color-scheme';
|
|
@@ -339,7 +240,7 @@ function InitColorSchemeScript(options) {
|
|
|
339
240
|
setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
|
|
340
241
|
${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
|
|
341
242
|
}
|
|
342
|
-
const matches = attribute.match(/\[([
|
|
243
|
+
const matches = attribute.match(/\[([^[\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
|
|
343
244
|
if (matches) {
|
|
344
245
|
const [attr, value] = matches[1].split('=');
|
|
345
246
|
if (!value) {
|
|
@@ -348,7 +249,7 @@ function InitColorSchemeScript(options) {
|
|
|
348
249
|
}
|
|
349
250
|
setter += `
|
|
350
251
|
${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
|
|
351
|
-
} else {
|
|
252
|
+
} else if (attribute !== '.%s') {
|
|
352
253
|
setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
|
|
353
254
|
}
|
|
354
255
|
return /*#__PURE__*/jsxRuntimeExports.jsx("script", {
|
|
@@ -710,6 +611,7 @@ function createCssVarsProvider(options) {
|
|
|
710
611
|
disableNestedContext = false,
|
|
711
612
|
disableStyleSheetGeneration = false,
|
|
712
613
|
defaultMode: initialMode = 'system',
|
|
614
|
+
forceThemeRerender = false,
|
|
713
615
|
noSsr
|
|
714
616
|
} = props;
|
|
715
617
|
const hasMounted = React.useRef(false);
|
|
@@ -761,10 +663,18 @@ function createCssVarsProvider(options) {
|
|
|
761
663
|
mode = ctx.mode;
|
|
762
664
|
colorScheme = ctx.colorScheme;
|
|
763
665
|
}
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
666
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
667
|
+
if (forceThemeRerender && !restThemeProp.vars) {
|
|
668
|
+
console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
|
|
669
|
+
}
|
|
670
|
+
}
|
|
767
671
|
|
|
672
|
+
// `colorScheme` is undefined on the server and hydration phase
|
|
673
|
+
let calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
|
|
674
|
+
if (restThemeProp.vars && !forceThemeRerender) {
|
|
675
|
+
calculatedColorScheme = restThemeProp.defaultColorScheme;
|
|
676
|
+
}
|
|
677
|
+
const memoTheme = React.useMemo(() => {
|
|
768
678
|
// 2. get the `vars` object that refers to the CSS custom properties
|
|
769
679
|
const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
|
|
770
680
|
|
|
@@ -799,12 +709,12 @@ function createCssVarsProvider(options) {
|
|
|
799
709
|
}
|
|
800
710
|
}
|
|
801
711
|
return resolveTheme ? resolveTheme(theme) : theme;
|
|
802
|
-
}, [restThemeProp,
|
|
712
|
+
}, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
|
|
803
713
|
|
|
804
714
|
// 5. Declaring effects
|
|
805
715
|
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
|
|
806
716
|
const colorSchemeSelector = restThemeProp.colorSchemeSelector;
|
|
807
|
-
useEnhancedEffect
|
|
717
|
+
useEnhancedEffect(() => {
|
|
808
718
|
if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
|
|
809
719
|
const selector = colorSchemeSelector;
|
|
810
720
|
let rule = colorSchemeSelector;
|
|
@@ -937,13 +847,17 @@ function createCssVarsProvider(options) {
|
|
|
937
847
|
* The document to attach the attribute to.
|
|
938
848
|
*/
|
|
939
849
|
documentNode: PropTypes.any,
|
|
850
|
+
/**
|
|
851
|
+
* If `true`, theme values are recalculated when the mode changes.
|
|
852
|
+
*/
|
|
853
|
+
forceThemeRerender: PropTypes.bool,
|
|
940
854
|
/**
|
|
941
855
|
* The key in the local storage used to store current color scheme.
|
|
942
856
|
*/
|
|
943
857
|
modeStorageKey: PropTypes.string,
|
|
944
858
|
/**
|
|
945
859
|
* If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
|
|
946
|
-
* You should use this option in
|
|
860
|
+
* You should use this option in conjunction with `InitColorSchemeScript` component.
|
|
947
861
|
*/
|
|
948
862
|
noSsr: PropTypes.bool,
|
|
949
863
|
/**
|
|
@@ -996,6 +910,53 @@ const defaultConfig = {
|
|
|
996
910
|
defaultDarkColorScheme: 'dark',
|
|
997
911
|
modeStorageKey: 'mui-mode'
|
|
998
912
|
};
|
|
913
|
+
process.env.NODE_ENV !== "production" ? {
|
|
914
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
915
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
916
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
917
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
918
|
+
/**
|
|
919
|
+
* DOM attribute for applying a color scheme.
|
|
920
|
+
* @default 'data-mui-color-scheme'
|
|
921
|
+
* @example '.mode-%s' // for class based color scheme
|
|
922
|
+
* @example '[data-mode-%s]' // for data-attribute without '='
|
|
923
|
+
*/
|
|
924
|
+
attribute: PropTypes.string,
|
|
925
|
+
/**
|
|
926
|
+
* The node (provided as string) used to attach the color-scheme attribute.
|
|
927
|
+
* @default 'document.documentElement'
|
|
928
|
+
*/
|
|
929
|
+
colorSchemeNode: PropTypes.string,
|
|
930
|
+
/**
|
|
931
|
+
* localStorage key used to store `colorScheme`.
|
|
932
|
+
* @default 'mui-color-scheme'
|
|
933
|
+
*/
|
|
934
|
+
colorSchemeStorageKey: PropTypes.string,
|
|
935
|
+
/**
|
|
936
|
+
* The default color scheme to be used in dark mode.
|
|
937
|
+
* @default 'dark'
|
|
938
|
+
*/
|
|
939
|
+
defaultDarkColorScheme: PropTypes.string,
|
|
940
|
+
/**
|
|
941
|
+
* The default color scheme to be used in light mode.
|
|
942
|
+
* @default 'light'
|
|
943
|
+
*/
|
|
944
|
+
defaultLightColorScheme: PropTypes.string,
|
|
945
|
+
/**
|
|
946
|
+
* The default mode when the storage is empty (user's first visit).
|
|
947
|
+
* @default 'system'
|
|
948
|
+
*/
|
|
949
|
+
defaultMode: PropTypes.oneOf(['dark', 'light', 'system']),
|
|
950
|
+
/**
|
|
951
|
+
* localStorage key used to store `mode`.
|
|
952
|
+
* @default 'mui-mode'
|
|
953
|
+
*/
|
|
954
|
+
modeStorageKey: PropTypes.string,
|
|
955
|
+
/**
|
|
956
|
+
* Nonce string to pass to the inline script for CSP headers.
|
|
957
|
+
*/
|
|
958
|
+
nonce: PropTypes.string
|
|
959
|
+
} : void 0;
|
|
999
960
|
|
|
1000
961
|
const {
|
|
1001
962
|
CssVarsProvider: InternalCssVarsProvider,
|
|
@@ -1087,22 +1048,22 @@ function ThemeProvider({
|
|
|
1087
1048
|
});
|
|
1088
1049
|
}
|
|
1089
1050
|
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1051
|
+
/**
|
|
1052
|
+
* @ignore - do not document.
|
|
1053
|
+
*/
|
|
1093
1054
|
|
|
1094
1055
|
// Store the license information in a global, so it can be shared
|
|
1095
1056
|
// when module duplication occurs. The duplication of the modules can happen
|
|
1096
1057
|
// if using multiple version of MUI X at the same time of the bundler
|
|
1097
1058
|
// decide to duplicate to improve the size of the chunks.
|
|
1098
1059
|
// eslint-disable-next-line no-underscore-dangle
|
|
1099
|
-
|
|
1060
|
+
globalThis.__MUI_LICENSE_INFO__ = globalThis.__MUI_LICENSE_INFO__ || {
|
|
1100
1061
|
key: undefined
|
|
1101
1062
|
};
|
|
1102
1063
|
class LicenseInfo {
|
|
1103
1064
|
static getLicenseInfo() {
|
|
1104
1065
|
// eslint-disable-next-line no-underscore-dangle
|
|
1105
|
-
return
|
|
1066
|
+
return globalThis.__MUI_LICENSE_INFO__;
|
|
1106
1067
|
}
|
|
1107
1068
|
static getLicenseKey() {
|
|
1108
1069
|
return LicenseInfo.getLicenseInfo().key;
|