diff --git a/docs/translations/api-docs/masonry-item/masonry-item-de.json b/docs/translations/api-docs/masonry-item/masonry-item-de.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-de.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-de.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-es.json b/docs/translations/api-docs/masonry-item/masonry-item-es.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-es.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-es.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-fr.json b/docs/translations/api-docs/masonry-item/masonry-item-fr.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-fr.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-fr.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-ja.json b/docs/translations/api-docs/masonry-item/masonry-item-ja.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-ja.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-ja.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-pt.json b/docs/translations/api-docs/masonry-item/masonry-item-pt.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-pt.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-pt.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-ru.json b/docs/translations/api-docs/masonry-item/masonry-item-ru.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-ru.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-ru.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry-item/masonry-item-zh.json b/docs/translations/api-docs/masonry-item/masonry-item-zh.json
index 308b7edb5b2474..2affccb38312ea 100644
--- a/docs/translations/api-docs/masonry-item/masonry-item-zh.json
+++ b/docs/translations/api-docs/masonry-item/masonry-item-zh.json
@@ -3,7 +3,9 @@
"propDescriptions": {
"children": "The content of the component, normally an <img /> or a <div />.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
+ "columnSpan": "The number of columns taken up by the component",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
+ "height": "The height of the component in px.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
},
"classDescriptions": { "root": { "description": "Styles applied to the root element." } }
diff --git a/docs/translations/api-docs/masonry/masonry-de.json b/docs/translations/api-docs/masonry/masonry-de.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-de.json
+++ b/docs/translations/api-docs/masonry/masonry-de.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-es.json b/docs/translations/api-docs/masonry/masonry-es.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-es.json
+++ b/docs/translations/api-docs/masonry/masonry-es.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-fr.json b/docs/translations/api-docs/masonry/masonry-fr.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-fr.json
+++ b/docs/translations/api-docs/masonry/masonry-fr.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-ja.json b/docs/translations/api-docs/masonry/masonry-ja.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-ja.json
+++ b/docs/translations/api-docs/masonry/masonry-ja.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-pt.json b/docs/translations/api-docs/masonry/masonry-pt.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-pt.json
+++ b/docs/translations/api-docs/masonry/masonry-pt.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-ru.json b/docs/translations/api-docs/masonry/masonry-ru.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-ru.json
+++ b/docs/translations/api-docs/masonry/masonry-ru.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/docs/translations/api-docs/masonry/masonry-zh.json b/docs/translations/api-docs/masonry/masonry-zh.json
index 7b4d84fdc144ea..529c7b45599a51 100644
--- a/docs/translations/api-docs/masonry/masonry-zh.json
+++ b/docs/translations/api-docs/masonry/masonry-zh.json
@@ -3,7 +3,7 @@
"propDescriptions": {
"children": "The content of the component, normally <MasonryItem />s.",
"classes": "Override or extend the styles applied to the component. See CSS API below for more details.",
- "cols": "Number of columns.",
+ "columns": "Number of columns.",
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"spacing": "Defines the space between children.",
"sx": "Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details."
diff --git a/package.json b/package.json
index 48dd46629317a0..a2858e9a6d0565 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,7 @@
"react-router-dom": "^5.2.0",
"react-test-renderer": "^17.0.1",
"remark": "^13.0.0",
- "resize-observer": "^1.0.2",
+ "resize-observer-polyfill": "^1.5.1",
"rimraf": "^3.0.0",
"rollup": "^2.10.8",
"rollup-plugin-babel": "^4.3.3",
diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.js b/packages/material-ui-lab/src/MasonryItem/MasonryItem.js
index 819226cd68c96f..8f46321a20124e 100644
--- a/packages/material-ui-lab/src/MasonryItem/MasonryItem.js
+++ b/packages/material-ui-lab/src/MasonryItem/MasonryItem.js
@@ -10,7 +10,7 @@ import {
import { deepmerge, unstable_useForkRef as useForkRef } from '@material-ui/utils';
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import { styled, useThemeProps } from '@material-ui/core/styles';
-import { ResizeObserver } from 'resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
import { getMasonryItemUtilityClass } from './masonryItemClasses';
import MasonryContext from '../Masonry/MasonryContext';
@@ -45,7 +45,7 @@ export const style = ({ styleProps, theme }) => {
const transformer = createUnarySpacing(theme);
const styleFromPropValue = (propValue) => {
const gap = Number(getValue(transformer, propValue).replace('px', ''));
- const rowSpan = styleProps.height ? Math.ceil(styleProps.height + gap) : 0;
+ const rowSpan = Math.ceil(styleProps.height + gap);
return {
gridRowEnd: `span ${rowSpan}`,
paddingBottom: gap - 1,
@@ -73,11 +73,12 @@ const MasonryItem = React.forwardRef(function MasonryItem(inProps, ref) {
const masonryItemRef = React.useRef(null);
const { spacing = 1, documentReady = false } = React.useContext(MasonryContext);
- const { children, className, component = 'div', columnSpan = 1, ...other } = props;
+ const { children, className, component = 'div', columnSpan = 1, height = 0, ...other } = props;
const [styleProps, setStyleProps] = React.useState({
...props,
spacing,
columnSpan,
+ height,
});
const classes = useUtilityClasses(styleProps);
diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js b/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js
index 5b4b33ae1e3581..0e4017a2d3e3fe 100644
--- a/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js
+++ b/packages/material-ui-lab/src/MasonryItem/MasonryItem.test.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { createClientRender, describeConformanceV5, act } from 'test/utils';
+import { createClientRender, describeConformanceV5 } from 'test/utils';
import MasonryItem, { masonryItemClasses as classes } from '@material-ui/lab/MasonryItem';
import { expect } from 'chai';
import { createTheme } from '@material-ui/core/styles';
@@ -21,7 +21,13 @@ describe('', () => {
testComponentPropWith: 'div',
testVariantProps: { variant: 'foo' },
muiName: 'MuiMasonryItem',
- skip: ['componentsProp'],
+ skip: [
+ 'componentsProp',
+ // reactTestRenderer fails because React state updates should be wrapped into act(...)
+ // I followed the guideline here: https://reactjs.org/link/wrap-tests-with-act
+ // but tests still couldn't pass
+ 'reactTestRenderer',
+ ],
}),
);
@@ -31,12 +37,8 @@ describe('', () => {
});
it('should render children by default', () => {
- let item = null;
- act(() => {
- const { getByTestId } = render({children});
- item = getByTestId('test-children');
- });
- expect(item).not.to.equal(null);
+ const { getByTestId } = render({children});
+ expect(getByTestId('test-children')).not.to.equal(null);
});
describe('style attribute:', () => {
@@ -44,7 +46,7 @@ describe('', () => {
expect(
style({
styleProps: {
- contentHeight: 100,
+ height: 100,
columnSpan: 1,
spacing: { xs: 1, sm: 2, md: 3 },
},
@@ -76,7 +78,7 @@ describe('', () => {
expect(
style({
styleProps: {
- contentHeight: 100,
+ height: 100,
columnSpan: 2,
spacing: 1,
},
@@ -93,38 +95,38 @@ describe('', () => {
gridColumnEnd: 'span 2',
});
});
+
+ it('should compute grid-row-end based on given height', () => {
+ const { getByTestId } = render(
+
+ {children}
+ ,
+ );
+ const computedStyle = getComputedStyle(getByTestId('test-root'));
+ expect(computedStyle['grid-row-end']).to.equal(
+ `span ${Math.ceil(150 + Number(theme.spacing(1).replace('px', '')))}`,
+ );
+ });
});
describe('props:', () => {
describe('prop: component', () => {
it('should render a div by default', () => {
- let item = null;
- act(() => {
- const { container } = render({children});
- item = container;
- });
- expect(item.firstChild).to.have.property('nodeName', 'DIV');
+ const { container } = render({children});
+ expect(container.firstChild).to.have.property('nodeName', 'DIV');
});
it('should render a different component', () => {
- let item = null;
- act(() => {
- const { container } = render({children});
- item = container;
- });
- expect(item.firstChild).to.have.property('nodeName', 'SPAN');
+ const { container } = render({children});
+ expect(container.firstChild).to.have.property('nodeName', 'SPAN');
});
});
describe('prop: className', () => {
it('should append the className to the root element', () => {
- let item = null;
- act(() => {
- const { container } = render({children});
- item = container;
- });
- expect(item.firstChild).to.have.class(classes.root);
- expect(item.firstChild).to.have.class('foo');
+ const { container } = render({children});
+ expect(container.firstChild).to.have.class(classes.root);
+ expect(container.firstChild).to.have.class('foo');
});
});
});
diff --git a/yarn.lock b/yarn.lock
index 1a12f7964a2cbe..0a200d3fc078db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14297,11 +14297,6 @@ resize-observer-polyfill@^1.5.1:
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-resize-observer@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/resize-observer/-/resize-observer-1.0.2.tgz#9a87697b275343d12d8b371940e02e9a93e1f452"
- integrity sha512-X0lHFNsxItpBRIRsdwOTkl/VguTaLGx7Gz9xoTGix9ObBN3jRYq9J/rSIuYDrey8AdU3IkfgIMpCeVSEW1QS0Q==
-
resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"