@mui/lab 5.0.0-alpha.134 → 5.0.0-alpha.136

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v5.0.0-alpha.134
+ * @mui/lab v5.0.0-alpha.136
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/convertTimelinePositionToClass.d.ts

@@ -0,0 +1 @@
+export default function convertTimelinePositionToClass(position: string): string;

package/internal/convertTimelinePositionToClass.js

@@ -0,0 +1,4 @@
+import { capitalize } from '@mui/material/utils';
+export default function convertTimelinePositionToClass(position) {
+  return position === 'alternate-reverse' ? 'positionAlternateReverse' : `position${capitalize(position)}`;
+}

package/legacy/Masonry/Masonry.js

@@ -6,7 +6,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import * as ReactDOM from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
-import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { deepmerge, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -224,20 +224,28 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       });
     }
   };
-  var observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
-  React.useEffect(function () {
-    var resizeObserver = observer.current;
+  useEnhancedEffect(function () {
     // IE and old browsers are not supported
-    if (resizeObserver === undefined) {
+    if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
+    var animationFrame;
+    var resizeObserver = new ResizeObserver(function () {
+      // see https://github.com/mui/material-ui/issues/36909
+      animationFrame = window.requestAnimationFrame(handleResize);
+    });
     if (masonryRef.current) {
       masonryRef.current.childNodes.forEach(function (childNode) {
         resizeObserver.observe(childNode);
       });
     }
     return function () {
-      return resizeObserver ? resizeObserver.disconnect() : {};
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [columns, spacing, children]);
   var handleRef = useForkRef(ref, masonryRef);

package/legacy/Timeline/Timeline.js

@@ -6,17 +6,17 @@ import clsx from 'clsx';
 
 // eslint-disable-next-line no-restricted-imports -- importing types
 
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import TimelineContext from './TimelineContext';
 import { getTimelineUtilityClass } from './timelineClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var position = ownerState.position,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', position && "position".concat(capitalize(position))]
+    root: ['root', position && convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineUtilityClass, classes);
 };
@@ -25,7 +25,7 @@ var TimelineRoot = styled('ul', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, ownerState.position && styles["position".concat(capitalize(ownerState.position))]];
+    return [styles.root, ownerState.position && styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })({
   display: 'flex',
@@ -94,7 +94,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes /* remove-proptypes *
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position: PropTypes.oneOf(['alternate', 'left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Timeline/timelineClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineUtilityClass(slot) {
   return generateUtilityClass('MuiTimeline', slot);
 }
-var timelineClasses = generateUtilityClasses('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+var timelineClasses = generateUtilityClasses('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineClasses;

package/legacy/TimelineContent/TimelineContent.js

@@ -3,18 +3,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineContentUtilityClass } from './timelineContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var position = ownerState.position,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', "position".concat(capitalize(position))]
+    root: ['root', convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineContentUtilityClass, classes);
 };
@@ -23,7 +23,7 @@ var TimelineContentRoot = styled(Typography, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(function (_ref) {
   var ownerState = _ref.ownerState;

package/legacy/TimelineContent/timelineContentClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineContentUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineContent', slot);
 }
-var timelineContentClasses = generateUtilityClasses('MuiTimelineContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+var timelineContentClasses = generateUtilityClasses('MuiTimelineContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineContentClasses;

package/legacy/TimelineItem/TimelineItem.js

@@ -4,20 +4,21 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize, isMuiElement } from '@mui/material/utils';
+import { isMuiElement } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { timelineContentClasses } from '../TimelineContent';
 import { timelineOppositeContentClasses } from '../TimelineOppositeContent';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineItemUtilityClass } from './timelineItemClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var position = ownerState.position,
     classes = ownerState.classes,
     hasOppositeContent = ownerState.hasOppositeContent;
   var slots = {
-    root: ['root', "position".concat(capitalize(position)), !hasOppositeContent && 'missingOppositeContent']
+    root: ['root', convertTimelinePositionToClass(position), !hasOppositeContent && 'missingOppositeContent']
   };
   return composeClasses(slots, getTimelineItemUtilityClass, classes);
 };
@@ -26,10 +27,10 @@ var TimelineItemRoot = styled('li', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(function (_ref) {
-  var _nthOfTypeEven;
+  var _nthOfType$conca;
   var ownerState = _ref.ownerState;
   return _extends({
     listStyle: 'none',
@@ -38,15 +39,13 @@ var TimelineItemRoot = styled('li', {
     minHeight: 70
   }, ownerState.position === 'left' && {
     flexDirection: 'row-reverse'
-  }, ownerState.position === 'alternate' && {
-    '&:nth-of-type(even)': (_nthOfTypeEven = {
-      flexDirection: 'row-reverse'
-    }, _defineProperty(_nthOfTypeEven, "& .".concat(timelineContentClasses.root), {
-      textAlign: 'right'
-    }), _defineProperty(_nthOfTypeEven, "& .".concat(timelineOppositeContentClasses.root), {
-      textAlign: 'left'
-    }), _nthOfTypeEven)
-  }, !ownerState.hasOppositeContent && {
+  }, (ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && _defineProperty({}, "&:nth-of-type(".concat(ownerState.position === 'alternate' ? 'even' : 'odd', ")"), (_nthOfType$conca = {
+    flexDirection: 'row-reverse'
+  }, _defineProperty(_nthOfType$conca, "& .".concat(timelineContentClasses.root), {
+    textAlign: 'right'
+  }), _defineProperty(_nthOfType$conca, "& .".concat(timelineOppositeContentClasses.root), {
+    textAlign: 'left'
+  }), _nthOfType$conca)), !ownerState.hasOppositeContent && {
     '&:before': {
       content: '""',
       flex: 1,
@@ -109,7 +108,7 @@ process.env.NODE_ENV !== "production" ? TimelineItem.propTypes /* remove-proptyp
   /**
    * The position where the timeline's item should appear.
    */
-  position: PropTypes.oneOf(['left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/TimelineItem/timelineItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineItemUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineItem', slot);
 }
-var timelineItemClasses = generateUtilityClasses('MuiTimelineItem', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'missingOppositeContent']);
+var timelineItemClasses = generateUtilityClasses('MuiTimelineItem', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse', 'missingOppositeContent']);
 export default timelineItemClasses;

package/legacy/TimelineOppositeContent/TimelineOppositeContent.js

@@ -4,17 +4,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var position = ownerState.position,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', "position".concat(capitalize(position))]
+    root: ['root', convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes);
 };
@@ -23,7 +23,7 @@ var TimelineOppositeContentRoot = styled(Typography, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, styles["position".concat(capitalize(ownerState.position))]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(function (_ref) {
   var ownerState = _ref.ownerState;

package/legacy/TimelineOppositeContent/timelineOppositeContentClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineOppositeContentUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineOppositeContent', slot);
 }
-var timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+var timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineOppositeContentClasses;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v5.0.0-alpha.134
+ * @mui/lab v5.0.0-alpha.136
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internal/convertTimelinePositionToClass.js

@@ -0,0 +1,4 @@
+import { capitalize } from '@mui/material/utils';
+export default function convertTimelinePositionToClass(position) {
+  return position === 'alternate-reverse' ? 'positionAlternateReverse' : "position".concat(capitalize(position));
+}

package/modern/Masonry/Masonry.js

@@ -5,7 +5,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import * as ReactDOM from 'react-dom';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
-import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { deepmerge, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -221,19 +221,29 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       });
     }
   };
-  const observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
-  React.useEffect(() => {
-    const resizeObserver = observer.current;
+  useEnhancedEffect(() => {
     // IE and old browsers are not supported
-    if (resizeObserver === undefined) {
+    if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
+    let animationFrame;
+    const resizeObserver = new ResizeObserver(() => {
+      // see https://github.com/mui/material-ui/issues/36909
+      animationFrame = window.requestAnimationFrame(handleResize);
+    });
     if (masonryRef.current) {
       masonryRef.current.childNodes.forEach(childNode => {
         resizeObserver.observe(childNode);
       });
     }
-    return () => resizeObserver ? resizeObserver.disconnect() : {};
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
   }, [columns, spacing, children]);
   const handleRef = useForkRef(ref, masonryRef);
 

package/modern/Timeline/Timeline.js

@@ -7,11 +7,11 @@ import clsx from 'clsx';
 
 // eslint-disable-next-line no-restricted-imports -- importing types
 
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import TimelineContext from './TimelineContext';
 import { getTimelineUtilityClass } from './timelineClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', position && `position${capitalize(position)}`]
+    root: ['root', position && convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineUtilityClass, classes);
 };
@@ -30,7 +30,7 @@ const TimelineRoot = styled('ul', {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.position && styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, ownerState.position && styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })({
   display: 'flex',
@@ -98,7 +98,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes /* remove-proptypes *
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position: PropTypes.oneOf(['alternate', 'left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Timeline/timelineClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineUtilityClass(slot) {
   return generateUtilityClass('MuiTimeline', slot);
 }
-const timelineClasses = generateUtilityClasses('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+const timelineClasses = generateUtilityClasses('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineClasses;

package/modern/TimelineContent/TimelineContent.js

@@ -4,12 +4,12 @@ const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineContentUtilityClass } from './timelineContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`]
+    root: ['root', convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineContentUtilityClass, classes);
 };
@@ -28,7 +28,7 @@ const TimelineContentRoot = styled(Typography, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(({
   ownerState

package/modern/TimelineContent/timelineContentClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineContentUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineContent', slot);
 }
-const timelineContentClasses = generateUtilityClasses('MuiTimelineContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+const timelineContentClasses = generateUtilityClasses('MuiTimelineContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineContentClasses;

package/modern/TimelineItem/TimelineItem.js

@@ -4,13 +4,14 @@ const _excluded = ["position", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize, isMuiElement } from '@mui/material/utils';
+import { isMuiElement } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { timelineContentClasses } from '../TimelineContent';
 import { timelineOppositeContentClasses } from '../TimelineOppositeContent';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineItemUtilityClass } from './timelineItemClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
     hasOppositeContent
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`, !hasOppositeContent && 'missingOppositeContent']
+    root: ['root', convertTimelinePositionToClass(position), !hasOppositeContent && 'missingOppositeContent']
   };
   return composeClasses(slots, getTimelineItemUtilityClass, classes);
 };
@@ -30,7 +31,7 @@ const TimelineItemRoot = styled('li', {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(({
   ownerState
@@ -41,8 +42,8 @@ const TimelineItemRoot = styled('li', {
   minHeight: 70
 }, ownerState.position === 'left' && {
   flexDirection: 'row-reverse'
-}, ownerState.position === 'alternate' && {
-  '&:nth-of-type(even)': {
+}, (ownerState.position === 'alternate' || ownerState.position === 'alternate-reverse') && {
+  [`&:nth-of-type(${ownerState.position === 'alternate' ? 'even' : 'odd'})`]: {
     flexDirection: 'row-reverse',
     [`& .${timelineContentClasses.root}`]: {
       textAlign: 'right'
@@ -114,7 +115,7 @@ process.env.NODE_ENV !== "production" ? TimelineItem.propTypes /* remove-proptyp
   /**
    * The position where the timeline's item should appear.
    */
-  position: PropTypes.oneOf(['left', 'right']),
+  position: PropTypes.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/TimelineItem/timelineItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineItemUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineItem', slot);
 }
-const timelineItemClasses = generateUtilityClasses('MuiTimelineItem', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'missingOppositeContent']);
+const timelineItemClasses = generateUtilityClasses('MuiTimelineItem', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse', 'missingOppositeContent']);
 export default timelineItemClasses;

package/modern/TimelineOppositeContent/TimelineOppositeContent.js

@@ -5,11 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `position${capitalize(position)}`]
+    root: ['root', convertTimelinePositionToClass(position)]
   };
   return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes);
 };
@@ -28,7 +28,7 @@ const TimelineOppositeContentRoot = styled(Typography, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   }
 })(({
   ownerState

package/modern/TimelineOppositeContent/timelineOppositeContentClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClasses from '@mui/material/generateUtilityClasses';
 export function getTimelineOppositeContentUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineOppositeContent', slot);
 }
-const timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+const timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 export default timelineOppositeContentClasses;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v5.0.0-alpha.134
+ * @mui/lab v5.0.0-alpha.136
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internal/convertTimelinePositionToClass.js

@@ -0,0 +1,4 @@
+import { capitalize } from '@mui/material/utils';
+export default function convertTimelinePositionToClass(position) {
+  return position === 'alternate-reverse' ? 'positionAlternateReverse' : `position${capitalize(position)}`;
+}

package/node/Masonry/Masonry.js

@@ -231,19 +231,29 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       });
     }
   };
-  const observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
-  React.useEffect(() => {
-    const resizeObserver = observer.current;
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     // IE and old browsers are not supported
-    if (resizeObserver === undefined) {
+    if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
+    let animationFrame;
+    const resizeObserver = new ResizeObserver(() => {
+      // see https://github.com/mui/material-ui/issues/36909
+      animationFrame = window.requestAnimationFrame(handleResize);
+    });
     if (masonryRef.current) {
       masonryRef.current.childNodes.forEach(childNode => {
         resizeObserver.observe(childNode);
       });
     }
-    return () => resizeObserver ? resizeObserver.disconnect() : {};
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
   }, [columns, spacing, children]);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, masonryRef);
 

package/node/Timeline/Timeline.js

@@ -10,11 +10,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/material/utils");
 var _base = require("@mui/base");
 var _styles = require("@mui/material/styles");
 var _TimelineContext = _interopRequireDefault(require("./TimelineContext"));
 var _timelineClasses = require("./timelineClasses");
+var _convertTimelinePositionToClass = _interopRequireDefault(require("../internal/convertTimelinePositionToClass"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["position", "className"]; // eslint-disable-next-line no-restricted-imports -- importing types
 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); }
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', position && `position${(0, _utils.capitalize)(position)}`]
+    root: ['root', position && (0, _convertTimelinePositionToClass.default)(position)]
   };
   return (0, _base.unstable_composeClasses)(slots, _timelineClasses.getTimelineUtilityClass, classes);
 };
@@ -36,7 +36,7 @@ const TimelineRoot = (0, _styles.styled)('ul', {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.position && styles[`position${(0, _utils.capitalize)(ownerState.position)}`]];
+    return [styles.root, ownerState.position && styles[(0, _convertTimelinePositionToClass.default)(ownerState.position)]];
   }
 })({
   display: 'flex',
@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes /* remove-proptypes *
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position: _propTypes.default.oneOf(['alternate', 'left', 'right']),
+  position: _propTypes.default.oneOf(['alternate-reverse', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Timeline/timelineClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/material/gene
 function getTimelineUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTimeline', slot);
 }
-const timelineClasses = (0, _generateUtilityClasses.default)('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate']);
+const timelineClasses = (0, _generateUtilityClasses.default)('MuiTimeline', ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateReverse']);
 var _default = timelineClasses;
 exports.default = _default;