@mui/system 5.11.14 → 5.11.16

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 (53) hide show
  1. package/Box/Box.spec.d.ts +1 -1
  2. package/CHANGELOG.md +118 -4
  3. package/Container/Container.d.ts +13 -13
  4. package/Container/ContainerProps.d.ts +40 -40
  5. package/Container/containerClasses.d.ts +22 -22
  6. package/Container/createContainer.d.ts +18 -18
  7. package/Stack/Stack.d.ts +13 -13
  8. package/Stack/Stack.js +11 -1
  9. package/Stack/StackProps.d.ts +53 -42
  10. package/Stack/createStack.d.ts +21 -21
  11. package/Stack/createStack.js +10 -3
  12. package/Stack/index.d.ts +5 -5
  13. package/Stack/stackClasses.d.ts +8 -8
  14. package/Unstable_Grid/Grid.d.ts +12 -12
  15. package/Unstable_Grid/GridProps.d.ts +173 -173
  16. package/Unstable_Grid/createGrid.d.ts +11 -11
  17. package/Unstable_Grid/gridClasses.d.ts +20 -20
  18. package/Unstable_Grid/gridGenerator.d.ts +38 -33
  19. package/Unstable_Grid/gridGenerator.js +24 -10
  20. package/Unstable_Grid/index.d.ts +5 -5
  21. package/createBox.spec.d.ts +1 -1
  22. package/createTheme/createSpacing.d.ts +10 -10
  23. package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
  24. package/cssVars/createCssVarsTheme.d.ts +13 -13
  25. package/cssVars/createGetCssVar.d.ts +5 -5
  26. package/cssVars/cssVarsParser.d.ts +64 -64
  27. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  28. package/cssVars/index.d.ts +5 -5
  29. package/cssVars/prepareCssVars.d.ts +14 -14
  30. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  31. package/esm/Stack/Stack.js +11 -1
  32. package/esm/Stack/createStack.js +10 -3
  33. package/esm/Unstable_Grid/gridGenerator.js +24 -10
  34. package/esm/styleFunctionSx/defaultSxConfig.js +3 -38
  35. package/esm/styleFunctionSx/styleFunctionSx.js +5 -0
  36. package/index.js +1 -1
  37. package/index.spec.d.ts +1 -1
  38. package/legacy/Stack/Stack.js +11 -1
  39. package/legacy/Stack/createStack.js +10 -2
  40. package/legacy/Unstable_Grid/gridGenerator.js +45 -35
  41. package/legacy/index.js +1 -1
  42. package/legacy/styleFunctionSx/defaultSxConfig.js +3 -38
  43. package/legacy/styleFunctionSx/styleFunctionSx.js +7 -4
  44. package/modern/Stack/Stack.js +11 -1
  45. package/modern/Stack/createStack.js +10 -3
  46. package/modern/Unstable_Grid/gridGenerator.js +24 -10
  47. package/modern/index.js +1 -1
  48. package/modern/styleFunctionSx/defaultSxConfig.js +3 -35
  49. package/modern/styleFunctionSx/styleFunctionSx.js +5 -0
  50. package/package.json +3 -3
  51. package/styleFunctionSx/defaultSxConfig.js +3 -38
  52. package/styleFunctionSx/styleFunctionSx.js +5 -0
  53. package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
package/Box/Box.spec.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export {};
package/CHANGELOG.md CHANGED
@@ -1,5 +1,119 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.11.16
4
+
5
+ <!-- generated comparing v5.11.15..master -->
6
+
7
+ _Apr 4, 2023_
8
+
9
+ A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ - 💅 Added tabs on API pages of Base UI to switch between component and hook references (#35938) @mnajdova
12
+ - 🐛 bug fixes and 📚 documentation improvements.
13
+
14
+ ### `@mui/material@5.11.16`
15
+
16
+ - [Autocomplete] Listen for click on the root element (#36369) @sai6855
17
+ - [Autocomplete] Fix navigation issue on mouse hover (#35196) @sai6855
18
+ - [Card] Fix Card focus effect overflowing parent card (#36329) @mj12albert
19
+ - [Grid] Missing slot (#36765) @siriwatknp
20
+ - [Select] Make error part of the `ownerState` to enable overriding styles with it in theme (#36422) @gitstart
21
+ - [Slider] Fix ValueLabel UI issues comes when size="small" and orientation="vertical (#36738) @yushanwebdev
22
+
23
+ ### `@mui/icons-material@5.11.16`
24
+
25
+ - [icons] Do not ignore popular icons (#36608) @michaldudak
26
+
27
+ ### `@mui/joy@5.0.0-alpha.74`
28
+
29
+ - [Joy] Add `ModalOverflow` component (#36262) @siriwatknp
30
+ - [Joy] Fix `Checkbox` custom color prop type warning (#36691) @amal-qb
31
+
32
+ ### Docs
33
+
34
+ - [docs][base] Add return type for `useFormControlUnstyledContext` hook (#36302) @HeVictor
35
+ - [docs][base] Move styles to the bottom of demos code for `FormControl` (#36579) @gitstart
36
+ - [docs][base] Move styles to the bottom of demos code for `Menu` (#36582) @gitstart
37
+ - [docs][base] Move styles code to bottom in the `Button` demos (#36590) @sai6855
38
+ - [docs][base] Show components & hooks API on the components page (#35938) @mnajdova
39
+ - [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
40
+ - [docs] Fix double API page redirection (#36743) @oliviertassinari
41
+ - [docs] Remove hash property and leverage pathname (#36764) @siriwatknp
42
+ - [docs] Introduce markdown permalink to source (#36729) @oliviertassinari
43
+ - [docs] Tabs API add slots section (#36769) @mnajdova
44
+ - [docs] Update feedbacks management on slack (#36705) @alexfauquette
45
+ - [docs] Fix Joy UI URL to tokens (#36742) @oliviertassinari
46
+ - [docs] Add toggle-button coming soon page (#36618) @siriwatknp
47
+ - [docs] Fix typo on the Joy UI theme builder (#36734) @danilo-leal
48
+ - [docs] Fix small typo (#36727) @RBerthier
49
+ - [docs] Fix Joy UI template broken image loading @oliviertassinari
50
+ - [docs] Hide the default API column if it's empty (#36715) @mnajdova
51
+ - [docs] Update Material UI Related Projects page (#34203) @viclafouch
52
+ - [docs] Revise Joy UI "Circular Progress" page (#36126) @LadyBluenotes
53
+ - [docs] Revise Joy UI "Radio" page (#35893) @DevinCLane
54
+ - [docs] Support Google Analytics 4 (#36123) @alexfauquette
55
+ - [docs][material] Keep consistency in description of classes (#36631) @hbjORbj
56
+ - [docs] Remove redundant files and fix regression (#36775) @ZeeshanTamboli
57
+
58
+ ### Core
59
+
60
+ - [blog] Compress images @oliviertassinari
61
+ - [core] Remove unused token (#36722) @oliviertassinari
62
+
63
+ All contributors of this release in alphabetical order: @alexfauquette, @amal-qb, @danilo-leal, @DevinCLane, @gitstart, @hbjORbj, @HeVictor, @LadyBluenotes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @RBerthier, @sai6855, @siriwatknp, @viclafouch, @yushanwebdev
64
+
65
+ ## 5.11.15
66
+
67
+ <!-- generated comparing v5.11.14..master -->
68
+
69
+ _Mar 28, 2023_
70
+
71
+ A big thanks to the 10 contributors who made this release possible. We have one big highlight this week ✨:
72
+
73
+ - @siriwatknp made a [Theme Builder](https://mui.com/joy-ui/customization/theme-builder) for Joy UI 🎨 (#35741)
74
+
75
+ ### `@mui/material@5.11.15`
76
+
77
+ - [Chip] Fix error when theme value is a CSS variable (#36654) @siriwatknp
78
+ - [Grid2] Support dynamic nested columns (#36401) @siriwatknp
79
+
80
+ ### `@mui/system@5.11.15`
81
+
82
+ - [system] Enable regressions tests & fix regressions (#36611) @mnajdova
83
+ - [Stack] Add `useFlexGap` prop (#36404) @siriwatknp
84
+
85
+ ### `@mui/base@5.0.0-alpha.122`
86
+
87
+ - [Autocomplete] Update `autoSelect` prop description (#36280) @sai6855
88
+ - [TablePagination][base] Improve `actions` type in `slotProps` (#36458) @sai6855
89
+ - [Base] Add JSDoc comments for classes of Base components (#36586) @hbjORbj
90
+ - [useSlider][base] Add API docs for the hook parameters and return type (#36576) @varunmulay22
91
+
92
+ ### `@mui/joy@5.0.0-alpha.73`
93
+
94
+ - [Joy] Miscellaneous fixes (#36628) @siriwatknp
95
+ - [Joy] Add palette customizer (#35741) @siriwatknp
96
+
97
+ ### Docs
98
+
99
+ - Revert "[docs] Use `theme.applyDarkStyles` for the rest of the docs" (#36602) @mnajdova
100
+ - [blog] Improvements on v6 announcement blog (#36505) @joserodolfofreitas
101
+ - [docs] Add `Snackbar` coming soon page (#36604) @danilo-leal
102
+ - [docs] Add accordion coming soon page (#36279) @siriwatknp
103
+ - [docs] Fix palette customizer theme augmentation (#36629) @siriwatknp
104
+ - [docs] Finish migration away from https://reactjs.org/ @oliviertassinari
105
+ - [docs] Remove duplicated slot descriptions (#36621) @hbjORbj
106
+ - [docs] Fix broken example link (#36607) @mnajdova
107
+ - [docs] Use `theme.applyDarkStyles` (#36606) @siriwatknp
108
+ - [docs] Improve API for theme default prop (#36490) @oliviertassinari
109
+ - [docs][Table] Refactor `Sorting & Selecting` table demo (#33236) @IFaniry
110
+
111
+ ### Core
112
+
113
+ - [core] Use Netlify function for feedback management (#36472) @alexfauquette
114
+
115
+ All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @hbjORbj, @IFaniry, @joserodolfofreitas, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @varunmulay22
116
+
3
117
  ## 5.11.14
4
118
 
5
119
  <!-- generated comparing v5.11.13..master -->
@@ -5354,7 +5468,7 @@ _Sep 1, 2021_
5354
5468
  A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
5355
5469
 
5356
5470
  - 🎉 Renamed packages to `@mui/*` as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the [GitHub discussion](https://github.com/mui/material-ui/discussions/27803).
5357
- - 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
5471
+ - 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
5358
5472
  - 🧪 Added new `<Mansory>` component to the lab, [check it out](https://mui.com/components/masonry/). It has been crafted by our first intern, @hbjORbj 👏!
5359
5473
 
5360
5474
  ### `@mui/material@5.0.0-rc.0`
@@ -5386,7 +5500,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
5386
5500
 
5387
5501
  > **Note**: `@mui/base` (previously `@material-ui/unstyled`) is not the same as `@material-ui/core`.
5388
5502
 
5389
- We encourage you to use the [codemod](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) for smooth migration.
5503
+ We encourage you to use the [codemod](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#mui-replace) for smooth migration.
5390
5504
 
5391
5505
  #### Changes
5392
5506
 
@@ -6521,7 +6635,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
6521
6635
 
6522
6636
  - 👩‍🎤 We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova.
6523
6637
  - 📦 Save [10 kB gzipped](https://bundlephobia.com/package/@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
6524
- - ⚒️ Add many new [codemods](https://github.com/mui/material-ui/blob/HEAD/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
6638
+ - ⚒️ Add many new [codemods](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
6525
6639
  - And many more 🐛 bug fixes and 📚 improvements.
6526
6640
 
6527
6641
  ### `@material-ui/core@5.0.0-alpha.35`
@@ -8789,7 +8903,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
8789
8903
 
8790
8904
  - [Box] Remove deprecated props (#23716) @mnajdova
8791
8905
  All props are now available under the `sx` prop. A deprecation will be landing in v4.
8792
- Thanks to @mbrookes developers can automate the migration with a [codemod](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#box-sx-prop).
8906
+ Thanks to @mbrookes developers can automate the migration with a [codemod](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#box-sx-prop).
8793
8907
 
8794
8908
  ```diff
8795
8909
  -<Box p={2} bgcolor="primary.main">
@@ -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 {};
package/Stack/Stack.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- /**
2
- *
3
- * Demos:
4
- *
5
- * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
6
- * - [Stack (MUI System)](https://mui.com/system/react-stack/)
7
- *
8
- * API:
9
- *
10
- * - [Stack API](https://mui.com/system/api/stack/)
11
- */
12
- declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
13
- export default Stack;
1
+ /**
2
+ *
3
+ * Demos:
4
+ *
5
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
6
+ * - [Stack (MUI System)](https://mui.com/system/react-stack/)
7
+ *
8
+ * API:
9
+ *
10
+ * - [Stack API](https://mui.com/system/api/stack/)
11
+ */
12
+ declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
13
+ export default Stack;
package/Stack/Stack.js CHANGED
@@ -51,7 +51,17 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
51
51
  /**
52
52
  * The system prop, which allows defining system overrides as well as additional CSS styles.
53
53
  */
54
- sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
54
+ sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
55
+ /**
56
+ * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
57
+ *
58
+ * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
59
+ * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
60
+ *
61
+ * To enable this flag globally, follow the theme's default props configuration.
62
+ * @default false
63
+ */
64
+ useFlexGap: _propTypes.default.bool
55
65
  } : void 0;
56
66
  var _default = Stack;
57
67
  exports.default = _default;
@@ -1,42 +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
- export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
28
- props: P & StackBaseProps & {
29
- /**
30
- * The system prop, which allows defining system overrides as well as additional CSS styles.
31
- */
32
- sx?: SxProps<Theme>;
33
- } & SystemProps<Theme>;
34
- defaultComponent: D;
35
- }
36
- export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
37
- component?: React.ElementType;
38
- }> = OverrideProps<StackTypeMap<P, D>, D>;
39
- export interface StackOwnerState {
40
- direction: StackProps['direction'];
41
- spacing: StackProps['spacing'];
42
- }
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,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 {};
@@ -19,7 +19,7 @@ var _createTheme = _interopRequireDefault(require("../createTheme"));
19
19
  var _breakpoints = require("../breakpoints");
20
20
  var _spacing = require("../spacing");
21
21
  var _jsxRuntime = require("react/jsx-runtime");
22
- const _excluded = ["component", "direction", "spacing", "divider", "children", "className"];
22
+ const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
23
23
  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); }
24
24
  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; }
25
25
  const defaultTheme = (0, _createTheme.default)();
@@ -105,6 +105,11 @@ const style = ({
105
105
  });
106
106
  }
107
107
  const styleFromPropValue = (propValue, breakpoint) => {
108
+ if (ownerState.useFlexGap) {
109
+ return {
110
+ gap: (0, _spacing.getValue)(transformer, propValue)
111
+ };
112
+ }
108
113
  return {
109
114
  '& > :not(style) + :not(style)': {
110
115
  margin: 0,
@@ -143,12 +148,14 @@ function createStack(options = {}) {
143
148
  spacing = 0,
144
149
  divider,
145
150
  children,
146
- className
151
+ className,
152
+ useFlexGap = false
147
153
  } = props,
148
154
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
149
155
  const ownerState = {
150
156
  direction,
151
- spacing
157
+ spacing,
158
+ useFlexGap
152
159
  };
153
160
  const classes = useUtilityClasses();
154
161
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
package/Stack/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { default } from './Stack';
2
- export { default as createStack } from './createStack';
3
- export * from './StackProps';
4
- export { default as stackClasses } from './stackClasses';
5
- export * from './stackClasses';
1
+ export { default } from './Stack';
2
+ export { default as createStack } from './createStack';
3
+ export * from './StackProps';
4
+ export { default as stackClasses } from './stackClasses';
5
+ export * from './stackClasses';
@@ -1,8 +1,8 @@
1
- export interface StackClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- }
5
- export type StackClassKey = keyof StackClasses;
6
- export declare function getStackUtilityClass(slot: string): string;
7
- declare const stackClasses: StackClasses;
8
- export default stackClasses;
1
+ export interface StackClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ }
5
+ export type StackClassKey = keyof StackClasses;
6
+ export declare function getStackUtilityClass(slot: string): string;
7
+ declare const stackClasses: StackClasses;
8
+ export default stackClasses;
@@ -1,12 +1,12 @@
1
- /**
2
- *
3
- * Demos:
4
- *
5
- * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
6
- *
7
- * API:
8
- *
9
- * - [Grid API](https://mui.com/system/api/grid/)
10
- */
11
- declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps").GridTypeMap<{}, "div">>;
12
- export default Grid;
1
+ /**
2
+ *
3
+ * Demos:
4
+ *
5
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
6
+ *
7
+ * API:
8
+ *
9
+ * - [Grid API](https://mui.com/system/api/grid/)
10
+ */
11
+ declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps").GridTypeMap<{}, "div">>;
12
+ export default Grid;