@mui/system 5.13.6 → 5.13.7

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 CHANGED
@@ -1,5 +1,91 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.13.7
4
+
5
+ <!-- generated comparing v5.13.6..master -->
6
+
7
+ _Jul 4, 2023_
8
+
9
+ A big thanks to the 21 contributors who made this release possible.
10
+ This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
11
+
12
+ ### `@mui/material@5.13.7`
13
+
14
+ - [OutlinedInput] Fix form control properties in `ownerState` (#37668) @vonagam
15
+
16
+ ### `@mui/system@5.13.7`
17
+
18
+ - [Stack] Fix spacing when there are `<style>` children (#34966) @cmd-johnson
19
+
20
+ ### `@mui/icons-material@5.13.7`
21
+
22
+ - [icons] Add Microsoft logo (#37717) @zephyrus21
23
+
24
+ ### `@mui/joy@5.0.0-alpha.86`
25
+
26
+ - [Autocomplete][joy] Fix Autocomplete and Modal components to work together (#37515) @saikathalderr
27
+ - [Menu][Joy] Improve UX of `Menu` usage demo (#37797) @sai6855
28
+
29
+ ### `@mui/base@5.0.0-beta.6`
30
+
31
+ - [Slider][base][material][joy] Fix not draggable on the edge when `disableSwap={true}` (#35998) @sai6855
32
+ - [Slider][base] Provide slot state to Slider's thumb slot props callback (#37749) @mnajdova
33
+ - [Tabs] Wrap TabsList context creation in useMemo (#37370) @michaldudak
34
+ - [TextareaAutosize] Fix wrong height measurement (#37185) @bigteech
35
+
36
+ ### `@mui/lab@5.0.0-alpha.135`
37
+
38
+ - [Timeline] Fix position `alternate-reverse` generated classname (#37678) @ZeeshanTamboli
39
+
40
+ ### Docs
41
+
42
+ - [docs][base] Add demo for using the Button as a link (#37317) @AdamSundberg
43
+ - [docs][base] Add Tailwind CSS + plain CSS demo on the Select page (#37725) @mnajdova
44
+ - [docs][base] Make Base UI input demos denser (#37750) @zanivan
45
+ - [docs][base] Make Base UI button demos denser (#37689) @zanivan
46
+ - [docs][base] Add Tailwind CSS & plain CSS demos on the Input page (#37685) @mnajdova
47
+ - [docs][base] Fix horizontal scrolling on the mobile input page (#37688) @zanivan
48
+ - [docs] Improve Base UI index page (#37761) @oliviertassinari
49
+ - [docs] Fix incorrect package URL in README of example material-vite (#37755) @Dlouxgit
50
+ - [docs] Explain how to disable Base Select's portal (#37684) @michaldudak
51
+ - [docs] Shorten overview page URLs (#37660) @oliviertassinari
52
+ - [docs][material] Rename custom tab panel in Tabs demo to prevent confusion with @mui/lab (#37638) @MUK-Dev
53
+ - [docs][tabs] Document how to use routing with Tabs in Base UI (#37369) @michaldudak
54
+ - [docs] Rename product to productId (#37801) @siriwatknp
55
+ - [docs][base] Add Tailwind CSS & plain CSS demo on the Slider page (#37736) @mnajdova
56
+
57
+ ### Core
58
+
59
+ - [docs–infra] Prevent displaying multiple ads (#37696) @oliviertassinari
60
+ - [blog] Fix mismatch between plan and link @oliviertassinari
61
+ - [core] Update yarn lockfile (#37802) @michaldudak
62
+ - [core] Add bundle size Toolpad app link to PRs (#36311) @Janpot
63
+ - [core] Fix priority support prompt action flow (#37726) @DanailH
64
+ - [core] Fix typo in priority support @oliviertassinari
65
+ - [core][docs] add Eslint rule to ensure main demo component match file… (#37278) @alexfauquette
66
+ - [docs-infra] Fix truncated TOCs scrollbar (#37770) @oliviertassinari
67
+ - [docs-infra] Adjust demo container to be glued to the toolbar (#37744) @danilo-leal
68
+ - [docs-infra] Fix layout shift ad (#37694) @oliviertassinari
69
+ - [docs-infra] Improve demos toolbar (#37762) @oliviertassinari
70
+ - [docs-infra] Make the GitHub link in the nav bar open in a new tab (#37766) @gateremark
71
+ - [docs-infra] Allow to persist icons in ToC (#37731) @cherniavskii
72
+ - [docs-infra] Improve product mapping (#37729) @oliviertassinari
73
+ - [docs-infra] Add design polish to the comment and anchor buttons (#37734) @danilo-leal
74
+ - [docs-infra] Tweak editable code blocks callout design (#37681) @danilo-leal
75
+ - [docs-infra] Improve the edit page experience (#37695) @oliviertassinari
76
+ - [docs-infra] Support rendering markdown outside of docs (#37691) @oliviertassinari
77
+ - [docs-infra] Polish demo toolbar button designs (#37680) @danilo-leal
78
+ - [docs-infra] Adjust demo component container design (#37659) @danilo-leal
79
+ - [test] Fix test:e2e local run (#37719) @oliviertassinari
80
+ - [test] Remove failing test in dev @oliviertassinari
81
+ - [website] Add no-op service worker to fix stale cache issue (#37607) @cherniavskii
82
+ - [website] Transition the Core page to be Material UI instead (#37583) @danilo-leal
83
+ - [website] Update the pricing page to reflect sales (#37751) @oliviertassinari
84
+ - [website] Match Copyright with the rest of the website @oliviertassinari
85
+ - [website] Support deep linking to pricing FAQ @oliviertassinari
86
+
87
+ All contributors of this release in alphabetical order: @AdamSundberg, @alexfauquette, @bigteech, @cherniavskii, @cmd-johnson, @DanailH, @danilo-leal, @Dlouxgit, @gateremark, @Janpot, @michaldudak, @mnajdova, @MUK-Dev, @oliviertassinari, @sai6855, @saikathalderr, @siriwatknp, @vonagam, @zanivan, @ZeeshanTamboli, @zephyrus21
88
+
3
89
  ## 5.13.6
4
90
 
5
91
  _Jun 21, 2023_
@@ -9858,7 +9944,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
9858
9944
 
9859
9945
  While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what.
9860
9946
 
9861
- - 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/overview/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
9947
+ - 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
9862
9948
  - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova.
9863
9949
  - And many more 🐛 bug fixes and 📚 improvements.
9864
9950
 
@@ -10260,7 +10346,7 @@ Here are some highlights ✨:
10260
10346
  If you target IE11, you need to use the new bundle (`legacy`). We are treating IE11 as a second class-citizen, which is a continuation of the direction taken in #22873.
10261
10347
 
10262
10348
  - 🚀 Improve the internal benchmark suite (#22923, #23058) @mnajdova.
10263
- This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/overview/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
10349
+ This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
10264
10350
  - ✏️ A new blog post: [Q3 2020 Update](https://mui.com/blog/2020-q3-update/) (#23055) @oliviertassinari.
10265
10351
  - 🐙 Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l.
10266
10352
  - And many more 🐛 bug fixes and 📚 improvements.
@@ -10601,7 +10687,7 @@ Here are some highlights ✨:
10601
10687
 
10602
10688
  The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
10603
10689
 
10604
- Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/overview/)).
10690
+ Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/)).
10605
10691
 
10606
10692
  This change has been in our roadmap for more than a year.
10607
10693
  We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take.
@@ -11854,7 +11940,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som
11854
11940
  />
11855
11941
  ```
11856
11942
 
11857
- - [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/overview/) (#21413) @mnajdova.
11943
+ - [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/) (#21413) @mnajdova.
11858
11944
 
11859
11945
  ```diff
11860
11946
  -import Typography from '@material-ui/core/Typography';
@@ -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 {};
@@ -1,13 +1,13 @@
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;
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;
@@ -1,2 +1,2 @@
1
- export { default } from './GlobalStyles';
2
- export * from './GlobalStyles';
1
+ export { default } from './GlobalStyles';
2
+ export * from './GlobalStyles';
package/README.md CHANGED
@@ -20,4 +20,4 @@ yarn add @mui/system @emotion/react @emotion/styled
20
20
 
21
21
  <!-- #default-branch-switch -->
22
22
 
23
- [The documentation](https://mui.com/system/getting-started/overview/)
23
+ [The documentation](https://mui.com/system/getting-started/)
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;
@@ -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
+ }
@@ -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 {};
@@ -111,7 +111,7 @@ const style = ({
111
111
  };
112
112
  }
113
113
  return {
114
- '& > :not(style) + :not(style)': {
114
+ '& > :not(style) ~ :not(style)': {
115
115
  margin: 0,
116
116
  [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
117
117
  }
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;