@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.
Files changed (130) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/cssVars/cssVarsParser.d.ts +1 -1
  3. package/esm/cssVars/cssVarsParser.d.ts +1 -1
  4. package/esm/index.js +1 -1
  5. package/esm/memoTheme.d.ts +1 -1
  6. package/esm/useThemeProps/getThemeProps.d.ts +0 -5
  7. package/esm/version/index.js +2 -2
  8. package/index.js +1 -1
  9. package/memoTheme.d.ts +1 -1
  10. package/modern/cssVars/cssVarsParser.d.ts +1 -1
  11. package/modern/memoTheme.d.ts +1 -1
  12. package/modern/useThemeProps/getThemeProps.d.ts +0 -5
  13. package/package.json +6 -14
  14. package/useThemeProps/getThemeProps.d.ts +0 -5
  15. package/version/index.js +2 -2
  16. package/modern/Box/Box.js +0 -30
  17. package/modern/Box/boxClasses.js +0 -3
  18. package/modern/Box/index.js +0 -3
  19. package/modern/Container/Container.js +0 -61
  20. package/modern/Container/ContainerProps.js +0 -1
  21. package/modern/Container/containerClasses.js +0 -7
  22. package/modern/Container/createContainer.js +0 -149
  23. package/modern/Container/index.js +0 -3
  24. package/modern/DefaultPropsProvider/DefaultPropsProvider.js +0 -64
  25. package/modern/DefaultPropsProvider/index.js +0 -1
  26. package/modern/GlobalStyles/GlobalStyles.js +0 -37
  27. package/modern/GlobalStyles/index.js +0 -2
  28. package/modern/Grid/Grid.js +0 -106
  29. package/modern/Grid/GridProps.js +0 -1
  30. package/modern/Grid/createGrid.js +0 -155
  31. package/modern/Grid/deleteLegacyGridProps.js +0 -41
  32. package/modern/Grid/gridClasses.js +0 -19
  33. package/modern/Grid/gridGenerator.js +0 -193
  34. package/modern/Grid/index.js +0 -7
  35. package/modern/Grid/traverseBreakpoints.js +0 -42
  36. package/modern/InitColorSchemeScript/InitColorSchemeScript.js +0 -78
  37. package/modern/InitColorSchemeScript/index.js +0 -1
  38. package/modern/RtlProvider/index.js +0 -24
  39. package/modern/Stack/Stack.js +0 -62
  40. package/modern/Stack/StackProps.js +0 -1
  41. package/modern/Stack/createStack.js +0 -173
  42. package/modern/Stack/index.js +0 -5
  43. package/modern/Stack/stackClasses.js +0 -7
  44. package/modern/ThemeProvider/ThemeProvider.js +0 -97
  45. package/modern/ThemeProvider/index.js +0 -1
  46. package/modern/borders/borders.js +0 -49
  47. package/modern/borders/index.js +0 -2
  48. package/modern/breakpoints/breakpoints.js +0 -171
  49. package/modern/breakpoints/index.js +0 -2
  50. package/modern/colorManipulator/colorManipulator.js +0 -349
  51. package/modern/colorManipulator/index.js +0 -1
  52. package/modern/compose/compose.js +0 -24
  53. package/modern/compose/index.js +0 -1
  54. package/modern/createBox/createBox.js +0 -35
  55. package/modern/createBox/index.js +0 -1
  56. package/modern/createBreakpoints/createBreakpoints.js +0 -81
  57. package/modern/createBreakpoints/index.js +0 -3
  58. package/modern/createStyled/createStyled.js +0 -276
  59. package/modern/createStyled/index.js +0 -2
  60. package/modern/createTheme/applyStyles.js +0 -87
  61. package/modern/createTheme/createSpacing.js +0 -31
  62. package/modern/createTheme/createTheme.js +0 -49
  63. package/modern/createTheme/index.js +0 -3
  64. package/modern/createTheme/shape.js +0 -4
  65. package/modern/cssContainerQueries/cssContainerQueries.js +0 -69
  66. package/modern/cssContainerQueries/index.js +0 -2
  67. package/modern/cssGrid/cssGrid.js +0 -85
  68. package/modern/cssGrid/index.js +0 -2
  69. package/modern/cssVars/createCssVarsProvider.js +0 -338
  70. package/modern/cssVars/createCssVarsTheme.js +0 -21
  71. package/modern/cssVars/createGetCssVar.js +0 -22
  72. package/modern/cssVars/cssVarsParser.js +0 -129
  73. package/modern/cssVars/getColorSchemeSelector.js +0 -26
  74. package/modern/cssVars/index.js +0 -5
  75. package/modern/cssVars/localStorageManager.js +0 -51
  76. package/modern/cssVars/prepareCssVars.js +0 -153
  77. package/modern/cssVars/prepareTypographyVars.js +0 -11
  78. package/modern/cssVars/useCurrentColorScheme.js +0 -228
  79. package/modern/display/display.js +0 -27
  80. package/modern/display/index.js +0 -2
  81. package/modern/flexbox/flexbox.js +0 -43
  82. package/modern/flexbox/index.js +0 -2
  83. package/modern/getThemeValue/getThemeValue.js +0 -51
  84. package/modern/getThemeValue/index.js +0 -2
  85. package/modern/index.js +0 -75
  86. package/modern/memoTheme.js +0 -28
  87. package/modern/memoize/index.js +0 -1
  88. package/modern/memoize/memoize.js +0 -9
  89. package/modern/merge/index.js +0 -1
  90. package/modern/merge/merge.js +0 -10
  91. package/modern/package.json +0 -1
  92. package/modern/palette/index.js +0 -2
  93. package/modern/palette/palette.js +0 -26
  94. package/modern/positions/index.js +0 -2
  95. package/modern/positions/positions.js +0 -22
  96. package/modern/preprocessStyles.js +0 -25
  97. package/modern/propsToClassKey/index.js +0 -1
  98. package/modern/propsToClassKey/propsToClassKey.js +0 -25
  99. package/modern/responsivePropType/index.js +0 -1
  100. package/modern/responsivePropType/responsivePropType.js +0 -3
  101. package/modern/shadows/index.js +0 -1
  102. package/modern/shadows/shadows.js +0 -6
  103. package/modern/sizing/index.js +0 -2
  104. package/modern/sizing/sizing.js +0 -64
  105. package/modern/spacing/index.js +0 -2
  106. package/modern/spacing/spacing.js +0 -157
  107. package/modern/style/index.js +0 -2
  108. package/modern/style/style.js +0 -75
  109. package/modern/styleFunctionSx/AliasesCSSProperties.js +0 -1
  110. package/modern/styleFunctionSx/OverwriteCSSProperties.js +0 -1
  111. package/modern/styleFunctionSx/StandardCssProperties.js +0 -1
  112. package/modern/styleFunctionSx/defaultSxConfig.js +0 -294
  113. package/modern/styleFunctionSx/extendSxProp.js +0 -51
  114. package/modern/styleFunctionSx/index.js +0 -4
  115. package/modern/styleFunctionSx/styleFunctionSx.js +0 -127
  116. package/modern/styled/index.js +0 -1
  117. package/modern/styled/styled.js +0 -3
  118. package/modern/typography/index.js +0 -2
  119. package/modern/typography/typography.js +0 -37
  120. package/modern/useMediaQuery/index.js +0 -2
  121. package/modern/useMediaQuery/useMediaQuery.js +0 -118
  122. package/modern/useTheme/index.js +0 -2
  123. package/modern/useTheme/useTheme.js +0 -9
  124. package/modern/useThemeProps/getThemeProps.js +0 -12
  125. package/modern/useThemeProps/index.js +0 -2
  126. package/modern/useThemeProps/useThemeProps.js +0 -20
  127. package/modern/useThemeWithoutDefault/index.js +0 -1
  128. package/modern/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -12
  129. package/modern/version/index.js +0 -6
  130. package/tsconfig.build.tsbuildinfo +0 -1
@@ -1,2 +0,0 @@
1
- export { default } from "./GlobalStyles.js";
2
- export * from "./GlobalStyles.js";
@@ -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;
@@ -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
- };
@@ -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;