@mui/system 5.11.13 → 5.11.15

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 +123 -3
  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 -30
  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 -29
  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 -28
  49. package/modern/styleFunctionSx/styleFunctionSx.js +5 -0
  50. package/package.json +1 -1
  51. package/styleFunctionSx/defaultSxConfig.js +3 -30
  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,125 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.11.15
4
+
5
+ <!-- generated comparing v5.11.14..master -->
6
+
7
+ _Mar 28, 2023_
8
+
9
+ A big thanks to the 10 contributors who made this release possible. We have one big highlight this week ✨:
10
+
11
+ - @siriwatknp made a [Theme Builder](https://mui.com/joy-ui/customization/theme-builder) for Joy UI 🎨 (#35741)
12
+
13
+ ### `@mui/material@5.11.15`
14
+
15
+ - [Chip] Fix error when theme value is a CSS variable (#36654) @siriwatknp
16
+ - [Grid2] Support dynamic nested columns (#36401) @siriwatknp
17
+
18
+ ### `@mui/system@5.11.15`
19
+
20
+ - [system] Enable regressions tests & fix regressions (#36611) @mnajdova
21
+ - [Stack] Add `useFlexGap` prop (#36404) @siriwatknp
22
+
23
+ ### `@mui/base@5.0.0-alpha.122`
24
+
25
+ - [Autocomplete] Update `autoSelect` prop description (#36280) @sai6855
26
+ - [TablePagination][base] Improve `actions` type in `slotProps` (#36458) @sai6855
27
+ - [Base] Add JSDoc comments for classes of Base components (#36586) @hbjORbj
28
+ - [useSlider][base] Add API docs for the hook parameters and return type (#36576) @varunmulay22
29
+
30
+ ### `@mui/joy@5.0.0-alpha.73`
31
+
32
+ - [Joy] Miscellaneous fixes (#36628) @siriwatknp
33
+ - [Joy] Add palette customizer (#35741) @siriwatknp
34
+
35
+ ### Docs
36
+
37
+ - Revert "[docs] Use `theme.applyDarkStyles` for the rest of the docs" (#36602) @mnajdova
38
+ - [blog] Improvements on v6 announcement blog (#36505) @joserodolfofreitas
39
+ - [docs] Add `Snackbar` coming soon page (#36604) @danilo-leal
40
+ - [docs] Add accordion coming soon page (#36279) @siriwatknp
41
+ - [docs] Fix palette customizer theme augmentation (#36629) @siriwatknp
42
+ - [docs] Finish migration away from https://reactjs.org/ @oliviertassinari
43
+ - [docs] Remove duplicated slot descriptions (#36621) @hbjORbj
44
+ - [docs] Fix broken example link (#36607) @mnajdova
45
+ - [docs] Use `theme.applyDarkStyles` (#36606) @siriwatknp
46
+ - [docs] Improve API for theme default prop (#36490) @oliviertassinari
47
+ - [docs][Table] Refactor `Sorting & Selecting` table demo (#33236) @IFaniry
48
+
49
+ ### Core
50
+
51
+ - [core] Use Netlify function for feedback management (#36472) @alexfauquette
52
+
53
+ All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @hbjORbj, @IFaniry, @joserodolfofreitas, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @varunmulay22
54
+
55
+ ## 5.11.14
56
+
57
+ <!-- generated comparing v5.11.13..master -->
58
+
59
+ _Mar 21, 2023_
60
+
61
+ A big thanks to the 15 contributors who made this release possible.
62
+ This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
63
+
64
+ ### `@mui/material@5.11.14`
65
+
66
+ - [Breadcrumbs] Add ability to change icon used in `BreadcrumbCollapsed` through slots (#33812) @pratikkarad
67
+ - [Stepper] Add aria-current to active StepButton (#36526) @michalak111
68
+ - [TabScrollButton] Add ability to change left and right icons (#33863) @pratikkarad
69
+ - [ListItemButton] Respect LinkComponent (#34159) @zaverden
70
+ - [l10n] Add Central Kurdish (ku-CKB) locale (#36592) @HediMuhamad
71
+
72
+ ### `@mui/system@5.11.14`
73
+
74
+ - [system] Fix sx prop regression for fontWeight values (#36543) @mnajdova
75
+
76
+ ### `@mui/base@5.0.0-alpha.121`
77
+
78
+ - [docs][base] Improve the Slots Table in API docs (#36330) @hbjORbj
79
+
80
+ ### `@mui/joy@5.0.0-alpha.72`
81
+
82
+ - [Joy] Ensure new CSS variable naming is everywhere (#36460) @hbjORbj
83
+ - [Menu][joy] Classname listbox is missing (#36520) @hbjORbj
84
+ - [Joy] Fix `--List-decorator*` vars (#36595) @siriwatknp
85
+
86
+ ### `@mui/lab@5.0.0-alpha.124`
87
+
88
+ - [Masonry] Include Masonry in theme augmentation interface (#36533) @hbjORbj
89
+
90
+ ### Docs
91
+
92
+ - [blog] Post blog about Chamonix retreat to the website (#36517) @mikailaread
93
+ - [blog] Fix image layout shift (#36522) @oliviertassinari
94
+ - [docs] Use `theme.applyDarkStyles` for the rest of the docs (#36161) @siriwatknp
95
+ - [docs] Fix 301 and 404 links (#36555) @oliviertassinari
96
+ - [docs] Keep slot code order in API docs (#36499) @oliviertassinari
97
+ - [docs] Missing className on Migrating from JSS example (#36536) @gabrielnafuzi
98
+ - [docs] Fix function name for Joy templates (#36512) @hbjORbj
99
+ - [docs] Add multiline Chip example (#36437) @dav1app
100
+ - [docs] Add a new gold sponsor (#36518) @hbjORbj
101
+ - [docs][joy] Improve the Slots Table in API docs (#36328) @hbjORbj
102
+ - [docs] Fix virtualElement demo for Popper (#36320) @sai6855
103
+ - [docs] Fix typo in API docs (#36388) @RomanHotsiy
104
+ - [docs] Ensure classname displayed under Slots section in API docs exists (#36539) @hbjORbj
105
+ - [docs][joy] Build TS versions for Modal component demos (#36385) @varunmulay22
106
+ - [docs][joy] Build TS versions for Menu component demos (#36383) @varunmulay22
107
+ - [docs][joy] Build TS versions for Switch component demos (#36379) @varunmulay22
108
+ - [docs] Remove `shouldSkipGeneratingVar` usage (#36581) @siriwatknp
109
+ - [docs][material] Update Table's demo to show pointer cursor on clickable rows (#36546) @varunmulay22
110
+ - [website] Designer role changes (#36528) @danilo-leal
111
+ - [website] No association between showcase and MUI @oliviertassinari
112
+ - [website] Open Head of Operations role (#36501) @oliviertassinari
113
+ - [website] Limit sponsors description to two rows @oliviertassinari
114
+
115
+ ### Core
116
+
117
+ - [core] Fix CI @oliviertassinari
118
+ - [core] Fix blank line @oliviertassinari
119
+ - [website] Simplify internal ops @oliviertassinari
120
+
121
+ All contributors of this release in alphabetical order: @danilo-leal, @dav1app, @gabrielnafuzi, @hbjORbj, @HediMuhamad, @michalak111, @mikailaread, @mnajdova, @oliviertassinari, @pratikkarad, @RomanHotsiy, @sai6855, @siriwatknp, @varunmulay22, @zaverden
122
+
3
123
  ## 5.11.13
4
124
 
5
125
  <!-- generated comparing v5.11.12..master -->
@@ -9076,7 +9196,7 @@ _Nov 4, 2020_
9076
9196
  A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
9077
9197
 
9078
9198
  - ⚛️ Add support for React 17 (#23311) @eps1lon.
9079
- React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`.
9199
+ React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the [introduction post](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html). Material UI now supports `^16.8.0 || ^17.0.0`.
9080
9200
  - 🛠 Introduce a new `@material-ui/unstyled` package (#23270) @mnajdova.
9081
9201
  This package will host the unstyled version of the components. In this first iteration, only the Slider is available. You can find it documented under the [same page](https://mui.com/components/slider-styled/#unstyled-slider) as the styled version.
9082
9202
 
@@ -10085,7 +10205,7 @@ Here are some highlights ✨:
10085
10205
  #### Breaking changes
10086
10206
 
10087
10207
  - [Modal] Remove `onRendered` prop from Modal and Portal (#22464) @eps1lon
10088
- Depending on your use case either use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
10208
+ Depending on your use case either use a [callback ref](https://legacy.reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
10089
10209
 
10090
10210
  #### Changes
10091
10211
 
@@ -10548,7 +10668,7 @@ Here are some highlights ✨:
10548
10668
 
10549
10669
  - [RootRef] Remove component (#21974) @eps1lon
10550
10670
  This component was removed. You can get a reference to the underlying DOM node of our components via `ref` prop.
10551
- The component relied on [`ReactDOM.findDOMNode`](https://reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
10671
+ The component relied on [`ReactDOM.findDOMNode`](https://legacy.reactjs.org/docs/react-dom.html#finddomnode) which is [deprecated in `React.StrictMode`](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage).
10552
10672
 
10553
10673
  ```diff
10554
10674
  -<RootRef rootRef={ref}>
@@ -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;