@mui/system 7.0.0 → 7.0.2
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/CHANGELOG.md +100 -0
- package/cssVars/cssVarsParser.d.ts +1 -1
- package/esm/cssVars/cssVarsParser.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/memoTheme.d.ts +1 -1
- package/esm/useThemeProps/getThemeProps.d.ts +0 -5
- package/esm/version/index.js +2 -2
- package/index.js +1 -1
- package/memoTheme.d.ts +1 -1
- package/modern/cssVars/cssVarsParser.d.ts +1 -1
- package/modern/memoTheme.d.ts +1 -1
- package/modern/useThemeProps/getThemeProps.d.ts +0 -5
- package/package.json +6 -14
- package/useThemeProps/getThemeProps.d.ts +0 -5
- package/version/index.js +2 -2
- package/modern/Box/Box.js +0 -30
- package/modern/Box/boxClasses.js +0 -3
- package/modern/Box/index.js +0 -3
- package/modern/Container/Container.js +0 -61
- package/modern/Container/ContainerProps.js +0 -1
- package/modern/Container/containerClasses.js +0 -7
- package/modern/Container/createContainer.js +0 -149
- package/modern/Container/index.js +0 -3
- package/modern/DefaultPropsProvider/DefaultPropsProvider.js +0 -64
- package/modern/DefaultPropsProvider/index.js +0 -1
- package/modern/GlobalStyles/GlobalStyles.js +0 -37
- package/modern/GlobalStyles/index.js +0 -2
- package/modern/Grid/Grid.js +0 -106
- package/modern/Grid/GridProps.js +0 -1
- package/modern/Grid/createGrid.js +0 -155
- package/modern/Grid/deleteLegacyGridProps.js +0 -41
- package/modern/Grid/gridClasses.js +0 -19
- package/modern/Grid/gridGenerator.js +0 -193
- package/modern/Grid/index.js +0 -7
- package/modern/Grid/traverseBreakpoints.js +0 -42
- package/modern/InitColorSchemeScript/InitColorSchemeScript.js +0 -78
- package/modern/InitColorSchemeScript/index.js +0 -1
- package/modern/RtlProvider/index.js +0 -24
- package/modern/Stack/Stack.js +0 -62
- package/modern/Stack/StackProps.js +0 -1
- package/modern/Stack/createStack.js +0 -173
- package/modern/Stack/index.js +0 -5
- package/modern/Stack/stackClasses.js +0 -7
- package/modern/ThemeProvider/ThemeProvider.js +0 -97
- package/modern/ThemeProvider/index.js +0 -1
- package/modern/borders/borders.js +0 -49
- package/modern/borders/index.js +0 -2
- package/modern/breakpoints/breakpoints.js +0 -171
- package/modern/breakpoints/index.js +0 -2
- package/modern/colorManipulator/colorManipulator.js +0 -349
- package/modern/colorManipulator/index.js +0 -1
- package/modern/compose/compose.js +0 -24
- package/modern/compose/index.js +0 -1
- package/modern/createBox/createBox.js +0 -35
- package/modern/createBox/index.js +0 -1
- package/modern/createBreakpoints/createBreakpoints.js +0 -81
- package/modern/createBreakpoints/index.js +0 -3
- package/modern/createStyled/createStyled.js +0 -276
- package/modern/createStyled/index.js +0 -2
- package/modern/createTheme/applyStyles.js +0 -87
- package/modern/createTheme/createSpacing.js +0 -31
- package/modern/createTheme/createTheme.js +0 -49
- package/modern/createTheme/index.js +0 -3
- package/modern/createTheme/shape.js +0 -4
- package/modern/cssContainerQueries/cssContainerQueries.js +0 -69
- package/modern/cssContainerQueries/index.js +0 -2
- package/modern/cssGrid/cssGrid.js +0 -85
- package/modern/cssGrid/index.js +0 -2
- package/modern/cssVars/createCssVarsProvider.js +0 -338
- package/modern/cssVars/createCssVarsTheme.js +0 -21
- package/modern/cssVars/createGetCssVar.js +0 -22
- package/modern/cssVars/cssVarsParser.js +0 -129
- package/modern/cssVars/getColorSchemeSelector.js +0 -26
- package/modern/cssVars/index.js +0 -5
- package/modern/cssVars/localStorageManager.js +0 -51
- package/modern/cssVars/prepareCssVars.js +0 -153
- package/modern/cssVars/prepareTypographyVars.js +0 -11
- package/modern/cssVars/useCurrentColorScheme.js +0 -228
- package/modern/display/display.js +0 -27
- package/modern/display/index.js +0 -2
- package/modern/flexbox/flexbox.js +0 -43
- package/modern/flexbox/index.js +0 -2
- package/modern/getThemeValue/getThemeValue.js +0 -51
- package/modern/getThemeValue/index.js +0 -2
- package/modern/index.js +0 -75
- package/modern/memoTheme.js +0 -28
- package/modern/memoize/index.js +0 -1
- package/modern/memoize/memoize.js +0 -9
- package/modern/merge/index.js +0 -1
- package/modern/merge/merge.js +0 -10
- package/modern/package.json +0 -1
- package/modern/palette/index.js +0 -2
- package/modern/palette/palette.js +0 -26
- package/modern/positions/index.js +0 -2
- package/modern/positions/positions.js +0 -22
- package/modern/preprocessStyles.js +0 -25
- package/modern/propsToClassKey/index.js +0 -1
- package/modern/propsToClassKey/propsToClassKey.js +0 -25
- package/modern/responsivePropType/index.js +0 -1
- package/modern/responsivePropType/responsivePropType.js +0 -3
- package/modern/shadows/index.js +0 -1
- package/modern/shadows/shadows.js +0 -6
- package/modern/sizing/index.js +0 -2
- package/modern/sizing/sizing.js +0 -64
- package/modern/spacing/index.js +0 -2
- package/modern/spacing/spacing.js +0 -157
- package/modern/style/index.js +0 -2
- package/modern/style/style.js +0 -75
- package/modern/styleFunctionSx/AliasesCSSProperties.js +0 -1
- package/modern/styleFunctionSx/OverwriteCSSProperties.js +0 -1
- package/modern/styleFunctionSx/StandardCssProperties.js +0 -1
- package/modern/styleFunctionSx/defaultSxConfig.js +0 -294
- package/modern/styleFunctionSx/extendSxProp.js +0 -51
- package/modern/styleFunctionSx/index.js +0 -4
- package/modern/styleFunctionSx/styleFunctionSx.js +0 -127
- package/modern/styled/index.js +0 -1
- package/modern/styled/styled.js +0 -3
- package/modern/typography/index.js +0 -2
- package/modern/typography/typography.js +0 -37
- package/modern/useMediaQuery/index.js +0 -2
- package/modern/useMediaQuery/useMediaQuery.js +0 -118
- package/modern/useTheme/index.js +0 -2
- package/modern/useTheme/useTheme.js +0 -9
- package/modern/useThemeProps/getThemeProps.js +0 -12
- package/modern/useThemeProps/index.js +0 -2
- package/modern/useThemeProps/useThemeProps.js +0 -20
- package/modern/useThemeWithoutDefault/index.js +0 -1
- package/modern/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -12
- package/modern/version/index.js +0 -6
- package/tsconfig.build.tsbuildinfo +0 -1
package/modern/Grid/Grid.js
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
import createGrid from "./createGrid.js";
|
|
5
|
-
/**
|
|
6
|
-
*
|
|
7
|
-
* Demos:
|
|
8
|
-
*
|
|
9
|
-
* - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/)
|
|
10
|
-
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
|
|
11
|
-
*
|
|
12
|
-
* API:
|
|
13
|
-
*
|
|
14
|
-
* - [Grid API](https://mui.com/system/api/grid/)
|
|
15
|
-
*/
|
|
16
|
-
const Grid = createGrid();
|
|
17
|
-
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
|
|
18
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
19
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
20
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
21
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
22
|
-
/**
|
|
23
|
-
* The content of the component.
|
|
24
|
-
*/
|
|
25
|
-
children: PropTypes.node,
|
|
26
|
-
/**
|
|
27
|
-
* The number of columns.
|
|
28
|
-
* @default 12
|
|
29
|
-
*/
|
|
30
|
-
columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
|
|
31
|
-
/**
|
|
32
|
-
* Defines the horizontal space between the type `item` components.
|
|
33
|
-
* It overrides the value of the `spacing` prop.
|
|
34
|
-
*/
|
|
35
|
-
columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
36
|
-
/**
|
|
37
|
-
* If `true`, the component will have the flex *container* behavior.
|
|
38
|
-
* You should be wrapping *items* with a *container*.
|
|
39
|
-
* @default false
|
|
40
|
-
*/
|
|
41
|
-
container: PropTypes.bool,
|
|
42
|
-
/**
|
|
43
|
-
* Defines the `flex-direction` style property.
|
|
44
|
-
* It is applied for all screen sizes.
|
|
45
|
-
* @default 'row'
|
|
46
|
-
*/
|
|
47
|
-
direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
|
48
|
-
/**
|
|
49
|
-
* Defines the offset value for the type `item` components.
|
|
50
|
-
*/
|
|
51
|
-
offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
|
|
52
|
-
/**
|
|
53
|
-
* Defines the vertical space between the type `item` components.
|
|
54
|
-
* It overrides the value of the `spacing` prop.
|
|
55
|
-
*/
|
|
56
|
-
rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
57
|
-
/**
|
|
58
|
-
* Defines the size of the the type `item` components.
|
|
59
|
-
*/
|
|
60
|
-
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
|
|
61
|
-
/**
|
|
62
|
-
* Defines the space between the type `item` components.
|
|
63
|
-
* It can only be used on a type `container` component.
|
|
64
|
-
* @default 0
|
|
65
|
-
*/
|
|
66
|
-
spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
67
|
-
/**
|
|
68
|
-
* @ignore
|
|
69
|
-
*/
|
|
70
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
71
|
-
/**
|
|
72
|
-
* @internal
|
|
73
|
-
* The level of the grid starts from `0` and increases when the grid nests
|
|
74
|
-
* inside another grid. Nesting is defined as a container Grid being a direct
|
|
75
|
-
* child of a container Grid.
|
|
76
|
-
*
|
|
77
|
-
* ```js
|
|
78
|
-
* <Grid container> // level 0
|
|
79
|
-
* <Grid container> // level 1
|
|
80
|
-
* <Grid container> // level 2
|
|
81
|
-
* ```
|
|
82
|
-
*
|
|
83
|
-
* Only consecutive grid is considered nesting. A grid container will start at
|
|
84
|
-
* `0` if there are non-Grid container element above it.
|
|
85
|
-
*
|
|
86
|
-
* ```js
|
|
87
|
-
* <Grid container> // level 0
|
|
88
|
-
* <div>
|
|
89
|
-
* <Grid container> // level 0
|
|
90
|
-
* ```
|
|
91
|
-
*
|
|
92
|
-
* ```js
|
|
93
|
-
* <Grid container> // level 0
|
|
94
|
-
* <Grid>
|
|
95
|
-
* <Grid container> // level 0
|
|
96
|
-
* ```
|
|
97
|
-
*/
|
|
98
|
-
unstable_level: PropTypes.number,
|
|
99
|
-
/**
|
|
100
|
-
* Defines the `flex-wrap` style property.
|
|
101
|
-
* It's applied for all screen sizes.
|
|
102
|
-
* @default 'wrap'
|
|
103
|
-
*/
|
|
104
|
-
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
|
|
105
|
-
} : void 0;
|
|
106
|
-
export default Grid;
|
package/modern/Grid/GridProps.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
|
-
import isMuiElement from '@mui/utils/isMuiElement';
|
|
7
|
-
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
8
|
-
import composeClasses from '@mui/utils/composeClasses';
|
|
9
|
-
import systemStyled from "../styled/index.js";
|
|
10
|
-
import useThemePropsSystem from "../useThemeProps/index.js";
|
|
11
|
-
import useThemeSystem from "../useTheme/index.js";
|
|
12
|
-
import { extendSxProp } from "../styleFunctionSx/index.js";
|
|
13
|
-
import createTheme from "../createTheme/index.js";
|
|
14
|
-
import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
|
|
15
|
-
import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
|
|
16
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
-
const defaultTheme = createTheme();
|
|
18
|
-
|
|
19
|
-
// widening Theme to any so that the consumer can own the theme structure.
|
|
20
|
-
const defaultCreateStyledComponent = systemStyled('div', {
|
|
21
|
-
name: 'MuiGrid',
|
|
22
|
-
slot: 'Root',
|
|
23
|
-
overridesResolver: (props, styles) => styles.root
|
|
24
|
-
});
|
|
25
|
-
function useThemePropsDefault(props) {
|
|
26
|
-
return useThemePropsSystem({
|
|
27
|
-
props,
|
|
28
|
-
name: 'MuiGrid',
|
|
29
|
-
defaultTheme
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
export default function createGrid(options = {}) {
|
|
33
|
-
const {
|
|
34
|
-
// This will allow adding custom styled fn (for example for custom sx style function)
|
|
35
|
-
createStyledComponent = defaultCreateStyledComponent,
|
|
36
|
-
useThemeProps = useThemePropsDefault,
|
|
37
|
-
useTheme = useThemeSystem,
|
|
38
|
-
componentName = 'MuiGrid'
|
|
39
|
-
} = options;
|
|
40
|
-
const useUtilityClasses = (ownerState, theme) => {
|
|
41
|
-
const {
|
|
42
|
-
container,
|
|
43
|
-
direction,
|
|
44
|
-
spacing,
|
|
45
|
-
wrap,
|
|
46
|
-
size
|
|
47
|
-
} = ownerState;
|
|
48
|
-
const slots = {
|
|
49
|
-
root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
|
|
50
|
-
};
|
|
51
|
-
return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
|
|
52
|
-
};
|
|
53
|
-
function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
|
|
54
|
-
const parsedProp = {};
|
|
55
|
-
if (propValue === null) {
|
|
56
|
-
return parsedProp;
|
|
57
|
-
}
|
|
58
|
-
if (Array.isArray(propValue)) {
|
|
59
|
-
propValue.forEach((value, index) => {
|
|
60
|
-
if (value !== null && shouldUseValue(value) && breakpoints.keys[index]) {
|
|
61
|
-
parsedProp[breakpoints.keys[index]] = value;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
} else if (typeof propValue === 'object') {
|
|
65
|
-
Object.keys(propValue).forEach(key => {
|
|
66
|
-
const value = propValue[key];
|
|
67
|
-
if (value !== null && value !== undefined && shouldUseValue(value)) {
|
|
68
|
-
parsedProp[key] = value;
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
} else {
|
|
72
|
-
parsedProp[breakpoints.keys[0]] = propValue;
|
|
73
|
-
}
|
|
74
|
-
return parsedProp;
|
|
75
|
-
}
|
|
76
|
-
const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
|
|
77
|
-
const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
|
|
78
|
-
const theme = useTheme();
|
|
79
|
-
const themeProps = useThemeProps(inProps);
|
|
80
|
-
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
|
|
81
|
-
|
|
82
|
-
// TODO v8: Remove when removing the legacy Grid component
|
|
83
|
-
deleteLegacyGridProps(props, theme.breakpoints);
|
|
84
|
-
const {
|
|
85
|
-
className,
|
|
86
|
-
children,
|
|
87
|
-
columns: columnsProp = 12,
|
|
88
|
-
container = false,
|
|
89
|
-
component = 'div',
|
|
90
|
-
direction = 'row',
|
|
91
|
-
wrap = 'wrap',
|
|
92
|
-
size: sizeProp = {},
|
|
93
|
-
offset: offsetProp = {},
|
|
94
|
-
spacing: spacingProp = 0,
|
|
95
|
-
rowSpacing: rowSpacingProp = spacingProp,
|
|
96
|
-
columnSpacing: columnSpacingProp = spacingProp,
|
|
97
|
-
unstable_level: level = 0,
|
|
98
|
-
...other
|
|
99
|
-
} = props;
|
|
100
|
-
const size = parseResponsiveProp(sizeProp, theme.breakpoints, val => val !== false);
|
|
101
|
-
const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
|
|
102
|
-
const columns = inProps.columns ?? (level ? undefined : columnsProp);
|
|
103
|
-
const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
|
|
104
|
-
const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
|
|
105
|
-
const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
|
|
106
|
-
const ownerState = {
|
|
107
|
-
...props,
|
|
108
|
-
level,
|
|
109
|
-
columns,
|
|
110
|
-
container,
|
|
111
|
-
direction,
|
|
112
|
-
wrap,
|
|
113
|
-
spacing,
|
|
114
|
-
rowSpacing,
|
|
115
|
-
columnSpacing,
|
|
116
|
-
size,
|
|
117
|
-
offset
|
|
118
|
-
};
|
|
119
|
-
const classes = useUtilityClasses(ownerState, theme);
|
|
120
|
-
return /*#__PURE__*/_jsx(GridRoot, {
|
|
121
|
-
ref: ref,
|
|
122
|
-
as: component,
|
|
123
|
-
ownerState: ownerState,
|
|
124
|
-
className: clsx(classes.root, className),
|
|
125
|
-
...other,
|
|
126
|
-
children: React.Children.map(children, child => {
|
|
127
|
-
if (/*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid']) && container && child.props.container) {
|
|
128
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
129
|
-
unstable_level: child.props?.unstable_level ?? level + 1
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
return child;
|
|
133
|
-
})
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
|
|
137
|
-
children: PropTypes.node,
|
|
138
|
-
className: PropTypes.string,
|
|
139
|
-
columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
|
|
140
|
-
columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
141
|
-
component: PropTypes.elementType,
|
|
142
|
-
container: PropTypes.bool,
|
|
143
|
-
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
|
144
|
-
offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
|
|
145
|
-
rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
146
|
-
size: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
|
|
147
|
-
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
|
148
|
-
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
149
|
-
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
|
|
150
|
-
} : void 0;
|
|
151
|
-
|
|
152
|
-
// @ts-ignore internal logic for nested grid
|
|
153
|
-
Grid.muiName = 'Grid';
|
|
154
|
-
return Grid;
|
|
155
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
const getLegacyGridWarning = propName => {
|
|
2
|
-
if (['item', 'zeroMinWidth'].includes(propName)) {
|
|
3
|
-
return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
// #host-reference
|
|
7
|
-
return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
|
|
8
|
-
};
|
|
9
|
-
const warnedAboutProps = [];
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Deletes the legacy Grid component props from the `props` object and warns once about them if found.
|
|
13
|
-
*
|
|
14
|
-
* @param {object} props The props object to remove the legacy Grid props from.
|
|
15
|
-
* @param {Breakpoints} breakpoints The breakpoints object.
|
|
16
|
-
*/
|
|
17
|
-
export default function deleteLegacyGridProps(props, breakpoints) {
|
|
18
|
-
const propsToWarn = [];
|
|
19
|
-
if (props.item !== undefined) {
|
|
20
|
-
delete props.item;
|
|
21
|
-
propsToWarn.push('item');
|
|
22
|
-
}
|
|
23
|
-
if (props.zeroMinWidth !== undefined) {
|
|
24
|
-
delete props.zeroMinWidth;
|
|
25
|
-
propsToWarn.push('zeroMinWidth');
|
|
26
|
-
}
|
|
27
|
-
breakpoints.keys.forEach(breakpoint => {
|
|
28
|
-
if (props[breakpoint] !== undefined) {
|
|
29
|
-
propsToWarn.push(breakpoint);
|
|
30
|
-
delete props[breakpoint];
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
34
|
-
propsToWarn.forEach(prop => {
|
|
35
|
-
if (!warnedAboutProps.includes(prop)) {
|
|
36
|
-
warnedAboutProps.push(prop);
|
|
37
|
-
console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`);
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
2
|
-
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
3
|
-
export function getGridUtilityClass(slot) {
|
|
4
|
-
return generateUtilityClass('MuiGrid', slot);
|
|
5
|
-
}
|
|
6
|
-
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
7
|
-
const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
|
|
8
|
-
const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
|
|
9
|
-
const GRID_SIZES = ['auto', 'grow', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
10
|
-
const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item',
|
|
11
|
-
// spacings
|
|
12
|
-
...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
|
|
13
|
-
// direction values
|
|
14
|
-
...DIRECTIONS.map(direction => `direction-xs-${direction}`),
|
|
15
|
-
// wrap values
|
|
16
|
-
...WRAPS.map(wrap => `wrap-xs-${wrap}`),
|
|
17
|
-
// grid sizes for all breakpoints
|
|
18
|
-
...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
|
|
19
|
-
export default gridClasses;
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { traverseBreakpoints } from "./traverseBreakpoints.js";
|
|
2
|
-
function getSelfSpacingVar(axis) {
|
|
3
|
-
return `--Grid-${axis}Spacing`;
|
|
4
|
-
}
|
|
5
|
-
function getParentSpacingVar(axis) {
|
|
6
|
-
return `--Grid-parent-${axis}Spacing`;
|
|
7
|
-
}
|
|
8
|
-
const selfColumnsVar = '--Grid-columns';
|
|
9
|
-
const parentColumnsVar = '--Grid-parent-columns';
|
|
10
|
-
export const generateGridSizeStyles = ({
|
|
11
|
-
theme,
|
|
12
|
-
ownerState
|
|
13
|
-
}) => {
|
|
14
|
-
const styles = {};
|
|
15
|
-
traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
|
|
16
|
-
let style = {};
|
|
17
|
-
if (value === 'grow') {
|
|
18
|
-
style = {
|
|
19
|
-
flexBasis: 0,
|
|
20
|
-
flexGrow: 1,
|
|
21
|
-
maxWidth: '100%'
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
if (value === 'auto') {
|
|
25
|
-
style = {
|
|
26
|
-
flexBasis: 'auto',
|
|
27
|
-
flexGrow: 0,
|
|
28
|
-
flexShrink: 0,
|
|
29
|
-
maxWidth: 'none',
|
|
30
|
-
width: 'auto'
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
if (typeof value === 'number') {
|
|
34
|
-
style = {
|
|
35
|
-
flexGrow: 0,
|
|
36
|
-
flexBasis: 'auto',
|
|
37
|
-
width: `calc(100% * ${value} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
appendStyle(styles, style);
|
|
41
|
-
});
|
|
42
|
-
return styles;
|
|
43
|
-
};
|
|
44
|
-
export const generateGridOffsetStyles = ({
|
|
45
|
-
theme,
|
|
46
|
-
ownerState
|
|
47
|
-
}) => {
|
|
48
|
-
const styles = {};
|
|
49
|
-
traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
|
|
50
|
-
let style = {};
|
|
51
|
-
if (value === 'auto') {
|
|
52
|
-
style = {
|
|
53
|
-
marginLeft: 'auto'
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
if (typeof value === 'number') {
|
|
57
|
-
style = {
|
|
58
|
-
marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
appendStyle(styles, style);
|
|
62
|
-
});
|
|
63
|
-
return styles;
|
|
64
|
-
};
|
|
65
|
-
export const generateGridColumnsStyles = ({
|
|
66
|
-
theme,
|
|
67
|
-
ownerState
|
|
68
|
-
}) => {
|
|
69
|
-
if (!ownerState.container) {
|
|
70
|
-
return {};
|
|
71
|
-
}
|
|
72
|
-
const styles = {
|
|
73
|
-
[selfColumnsVar]: 12
|
|
74
|
-
};
|
|
75
|
-
traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
|
|
76
|
-
const columns = value ?? 12;
|
|
77
|
-
appendStyle(styles, {
|
|
78
|
-
[selfColumnsVar]: columns,
|
|
79
|
-
'> *': {
|
|
80
|
-
[parentColumnsVar]: columns
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
return styles;
|
|
85
|
-
};
|
|
86
|
-
export const generateGridRowSpacingStyles = ({
|
|
87
|
-
theme,
|
|
88
|
-
ownerState
|
|
89
|
-
}) => {
|
|
90
|
-
if (!ownerState.container) {
|
|
91
|
-
return {};
|
|
92
|
-
}
|
|
93
|
-
const styles = {};
|
|
94
|
-
traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
|
|
95
|
-
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
|
|
96
|
-
appendStyle(styles, {
|
|
97
|
-
[getSelfSpacingVar('row')]: spacing,
|
|
98
|
-
'> *': {
|
|
99
|
-
[getParentSpacingVar('row')]: spacing
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
});
|
|
103
|
-
return styles;
|
|
104
|
-
};
|
|
105
|
-
export const generateGridColumnSpacingStyles = ({
|
|
106
|
-
theme,
|
|
107
|
-
ownerState
|
|
108
|
-
}) => {
|
|
109
|
-
if (!ownerState.container) {
|
|
110
|
-
return {};
|
|
111
|
-
}
|
|
112
|
-
const styles = {};
|
|
113
|
-
traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
|
|
114
|
-
const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
|
|
115
|
-
appendStyle(styles, {
|
|
116
|
-
[getSelfSpacingVar('column')]: spacing,
|
|
117
|
-
'> *': {
|
|
118
|
-
[getParentSpacingVar('column')]: spacing
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
return styles;
|
|
123
|
-
};
|
|
124
|
-
export const generateGridDirectionStyles = ({
|
|
125
|
-
theme,
|
|
126
|
-
ownerState
|
|
127
|
-
}) => {
|
|
128
|
-
if (!ownerState.container) {
|
|
129
|
-
return {};
|
|
130
|
-
}
|
|
131
|
-
const styles = {};
|
|
132
|
-
traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
|
|
133
|
-
appendStyle(styles, {
|
|
134
|
-
flexDirection: value
|
|
135
|
-
});
|
|
136
|
-
});
|
|
137
|
-
return styles;
|
|
138
|
-
};
|
|
139
|
-
export const generateGridStyles = ({
|
|
140
|
-
ownerState
|
|
141
|
-
}) => {
|
|
142
|
-
return {
|
|
143
|
-
minWidth: 0,
|
|
144
|
-
boxSizing: 'border-box',
|
|
145
|
-
...(ownerState.container && {
|
|
146
|
-
display: 'flex',
|
|
147
|
-
flexWrap: 'wrap',
|
|
148
|
-
...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
|
|
149
|
-
flexWrap: ownerState.wrap
|
|
150
|
-
}),
|
|
151
|
-
gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
|
|
152
|
-
})
|
|
153
|
-
};
|
|
154
|
-
};
|
|
155
|
-
export const generateSizeClassNames = size => {
|
|
156
|
-
const classNames = [];
|
|
157
|
-
Object.entries(size).forEach(([key, value]) => {
|
|
158
|
-
if (value !== false && value !== undefined) {
|
|
159
|
-
classNames.push(`grid-${key}-${String(value)}`);
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
return classNames;
|
|
163
|
-
};
|
|
164
|
-
export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
|
|
165
|
-
function isValidSpacing(val) {
|
|
166
|
-
if (val === undefined) {
|
|
167
|
-
return false;
|
|
168
|
-
}
|
|
169
|
-
return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
|
|
170
|
-
}
|
|
171
|
-
if (isValidSpacing(spacing)) {
|
|
172
|
-
return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
|
|
173
|
-
}
|
|
174
|
-
if (typeof spacing === 'object' && !Array.isArray(spacing)) {
|
|
175
|
-
const classNames = [];
|
|
176
|
-
Object.entries(spacing).forEach(([key, value]) => {
|
|
177
|
-
if (isValidSpacing(value)) {
|
|
178
|
-
classNames.push(`spacing-${key}-${String(value)}`);
|
|
179
|
-
}
|
|
180
|
-
});
|
|
181
|
-
return classNames;
|
|
182
|
-
}
|
|
183
|
-
return [];
|
|
184
|
-
};
|
|
185
|
-
export const generateDirectionClasses = direction => {
|
|
186
|
-
if (direction === undefined) {
|
|
187
|
-
return [];
|
|
188
|
-
}
|
|
189
|
-
if (typeof direction === 'object') {
|
|
190
|
-
return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
|
|
191
|
-
}
|
|
192
|
-
return [`direction-xs-${String(direction)}`];
|
|
193
|
-
};
|
package/modern/Grid/index.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { default } from "./Grid.js";
|
|
2
|
-
export { default as createGrid } from "./createGrid.js";
|
|
3
|
-
export * from "./GridProps.js";
|
|
4
|
-
export { default as gridClasses } from "./gridClasses.js";
|
|
5
|
-
export * from "./gridClasses.js";
|
|
6
|
-
export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
|
|
7
|
-
export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
|
|
2
|
-
export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
|
|
3
|
-
const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
|
|
4
|
-
|
|
5
|
-
if (Array.isArray(responsive)) {
|
|
6
|
-
responsive.forEach((breakpointValue, index) => {
|
|
7
|
-
iterator((responsiveStyles, style) => {
|
|
8
|
-
if (index <= breakpoints.keys.length - 1) {
|
|
9
|
-
if (index === 0) {
|
|
10
|
-
Object.assign(responsiveStyles, style);
|
|
11
|
-
} else {
|
|
12
|
-
responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}, breakpointValue);
|
|
16
|
-
});
|
|
17
|
-
} else if (responsive && typeof responsive === 'object') {
|
|
18
|
-
// prevent null
|
|
19
|
-
// responsive could be a very big object, pick the smallest responsive values
|
|
20
|
-
|
|
21
|
-
const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
|
|
22
|
-
keys.forEach(key => {
|
|
23
|
-
if (breakpoints.keys.includes(key)) {
|
|
24
|
-
// @ts-ignore already checked that responsive is an object
|
|
25
|
-
const breakpointValue = responsive[key];
|
|
26
|
-
if (breakpointValue !== undefined) {
|
|
27
|
-
iterator((responsiveStyles, style) => {
|
|
28
|
-
if (smallestBreakpoint === key) {
|
|
29
|
-
Object.assign(responsiveStyles, style);
|
|
30
|
-
} else {
|
|
31
|
-
responsiveStyles[breakpoints.up(key)] = style;
|
|
32
|
-
}
|
|
33
|
-
}, breakpointValue);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
} else if (typeof responsive === 'number' || typeof responsive === 'string') {
|
|
38
|
-
iterator((responsiveStyles, style) => {
|
|
39
|
-
Object.assign(responsiveStyles, style);
|
|
40
|
-
}, responsive);
|
|
41
|
-
}
|
|
42
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Split this component for RSC import
|
|
3
|
-
*/
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
export const DEFAULT_MODE_STORAGE_KEY = 'mode';
|
|
7
|
-
export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
|
|
8
|
-
export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
|
|
9
|
-
export default function InitColorSchemeScript(options) {
|
|
10
|
-
const {
|
|
11
|
-
defaultMode = 'system',
|
|
12
|
-
defaultLightColorScheme = 'light',
|
|
13
|
-
defaultDarkColorScheme = 'dark',
|
|
14
|
-
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
|
|
15
|
-
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
|
|
16
|
-
attribute: initialAttribute = DEFAULT_ATTRIBUTE,
|
|
17
|
-
colorSchemeNode = 'document.documentElement',
|
|
18
|
-
nonce
|
|
19
|
-
} = options || {};
|
|
20
|
-
let setter = '';
|
|
21
|
-
let attribute = initialAttribute;
|
|
22
|
-
if (initialAttribute === 'class') {
|
|
23
|
-
attribute = '.%s';
|
|
24
|
-
}
|
|
25
|
-
if (initialAttribute === 'data') {
|
|
26
|
-
attribute = '[data-%s]';
|
|
27
|
-
}
|
|
28
|
-
if (attribute.startsWith('.')) {
|
|
29
|
-
const selector = attribute.substring(1);
|
|
30
|
-
setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
|
|
31
|
-
${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
|
|
32
|
-
}
|
|
33
|
-
const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
|
|
34
|
-
if (matches) {
|
|
35
|
-
const [attr, value] = matches[1].split('=');
|
|
36
|
-
if (!value) {
|
|
37
|
-
setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
|
|
38
|
-
${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
|
|
39
|
-
}
|
|
40
|
-
setter += `
|
|
41
|
-
${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
|
|
42
|
-
} else {
|
|
43
|
-
setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/_jsx("script", {
|
|
46
|
-
suppressHydrationWarning: true,
|
|
47
|
-
nonce: typeof window === 'undefined' ? nonce : ''
|
|
48
|
-
// eslint-disable-next-line react/no-danger
|
|
49
|
-
,
|
|
50
|
-
dangerouslySetInnerHTML: {
|
|
51
|
-
__html: `(function() {
|
|
52
|
-
try {
|
|
53
|
-
let colorScheme = '';
|
|
54
|
-
const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
|
|
55
|
-
const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
|
|
56
|
-
const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
|
|
57
|
-
if (mode === 'system') {
|
|
58
|
-
// handle system mode
|
|
59
|
-
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
|
60
|
-
if (mql.matches) {
|
|
61
|
-
colorScheme = dark
|
|
62
|
-
} else {
|
|
63
|
-
colorScheme = light
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
if (mode === 'light') {
|
|
67
|
-
colorScheme = light;
|
|
68
|
-
}
|
|
69
|
-
if (mode === 'dark') {
|
|
70
|
-
colorScheme = dark;
|
|
71
|
-
}
|
|
72
|
-
if (colorScheme) {
|
|
73
|
-
${setter}
|
|
74
|
-
}
|
|
75
|
-
} catch(e){}})();`
|
|
76
|
-
}
|
|
77
|
-
}, "mui-color-scheme-init");
|
|
78
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./InitColorSchemeScript.js";
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
const RtlContext = /*#__PURE__*/React.createContext();
|
|
7
|
-
function RtlProvider({
|
|
8
|
-
value,
|
|
9
|
-
...props
|
|
10
|
-
}) {
|
|
11
|
-
return /*#__PURE__*/_jsx(RtlContext.Provider, {
|
|
12
|
-
value: value ?? true,
|
|
13
|
-
...props
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
|
|
17
|
-
children: PropTypes.node,
|
|
18
|
-
value: PropTypes.bool
|
|
19
|
-
} : void 0;
|
|
20
|
-
export const useRtl = () => {
|
|
21
|
-
const value = React.useContext(RtlContext);
|
|
22
|
-
return value ?? false;
|
|
23
|
-
};
|
|
24
|
-
export default RtlProvider;
|