Refactor codes and improve docs to explain props more clearly

docs/src/pages/components/masonry/DiffColSizeMasonry.js

@@ -26,19 +26,19 @@ export default function DiffColSizeMasonry() {
 }
 
 const itemData = [
-  { height: 150, span: 1 },
-  { height: 30, span: 1 },
+  { height: 150 },
+  { height: 30 },
   { height: 90, span: 2 },
-  { height: 110, span: 1 },
-  { height: 150, span: 1 },
-  { height: 150, span: 1 },
+  { height: 110 },
+  { height: 150 },
+  { height: 150 },
   { height: 130, span: 2 },
   { height: 80, span: 2 },
-  { height: 50, span: 1 },
-  { height: 90, span: 1 },
+  { height: 50 },
+  { height: 90 },
   { height: 100, span: 2 },
-  { height: 150, span: 1 },
-  { height: 50, span: 1 },
+  { height: 150 },
+  { height: 50 },
   { height: 50, span: 2 },
-  { height: 50, span: 1 },
+  { height: 50 },
 ];

docs/src/pages/components/masonry/DiffColSizeMasonry.tsx

@@ -26,19 +26,19 @@ export default function DiffColSizeMasonry() {
 }
 
 const itemData = [
-  { height: 150, span: 1 },
-  { height: 30, span: 1 },
+  { height: 150 },
+  { height: 30 },
   { height: 90, span: 2 },
-  { height: 110, span: 1 },
-  { height: 150, span: 1 },
-  { height: 150, span: 1 },
+  { height: 110 },
+  { height: 150 },
+  { height: 150 },
   { height: 130, span: 2 },
   { height: 80, span: 2 },
-  { height: 50, span: 1 },
-  { height: 90, span: 1 },
+  { height: 50 },
+  { height: 90 },
   { height: 100, span: 2 },
-  { height: 150, span: 1 },
-  { height: 50, span: 1 },
+  { height: 150 },
+  { height: 50 },
   { height: 50, span: 2 },
-  { height: 50, span: 1 },
+  { height: 50 },
 ];

docs/src/pages/components/masonry/masonry.md

@@ -24,6 +24,6 @@ Masonry maintains a list of content blocks with a consistent width but variable
 
 {{"demo": "pages/components/masonry/DiffColSizeMasonry.js", "bg": true}}
 
-> In order to use server-side rendering, you can pass the height of the content of `<MasonryItem />` as shown in the following demo:
+> In order to use server-side rendering, you should pass the height of the content of `<MasonryItem />` as shown in the following demo:
 
 {{"demo": "pages/components/masonry/SSRMasonry.js", "bg": true}}

docs/translations/api-docs/masonry-item/masonry-item-de.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-es.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-fr.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-ja.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-pt.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-ru.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item-zh.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry-item/masonry-item.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>.",
+    "children": "The content of the component, normally an <code>&lt;img /&gt;</code> or a <code>&lt;div /&gt;</code>. It should be only one element.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> 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.",

docs/translations/api-docs/masonry/masonry-de.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-es.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-fr.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-ja.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-pt.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-ru.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry-zh.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

docs/translations/api-docs/masonry/masonry.json

@@ -1,11 +1,11 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "children": "The content of the component, normally <code>&lt;MasonryItem /&gt;</code>s.",
+    "children": "The content of the component. It&#39;s recommended to be <code>&lt;MasonryItem /&gt;</code>s.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "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.",
+    "spacing": "Defines the space between children. It is a factor of the theme&#39;s spacing.",
     "sx": "Allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details."
   },
   "classDescriptions": { "root": { "description": "Styles applied to the root element." } }

package.json

@@ -157,7 +157,6 @@
     "react-router-dom": "^5.2.0",
     "react-test-renderer": "^17.0.1",
     "remark": "^13.0.0",
-    "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.0",
     "rollup": "^2.10.8",
     "rollup-plugin-babel": "^4.3.3",

packages/material-ui-lab/package.json

@@ -75,6 +75,7 @@
     "prop-types": "^15.7.2",
     "react-is": "^17.0.0",
     "react-transition-group": "^4.4.1",
+    "resize-observer-polyfill": "^1.5.1",
     "rifm": "^0.12.0"
   },
   "devDependencies": {

packages/material-ui-lab/src/Masonry/Masonry.d.ts

@@ -6,7 +6,7 @@ import { MasonryClasses } from './masonryClasses';
 export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
-     * The content of the component, normally `<MasonryItem />`s.
+     * The content of the component. It's recommended to be `<MasonryItem />`s.
      */
     children: NonNullable<React.ReactNode>;
     /**
@@ -19,7 +19,7 @@ export interface MasonryTypeMap<P = {}, D extends React.ElementType = 'div'> {
      */
     columns?: ResponsiveStyleValue<number | string>;
     /**
-     * Defines the space between children.
+     * Defines the space between children. It is a factor of the theme's spacing.
      * @default 1
      */
     spacing?: ResponsiveStyleValue<number | string>;

packages/material-ui-lab/src/Masonry/Masonry.js

@@ -48,10 +48,10 @@ export const style = ({ styleProps, theme }) => {
     };
   };
 
-  styles = deepmerge(
-    styles,
-    handleBreakpoints({ theme }, spacingValues, spacingStyleFromPropValue),
-  );
+  styles = {
+    ...styles,
+    ...handleBreakpoints({ theme }, spacingValues, spacingStyleFromPropValue),
+  };
 
   const columnValues = resolveBreakpointValues({ values: styleProps.columns, base });
   const columnStyleFromPropValue = (propValue) => {
@@ -83,10 +83,8 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
   const styleProps = { ...props, spacing, columns };
   const classes = useUtilityClasses(styleProps);
 
-  const masonry = React.useMemo(() => ({ spacing }), [spacing]);
-
   return (
-    <MasonryContext.Provider value={masonry}>
+    <MasonryContext.Provider value={{ spacing }}>
       <MasonryRoot
         as={component}
         className={clsx(classes.root, className)}
@@ -106,7 +104,7 @@ Masonry.propTypes /* remove-proptypes */ = {
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
   /**
-   * The content of the component, normally `<MasonryItem />`s.
+   * The content of the component. It's recommended to be `<MasonryItem />`s.
    */
   children: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired,
   /**
@@ -133,7 +131,7 @@ Masonry.propTypes /* remove-proptypes */ = {
    */
   component: PropTypes.elementType,
   /**
-   * Defines the space between children.
+   * Defines the space between children. It is a factor of the theme's spacing.
    * @default 1
    */
   spacing: PropTypes.oneOfType([

packages/material-ui-lab/src/Masonry/Masonry.test.js

@@ -18,29 +18,14 @@ describe('<Masonry />', () => {
       inheritComponent: 'div',
       render,
       refInstanceof: window.HTMLDivElement,
-      testComponentPropWith: 'div',
+      testComponentPropWith: 'span',
       testVariantProps: { variant: 'foo' },
       muiName: 'MuiMasonry',
       skip: ['componentsProp'],
     }),
   );
 
-  const itemsData = [
-    {
-      img: '/fake1.png',
-      title: 'fake1',
-    },
-    {
-      img: '/fake2.png',
-      title: 'fake2',
-    },
-  ];
   const theme = createTheme({ spacing: 8 });
-  const children = itemsData.map((item, idx) => (
-    <div key={idx} data-testid="test-children">
-      <img src={item.img} alt={item.title} />
-    </div>
-  ));
 
   describe('style attribute:', () => {
     it('should render with correct default styles', () => {
@@ -124,26 +109,4 @@ describe('<Masonry />', () => {
       });
     });
   });
-
-  describe('props:', () => {
-    describe('prop: component', () => {
-      it('should render a div by default', () => {
-        const { container } = render(<Masonry>{children}</Masonry>);
-        expect(container.firstChild).to.have.property('nodeName', 'DIV');
-      });
-
-      it('should render a different component', () => {
-        const { container } = render(<Masonry component="span">{children}</Masonry>);
-        expect(container.firstChild).to.have.property('nodeName', 'SPAN');
-      });
-    });
-
-    describe('prop: className', () => {
-      it('should append the className to the root element', () => {
-        const { container } = render(<Masonry className="foo">{children}</Masonry>);
-        expect(container.firstChild).to.have.class(classes.root);
-        expect(container.firstChild).to.have.class('foo');
-      });
-    });
-  });
 });

packages/material-ui-lab/src/MasonryItem/MasonryItem.d.ts

@@ -6,7 +6,7 @@ import { MasonryItemClasses } from './masonryItemClasses';
 export interface MasonryItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
-     * The content of the component, normally an `<img />` or a `<div />`.
+     * The content of the component, normally an `<img />` or a `<div />`. It should be only one element.
      */
     children: NonNullable<React.ReactElement>;
     /**