@mui/system 5.13.1 → 5.13.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 +41 -0
- package/Container/Container.d.ts +13 -13
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/createContainer.d.ts +18 -18
- package/Container/createContainer.js +35 -41
- package/GlobalStyles/GlobalStyles.d.ts +13 -13
- package/GlobalStyles/index.d.ts +2 -2
- package/Stack/Stack.d.ts +14 -14
- package/Stack/StackProps.d.ts +53 -53
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +26 -24
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/ThemeProvider/ThemeProvider.js +5 -9
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +185 -185
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/createGrid.js +23 -21
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +38 -38
- package/Unstable_Grid/gridGenerator.js +18 -20
- package/Unstable_Grid/index.d.ts +5 -5
- package/breakpoints.js +6 -7
- package/createBox.js +12 -9
- package/createStyled.js +32 -40
- package/createTheme/createBreakpoints.js +26 -24
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createTheme.js +14 -18
- package/cssVars/createCssVarsProvider.js +20 -21
- package/cssVars/createCssVarsTheme.d.ts +15 -15
- package/cssVars/createCssVarsTheme.js +10 -10
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +64 -64
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +5 -5
- package/cssVars/prepareCssVars.d.ts +16 -16
- package/cssVars/prepareCssVars.js +12 -13
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/cssVars/useCurrentColorScheme.js +11 -17
- package/esm/Container/createContainer.js +35 -41
- package/esm/Stack/createStack.js +26 -24
- package/esm/ThemeProvider/ThemeProvider.js +5 -9
- package/esm/Unstable_Grid/createGrid.js +23 -21
- package/esm/Unstable_Grid/gridGenerator.js +17 -20
- package/esm/breakpoints.js +6 -7
- package/esm/createBox.js +12 -9
- package/esm/createStyled.js +31 -38
- package/esm/createTheme/createBreakpoints.js +25 -24
- package/esm/createTheme/createTheme.js +14 -18
- package/esm/cssVars/createCssVarsProvider.js +20 -21
- package/esm/cssVars/createCssVarsTheme.js +10 -10
- package/esm/cssVars/prepareCssVars.js +12 -13
- package/esm/cssVars/useCurrentColorScheme.js +10 -17
- package/esm/propsToClassKey.js +5 -3
- package/esm/styleFunctionSx/extendSxProp.js +10 -14
- package/index.js +1 -1
- package/legacy/Container/createContainer.js +6 -7
- package/legacy/Stack/createStack.js +5 -6
- package/legacy/ThemeProvider/ThemeProvider.js +3 -4
- package/legacy/Unstable_Grid/createGrid.js +4 -6
- package/legacy/Unstable_Grid/gridGenerator.js +4 -6
- package/legacy/breakpoints.js +3 -5
- package/legacy/createBox.js +2 -4
- package/legacy/createStyled.js +11 -13
- package/legacy/createTheme/createBreakpoints.js +3 -4
- package/legacy/createTheme/createTheme.js +4 -6
- package/legacy/cssVars/createCssVarsProvider.js +5 -6
- package/legacy/cssVars/createCssVarsTheme.js +2 -4
- package/legacy/cssVars/prepareCssVars.js +3 -5
- package/legacy/cssVars/useCurrentColorScheme.js +7 -9
- package/legacy/index.js +1 -1
- package/legacy/styleFunctionSx/extendSxProp.js +4 -6
- package/modern/Container/createContainer.js +35 -41
- package/modern/Stack/createStack.js +26 -24
- package/modern/ThemeProvider/ThemeProvider.js +5 -9
- package/modern/Unstable_Grid/createGrid.js +23 -21
- package/modern/Unstable_Grid/gridGenerator.js +17 -20
- package/modern/breakpoints.js +6 -7
- package/modern/createBox.js +12 -9
- package/modern/createStyled.js +31 -38
- package/modern/createTheme/createBreakpoints.js +25 -24
- package/modern/createTheme/createTheme.js +14 -18
- package/modern/cssVars/createCssVarsProvider.js +20 -21
- package/modern/cssVars/createCssVarsTheme.js +10 -10
- package/modern/cssVars/prepareCssVars.js +12 -13
- package/modern/cssVars/useCurrentColorScheme.js +10 -17
- package/modern/index.js +1 -1
- package/modern/propsToClassKey.js +5 -3
- package/modern/styleFunctionSx/extendSxProp.js +10 -14
- package/package.json +2 -2
- package/propsToClassKey.js +6 -3
- package/styleFunctionSx/extendSxProp.js +10 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## 5.13.2
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v5.13.1..master -->
|
|
6
|
+
|
|
7
|
+
_May 22, 2023_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 12 contributors who made this release possible.
|
|
10
|
+
📚 This release focuses primarily on documentation improvements.
|
|
11
|
+
|
|
12
|
+
### `@mui/material@5.13.2
|
|
13
|
+
|
|
14
|
+
- [Slider] Tooltip positioning fixed for vertical slider (#37049) @PunitSoniME
|
|
15
|
+
|
|
16
|
+
### Docs
|
|
17
|
+
|
|
18
|
+
- [docs][base] Remove default annotations from useTabsList return type (#37324) @TinaSay
|
|
19
|
+
- [docs][base] Remove default annotations from useTabPanel return type (#37323) @TinaSay
|
|
20
|
+
- [docs][base] Remove default annotations from useSwitch return type (#37322) @TinaSay
|
|
21
|
+
- [docs][base] Remove default annotations from useInput return type (#37321) @TinaSay
|
|
22
|
+
- [docs][base] Remove default annotations from useAutocomplete return type (#37320) @TinaSay
|
|
23
|
+
- [docs][base] Remove default annotations from useBadge's return type (#37313) @TinaSay
|
|
24
|
+
- [docs][base] Remove default annotations from useButton's return type (#37312) @TinaSay
|
|
25
|
+
- [docs][base] Remove default annotations from useSlider's return type (#37309) @TinaSay
|
|
26
|
+
- [docs] Remove Material UI's "Languages" page (#37314) @danilo-leal
|
|
27
|
+
- [docs] Prefer to link GitHub repository @oliviertassinari
|
|
28
|
+
- [docs] Move product versions to page context (#35078) @m4theushw
|
|
29
|
+
- [docs] Fix v5 migration npm install instruction (#37293) @oliviertassinari
|
|
30
|
+
- [docs][Tab] Add vertical tabs demo (#37292) @sai6855
|
|
31
|
+
- [docs][Transitions] Fix typo in code sample (#37300) @alexfauquette
|
|
32
|
+
- [examples] Remove `@babel/plugin-proposal-class-properties` from Material-Express-SSR example (#37305) @ZeeshanTamboli
|
|
33
|
+
- [Website] Add Brijesh to About page (#37318) @brijeshb42
|
|
34
|
+
- [website] Update pricing table (#37290) @cherniavskii
|
|
35
|
+
- [website] Update core open roles (#37224) @mnajdova
|
|
36
|
+
|
|
37
|
+
### Core
|
|
38
|
+
|
|
39
|
+
- Revert "[core] Remove outdated babel proposal plugins (#36795)" (#37331) @michaldudak
|
|
40
|
+
- [core] Move esmExternals to the shared next config (#37332) @michaldudak
|
|
41
|
+
|
|
42
|
+
All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @cherniavskii, @danilo-leal, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @sai6855, @TinaSay, @ZeeshanTamboli
|
|
43
|
+
|
|
3
44
|
## 5.13.1
|
|
4
45
|
|
|
5
46
|
<!-- generated comparing v5.13.0..master -->
|
package/Container/Container.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* Demos:
|
|
4
|
-
*
|
|
5
|
-
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
|
|
6
|
-
* - [Container (MUI System)](https://mui.com/system/react-container/)
|
|
7
|
-
*
|
|
8
|
-
* API:
|
|
9
|
-
*
|
|
10
|
-
* - [Container API](https://mui.com/system/api/container/)
|
|
11
|
-
*/
|
|
12
|
-
declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
|
|
13
|
-
export default Container;
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Demos:
|
|
4
|
+
*
|
|
5
|
+
* - [Container (Material UI)](https://mui.com/material-ui/react-container/)
|
|
6
|
+
* - [Container (MUI System)](https://mui.com/system/react-container/)
|
|
7
|
+
*
|
|
8
|
+
* API:
|
|
9
|
+
*
|
|
10
|
+
* - [Container API](https://mui.com/system/api/container/)
|
|
11
|
+
*/
|
|
12
|
+
declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
|
|
13
|
+
export default Container;
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverrideProps } from '@mui/types';
|
|
3
|
-
import { SxProps } from '../styleFunctionSx';
|
|
4
|
-
import { Theme, Breakpoint } from '../createTheme';
|
|
5
|
-
import { ContainerClasses } from './containerClasses';
|
|
6
|
-
export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
7
|
-
props: P & {
|
|
8
|
-
children?: React.ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* Override or extend the styles applied to the component.
|
|
11
|
-
*/
|
|
12
|
-
classes?: Partial<ContainerClasses>;
|
|
13
|
-
/**
|
|
14
|
-
* If `true`, the left and right padding is removed.
|
|
15
|
-
* @default false
|
|
16
|
-
*/
|
|
17
|
-
disableGutters?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Set the max-width to match the min-width of the current breakpoint.
|
|
20
|
-
* This is useful if you'd prefer to design for a fixed set of sizes
|
|
21
|
-
* instead of trying to accommodate a fully fluid viewport.
|
|
22
|
-
* It's fluid by default.
|
|
23
|
-
* @default false
|
|
24
|
-
*/
|
|
25
|
-
fixed?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Determine the max-width of the container.
|
|
28
|
-
* The container width grows with the size of the screen.
|
|
29
|
-
* Set to `false` to disable `maxWidth`.
|
|
30
|
-
* @default 'lg'
|
|
31
|
-
*/
|
|
32
|
-
maxWidth?: Breakpoint | false;
|
|
33
|
-
/**
|
|
34
|
-
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
35
|
-
*/
|
|
36
|
-
sx?: SxProps<Theme>;
|
|
37
|
-
};
|
|
38
|
-
defaultComponent: D;
|
|
39
|
-
}
|
|
40
|
-
export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverrideProps } from '@mui/types';
|
|
3
|
+
import { SxProps } from '../styleFunctionSx';
|
|
4
|
+
import { Theme, Breakpoint } from '../createTheme';
|
|
5
|
+
import { ContainerClasses } from './containerClasses';
|
|
6
|
+
export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
7
|
+
props: P & {
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Override or extend the styles applied to the component.
|
|
11
|
+
*/
|
|
12
|
+
classes?: Partial<ContainerClasses>;
|
|
13
|
+
/**
|
|
14
|
+
* If `true`, the left and right padding is removed.
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
disableGutters?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Set the max-width to match the min-width of the current breakpoint.
|
|
20
|
+
* This is useful if you'd prefer to design for a fixed set of sizes
|
|
21
|
+
* instead of trying to accommodate a fully fluid viewport.
|
|
22
|
+
* It's fluid by default.
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
fixed?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Determine the max-width of the container.
|
|
28
|
+
* The container width grows with the size of the screen.
|
|
29
|
+
* Set to `false` to disable `maxWidth`.
|
|
30
|
+
* @default 'lg'
|
|
31
|
+
*/
|
|
32
|
+
maxWidth?: Breakpoint | false;
|
|
33
|
+
/**
|
|
34
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
35
|
+
*/
|
|
36
|
+
sx?: SxProps<Theme>;
|
|
37
|
+
};
|
|
38
|
+
defaultComponent: D;
|
|
39
|
+
}
|
|
40
|
+
export type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
export interface ContainerClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** Styles applied to the root element if `disableGutters={true}`. */
|
|
5
|
-
disableGutters: string;
|
|
6
|
-
/** Styles applied to the root element if `fixed={true}`. */
|
|
7
|
-
fixed: string;
|
|
8
|
-
/** Styles applied to the root element if `maxWidth="xs"`. */
|
|
9
|
-
maxWidthXs: string;
|
|
10
|
-
/** Styles applied to the root element if `maxWidth="sm"`. */
|
|
11
|
-
maxWidthSm: string;
|
|
12
|
-
/** Styles applied to the root element if `maxWidth="md"`. */
|
|
13
|
-
maxWidthMd: string;
|
|
14
|
-
/** Styles applied to the root element if `maxWidth="lg"`. */
|
|
15
|
-
maxWidthLg: string;
|
|
16
|
-
/** Styles applied to the root element if `maxWidth="xl"`. */
|
|
17
|
-
maxWidthXl: string;
|
|
18
|
-
}
|
|
19
|
-
export type ContainerClassKey = keyof ContainerClasses;
|
|
20
|
-
export declare function getContainerUtilityClass(slot: string): string;
|
|
21
|
-
declare const containerClasses: ContainerClasses;
|
|
22
|
-
export default containerClasses;
|
|
1
|
+
export interface ContainerClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** Styles applied to the root element if `disableGutters={true}`. */
|
|
5
|
+
disableGutters: string;
|
|
6
|
+
/** Styles applied to the root element if `fixed={true}`. */
|
|
7
|
+
fixed: string;
|
|
8
|
+
/** Styles applied to the root element if `maxWidth="xs"`. */
|
|
9
|
+
maxWidthXs: string;
|
|
10
|
+
/** Styles applied to the root element if `maxWidth="sm"`. */
|
|
11
|
+
maxWidthSm: string;
|
|
12
|
+
/** Styles applied to the root element if `maxWidth="md"`. */
|
|
13
|
+
maxWidthMd: string;
|
|
14
|
+
/** Styles applied to the root element if `maxWidth="lg"`. */
|
|
15
|
+
maxWidthLg: string;
|
|
16
|
+
/** Styles applied to the root element if `maxWidth="xl"`. */
|
|
17
|
+
maxWidthXl: string;
|
|
18
|
+
}
|
|
19
|
+
export type ContainerClassKey = keyof ContainerClasses;
|
|
20
|
+
export declare function getContainerUtilityClass(slot: string): string;
|
|
21
|
+
declare const containerClasses: ContainerClasses;
|
|
22
|
+
export default containerClasses;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Interpolation, StyledComponent } from '@mui/styled-engine';
|
|
3
|
-
import { OverridableComponent } from '@mui/types';
|
|
4
|
-
import { ContainerProps, ContainerTypeMap } from './ContainerProps';
|
|
5
|
-
import { Theme as DefaultTheme } from '../createTheme';
|
|
6
|
-
interface StyleFnProps<Theme> extends ContainerProps {
|
|
7
|
-
theme: Theme;
|
|
8
|
-
ownerState: ContainerProps;
|
|
9
|
-
}
|
|
10
|
-
type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
|
|
11
|
-
export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
|
|
12
|
-
createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
|
|
13
|
-
useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
|
|
14
|
-
component?: React.ElementType;
|
|
15
|
-
};
|
|
16
|
-
componentName?: string;
|
|
17
|
-
}): OverridableComponent<ContainerTypeMap<{}, "div">>;
|
|
18
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Interpolation, StyledComponent } from '@mui/styled-engine';
|
|
3
|
+
import { OverridableComponent } from '@mui/types';
|
|
4
|
+
import { ContainerProps, ContainerTypeMap } from './ContainerProps';
|
|
5
|
+
import { Theme as DefaultTheme } from '../createTheme';
|
|
6
|
+
interface StyleFnProps<Theme> extends ContainerProps {
|
|
7
|
+
theme: Theme;
|
|
8
|
+
ownerState: ContainerProps;
|
|
9
|
+
}
|
|
10
|
+
type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
|
|
11
|
+
export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
|
|
12
|
+
createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
|
|
13
|
+
useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
|
|
14
|
+
component?: React.ElementType;
|
|
15
|
+
};
|
|
16
|
+
componentName?: string;
|
|
17
|
+
}): OverridableComponent<ContainerTypeMap<{}, "div">>;
|
|
18
|
+
export {};
|
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = createContainer;
|
|
8
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
10
|
var React = _interopRequireWildcard(require("react"));
|
|
9
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
12
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
@@ -13,6 +15,7 @@ var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
|
|
|
13
15
|
var _styled = _interopRequireDefault(require("../styled"));
|
|
14
16
|
var _createTheme = _interopRequireDefault(require("../createTheme"));
|
|
15
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
|
|
16
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
21
|
const defaultTheme = (0, _createTheme.default)();
|
|
@@ -56,22 +59,20 @@ function createContainer(options = {}) {
|
|
|
56
59
|
const ContainerRoot = createStyledComponent(({
|
|
57
60
|
theme,
|
|
58
61
|
ownerState
|
|
59
|
-
}) => ({
|
|
62
|
+
}) => (0, _extends2.default)({
|
|
60
63
|
width: '100%',
|
|
61
64
|
marginLeft: 'auto',
|
|
62
65
|
boxSizing: 'border-box',
|
|
63
66
|
marginRight: 'auto',
|
|
64
|
-
display: 'block'
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
})
|
|
67
|
+
display: 'block'
|
|
68
|
+
}, !ownerState.disableGutters && {
|
|
69
|
+
paddingLeft: theme.spacing(2),
|
|
70
|
+
paddingRight: theme.spacing(2),
|
|
71
|
+
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
72
|
+
[theme.breakpoints.up('sm')]: {
|
|
73
|
+
paddingLeft: theme.spacing(3),
|
|
74
|
+
paddingRight: theme.spacing(3)
|
|
75
|
+
}
|
|
75
76
|
}), ({
|
|
76
77
|
theme,
|
|
77
78
|
ownerState
|
|
@@ -88,58 +89,51 @@ function createContainer(options = {}) {
|
|
|
88
89
|
}, {}), ({
|
|
89
90
|
theme,
|
|
90
91
|
ownerState
|
|
91
|
-
}) => ({
|
|
92
|
+
}) => (0, _extends2.default)({}, ownerState.maxWidth === 'xs' && {
|
|
92
93
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
93
|
-
|
|
94
|
+
[theme.breakpoints.up('xs')]: {
|
|
94
95
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
...(ownerState.maxWidth &&
|
|
96
|
+
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
|
97
|
+
}
|
|
98
|
+
}, ownerState.maxWidth &&
|
|
99
|
+
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
100
|
+
ownerState.maxWidth !== 'xs' && {
|
|
101
101
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
102
|
-
ownerState.maxWidth
|
|
102
|
+
[theme.breakpoints.up(ownerState.maxWidth)]: {
|
|
103
103
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
|
|
107
|
-
}
|
|
108
|
-
})
|
|
104
|
+
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
|
|
105
|
+
}
|
|
109
106
|
}));
|
|
110
107
|
const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
|
|
111
108
|
const props = useThemeProps(inProps);
|
|
112
109
|
const {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
const ownerState = {
|
|
122
|
-
...props,
|
|
110
|
+
className,
|
|
111
|
+
component = 'div',
|
|
112
|
+
disableGutters = false,
|
|
113
|
+
fixed = false,
|
|
114
|
+
maxWidth = 'lg'
|
|
115
|
+
} = props,
|
|
116
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
117
|
+
const ownerState = (0, _extends2.default)({}, props, {
|
|
123
118
|
component,
|
|
124
119
|
disableGutters,
|
|
125
120
|
fixed,
|
|
126
121
|
maxWidth
|
|
127
|
-
};
|
|
122
|
+
});
|
|
128
123
|
|
|
129
124
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
130
125
|
const classes = useUtilityClasses(ownerState, componentName);
|
|
131
126
|
return (
|
|
132
127
|
/*#__PURE__*/
|
|
133
128
|
// @ts-ignore theme is injected by the styled util
|
|
134
|
-
(0, _jsxRuntime.jsx)(ContainerRoot, {
|
|
129
|
+
(0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({
|
|
135
130
|
as: component
|
|
136
131
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
137
132
|
,
|
|
138
133
|
ownerState: ownerState,
|
|
139
134
|
className: (0, _clsx.default)(classes.root, className),
|
|
140
|
-
ref: ref
|
|
141
|
-
|
|
142
|
-
})
|
|
135
|
+
ref: ref
|
|
136
|
+
}, other))
|
|
143
137
|
);
|
|
144
138
|
});
|
|
145
139
|
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
import { Interpolation } from '@mui/styled-engine';
|
|
3
|
-
import { Theme as SystemTheme } from '../createTheme';
|
|
4
|
-
export interface GlobalStylesProps<Theme = SystemTheme> {
|
|
5
|
-
styles: Interpolation<Theme>;
|
|
6
|
-
defaultTheme?: object;
|
|
7
|
-
themeId?: string;
|
|
8
|
-
}
|
|
9
|
-
declare function GlobalStyles<Theme = SystemTheme>({ styles, themeId, defaultTheme, }: GlobalStylesProps<Theme>): JSX.Element;
|
|
10
|
-
declare namespace GlobalStyles {
|
|
11
|
-
var propTypes: any;
|
|
12
|
-
}
|
|
13
|
-
export default GlobalStyles;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Interpolation } from '@mui/styled-engine';
|
|
3
|
+
import { Theme as SystemTheme } from '../createTheme';
|
|
4
|
+
export interface GlobalStylesProps<Theme = SystemTheme> {
|
|
5
|
+
styles: Interpolation<Theme>;
|
|
6
|
+
defaultTheme?: object;
|
|
7
|
+
themeId?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function GlobalStyles<Theme = SystemTheme>({ styles, themeId, defaultTheme, }: GlobalStylesProps<Theme>): React.JSX.Element;
|
|
10
|
+
declare namespace GlobalStyles {
|
|
11
|
+
var propTypes: any;
|
|
12
|
+
}
|
|
13
|
+
export default GlobalStyles;
|
package/GlobalStyles/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './GlobalStyles';
|
|
2
|
-
export * from './GlobalStyles';
|
|
1
|
+
export { default } from './GlobalStyles';
|
|
2
|
+
export * from './GlobalStyles';
|
package/Stack/Stack.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* Demos:
|
|
4
|
-
*
|
|
5
|
-
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
|
|
6
|
-
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
|
|
7
|
-
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
|
|
8
|
-
*
|
|
9
|
-
* API:
|
|
10
|
-
*
|
|
11
|
-
* - [Stack API](https://mui.com/system/api/stack/)
|
|
12
|
-
*/
|
|
13
|
-
declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
|
|
14
|
-
export default Stack;
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Demos:
|
|
4
|
+
*
|
|
5
|
+
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
|
|
6
|
+
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
|
|
7
|
+
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
|
|
8
|
+
*
|
|
9
|
+
* API:
|
|
10
|
+
*
|
|
11
|
+
* - [Stack API](https://mui.com/system/api/stack/)
|
|
12
|
+
*/
|
|
13
|
+
declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
|
|
14
|
+
export default Stack;
|
package/Stack/StackProps.d.ts
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverrideProps } from '@mui/types';
|
|
3
|
-
import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
|
|
4
|
-
import { SystemProps } from '../Box';
|
|
5
|
-
import { Theme } from '../createTheme';
|
|
6
|
-
export interface StackBaseProps {
|
|
7
|
-
/**
|
|
8
|
-
* The content of the component.
|
|
9
|
-
*/
|
|
10
|
-
children?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Defines the `flex-direction` style property.
|
|
13
|
-
* It is applied for all screen sizes.
|
|
14
|
-
* @default 'column'
|
|
15
|
-
*/
|
|
16
|
-
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
|
|
17
|
-
/**
|
|
18
|
-
* Defines the space between immediate children.
|
|
19
|
-
* @default 0
|
|
20
|
-
*/
|
|
21
|
-
spacing?: ResponsiveStyleValue<number | string>;
|
|
22
|
-
/**
|
|
23
|
-
* Add an element between each child.
|
|
24
|
-
*/
|
|
25
|
-
divider?: React.ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
|
|
28
|
-
*
|
|
29
|
-
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
|
|
30
|
-
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
|
|
31
|
-
*
|
|
32
|
-
* To enable this flag globally, follow the theme's default props configuration.
|
|
33
|
-
* @default false
|
|
34
|
-
*/
|
|
35
|
-
useFlexGap?: boolean;
|
|
36
|
-
}
|
|
37
|
-
export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
38
|
-
props: P & StackBaseProps & {
|
|
39
|
-
/**
|
|
40
|
-
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
|
41
|
-
*/
|
|
42
|
-
sx?: SxProps<Theme>;
|
|
43
|
-
} & SystemProps<Theme>;
|
|
44
|
-
defaultComponent: D;
|
|
45
|
-
}
|
|
46
|
-
export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
|
|
47
|
-
component?: React.ElementType;
|
|
48
|
-
}> = OverrideProps<StackTypeMap<P, D>, D>;
|
|
49
|
-
export interface StackOwnerState {
|
|
50
|
-
direction: StackProps['direction'];
|
|
51
|
-
spacing: StackProps['spacing'];
|
|
52
|
-
useFlexGap: boolean;
|
|
53
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverrideProps } from '@mui/types';
|
|
3
|
+
import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
|
|
4
|
+
import { SystemProps } from '../Box';
|
|
5
|
+
import { Theme } from '../createTheme';
|
|
6
|
+
export interface StackBaseProps {
|
|
7
|
+
/**
|
|
8
|
+
* The content of the component.
|
|
9
|
+
*/
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Defines the `flex-direction` style property.
|
|
13
|
+
* It is applied for all screen sizes.
|
|
14
|
+
* @default 'column'
|
|
15
|
+
*/
|
|
16
|
+
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
|
|
17
|
+
/**
|
|
18
|
+
* Defines the space between immediate children.
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
spacing?: ResponsiveStyleValue<number | string>;
|
|
22
|
+
/**
|
|
23
|
+
* Add an element between each child.
|
|
24
|
+
*/
|
|
25
|
+
divider?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
|
|
28
|
+
*
|
|
29
|
+
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
|
|
30
|
+
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
|
|
31
|
+
*
|
|
32
|
+
* To enable this flag globally, follow the theme's default props configuration.
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
useFlexGap?: boolean;
|
|
36
|
+
}
|
|
37
|
+
export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
38
|
+
props: P & StackBaseProps & {
|
|
39
|
+
/**
|
|
40
|
+
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
|
41
|
+
*/
|
|
42
|
+
sx?: SxProps<Theme>;
|
|
43
|
+
} & SystemProps<Theme>;
|
|
44
|
+
defaultComponent: D;
|
|
45
|
+
}
|
|
46
|
+
export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
|
|
47
|
+
component?: React.ElementType;
|
|
48
|
+
}> = OverrideProps<StackTypeMap<P, D>, D>;
|
|
49
|
+
export interface StackOwnerState {
|
|
50
|
+
direction: StackProps['direction'];
|
|
51
|
+
spacing: StackProps['spacing'];
|
|
52
|
+
useFlexGap: boolean;
|
|
53
|
+
}
|
package/Stack/createStack.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverridableComponent } from '@mui/types';
|
|
3
|
-
import { StackTypeMap, StackOwnerState } from './StackProps';
|
|
4
|
-
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
5
|
-
import { Spacing } from '../createTheme/createSpacing';
|
|
6
|
-
interface StyleFunctionProps {
|
|
7
|
-
theme: {
|
|
8
|
-
breakpoints: Breakpoints;
|
|
9
|
-
spacing: Spacing;
|
|
10
|
-
};
|
|
11
|
-
ownerState: StackOwnerState;
|
|
12
|
-
}
|
|
13
|
-
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
|
|
14
|
-
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
15
|
-
export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
|
|
16
|
-
export default function createStack(options?: {
|
|
17
|
-
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
18
|
-
useThemeProps?: typeof useThemePropsDefault;
|
|
19
|
-
componentName?: string;
|
|
20
|
-
}): OverridableComponent<StackTypeMap<{}, "div">>;
|
|
21
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverridableComponent } from '@mui/types';
|
|
3
|
+
import { StackTypeMap, StackOwnerState } from './StackProps';
|
|
4
|
+
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
5
|
+
import { Spacing } from '../createTheme/createSpacing';
|
|
6
|
+
interface StyleFunctionProps {
|
|
7
|
+
theme: {
|
|
8
|
+
breakpoints: Breakpoints;
|
|
9
|
+
spacing: Spacing;
|
|
10
|
+
};
|
|
11
|
+
ownerState: StackOwnerState;
|
|
12
|
+
}
|
|
13
|
+
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
|
|
14
|
+
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
15
|
+
export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
|
|
16
|
+
export default function createStack(options?: {
|
|
17
|
+
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
18
|
+
useThemeProps?: typeof useThemePropsDefault;
|
|
19
|
+
componentName?: string;
|
|
20
|
+
}): OverridableComponent<StackTypeMap<{}, "div">>;
|
|
21
|
+
export {};
|